cupper-hugo-theme/docs/css/styles.css

908 lines
16 KiB
CSS
Raw Normal View History

2017-07-11 18:23:19 +02:00
/* fonts */
@font-face {
font-family: 'Miriam Libre';
2017-07-31 22:07:38 +02:00
src: url('fonts/miriamlibre-bold.woff2') format('woff2'), url('fonts/miriamlibre-bold.woff') format('woff');
2017-07-11 18:23:19 +02:00
font-weight: bold;
font-style: normal;
}
2017-07-31 22:07:38 +02:00
*,
*::before,
*::after {
font-family: inherit;
2017-08-17 18:21:19 +02:00
background-color: inherit;
2017-07-31 22:07:38 +02:00
color: inherit;
margin: 0;
padding: 0;
box-sizing: border-box;
2017-07-03 13:43:14 +02:00
}
html {
2017-07-31 22:07:38 +02:00
font-size: calc(1em + 0.33vw);
font-family: PT Sans, sans-serif;
line-height: 1.5;
color: #111;
2017-08-17 18:21:19 +02:00
background-color: #fefefe;
2017-07-03 13:43:14 +02:00
}
* + * {
2017-07-31 22:07:38 +02:00
margin-top: 2.25rem;
2017-07-03 13:43:14 +02:00
}
br,
dt,
dd,
th,
td,
option,
[hidden] + *,
li + li,
body,
.main-and-footer {
2017-07-31 22:07:38 +02:00
margin-top: 0;
2017-07-03 13:43:14 +02:00
}
p + p {
2017-07-31 22:07:38 +02:00
margin-top: 0.75rem;
2017-07-03 13:43:14 +02:00
}
a {
2017-07-31 22:07:38 +02:00
text-decoration: none;
border-bottom: 1px solid;
2017-07-03 13:43:14 +02:00
}
2017-07-15 10:28:17 +02:00
abbr {
2017-07-31 22:07:38 +02:00
text-decoration: none;
cursor: help;
border-bottom: 1px dashed;
2017-07-15 10:28:17 +02:00
}
2017-07-03 13:43:14 +02:00
img {
2017-07-31 22:07:38 +02:00
max-width: 100%;
2017-07-03 13:43:14 +02:00
}
p img {
2017-07-31 22:07:38 +02:00
margin: 0.75rem 0;
2017-07-03 13:43:14 +02:00
}
figure p img {
2017-07-31 22:07:38 +02:00
margin: 0;
2017-07-03 13:43:14 +02:00
}
:focus:not([tabindex="-1"]),
[data-expands]:focus svg,
2017-08-17 18:21:19 +02:00
.patterns a:focus .text,
[for="themer"] :focus + [aria-hidden] {
outline: 3px solid #888;
2017-07-31 22:07:38 +02:00
outline-offset: 2px;
2017-07-03 13:43:14 +02:00
}
/* fix for IE :( */
2017-07-31 22:07:38 +02:00
2017-07-30 11:57:22 +02:00
[tabindex="-1"]:focus,
2017-07-03 13:43:14 +02:00
div:not([tabindex]):focus {
2017-07-31 22:07:38 +02:00
outline: none;
2017-07-03 13:43:14 +02:00
}
2017-08-19 19:18:18 +02:00
[hidden] {
display: none;
}
2017-07-03 13:43:14 +02:00
/* skip link */
[href="#main"] {
2017-07-31 22:07:38 +02:00
display: block;
width: 100%;
padding: 0.75rem;
color: #fff;
background: #000;
position: absolute;
top: -3rem;
text-align: center;
z-index: 1;
2017-07-03 13:43:14 +02:00
}
[href="#main"]:focus {
2017-07-31 22:07:38 +02:00
top: 0;
outline: none;
2017-07-03 13:43:14 +02:00
}
/* text styles */
2017-07-31 22:07:38 +02:00
h1,
h2,
h3,
h4 {
font-family: Miriam Libre, serif;
line-height: 1.125;
2017-07-03 13:43:14 +02:00
}
h1 {
2017-07-31 22:07:38 +02:00
font-size: 2rem;
2017-07-03 13:43:14 +02:00
}
h2 {
2017-07-31 22:07:38 +02:00
font-size: 1.66rem;
2017-07-03 13:43:14 +02:00
}
h3 {
2017-07-31 22:07:38 +02:00
font-size: 1.25rem;
2017-07-03 13:43:14 +02:00
}
2017-07-31 22:07:38 +02:00
h4,
h5 {
font-size: 1rem;
font-family: PT Sans, sans-serif;
2017-07-03 13:43:14 +02:00
}
2017-07-14 18:26:35 +02:00
h5 {
2017-07-31 22:07:38 +02:00
font-size: 0.85rem;
text-transform: uppercase;
2017-07-14 18:26:35 +02:00
}
2017-07-03 13:43:14 +02:00
kbd {
2017-07-31 22:07:38 +02:00
line-height: 1;
font-size: 0.66rem;
padding: 0.1rem 0.33rem;
border-radius: 0.25rem;
border: 2px solid;
box-shadow: 0.125rem 0.125rem 0 #111;
vertical-align: 0.33em;
}
pre,
.file-tree {
overflow-x: auto;
padding: 1.5rem;
border: 1px solid;
2017-07-03 13:43:14 +02:00
}
code {
2017-07-31 22:07:38 +02:00
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 0.85em;
2017-07-03 13:43:14 +02:00
}
.cmd {
2017-07-31 22:07:38 +02:00
padding: 0.75rem;
background: #111;
2017-07-03 13:43:14 +02:00
}
.cmd code {
2017-07-31 22:07:38 +02:00
color: #fff;
white-space: nowrap;
2017-07-03 13:43:14 +02:00
}
.cmd code::before {
2017-07-31 22:07:38 +02:00
content: '$';
font-weight: bold;
padding-right: 0.25em;
2017-07-03 13:43:14 +02:00
}
/* Lists */
2017-07-31 22:07:38 +02:00
main ul,
main ol {
margin-left: 2.25rem;
2017-07-03 13:43:14 +02:00
}
main li + li {
2017-07-31 22:07:38 +02:00
margin-top: 0.5rem;
2017-07-03 13:43:14 +02:00
}
main ul ul {
2017-07-31 22:07:38 +02:00
margin-top: 0;
2017-07-03 13:43:14 +02:00
}
/* Buttons */
button {
2017-07-31 22:07:38 +02:00
font-size: 1.25rem;
2017-08-17 18:21:19 +02:00
border-radius: 0.125em;
2017-07-31 22:07:38 +02:00
font-family: inherit;
background: #111;
color: #fff;
padding: 0.75rem;
border: 0;
2017-07-03 13:43:14 +02:00
}
2017-08-05 15:55:32 +02:00
[data-launch] {
font-size: 0.75rem;
2017-08-06 10:19:38 +02:00
margin-top: 0.75rem;
2017-08-05 15:55:32 +02:00
padding: 0.5rem;
2017-08-22 16:24:01 +02:00
border-radius: 0;
2017-08-05 15:55:32 +02:00
}
2017-08-17 18:21:19 +02:00
/* Forms */
label {
display: inline-block;
font-weight: bold;
}
[for="themer"] {
background: #111;
border-radius: 0.125em;
color: #fff;
padding: 0.25em 0.75em;
margin: 0.5rem;
}
[for="themer"] [aria-hidden]::before {
content: 'off';
}
[for="themer"] :checked + [aria-hidden]::before {
content: 'on';
}
2017-07-03 13:43:14 +02:00
/* Tables */
table {
2017-07-31 22:07:38 +02:00
text-align: left;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
2017-07-03 13:43:14 +02:00
}
2017-07-31 22:07:38 +02:00
th,
td {
border: 2px solid;
padding: 0.5rem;
line-height: 1.25;
margin: 0;
2017-07-03 13:43:14 +02:00
}
2017-07-08 13:21:43 +02:00
th {
2017-07-31 22:07:38 +02:00
font-weight: bold;
2017-07-03 13:43:14 +02:00
}
th:empty {
2017-07-31 22:07:38 +02:00
border: 0;
2017-07-03 13:43:14 +02:00
}
2017-07-08 13:21:43 +02:00
/* Tested using... table */
.tested {
2017-07-31 22:07:38 +02:00
text-align: center;
2017-08-16 12:36:48 +02:00
border: 1px solid #111;
2017-07-08 13:21:43 +02:00
}
2017-08-15 18:47:49 +02:00
.tested tr {
2017-08-16 12:36:48 +02:00
display: flex;
flex-flow: row wrap;
2017-08-15 18:47:49 +02:00
}
.tested td, .tested th {
vertical-align: middle;
2017-07-31 22:07:38 +02:00
overflow: hidden;
2017-08-15 18:47:49 +02:00
flex: 1 0 auto;
2017-08-16 12:36:48 +02:00
border: 1px solid #111;
2017-07-08 13:21:43 +02:00
}
.tested th {
2017-08-15 18:47:49 +02:00
width: 100%;
2017-07-31 22:07:38 +02:00
background-color: #111;
color: #fff;
2017-08-15 18:47:49 +02:00
outline-color: #111;
2017-07-08 13:21:43 +02:00
}
.tested img {
2017-07-31 22:07:38 +02:00
max-width: 3rem;
2017-07-08 13:21:43 +02:00
}
.tested span {
2017-07-31 22:07:38 +02:00
display: block;
margin: 0;
2017-07-08 13:21:43 +02:00
}
.tested .additional {
2017-07-31 22:07:38 +02:00
font-size: 0.85rem;
2017-07-08 13:21:43 +02:00
}
caption {
2017-07-31 22:07:38 +02:00
font-size: 1.125rem;
padding-bottom: 0.25rem;
font-style: italic;
2017-07-08 13:21:43 +02:00
}
2017-07-03 13:43:14 +02:00
/* Page structure */
.wrapper {
2017-07-31 22:07:38 +02:00
position: relative;
margin-top: 0;
overflow-x: hidden;
2017-07-03 13:43:14 +02:00
}
.intro-and-nav {
2017-08-12 10:14:05 +02:00
font-size: 0.8rem;
2017-07-31 22:07:38 +02:00
width: 15rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
border-right: 2px solid;
2017-07-03 13:43:14 +02:00
}
.intro-and-nav > div {
2017-07-31 22:07:38 +02:00
padding: 2.25rem;
display: flex;
flex-direction: column;
height: 100%;
2017-07-03 13:43:14 +02:00
}
2017-08-10 17:59:50 +02:00
.intro {
flex: 1 0 auto;
}
.patterns {
flex: 1 1 auto;
}
2017-07-03 13:43:14 +02:00
.logo {
2017-07-31 22:07:38 +02:00
border: 0;
2017-07-03 13:43:14 +02:00
}
2017-07-29 23:16:36 +02:00
.logo img {
2017-07-31 22:07:38 +02:00
width: 100%;
max-width: 12rem;
2017-07-29 23:16:36 +02:00
}
2017-07-03 13:43:14 +02:00
.library-desc {
2017-07-31 22:07:38 +02:00
margin-top: 0.5rem;
margin-left: auto;
margin-right: auto;
2017-08-12 10:14:05 +02:00
max-width: 25rem;
2017-07-03 13:43:14 +02:00
}
.main-and-footer {
2017-07-31 22:07:38 +02:00
margin-left: 15rem;
2017-07-03 13:43:14 +02:00
}
.main-and-footer > div {
2017-07-31 22:07:38 +02:00
max-width: 40rem;
margin: 0 auto;
padding: 2.25rem;
2017-07-03 13:43:14 +02:00
}
[role="contentinfo"] {
2017-07-31 22:07:38 +02:00
font-size: 0.85rem;
margin-top: 4rem;
text-align: center;
2017-07-03 13:43:14 +02:00
}
/* Patterns navigation */
.patterns {
2017-07-31 22:07:38 +02:00
overflow: auto;
margin-top: 1.5rem;
2017-07-03 13:43:14 +02:00
}
.patterns * {
2017-07-31 22:07:38 +02:00
margin-top: 0;
2017-07-03 13:43:14 +02:00
}
.patterns h3 {
2017-07-31 22:07:38 +02:00
font-size: 1rem;
2017-07-03 13:43:14 +02:00
}
2017-07-17 17:46:15 +02:00
.patterns h3 + ul {
2017-07-31 22:07:38 +02:00
margin-top: 0.75rem;
2017-07-17 17:46:15 +02:00
}
2017-07-03 13:43:14 +02:00
.patterns li {
2017-07-31 22:07:38 +02:00
line-height: 1.125;
list-style: none;
2017-07-03 13:43:14 +02:00
}
2017-07-17 17:46:15 +02:00
.patterns li + li {
2017-07-31 22:07:38 +02:00
margin-top: 0.75rem;
2017-07-17 17:46:15 +02:00
}
2017-07-03 13:43:14 +02:00
.patterns ul ul {
2017-07-31 22:07:38 +02:00
margin-left: 0.75rem;
2017-07-03 13:43:14 +02:00
}
.pattern a {
2017-07-31 22:07:38 +02:00
border: 0;
display: flex;
flex-wrap: nowrap;
align-items: baseline;
font-weight: bold;
2017-07-03 13:43:14 +02:00
}
.pattern a:focus {
2017-07-31 22:07:38 +02:00
outline: none;
2017-07-03 13:43:14 +02:00
}
.pattern span {
2017-07-31 22:07:38 +02:00
margin-left: 0.125rem;
2017-07-03 13:43:14 +02:00
}
2017-07-28 10:08:32 +02:00
.pattern [aria-current] {
2017-07-31 22:07:38 +02:00
background-color: #111;
background-image: url(images/arrow_effect.svg);
2017-08-12 10:14:05 +02:00
background-position: 98% center;
2017-07-31 22:07:38 +02:00
background-size: 125%;
background-repeat: no-repeat;
color: #fff;
padding: 0.5em 1em 0.5em;
2017-07-03 13:43:14 +02:00
}
/* menu button */
#menu-button {
2017-07-31 22:07:38 +02:00
display: none;
width: 100%;
text-align: center;
2017-07-03 13:43:14 +02:00
}
#menu-button:focus {
2017-07-31 22:07:38 +02:00
outline: none;
box-shadow: inset 0 0 0 0.25rem #ccc;
2017-07-03 13:43:14 +02:00
}
2017-07-14 18:26:35 +02:00
/* Tables of contents */
.toc {
2017-07-31 22:07:38 +02:00
font-size: 0.85rem;
border: 1px solid;
padding: 1.5rem;
2017-07-14 18:26:35 +02:00
}
.toc h2 {
2017-07-31 22:07:38 +02:00
font-size: 1rem;
2017-07-14 18:26:35 +02:00
}
.toc ol {
2017-07-31 22:07:38 +02:00
margin-left: 0.75rem;
margin-top: 0.5rem;
2017-07-14 18:26:35 +02:00
}
2017-07-03 13:43:14 +02:00
/* Pattern lists */
.patterns-list {
2017-07-31 22:07:38 +02:00
list-style: none;
margin-left: 0;
2017-07-03 13:43:14 +02:00
}
.patterns-list h2 {
2017-07-31 22:07:38 +02:00
font-size: 1.25rem;
2017-07-03 13:43:14 +02:00
}
.patterns-list li + li {
2017-07-31 22:07:38 +02:00
margin-top: 1rem;
padding-top: 1rem;
border-top: 2px solid;
2017-07-03 13:43:14 +02:00
}
.patterns-list a {
2017-07-31 22:07:38 +02:00
border: 0;
2017-07-03 13:43:14 +02:00
}
/* Tags */
.tags {
2017-07-31 22:07:38 +02:00
margin-top: 0;
font-size: 0.85rem;
2017-07-03 13:43:14 +02:00
}
.tags * {
2017-07-31 22:07:38 +02:00
display: inline;
margin: 0;
2017-07-03 13:43:14 +02:00
}
.tags strong {
2017-07-31 22:07:38 +02:00
margin-right: 0.25rem;
2017-07-03 13:43:14 +02:00
}
.tags li {
2017-07-31 22:07:38 +02:00
white-space: nowrap;
margin: 0 0.25rem 0 0;
2017-07-03 13:43:14 +02:00
}
/* Notes and warnings */
.note {
2017-07-31 22:07:38 +02:00
border-left: 0.5rem solid;
font-size: 0.85rem;
2017-07-03 13:43:14 +02:00
}
2017-07-23 13:16:54 +02:00
.note svg {
2017-07-31 22:07:38 +02:00
height: 2.25rem;
2017-08-10 17:59:50 +02:00
width: 2.25rem;
2017-07-23 13:16:54 +02:00
}
2017-07-03 13:43:14 +02:00
.note > div {
2017-07-31 22:07:38 +02:00
margin-left: 0.75rem;
2017-07-03 13:43:14 +02:00
}
.note > div > img:first-child {
2017-07-31 22:07:38 +02:00
height: 1.5rem;
2017-07-03 13:43:14 +02:00
}
2017-07-31 22:07:38 +02:00
.note > div >:first-child + * {
margin-top: 0;
2017-07-03 13:43:14 +02:00
}
.note.warning {
2017-07-31 22:07:38 +02:00
border-left: 0;
background-image: url(images/stripe.svg);
background-size: 0.5rem auto;
background-repeat: repeat-y;
2017-07-03 13:43:14 +02:00
}
.note.warning > div {
2017-07-31 22:07:38 +02:00
margin-left: 1.25rem;
2017-07-03 13:43:14 +02:00
}
/* Tick lists */
.ticks li {
2017-07-31 22:07:38 +02:00
list-style: none;
position: relative;
2017-07-03 13:43:14 +02:00
}
.ticks li::before {
2017-07-31 22:07:38 +02:00
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 0.25rem;
background-image: url(images/icon-tick.svg);
background-size: 100% auto;
position: absolute;
left: -1.25rem;
top: 0.25rem;
2017-07-03 13:43:14 +02:00
}
/* Figures */
figure {
2017-07-31 22:07:38 +02:00
text-align: center;
2017-07-03 13:43:14 +02:00
}
figcaption {
2017-07-31 22:07:38 +02:00
font-size: 0.85rem;
font-style: italic;
margin-top: 0.5rem;
2017-07-03 13:43:14 +02:00
}
main {
2017-07-31 22:07:38 +02:00
display: block;
counter-reset: fig;
min-height: 100vh;
2017-07-03 13:43:14 +02:00
}
figcaption::before {
2017-07-31 22:07:38 +02:00
counter-increment: fig;
content: 'Figure ' counter(fig) ':\0020';
font-weight: bold;
2017-07-03 13:43:14 +02:00
}
/* Code blocks */
pre[class*=language-] {
2017-07-31 22:07:38 +02:00
background: none;
margin-top: 2.25rem;
margin-bottom: 0;
overflow-y: hidden;
overflow-x: auto;
2017-07-03 13:43:14 +02:00
}
2017-08-03 13:56:10 +02:00
code[class*="language-"], pre[class*="language-"] {
text-shadow: none;
2017-08-17 18:21:19 +02:00
filter: grayscale(100%);
2017-08-03 13:56:10 +02:00
}
2017-07-03 13:43:14 +02:00
pre[class*=language-][data-line] {
2017-07-31 22:07:38 +02:00
padding: 1em 0 0 2.25rem;
2017-07-03 13:43:14 +02:00
}
pre[class*=language-] code * {
2017-07-31 22:07:38 +02:00
margin-top: 0 !important;
2017-07-03 13:43:14 +02:00
}
[data-codeblock-shortcode] {
2017-08-14 14:19:47 +02:00
display: inline-block;
2017-07-31 22:07:38 +02:00
margin-top: -1rem;
2017-07-03 13:43:14 +02:00
}
.line-numbers code {
2017-07-31 22:07:38 +02:00
padding-left: 3rem;
margin-top: -1rem;
2017-08-14 14:19:47 +02:00
overflow-x: visible;
2017-07-31 22:07:38 +02:00
overflow-y: hidden;
2017-07-03 13:43:14 +02:00
}
.line-numbers {
2017-07-31 22:07:38 +02:00
padding: 1.5rem !important;
2017-08-14 14:19:47 +02:00
overflow-x: auto;
2017-07-03 13:43:14 +02:00
}
.line-numbers .line-numbers-rows {
2017-07-31 22:07:38 +02:00
margin-left: 2.25rem;
left: -3.5em;
top: 1.25rem;
color: #111;
border-color: #111;
2017-07-03 13:43:14 +02:00
}
.line-numbers-rows > span:before {
2017-07-31 22:07:38 +02:00
color: inherit;
2017-07-03 13:43:14 +02:00
}
2017-07-16 17:49:20 +02:00
/* file tree lists */
2017-07-30 17:47:07 +02:00
.file-tree {
2017-07-31 22:07:38 +02:00
overflow-x: auto;
2017-07-30 17:47:07 +02:00
}
2017-07-16 17:49:20 +02:00
.file-tree ul {
2017-07-31 22:07:38 +02:00
font-family: Courier, monospace;
margin: 0;
padding: 0;
padding-left: 3rem;
list-style: none;
line-height: 1.25;
position: relative;
2017-07-16 17:49:20 +02:00
}
2017-07-30 17:47:07 +02:00
.file-tree > ul {
2017-07-31 22:07:38 +02:00
padding-left: 0;
overflow-x: auto;
2017-08-03 09:03:23 +02:00
overflow-y: hidden;
2017-07-16 17:49:20 +02:00
}
.file-tree li {
2017-07-31 22:07:38 +02:00
background: #fff;
position: relative;
white-space: nowrap;
2017-07-16 17:49:20 +02:00
}
.file-tree li + li {
2017-07-31 22:07:38 +02:00
margin-top: 0;
2017-07-16 17:49:20 +02:00
}
2017-07-30 18:07:19 +02:00
.file-tree li:not(:last-child) > ul::before {
2017-07-31 22:07:38 +02:00
content: '\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020\2502\0020';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1em;
white-space: normal;
2017-07-30 18:07:19 +02:00
}
2017-07-16 17:49:20 +02:00
.file-tree li::before {
2017-07-31 22:07:38 +02:00
content: '\251C\2500\2500\0020';
2017-07-16 17:49:20 +02:00
}
.file-tree li:last-child::before {
2017-07-31 22:07:38 +02:00
content: '\2514\2500\2500\0020';
2017-07-16 17:49:20 +02:00
}
2017-07-03 13:43:14 +02:00
/* Expandable sections */
.expandable-section {
2017-07-31 22:07:38 +02:00
border-top: 1px solid;
border-bottom: 1px solid;
padding: 0.75rem 0;
2017-07-03 13:43:14 +02:00
}
2017-07-29 23:16:36 +02:00
[id^="js-expandable-"] {
2017-07-31 22:07:38 +02:00
margin: 0;
padding: 1.5rem 0 0.75rem;
2017-07-03 13:43:14 +02:00
}
2017-07-27 18:21:19 +02:00
@media screen {
2017-07-31 22:07:38 +02:00
.expandable-section + .expandable-section {
margin-top: 0;
border-top: 0;
}
2017-07-03 13:43:14 +02:00
}
[data-expands] {
2017-07-31 22:07:38 +02:00
text-align: left;
color: #111;
border: 0;
background: none;
width: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
2017-07-03 13:43:14 +02:00
}
[data-expands] svg {
2017-07-31 22:07:38 +02:00
margin-top: 0;
width: 1em;
height: 1em;
2017-07-03 13:43:14 +02:00
}
[data-expands][aria-expanded="true"] svg .up-strut {
2017-07-31 22:07:38 +02:00
display: none;
2017-07-03 13:43:14 +02:00
}
[data-expands]:focus {
2017-07-31 22:07:38 +02:00
outline: none;
2017-07-03 13:43:14 +02:00
}
p:empty {
2017-07-31 22:07:38 +02:00
display: none;
2017-07-03 13:43:14 +02:00
}
*:not(p) + p:empty + p {
2017-07-31 22:07:38 +02:00
margin-top: 2.25rem;
2017-07-03 13:43:14 +02:00
}
/* WCAG and principles */
2017-08-14 18:22:40 +02:00
.wcag li {
2017-07-31 22:07:38 +02:00
font-size: 0.85em;
2017-07-03 13:43:14 +02:00
}
.principles p {
2017-07-31 22:07:38 +02:00
font-size: 0.85rem;
margin-top: 0.75rem;
2017-07-03 13:43:14 +02:00
}
.principles.with-desc > li + li,
.wcag.with-desc > li + li {
2017-07-31 22:07:38 +02:00
border-top: 1px solid;
margin-top: 0.75rem;
padding-top: 0.75rem;
2017-07-03 13:43:14 +02:00
}
/* Site errors */
.site-error {
2017-07-31 22:07:38 +02:00
padding: 1.5rem;
background: #efefef;
2017-07-03 13:43:14 +02:00
}
.site-error strong {
2017-07-31 22:07:38 +02:00
color: #C83737;
2017-07-03 13:43:14 +02:00
}
/* SVG icons */
2017-07-31 22:07:38 +02:00
a svg,
button svg,
2017-08-15 18:47:49 +02:00
h1 svg,
2017-08-24 14:31:48 +02:00
th svg,
li > svg {
2017-07-31 22:07:38 +02:00
height: 0.75em;
2017-08-24 14:31:48 +02:00
width: 0.75em;
2017-07-31 22:07:38 +02:00
margin-right: 0.25em;
2017-07-03 13:43:14 +02:00
}
2017-07-28 15:42:01 +02:00
h1 svg {
2017-08-24 14:31:48 +02:00
margin-right: 0;
width: 0.85em;
height: 0.85em;
}
.wcag-icon {
width: 1.25em;
}
.bookmark-icon {
vertical-align: middle;
}
.link-icon {
width: 0.75em;
height: 0.75em;
}
.tags svg, .link-icon {
vertical-align: middle;
}
.balloon-icon {
width: 0.75em;
margin-right: 0;
2017-07-28 15:42:01 +02:00
}
2017-07-30 11:57:22 +02:00
.print {
2017-07-31 22:07:38 +02:00
white-space: nowrap;
2017-08-12 10:14:05 +02:00
font-style: normal;
2017-07-30 11:57:22 +02:00
}
2017-07-28 15:42:01 +02:00
/* Color palettes */
2017-07-03 13:43:14 +02:00
.colors {
2017-07-31 22:07:38 +02:00
display: flex;
height: 5rem;
margin: -0.25rem;
list-style: none;
flex-wrap: nowrap;
2017-07-03 13:43:14 +02:00
}
.colors li {
2017-07-31 22:07:38 +02:00
margin: 0.25rem;
flex: 1 0 auto;
position: relative;
2017-07-03 13:43:14 +02:00
}
.colors span {
2017-07-31 22:07:38 +02:00
line-height: 1;
background-color: #111;
color: #fff;
font-size: 0.75rem;
padding: 0.25rem;
position: absolute;
bottom: 0.25rem;
right: 0.25rem;
2017-07-03 13:43:14 +02:00
}
/* cross references */
.pattern-link {
2017-07-31 22:07:38 +02:00
font-weight: bold;
2017-07-03 13:43:14 +02:00
}
/* inline demos */
2017-08-06 12:02:44 +02:00
.demo-inner {
2017-08-06 10:19:38 +02:00
border-top: 1px solid;
border-bottom: 1px solid;
padding: 1.5rem 0 0;
text-align: right;
}
2017-07-30 11:57:22 +02:00
[id^="js-demo-"] {
2017-07-31 22:07:38 +02:00
all: initial;
display: block;
2017-07-03 13:43:14 +02:00
}
2017-07-27 13:00:25 +02:00
/* Section links */
.h2-container {
2017-07-31 22:07:38 +02:00
position: relative;
font-size: 1.66rem;
2017-07-27 13:00:25 +02:00
}
.h2-container a {
2017-07-31 22:07:38 +02:00
position: absolute;
margin-top: 0;
top: 0;
line-height: 1;
left: -1em;
border: 0;
2017-07-27 13:00:25 +02:00
}
2017-07-29 11:18:45 +02:00
/* Single page layout */
2017-07-29 23:16:36 +02:00
.wrapper.print-version .main-and-footer {
2017-07-31 22:07:38 +02:00
margin-left: 0;
2017-07-29 11:18:45 +02:00
}
2017-07-29 23:16:36 +02:00
.wrapper.print-version .intro-and-nav {
2017-07-31 22:07:38 +02:00
position: static;
border: 0;
width: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
2017-07-29 11:18:45 +02:00
}
2017-07-29 23:16:36 +02:00
.wrapper.print-version main {
2017-07-31 22:07:38 +02:00
min-height: 0;
2017-07-29 11:18:45 +02:00
}
2017-07-29 23:16:36 +02:00
.wrapper.print-version .library-desc {
2017-07-31 22:07:38 +02:00
font-size: 1rem;
2017-07-29 11:18:45 +02:00
}
2017-07-29 23:16:36 +02:00
.wrapper.print-version .intro-and-nav > div {
2017-07-31 22:07:38 +02:00
height: auto;
2017-07-29 11:18:45 +02:00
}
2017-07-29 23:16:36 +02:00
.wrapper.print-version #patterns-list {
2017-07-31 22:07:38 +02:00
margin-left: 0;
margin-top: 1.5rem;
display: block;
2017-07-29 11:18:45 +02:00
}
2017-07-29 23:16:36 +02:00
.wrapper.print-version .toc {
2017-07-31 22:07:38 +02:00
font-size: 1rem;
2017-07-29 11:18:45 +02:00
}
2017-07-29 23:16:36 +02:00
.wrapper.print-version .toc h2 {
2017-07-31 22:07:38 +02:00
font-size: 1.66rem;
2017-07-29 11:18:45 +02:00
}
2017-07-29 23:16:36 +02:00
.wrapper.print-version #patterns-list h3 {
2017-07-31 22:07:38 +02:00
font-size: 1.25rem;
2017-07-29 11:18:45 +02:00
}
2017-08-02 22:12:37 +02:00
.wrapper.print-version .patterns {
margin-top: 0;
}
2017-07-30 11:10:10 +02:00
.pattern-section:not(:last-child) {
2017-07-31 22:07:38 +02:00
padding-bottom: 2.25rem;
border-bottom: 2px solid;
2017-07-29 23:16:36 +02:00
}
.pattern-section h1 {
2017-07-31 22:07:38 +02:00
padding: 0 !important;
2017-07-29 23:16:36 +02:00
}
2017-08-17 18:21:19 +02:00
/* Utilities */
.vh {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
2017-07-29 11:18:45 +02:00
@media screen and (max-width: 45em) {
2017-07-31 22:07:38 +02:00
[role="banner"] {
position: static;
width: auto;
height: auto;
}
.intro {
text-align: center;
}
.intro-and-nav > div {
padding: 1.5rem;
}
.main-and-footer {
margin: 0;
}
.patterns h3 {
font-size: 1.125rem;
border-top: 4px solid;
border-bottom: 4px solid;
padding: 0.75rem 0;
}
.patterns li:not(.pattern) {
margin-top: 0;
}
.patterns ul ul {
margin: 0;
}
.patterns li {
margin-top: 0;
}
.pattern {
font-size: 1rem;
}
.pattern a {
padding: 0.75rem 0;
}
.pattern [aria-current] {
background-image: none;
}
.pattern + .pattern {
border-top: 1px solid;
margin-top: 0;
}
#menu-button {
display: block;
}
#patterns-list {
display: none;
}
2017-08-02 22:37:50 +02:00
.toc-link {
display: none;
}
2017-07-31 22:07:38 +02:00
[aria-expanded="true"] + #patterns-list {
display: block;
}
2017-08-02 23:45:16 +02:00
code {
word-break: break-all;
}
2017-07-03 13:43:14 +02:00
}
2017-07-26 22:27:41 +02:00
@media print {
2017-07-31 22:07:38 +02:00
.wrapper:not(.print-version) .intro-and-nav,
.wrapper:not(.print-version) [role="contentinfo"] {
display: none;
}
.main-and-footer {
margin-left: 0;
}
a {
border: 0;
}
main a::after {
content: " (" attr(href) ")";
word-break: break-word;
}
main nav a::after {
content: '';
}
2017-08-03 14:22:01 +02:00
.cmd code {
2017-07-31 22:07:38 +02:00
background: #fff;
color: #111;
}
pre code {
white-space: pre-wrap !important;
}
.line-numbers .line-numbers-rows {
display: none;
}
.line-numbers code {
padding-left: 0;
}
.expandable-section {
border: 0;
padding: 0;
}
.expandable-section + p {
margin-top: 0.75rem;
}
[id^="js-expandable-"] {
display: block;
}
[data-expands] svg {
display: none;
}
main *:not(.with-desc) {
page-break-inside: avoid;
}
.note.warning {
border-left: 0.5rem solid;
background: none;
}
2017-07-26 22:27:41 +02:00
}
2017-08-05 12:26:06 +02:00
@media (-ms-high-contrast: active) {
img[src*=".svg"] {
background: #fff;
2017-08-08 19:43:06 +02:00
padding: 0.5rem;
2017-08-05 12:26:06 +02:00
}
2017-08-08 19:51:05 +02:00
.ticks li::before {
content: '✓';
background: none;
width: auto;
top: 0;
}
2017-08-05 12:26:06 +02:00
}