|
@@ -1,4 +1,4 @@
|
|
|
-/* fonts */
|
|
|
+/* Fonts */
|
|
|
@font-face {
|
|
|
font-family: 'Miriam Libre';
|
|
|
src: url('fonts/miriamlibre-bold.woff2') format('woff2'), url('fonts/miriamlibre-bold.woff') format('woff');
|
|
@@ -77,8 +77,8 @@ figure p img {
|
|
|
a {
|
|
|
outline-offset: 2px;
|
|
|
}
|
|
|
-/* fix for IE :( */
|
|
|
|
|
|
+/* Fix for IE :( */
|
|
|
[tabindex="-1"]:focus,
|
|
|
div:not([tabindex]):focus {
|
|
|
outline: none;
|
|
@@ -87,8 +87,7 @@ div:not([tabindex]):focus {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
-/* skip link */
|
|
|
-
|
|
|
+/* Skip link */
|
|
|
[href="#main"] {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
@@ -104,8 +103,8 @@ div:not([tabindex]):focus {
|
|
|
top: 0;
|
|
|
outline: none;
|
|
|
}
|
|
|
-/* text styles */
|
|
|
|
|
|
+/* Text styles */
|
|
|
h1,
|
|
|
h2,
|
|
|
h3,
|
|
@@ -163,8 +162,8 @@ code {
|
|
|
font-weight: bold;
|
|
|
padding-right: 0.25em;
|
|
|
}
|
|
|
-/* Lists */
|
|
|
|
|
|
+/* Lists */
|
|
|
main ul,
|
|
|
main ol {
|
|
|
margin-left: 2.25rem;
|
|
@@ -193,14 +192,14 @@ dd ul {
|
|
|
dd li + li {
|
|
|
margin: 0;
|
|
|
}
|
|
|
-/* Blockquotes */
|
|
|
|
|
|
+/* Blockquotes */
|
|
|
blockquote {
|
|
|
font-size: 0.85rem;
|
|
|
font-style: italic;
|
|
|
}
|
|
|
-/* Buttons */
|
|
|
|
|
|
+/* Buttons */
|
|
|
button {
|
|
|
font-size: 1.25rem;
|
|
|
border-radius: 0.33em;
|
|
@@ -229,7 +228,6 @@ label {
|
|
|
display: inline-block;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-
|
|
|
[for="themer"] {
|
|
|
background: #111;
|
|
|
border-radius: 0.33em;
|
|
@@ -237,16 +235,14 @@ label {
|
|
|
padding: 0.25em 0.75em;
|
|
|
margin: 0.5rem;
|
|
|
}
|
|
|
-
|
|
|
[for="themer"] [aria-hidden]::before {
|
|
|
content: 'off';
|
|
|
}
|
|
|
-
|
|
|
[for="themer"] :checked + [aria-hidden]::before {
|
|
|
content: 'on';
|
|
|
}
|
|
|
-/* Tables */
|
|
|
|
|
|
+/* Tables */
|
|
|
table {
|
|
|
text-align: left;
|
|
|
table-layout: fixed;
|
|
@@ -266,8 +262,8 @@ th {
|
|
|
th:empty {
|
|
|
border: 0;
|
|
|
}
|
|
|
-/* Tested using... table */
|
|
|
|
|
|
+/* Tested using... table */
|
|
|
.tested {
|
|
|
text-align: center;
|
|
|
border: 1px solid #111;
|
|
@@ -303,8 +299,8 @@ caption {
|
|
|
padding-bottom: 0.25rem;
|
|
|
font-style: italic;
|
|
|
}
|
|
|
-/* Page structure */
|
|
|
|
|
|
+/* Page structure */
|
|
|
.wrapper {
|
|
|
position: relative;
|
|
|
margin-top: 0;
|
|
@@ -357,8 +353,8 @@ caption {
|
|
|
margin-top: 4rem;
|
|
|
text-align: center;
|
|
|
}
|
|
|
-/* Patterns navigation */
|
|
|
|
|
|
+/* Patterns navigation */
|
|
|
.patterns {
|
|
|
overflow: auto;
|
|
|
margin-top: 1.5rem;
|
|
@@ -397,7 +393,7 @@ caption {
|
|
|
margin-left: 0.125rem;
|
|
|
}
|
|
|
|
|
|
-/* after */
|
|
|
+/* After */
|
|
|
.pattern [aria-current] {
|
|
|
background-color: #111;
|
|
|
clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
|
|
@@ -405,8 +401,7 @@ caption {
|
|
|
padding: 0.5em 1em 0.5em;
|
|
|
}
|
|
|
|
|
|
-/* menu button */
|
|
|
-
|
|
|
+/* Menu button */
|
|
|
#menu-button {
|
|
|
display: none;
|
|
|
width: 100%;
|
|
@@ -416,8 +411,8 @@ caption {
|
|
|
outline: none;
|
|
|
box-shadow: inset 0 0 0 0.25rem #999;
|
|
|
}
|
|
|
-/* Tables of contents */
|
|
|
|
|
|
+/* Tables of contents */
|
|
|
.toc {
|
|
|
font-size: 0.85rem;
|
|
|
border: 1px solid;
|
|
@@ -430,8 +425,8 @@ caption {
|
|
|
margin-left: 0.75rem;
|
|
|
margin-top: 0.5rem;
|
|
|
}
|
|
|
-/* Pattern lists */
|
|
|
|
|
|
+/* Pattern lists */
|
|
|
.patterns-list {
|
|
|
list-style: none;
|
|
|
margin-left: 0;
|
|
@@ -448,8 +443,8 @@ caption {
|
|
|
.patterns-list a {
|
|
|
border: 0;
|
|
|
}
|
|
|
-/* Tags */
|
|
|
|
|
|
+/* Tags */
|
|
|
.tags {
|
|
|
margin-top: 0;
|
|
|
font-size: 0.85rem;
|
|
@@ -467,13 +462,12 @@ caption {
|
|
|
}
|
|
|
|
|
|
/* Date */
|
|
|
-
|
|
|
.date {
|
|
|
margin-top: 0;
|
|
|
font-size: 0.85rem;
|
|
|
}
|
|
|
-/* Notes and warnings */
|
|
|
|
|
|
+/* Notes and warnings */
|
|
|
.note {
|
|
|
border-left: 0.5rem solid;
|
|
|
font-size: 0.85rem;
|
|
@@ -500,8 +494,8 @@ caption {
|
|
|
.note.warning > div {
|
|
|
margin-left: 1.25rem;
|
|
|
}
|
|
|
-/* Tick lists */
|
|
|
|
|
|
+/* Tick lists */
|
|
|
.ticks li {
|
|
|
list-style: none;
|
|
|
position: relative;
|
|
@@ -518,8 +512,8 @@ caption {
|
|
|
left: -1.25rem;
|
|
|
top: 0.25rem;
|
|
|
}
|
|
|
-/* Figures */
|
|
|
|
|
|
+/* Figures */
|
|
|
figure {
|
|
|
text-align: center;
|
|
|
}
|
|
@@ -538,8 +532,8 @@ figcaption::before {
|
|
|
content: 'Figure ' counter(fig) ':\0020';
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-/* Code blocks */
|
|
|
|
|
|
+/* Code blocks */
|
|
|
pre[class*=language-] {
|
|
|
background: none;
|
|
|
margin-top: 2.25rem;
|
|
@@ -587,18 +581,17 @@ pre[class*=language-] code * {
|
|
|
padding: 0.125em 0.5em;
|
|
|
vertical-align: 0.33em;
|
|
|
}
|
|
|
-
|
|
|
.code-annotated.numbered + ol {
|
|
|
list-style: none;
|
|
|
counter-reset: annotation;
|
|
|
}
|
|
|
-
|
|
|
.code-annotated.numbered + ol li::before {
|
|
|
font-size: 0.66em;
|
|
|
margin-right: 0.33em;
|
|
|
vertical-align: 0.25em;
|
|
|
}
|
|
|
-/* file tree lists */
|
|
|
+
|
|
|
+/* File tree lists */
|
|
|
.file-tree {
|
|
|
overflow-x: auto;
|
|
|
}
|
|
@@ -639,6 +632,7 @@ pre[class*=language-] code * {
|
|
|
.file-tree li:last-child::before {
|
|
|
content: '\2514\2500\2500\0020';
|
|
|
}
|
|
|
+
|
|
|
/* Expandable sections */
|
|
|
.expandable-section {
|
|
|
border-top: 1px solid;
|
|
@@ -685,6 +679,7 @@ p:empty {
|
|
|
*:not(p) + p:empty + p {
|
|
|
margin-top: 2.25rem;
|
|
|
}
|
|
|
+
|
|
|
/* WCAG and principles */
|
|
|
.wcag li {
|
|
|
font-size: 0.85em;
|
|
@@ -699,8 +694,8 @@ p:empty {
|
|
|
margin-top: 0.75rem;
|
|
|
padding-top: 0.75rem;
|
|
|
}
|
|
|
-/* Site errors */
|
|
|
|
|
|
+/* Site errors */
|
|
|
.site-error {
|
|
|
padding: 1.5rem;
|
|
|
background: #efefef;
|
|
@@ -708,6 +703,7 @@ p:empty {
|
|
|
.site-error strong {
|
|
|
color: #C83737;
|
|
|
}
|
|
|
+
|
|
|
/* SVG icons */
|
|
|
a svg,
|
|
|
button svg,
|
|
@@ -744,6 +740,7 @@ h1 svg {
|
|
|
white-space: nowrap;
|
|
|
font-style: normal;
|
|
|
}
|
|
|
+
|
|
|
/* Color palettes */
|
|
|
.colors {
|
|
|
display: flex;
|
|
@@ -767,22 +764,24 @@ h1 svg {
|
|
|
bottom: 0.25rem;
|
|
|
right: 0.25rem;
|
|
|
}
|
|
|
-/* cross references */
|
|
|
+
|
|
|
+/* Cross references */
|
|
|
.pattern-link {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
-/* inline demos */
|
|
|
+
|
|
|
+/* Inline demos */
|
|
|
.demo-inner {
|
|
|
border-top: 1px solid;
|
|
|
border-bottom: 1px solid;
|
|
|
padding: 1.5rem 0;
|
|
|
position: relative;
|
|
|
}
|
|
|
-
|
|
|
[id^="js-demo-"] {
|
|
|
all: initial;
|
|
|
display: block;
|
|
|
}
|
|
|
+
|
|
|
/* Section links */
|
|
|
.h2-container {
|
|
|
position: relative;
|
|
@@ -796,8 +795,8 @@ h1 svg {
|
|
|
left: -1em;
|
|
|
border: 0;
|
|
|
}
|
|
|
-/* Single page layout */
|
|
|
|
|
|
+/* Single page layout */
|
|
|
.wrapper.print-version .main-and-footer {
|
|
|
margin-left: 0;
|
|
|
}
|
|
@@ -843,6 +842,7 @@ h1 svg {
|
|
|
.pattern-section h1 {
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
+
|
|
|
/* Custom 404 */
|
|
|
.custom-404 {
|
|
|
text-align: center;
|
|
@@ -853,6 +853,7 @@ h1 svg {
|
|
|
.custom-404 svg {
|
|
|
max-width: 100%;
|
|
|
}
|
|
|
+
|
|
|
/* Utilities */
|
|
|
.vh {
|
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
@@ -862,12 +863,16 @@ h1 svg {
|
|
|
white-space: nowrap;
|
|
|
width: 1px;
|
|
|
}
|
|
|
-@media screen and (max-width: 45em) {
|
|
|
+.gallery {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
|
|
|
+/* Media queries */
|
|
|
+@media screen and (max-width: 45em) {
|
|
|
body a {
|
|
|
hyphens: auto;
|
|
|
}
|
|
|
-
|
|
|
[role="banner"] {
|
|
|
position: static;
|
|
|
width: auto;
|
|
@@ -888,12 +893,10 @@ h1 svg {
|
|
|
main {
|
|
|
min-height: auto;
|
|
|
}
|
|
|
-
|
|
|
#patterns-list {
|
|
|
margin-top: 0.5rem;
|
|
|
border: 1px solid;
|
|
|
}
|
|
|
-
|
|
|
.patterns h3 {
|
|
|
font-size: 1.5rem;
|
|
|
padding: 1.5rem 1rem 0.75rem;
|