Add gallery class, format doc
This commit is contained in:
Zachary Betz
parent
545ae028ff
commit
3c48720fef
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue