Add gallery class, format doc

static/css/styles.css

@@ -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;