From 17dd654f02d00eb28119928c27a55a7e1e2317af Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Mon, 31 Jul 2017 21:07:38 +0100 Subject: [PATCH] fixed scrollTop error --- docs/css/styles.css | 1197 +++++++++------------- docs/js/dom-scripts.js | 18 +- docs/service-worker.js | 2 +- themes/infusion/static/css/styles.css | 1197 +++++++++------------- themes/infusion/static/js/dom-scripts.js | 18 +- 5 files changed, 1039 insertions(+), 1393 deletions(-) diff --git a/docs/css/styles.css b/docs/css/styles.css index 080c24d..883879d 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -2,55 +2,46 @@ @font-face { font-family: 'PT Sans'; - src: url('fonts/pt_sans-web-bold.woff2') format('woff2'), - url('fonts/pt_sans-web-bold.woff') format('woff'); + src: url('fonts/pt_sans-web-bold.woff2') format('woff2'), url('fonts/pt_sans-web-bold.woff') format('woff'); font-weight: bold; font-style: normal; } - @font-face { font-family: 'PT Sans'; - src: url('fonts/pt_sans-web-italic.woff2') format('woff2'), - url('fonts/pt_sans-web-italic.woff') format('woff'); + src: url('fonts/pt_sans-web-italic.woff2') format('woff2'), url('fonts/pt_sans-web-italic.woff') format('woff'); font-weight: normal; font-style: italic; } - @font-face { font-family: 'PT Sans'; - src: url('fonts/pt_sans-web-regular.woff2') format('woff2'), - url('fonts/pt_sans-web-regular.woff') format('woff'); + src: url('fonts/pt_sans-web-regular.woff2') format('woff2'), url('fonts/pt_sans-web-regular.woff') format('woff'); font-weight: normal; font-style: normal; } - @font-face { font-family: 'Miriam Libre'; - src: url('fonts/miriamlibre-bold.woff2') format('woff2'), - url('fonts/miriamlibre-bold.woff') format('woff'); + src: url('fonts/miriamlibre-bold.woff2') format('woff2'), url('fonts/miriamlibre-bold.woff') format('woff'); font-weight: bold; font-style: normal; } - -*, *::before, *::after { - font-family: inherit; - color: inherit; - margin: 0; - padding: 0; - box-sizing: border-box; +*, +*::before, +*::after { + font-family: inherit; + color: inherit; + margin: 0; + padding: 0; + box-sizing: border-box; } - html { - font-size: calc(1em + 0.33vw); - font-family: PT Sans, sans-serif; - line-height: 1.5; - color: #111; + font-size: calc(1em + 0.33vw); + font-family: PT Sans, sans-serif; + line-height: 1.5; + color: #111; } - * + * { - margin-top: 2.25rem; + margin-top: 2.25rem; } - br, dt, dd, @@ -61,514 +52,430 @@ option, li + li, body, .main-and-footer { - margin-top: 0; + margin-top: 0; } - p + p { - margin-top: 0.75rem; + margin-top: 0.75rem; } - a { - text-decoration: none; - border-bottom: 1px solid; + text-decoration: none; + border-bottom: 1px solid; } - abbr { - text-decoration: none; - cursor: help; - border-bottom: 1px dashed; + text-decoration: none; + cursor: help; + border-bottom: 1px dashed; } - img { - max-width: 100%; + max-width: 100%; } - p img { - margin: 0.75rem 0; + margin: 0.75rem 0; } - figure p img { - margin: 0; + margin: 0; } - :focus:not([tabindex="-1"]), [data-expands]:focus svg, .patterns a:focus .text { - outline: 3px solid #ccc; - outline-offset: 2px; + outline: 3px solid #ccc; + outline-offset: 2px; } - /* fix for IE :( */ + [tabindex="-1"]:focus, div:not([tabindex]):focus { - outline: none; + outline: none; } - /* skip link */ [href="#main"] { - display: block; - width: 100%; - padding: 0.75rem; - color: #fff; - background: #000; - position: absolute; - top: -3rem; - text-align: center; - z-index: 1; + display: block; + width: 100%; + padding: 0.75rem; + color: #fff; + background: #000; + position: absolute; + top: -3rem; + text-align: center; + z-index: 1; } - [href="#main"]:focus { - top: 0; - outline: none; + top: 0; + outline: none; } - /* text styles */ -h1, h2, h3, h4 { - font-family: Miriam Libre, serif; - line-height: 1.125; +h1, +h2, +h3, +h4 { + font-family: Miriam Libre, serif; + line-height: 1.125; } - h1 { - font-size: 2rem; + font-size: 2rem; } - h2 { - font-size: 1.66rem; + font-size: 1.66rem; } - h3 { - font-size: 1.25rem; + font-size: 1.25rem; } - -h4, h5 { - font-size: 1rem; - font-family: PT Sans, sans-serif; -} - +h4, h5 { - font-size: 0.85rem; - text-transform: uppercase; + font-size: 1rem; + font-family: PT Sans, sans-serif; +} +h5 { + font-size: 0.85rem; + text-transform: uppercase; } - kbd { - 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; + 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; +pre, +.file-tree { + overflow-x: auto; + padding: 1.5rem; + border: 1px solid; } - code { - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 0.85em; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 0.85em; } - .cmd { - padding: 0.75rem; - background: #111; + padding: 0.75rem; + background: #111; } - .cmd code { - color: #fff; - white-space: nowrap; + color: #fff; + white-space: nowrap; } - .cmd code::before { - content: '$'; - font-weight: bold; - padding-right: 0.25em; + content: '$'; + font-weight: bold; + padding-right: 0.25em; } - /* Lists */ -main ul, main ol { - margin-left: 2.25rem; +main ul, +main ol { + margin-left: 2.25rem; } - main li + li { - margin-top: 0.5rem; + margin-top: 0.5rem; } - main ul ul { - margin-top: 0; + margin-top: 0; } - /* Buttons */ button { - font-size: 1.25rem; - font-family: inherit; - font-weight: inherit; - background: #111; - color: #fff; - padding: 0.75rem; - border: 0; + font-size: 1.25rem; + font-family: inherit; + font-weight: inherit; + background: #111; + color: #fff; + padding: 0.75rem; + border: 0; } - /* Tables */ table { - text-align: left; - table-layout: fixed; - width: 100%; - border-collapse: collapse; + text-align: left; + table-layout: fixed; + width: 100%; + border-collapse: collapse; } - -th, td { - border: 2px solid; - padding: 0.5rem; - line-height: 1.25; - margin: 0; +th, +td { + border: 2px solid; + padding: 0.5rem; + line-height: 1.25; + margin: 0; } - th { - font-weight: bold; + font-weight: bold; } - th:empty { - border: 0; + border: 0; } - /* Tested using... table */ .tested { - text-align: center; + text-align: center; } - .tested td { - vertical-align: top; - overflow: hidden; + vertical-align: top; + overflow: hidden; } - .tested th { - background-color: #111; - border-color: #111; - color: #fff; + background-color: #111; + border-color: #111; + color: #fff; } - .tested img { - max-width: 3rem; + max-width: 3rem; } - .tested span { - display: block; - margin: 0; + display: block; + margin: 0; } - .tested .additional { - font-size: 0.85rem; + font-size: 0.85rem; } - caption { - font-size: 1.125rem; - padding-bottom: 0.25rem; - font-style: italic; + font-size: 1.125rem; + padding-bottom: 0.25rem; + font-style: italic; } - /* Page structure */ .wrapper { - position: relative; - margin-top: 0; - overflow-x: hidden; + position: relative; + margin-top: 0; + overflow-x: hidden; } - .intro-and-nav { - font-size: 0.85rem; - width: 15rem; - height: 100vh; - position: fixed; - top: 0; - left: 0; - border-right: 2px solid; + font-size: 0.85rem; + width: 15rem; + height: 100vh; + position: fixed; + top: 0; + left: 0; + border-right: 2px solid; } - .intro-and-nav > div { - padding: 2.25rem; - display: flex; - flex-direction: column; - height: 100%; + padding: 2.25rem; + display: flex; + flex-direction: column; + height: 100%; } - .logo { - border: 0; + border: 0; } - .logo img { - width: 100%; - max-width: 12rem; + width: 100%; + max-width: 12rem; } - .library-desc { - font-style: italic; - margin-top: 0.5rem; - margin-left: auto; - margin-right: auto; - max-width: 30rem; + font-style: italic; + margin-top: 0.5rem; + margin-left: auto; + margin-right: auto; + max-width: 30rem; } - .main-and-footer { - margin-left: 15rem; + margin-left: 15rem; } - .main-and-footer > div { - max-width: 40rem; - margin: 0 auto; - padding: 2.25rem; + max-width: 40rem; + margin: 0 auto; + padding: 2.25rem; } - [role="contentinfo"] { - font-size: 0.85rem; - margin-top: 4rem; - text-align: center; + font-size: 0.85rem; + margin-top: 4rem; + text-align: center; } - /* Patterns navigation */ .patterns { - overflow: auto; - margin-top: 1.5rem; + overflow: auto; + margin-top: 1.5rem; } - .patterns * { - margin-top: 0; + margin-top: 0; } - .patterns h3 { - font-size: 1rem; + font-size: 1rem; } - .patterns h3 + ul { - margin-top: 0.75rem; + margin-top: 0.75rem; } - .patterns li { - line-height: 1.125; - list-style: none; + line-height: 1.125; + list-style: none; } - .patterns li + li { - margin-top: 0.75rem; + margin-top: 0.75rem; } - .patterns ul ul { - margin-left: 0.75rem; + margin-left: 0.75rem; } - .pattern a { - border: 0; - display: flex; - flex-wrap: nowrap; - align-items: baseline; - font-weight: bold; + border: 0; + display: flex; + flex-wrap: nowrap; + align-items: baseline; + font-weight: bold; } - .pattern a:focus { - outline: none; + outline: none; } - -.pattern a:focus span { - outline: -} - .pattern span { - margin-left: 0.125rem; + margin-left: 0.125rem; } - .pattern [aria-current] { - background-color: #111; - background-image: url(images/arrow_effect.svg); - background-position: right center; - background-size: 125%; - background-repeat: no-repeat; - color: #fff; - padding: 0.5em 1em 0.5em; + background-color: #111; + background-image: url(images/arrow_effect.svg); + background-position: right center; + background-size: 125%; + background-repeat: no-repeat; + color: #fff; + padding: 0.5em 1em 0.5em; } - /* menu button */ #menu-button { - display: none; - width: 100%; - text-align: center; + display: none; + width: 100%; + text-align: center; } - #menu-button:focus { - outline: none; - box-shadow: inset 0 0 0 0.25rem #ccc; + outline: none; + box-shadow: inset 0 0 0 0.25rem #ccc; } - /* Tables of contents */ .toc { - font-size: 0.85rem; - border: 1px solid; - padding: 1.5rem; + font-size: 0.85rem; + border: 1px solid; + padding: 1.5rem; } - .toc h2 { - font-size: 1rem; + font-size: 1rem; } - .toc ol { - margin-left: 0.75rem; - margin-top: 0.5rem; + margin-left: 0.75rem; + margin-top: 0.5rem; } - /* Pattern lists */ .patterns-list { - list-style: none; - margin-left: 0; + list-style: none; + margin-left: 0; } - .patterns-list h2 { - font-size: 1.25rem; + font-size: 1.25rem; } - .patterns-list li + li { - margin-top: 1rem; - padding-top: 1rem; - border-top: 2px solid; + margin-top: 1rem; + padding-top: 1rem; + border-top: 2px solid; } - .patterns-list a { - border: 0; + border: 0; } - /* Tags */ .tags { - margin-top: 0; - font-size: 0.85rem; + margin-top: 0; + font-size: 0.85rem; } - .tags * { - display: inline; - margin: 0; + display: inline; + margin: 0; } - .tags strong { - margin-right: 0.25rem; + margin-right: 0.25rem; } - .tags li { - white-space: nowrap; - margin: 0 0.25rem 0 0; + white-space: nowrap; + margin: 0 0.25rem 0 0; } - /* Notes and warnings */ .note { - border-left: 0.5rem solid; - font-size: 0.85rem; + border-left: 0.5rem solid; + font-size: 0.85rem; } - .note svg { - height: 2.25rem; - width: auto; + height: 2.25rem; + width: auto; } - .note > div { - margin-left: 0.75rem; + margin-left: 0.75rem; } - .note > div > img:first-child { - height: 1.5rem; + height: 1.5rem; } - -.note > div > :first-child + * { - margin-top: 0; +.note > div >:first-child + * { + margin-top: 0; } - .note.warning { - border-left: 0; - background-image: url(images/stripe.svg); - background-size: 0.5rem auto; - background-repeat: repeat-y; + border-left: 0; + background-image: url(images/stripe.svg); + background-size: 0.5rem auto; + background-repeat: repeat-y; } - .note.warning > div { - margin-left: 1.25rem; + margin-left: 1.25rem; } - /* Tick lists */ .ticks li { - list-style: none; - position: relative; + list-style: none; + position: relative; } - .ticks li::before { - 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; + 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; } - /* Figures */ figure { - text-align: center; + text-align: center; } - figcaption { - font-size: 0.85rem; - font-style: italic; - margin-top: 0.5rem; + font-size: 0.85rem; + font-style: italic; + margin-top: 0.5rem; } - main { - display: block; - counter-reset: fig; - min-height: 100vh; + display: block; + counter-reset: fig; + min-height: 100vh; } - figcaption::before { - counter-increment: fig; - content: 'Figure ' counter(fig) ':\0020'; - font-weight: bold; + counter-increment: fig; + content: 'Figure ' counter(fig) ':\0020'; + font-weight: bold; } - /* Code blocks */ pre[class*=language-] { - background: none; - margin-top: 2.25rem; - margin-bottom: 0; - overflow-y: hidden; - overflow-x: auto; + background: none; + margin-top: 2.25rem; + margin-bottom: 0; + overflow-y: hidden; + overflow-x: auto; } - pre[class*=language-][data-line] { - padding: 1em 0 0 2.25rem; + padding: 1em 0 0 2.25rem; } - pre[class*=language-] code * { - margin-top: 0 !important; + margin-top: 0 !important; } - [data-codeblock-shortcode] { - display: block; - margin-top: -1rem; + display: block; + margin-top: -1rem; } - .token.property, .token.tag, .token.boolean, @@ -576,477 +483,391 @@ pre[class*=language-] code * { .token.constant, .token.symbol, .token.deleted { - color: #888; + color: #888; } - .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { - color: #111; + color: #111; } - .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { - color: #333; - background: none; + color: #333; + background: none; } - .token.atrule, .token.attr-value, .token.keyword { - color: #666; + color: #666; } - .token.function { - color: #888; + color: #888; } - .line-numbers code { - padding-left: 3rem; - margin-top: -1rem; - overflow-x: auto; - overflow-y: hidden; + padding-left: 3rem; + margin-top: -1rem; + overflow-x: auto; + overflow-y: hidden; } - .line-numbers { - padding: 1.5rem !important; + padding: 1.5rem !important; } - .line-numbers .line-numbers-rows { - margin-left: 2.25rem; - left: -3.5em; - top: 1.25rem; - color: #111; - border-color: #111; + margin-left: 2.25rem; + left: -3.5em; + top: 1.25rem; + color: #111; + border-color: #111; } - .line-numbers-rows > span:before { - color: inherit; + color: inherit; } - /* file tree lists */ .file-tree { - overflow-x: auto; + overflow-x: auto; } - .file-tree ul { - font-family: Courier, monospace; - margin: 0; - padding: 0; - padding-left: 3rem; - list-style: none; - line-height: 1.25; - position: relative; + font-family: Courier, monospace; + margin: 0; + padding: 0; + padding-left: 3rem; + list-style: none; + line-height: 1.25; + position: relative; } - .file-tree > ul { - padding-left: 0; - overflow-x: auto; + padding-left: 0; + overflow-x: auto; } - .file-tree li { - background: #fff; - position: relative; - white-space: nowrap; + background: #fff; + position: relative; + white-space: nowrap; } - .file-tree li + li { - margin-top: 0; + margin-top: 0; } - .file-tree li:not(:last-child) > ul::before { - 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; + 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; } - .file-tree li::before { - content: '\251C\2500\2500\0020'; + content: '\251C\2500\2500\0020'; } - .file-tree li:last-child::before { - content: '\2514\2500\2500\0020'; + content: '\2514\2500\2500\0020'; } - /* Expandable sections */ .expandable-section { - border-top: 1px solid; - border-bottom: 1px solid; - padding: 0.75rem 0; + border-top: 1px solid; + border-bottom: 1px solid; + padding: 0.75rem 0; } - [id^="js-expandable-"] { - margin: 0; - padding: 1.5rem 0 0.75rem; + margin: 0; + padding: 1.5rem 0 0.75rem; } - @media screen { - - .expandable-section + .expandable-section { - margin-top: 0; - border-top: 0; - } - + .expandable-section + .expandable-section { + margin-top: 0; + border-top: 0; + } } - [data-expands] { - 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; + 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; } - [data-expands] svg { - margin-top: 0; - width: 1em; - height: 1em; + margin-top: 0; + width: 1em; + height: 1em; } - [data-expands][aria-expanded="true"] svg .up-strut { - display: none; + display: none; } - [data-expands]:focus { - outline: none; + outline: none; } - p:empty { - display: none; + display: none; } - *:not(p) + p:empty + p { - margin-top: 2.25rem; + margin-top: 2.25rem; } - /* WCAG and principles */ .wcag ul li { - font-size: 0.85em; + font-size: 0.85em; } - .principles p { - font-size: 0.85rem; - margin-top: 0.75rem; + font-size: 0.85rem; + margin-top: 0.75rem; } - .principles.with-desc > li + li, .wcag.with-desc > li + li { - border-top: 1px solid; - margin-top: 0.75rem; - padding-top: 0.75rem; + border-top: 1px solid; + margin-top: 0.75rem; + padding-top: 0.75rem; } - /* Site errors */ .site-error { - padding: 1.5rem; - background: #efefef; + padding: 1.5rem; + background: #efefef; } - .site-error strong { - color: #C83737; + color: #C83737; } - /* SVG icons */ -a svg, button svg, h1 svg { - height: 0.75em; - width: auto; - margin-right: 0.25em; -} - -h1 svg, li > svg, h2 a svg { - height: 1em; - vertical-align: middle; -} - +a svg, +button svg, h1 svg { - margin-right: 0; + height: 0.75em; + width: auto; + margin-right: 0.25em; +} +h1 svg, +li > svg, +h2 a svg { + height: 1em; + vertical-align: middle; +} +h1 svg { + margin-right: 0; } - .print { - white-space: nowrap; + white-space: nowrap; } - .svg-outer { - width: 0.75em; - display: inline-block; - vertical-align: middle; + width: 0.75em; + display: inline-block; + vertical-align: middle; } - /* Color palettes */ .colors { - display: flex; - height: 5rem; - margin: -0.25rem; - list-style: none; - flex-wrap: nowrap; + display: flex; + height: 5rem; + margin: -0.25rem; + list-style: none; + flex-wrap: nowrap; } - .colors li { - margin: 0.25rem; - flex: 1 0 auto; - position: relative; + margin: 0.25rem; + flex: 1 0 auto; + position: relative; } - .colors span { - line-height: 1; - background-color: #111; - color: #fff; - font-size: 0.75rem; - padding: 0.25rem; - position: absolute; - bottom: 0.25rem; - right: 0.25rem; + line-height: 1; + background-color: #111; + color: #fff; + font-size: 0.75rem; + padding: 0.25rem; + position: absolute; + bottom: 0.25rem; + right: 0.25rem; } - /* cross references */ .pattern-link { - font-weight: bold; + font-weight: bold; } - /* inline demos */ [id^="js-demo-"] { - all: initial; - display: block; + all: initial; + display: block; } - /* Section links */ .h2-container { - position: relative; - font-size: 1.66rem; + position: relative; + font-size: 1.66rem; } - .h2-container a { - position: absolute; - margin-top: 0; - top: 0; - line-height: 1; - left: -1em; - border: 0; + position: absolute; + margin-top: 0; + top: 0; + line-height: 1; + left: -1em; + border: 0; } - /* Single page layout */ .wrapper.print-version .main-and-footer { - margin-left: 0; -} - -.wrapper.print-version .intro-and-nav { - position: static; - border: 0; - width: auto; - text-align: center; - display: flex; - align-items: center; - justify-content: center; -} - -.wrapper.print-version main { - min-height: 0; -} - -.wrapper.print-version .library-desc { - font-size: 1rem; -} - -.wrapper.print-version .intro-and-nav > div { - height: auto; -} - -.wrapper.print-version #patterns-list { - margin-left: 0; - margin-top: 1.5rem; - display: block; -} - -.wrapper.print-version .toc { - font-size: 1rem; -} - -.wrapper.print-version .toc h2 { - font-size: 1.66rem; -} - -.wrapper.print-version #patterns-list h3 { - font-size: 1.25rem; -} - -.pattern-section:not(:last-child) { - padding-bottom: 2.25rem; - border-bottom: 2px solid; -} - -.pattern-section h1 { - padding: 0 !important; -} - -@media screen and (max-width: 45em) { - - [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; - } - - [aria-expanded="true"] + #patterns-list { - display: block; - } - - .tested th, .tested td { - display: block; - } - - .tested td + td { - border-top: 0; - } - -} - -@media print { - - .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: ''; - } - - .cmd { - 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; - } - +} +.wrapper.print-version .intro-and-nav { + position: static; + border: 0; + width: auto; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} +.wrapper.print-version main { + min-height: 0; +} +.wrapper.print-version .library-desc { + font-size: 1rem; +} +.wrapper.print-version .intro-and-nav > div { + height: auto; +} +.wrapper.print-version #patterns-list { + margin-left: 0; + margin-top: 1.5rem; + display: block; +} +.wrapper.print-version .toc { + font-size: 1rem; +} +.wrapper.print-version .toc h2 { + font-size: 1.66rem; +} +.wrapper.print-version #patterns-list h3 { + font-size: 1.25rem; +} +.pattern-section:not(:last-child) { + padding-bottom: 2.25rem; + border-bottom: 2px solid; +} +.pattern-section h1 { + padding: 0 !important; +} +@media screen and (max-width: 45em) { + [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; + } + [aria-expanded="true"] + #patterns-list { + display: block; + } + .tested th, + .tested td { + display: block; + } + .tested td + td { + border-top: 0; + } +} +@media print { + .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: ''; + } + .cmd { + 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; + } } diff --git a/docs/js/dom-scripts.js b/docs/js/dom-scripts.js index 59bfa4b..f960597 100644 --- a/docs/js/dom-scripts.js +++ b/docs/js/dom-scripts.js @@ -31,19 +31,21 @@ /* persist navigation scroll point */ (function () { - var patternsNav = document.getElementById('patterns-nav') - if (patternsNav) { - var scrollPoint = patternsNav.scrollTop - window.onunload = function () { + window.onunload = function () { + var patternsNav = document.getElementById('patterns-nav') + if (patternsNav) { + var scrollPoint = patternsNav.scrollTop localStorage.setItem('scrollPoint', scrollPoint) } } window.addEventListener('DOMContentLoaded', function () { - if (window.location.href.indexOf('patterns/') !== -1) { - scrollPoint = parseInt(localStorage.getItem('scrollPoint')) - } else { - scrollPoint = 0 + if (document.getElementById('patterns-nav')) { + if (window.location.href.indexOf('patterns/') !== -1) { + document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint')) + } else { + document.getElementById('patterns-nav').scrollTop = 0 + } } }) }()); diff --git a/docs/service-worker.js b/docs/service-worker.js index 57cd0b4..3b034a9 100644 --- a/docs/service-worker.js +++ b/docs/service-worker.js @@ -37,7 +37,7 @@ /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */ 'use strict'; -var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","a6dbba133046deebe5bc1e63fdbee462"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","73467782582f373d6f1fbf6ea7995ec3"],["index.xml","b05076afa4fbe42cbf4c13fa52499488"],["js/dom-scripts.js","dc507fb820a86dc6e5d3b5045bca962f"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","3d6af7106204b171ae2cce41a898c55d"],["patterns/coding/color-palettes/index.html","d374ed14da5d8329a302eee7c44673b6"],["patterns/coding/command-line/index.html","185aa43c9008d30e41c0a68cecad19e4"],["patterns/coding/demo-embedding/index.html","50c6153ceae53e93c92d81efdbf2349a"],["patterns/coding/file-trees/index.html","0bd5e28b71cf9fc6cdf1245fda79f8dd"],["patterns/coding/index.html","c1a0e318daa83c9b522cc8426d993e13"],["patterns/coding/index.xml","c8141d2e5b185b41c7c2297cbe9761a9"],["patterns/coding/tested/index.html","b9b3de90a952d57d4b8336d284900ef1"],["patterns/coding/writing-inline-demos/index.html","d100d81e1f381829543eabed4b49e906"],["patterns/index.html","b14efdf3bc522497cb93fe1edf1ce231"],["patterns/index.xml","8c88ea8c5d4e10c5982c9293a8fd501b"],["patterns/installation/index.html","0b36b53b3f5fc9b0378190ecd23350dc"],["patterns/library-setup/index.html","539a48061854e24ba8a05944d7fbd6b6"],["patterns/media/including-images/index.html","c08e3bf6c0fe46428ea4aeeee7b84021"],["patterns/media/including-videos/index.html","903e502ae9a3a2c62a29918e652272bf"],["patterns/media/index.html","cea89f3ccd6c137369e748e0f6ab0990"],["patterns/media/index.xml","91130ea74bd16f6d51c959a00c3c6284"],["patterns/serving/index.html","eb4e3d648279cfd2e589f616a85770da"],["patterns/writing/expandable-sections/index.html","9171006630a5723e8f2ed773a4212e98"],["patterns/writing/index.html","69eb4e50dace75d4312757550a3bd89e"],["patterns/writing/index.xml","7975bc05d66958e02f1433099f033636"],["patterns/writing/library-structure/index.html","544372e8ee097ed08f62896c7b725105"],["patterns/writing/markdown-and-metadata/index.html","f074a30abfd3799a9ad628e51fbb0cb9"],["patterns/writing/notes-and-warnings/index.html","787355602a3f9fd9c96787357db201aa"],["patterns/writing/references/index.html","1e3c0ef0fdc70107707031930c5c6994"],["patterns/writing/tables-of-contents/index.html","816cd2960a3a8a949bf1fbdf4610cf91"],["print-version/index.html","09828d923a7c1390147bf2459905421c"],["sitemap.xml","dccc7ccd443b4159d83ae2a0068ae6c6"],["tags/index.xml","5af18d25fdcb072a78c1603adacee4f6"],["tags/markdown/index.html","026df7c219ef92124360430beab6f383"],["tags/markdown/index.xml","757d307cdf85883859ac95ea20527f4a"],["tags/metadata/index.html","398b87f1f46bad02cec860bfb3c4f3eb"],["tags/metadata/index.xml","b6989e44540f4745072a2063369de173"]]; +var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/fonts/pt_sans-web-bold.woff","f83c22b548d2d684e24e315d81f7d22b"],["css/fonts/pt_sans-web-bold.woff2","84520c22e6ebf1b30b6f17251d65fff7"],["css/fonts/pt_sans-web-italic.woff","31f09f09a1d3fbe6c8de19644ef0e614"],["css/fonts/pt_sans-web-italic.woff2","df128e1d5a449fc0506fc1b48aac0184"],["css/fonts/pt_sans-web-regular.woff","32100f6ebf01af64d4a71416561c072d"],["css/fonts/pt_sans-web-regular.woff2","b6d4ede9a3a5dbe4d5ac242ae4b0ecc2"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","de7736b64dc546a4aa72fda2d0d1af10"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.png","0134d77c2c6b01eabb425990bab7ce9a"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["images/steve_faulkner.jpg","b90382f2b505ce6f6b1e08657637395e"],["index.html","73467782582f373d6f1fbf6ea7995ec3"],["index.xml","b05076afa4fbe42cbf4c13fa52499488"],["js/dom-scripts.js","f7e4e662f3c30e319ac30f9a6c28d0ca"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","4e77b7f1253442852a2f185822f1b4d8"],["patterns/coding/code-blocks/index.html","3d6af7106204b171ae2cce41a898c55d"],["patterns/coding/color-palettes/index.html","d374ed14da5d8329a302eee7c44673b6"],["patterns/coding/command-line/index.html","185aa43c9008d30e41c0a68cecad19e4"],["patterns/coding/demo-embedding/index.html","50c6153ceae53e93c92d81efdbf2349a"],["patterns/coding/file-trees/index.html","0bd5e28b71cf9fc6cdf1245fda79f8dd"],["patterns/coding/index.html","c1a0e318daa83c9b522cc8426d993e13"],["patterns/coding/index.xml","c8141d2e5b185b41c7c2297cbe9761a9"],["patterns/coding/tested/index.html","b9b3de90a952d57d4b8336d284900ef1"],["patterns/coding/writing-inline-demos/index.html","d100d81e1f381829543eabed4b49e906"],["patterns/index.html","b14efdf3bc522497cb93fe1edf1ce231"],["patterns/index.xml","8c88ea8c5d4e10c5982c9293a8fd501b"],["patterns/installation/index.html","0b36b53b3f5fc9b0378190ecd23350dc"],["patterns/library-setup/index.html","539a48061854e24ba8a05944d7fbd6b6"],["patterns/media/including-images/index.html","c08e3bf6c0fe46428ea4aeeee7b84021"],["patterns/media/including-videos/index.html","903e502ae9a3a2c62a29918e652272bf"],["patterns/media/index.html","cea89f3ccd6c137369e748e0f6ab0990"],["patterns/media/index.xml","91130ea74bd16f6d51c959a00c3c6284"],["patterns/serving/index.html","eb4e3d648279cfd2e589f616a85770da"],["patterns/writing/expandable-sections/index.html","9171006630a5723e8f2ed773a4212e98"],["patterns/writing/index.html","69eb4e50dace75d4312757550a3bd89e"],["patterns/writing/index.xml","7975bc05d66958e02f1433099f033636"],["patterns/writing/library-structure/index.html","544372e8ee097ed08f62896c7b725105"],["patterns/writing/markdown-and-metadata/index.html","f074a30abfd3799a9ad628e51fbb0cb9"],["patterns/writing/notes-and-warnings/index.html","787355602a3f9fd9c96787357db201aa"],["patterns/writing/references/index.html","1e3c0ef0fdc70107707031930c5c6994"],["patterns/writing/tables-of-contents/index.html","816cd2960a3a8a949bf1fbdf4610cf91"],["print-version/index.html","09828d923a7c1390147bf2459905421c"],["sitemap.xml","dccc7ccd443b4159d83ae2a0068ae6c6"],["tags/index.xml","5af18d25fdcb072a78c1603adacee4f6"],["tags/markdown/index.html","026df7c219ef92124360430beab6f383"],["tags/markdown/index.xml","757d307cdf85883859ac95ea20527f4a"],["tags/metadata/index.html","398b87f1f46bad02cec860bfb3c4f3eb"],["tags/metadata/index.xml","b6989e44540f4745072a2063369de173"]]; var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : ''); diff --git a/themes/infusion/static/css/styles.css b/themes/infusion/static/css/styles.css index 080c24d..883879d 100644 --- a/themes/infusion/static/css/styles.css +++ b/themes/infusion/static/css/styles.css @@ -2,55 +2,46 @@ @font-face { font-family: 'PT Sans'; - src: url('fonts/pt_sans-web-bold.woff2') format('woff2'), - url('fonts/pt_sans-web-bold.woff') format('woff'); + src: url('fonts/pt_sans-web-bold.woff2') format('woff2'), url('fonts/pt_sans-web-bold.woff') format('woff'); font-weight: bold; font-style: normal; } - @font-face { font-family: 'PT Sans'; - src: url('fonts/pt_sans-web-italic.woff2') format('woff2'), - url('fonts/pt_sans-web-italic.woff') format('woff'); + src: url('fonts/pt_sans-web-italic.woff2') format('woff2'), url('fonts/pt_sans-web-italic.woff') format('woff'); font-weight: normal; font-style: italic; } - @font-face { font-family: 'PT Sans'; - src: url('fonts/pt_sans-web-regular.woff2') format('woff2'), - url('fonts/pt_sans-web-regular.woff') format('woff'); + src: url('fonts/pt_sans-web-regular.woff2') format('woff2'), url('fonts/pt_sans-web-regular.woff') format('woff'); font-weight: normal; font-style: normal; } - @font-face { font-family: 'Miriam Libre'; - src: url('fonts/miriamlibre-bold.woff2') format('woff2'), - url('fonts/miriamlibre-bold.woff') format('woff'); + src: url('fonts/miriamlibre-bold.woff2') format('woff2'), url('fonts/miriamlibre-bold.woff') format('woff'); font-weight: bold; font-style: normal; } - -*, *::before, *::after { - font-family: inherit; - color: inherit; - margin: 0; - padding: 0; - box-sizing: border-box; +*, +*::before, +*::after { + font-family: inherit; + color: inherit; + margin: 0; + padding: 0; + box-sizing: border-box; } - html { - font-size: calc(1em + 0.33vw); - font-family: PT Sans, sans-serif; - line-height: 1.5; - color: #111; + font-size: calc(1em + 0.33vw); + font-family: PT Sans, sans-serif; + line-height: 1.5; + color: #111; } - * + * { - margin-top: 2.25rem; + margin-top: 2.25rem; } - br, dt, dd, @@ -61,514 +52,430 @@ option, li + li, body, .main-and-footer { - margin-top: 0; + margin-top: 0; } - p + p { - margin-top: 0.75rem; + margin-top: 0.75rem; } - a { - text-decoration: none; - border-bottom: 1px solid; + text-decoration: none; + border-bottom: 1px solid; } - abbr { - text-decoration: none; - cursor: help; - border-bottom: 1px dashed; + text-decoration: none; + cursor: help; + border-bottom: 1px dashed; } - img { - max-width: 100%; + max-width: 100%; } - p img { - margin: 0.75rem 0; + margin: 0.75rem 0; } - figure p img { - margin: 0; + margin: 0; } - :focus:not([tabindex="-1"]), [data-expands]:focus svg, .patterns a:focus .text { - outline: 3px solid #ccc; - outline-offset: 2px; + outline: 3px solid #ccc; + outline-offset: 2px; } - /* fix for IE :( */ + [tabindex="-1"]:focus, div:not([tabindex]):focus { - outline: none; + outline: none; } - /* skip link */ [href="#main"] { - display: block; - width: 100%; - padding: 0.75rem; - color: #fff; - background: #000; - position: absolute; - top: -3rem; - text-align: center; - z-index: 1; + display: block; + width: 100%; + padding: 0.75rem; + color: #fff; + background: #000; + position: absolute; + top: -3rem; + text-align: center; + z-index: 1; } - [href="#main"]:focus { - top: 0; - outline: none; + top: 0; + outline: none; } - /* text styles */ -h1, h2, h3, h4 { - font-family: Miriam Libre, serif; - line-height: 1.125; +h1, +h2, +h3, +h4 { + font-family: Miriam Libre, serif; + line-height: 1.125; } - h1 { - font-size: 2rem; + font-size: 2rem; } - h2 { - font-size: 1.66rem; + font-size: 1.66rem; } - h3 { - font-size: 1.25rem; + font-size: 1.25rem; } - -h4, h5 { - font-size: 1rem; - font-family: PT Sans, sans-serif; -} - +h4, h5 { - font-size: 0.85rem; - text-transform: uppercase; + font-size: 1rem; + font-family: PT Sans, sans-serif; +} +h5 { + font-size: 0.85rem; + text-transform: uppercase; } - kbd { - 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; + 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; +pre, +.file-tree { + overflow-x: auto; + padding: 1.5rem; + border: 1px solid; } - code { - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - font-size: 0.85em; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-size: 0.85em; } - .cmd { - padding: 0.75rem; - background: #111; + padding: 0.75rem; + background: #111; } - .cmd code { - color: #fff; - white-space: nowrap; + color: #fff; + white-space: nowrap; } - .cmd code::before { - content: '$'; - font-weight: bold; - padding-right: 0.25em; + content: '$'; + font-weight: bold; + padding-right: 0.25em; } - /* Lists */ -main ul, main ol { - margin-left: 2.25rem; +main ul, +main ol { + margin-left: 2.25rem; } - main li + li { - margin-top: 0.5rem; + margin-top: 0.5rem; } - main ul ul { - margin-top: 0; + margin-top: 0; } - /* Buttons */ button { - font-size: 1.25rem; - font-family: inherit; - font-weight: inherit; - background: #111; - color: #fff; - padding: 0.75rem; - border: 0; + font-size: 1.25rem; + font-family: inherit; + font-weight: inherit; + background: #111; + color: #fff; + padding: 0.75rem; + border: 0; } - /* Tables */ table { - text-align: left; - table-layout: fixed; - width: 100%; - border-collapse: collapse; + text-align: left; + table-layout: fixed; + width: 100%; + border-collapse: collapse; } - -th, td { - border: 2px solid; - padding: 0.5rem; - line-height: 1.25; - margin: 0; +th, +td { + border: 2px solid; + padding: 0.5rem; + line-height: 1.25; + margin: 0; } - th { - font-weight: bold; + font-weight: bold; } - th:empty { - border: 0; + border: 0; } - /* Tested using... table */ .tested { - text-align: center; + text-align: center; } - .tested td { - vertical-align: top; - overflow: hidden; + vertical-align: top; + overflow: hidden; } - .tested th { - background-color: #111; - border-color: #111; - color: #fff; + background-color: #111; + border-color: #111; + color: #fff; } - .tested img { - max-width: 3rem; + max-width: 3rem; } - .tested span { - display: block; - margin: 0; + display: block; + margin: 0; } - .tested .additional { - font-size: 0.85rem; + font-size: 0.85rem; } - caption { - font-size: 1.125rem; - padding-bottom: 0.25rem; - font-style: italic; + font-size: 1.125rem; + padding-bottom: 0.25rem; + font-style: italic; } - /* Page structure */ .wrapper { - position: relative; - margin-top: 0; - overflow-x: hidden; + position: relative; + margin-top: 0; + overflow-x: hidden; } - .intro-and-nav { - font-size: 0.85rem; - width: 15rem; - height: 100vh; - position: fixed; - top: 0; - left: 0; - border-right: 2px solid; + font-size: 0.85rem; + width: 15rem; + height: 100vh; + position: fixed; + top: 0; + left: 0; + border-right: 2px solid; } - .intro-and-nav > div { - padding: 2.25rem; - display: flex; - flex-direction: column; - height: 100%; + padding: 2.25rem; + display: flex; + flex-direction: column; + height: 100%; } - .logo { - border: 0; + border: 0; } - .logo img { - width: 100%; - max-width: 12rem; + width: 100%; + max-width: 12rem; } - .library-desc { - font-style: italic; - margin-top: 0.5rem; - margin-left: auto; - margin-right: auto; - max-width: 30rem; + font-style: italic; + margin-top: 0.5rem; + margin-left: auto; + margin-right: auto; + max-width: 30rem; } - .main-and-footer { - margin-left: 15rem; + margin-left: 15rem; } - .main-and-footer > div { - max-width: 40rem; - margin: 0 auto; - padding: 2.25rem; + max-width: 40rem; + margin: 0 auto; + padding: 2.25rem; } - [role="contentinfo"] { - font-size: 0.85rem; - margin-top: 4rem; - text-align: center; + font-size: 0.85rem; + margin-top: 4rem; + text-align: center; } - /* Patterns navigation */ .patterns { - overflow: auto; - margin-top: 1.5rem; + overflow: auto; + margin-top: 1.5rem; } - .patterns * { - margin-top: 0; + margin-top: 0; } - .patterns h3 { - font-size: 1rem; + font-size: 1rem; } - .patterns h3 + ul { - margin-top: 0.75rem; + margin-top: 0.75rem; } - .patterns li { - line-height: 1.125; - list-style: none; + line-height: 1.125; + list-style: none; } - .patterns li + li { - margin-top: 0.75rem; + margin-top: 0.75rem; } - .patterns ul ul { - margin-left: 0.75rem; + margin-left: 0.75rem; } - .pattern a { - border: 0; - display: flex; - flex-wrap: nowrap; - align-items: baseline; - font-weight: bold; + border: 0; + display: flex; + flex-wrap: nowrap; + align-items: baseline; + font-weight: bold; } - .pattern a:focus { - outline: none; + outline: none; } - -.pattern a:focus span { - outline: -} - .pattern span { - margin-left: 0.125rem; + margin-left: 0.125rem; } - .pattern [aria-current] { - background-color: #111; - background-image: url(images/arrow_effect.svg); - background-position: right center; - background-size: 125%; - background-repeat: no-repeat; - color: #fff; - padding: 0.5em 1em 0.5em; + background-color: #111; + background-image: url(images/arrow_effect.svg); + background-position: right center; + background-size: 125%; + background-repeat: no-repeat; + color: #fff; + padding: 0.5em 1em 0.5em; } - /* menu button */ #menu-button { - display: none; - width: 100%; - text-align: center; + display: none; + width: 100%; + text-align: center; } - #menu-button:focus { - outline: none; - box-shadow: inset 0 0 0 0.25rem #ccc; + outline: none; + box-shadow: inset 0 0 0 0.25rem #ccc; } - /* Tables of contents */ .toc { - font-size: 0.85rem; - border: 1px solid; - padding: 1.5rem; + font-size: 0.85rem; + border: 1px solid; + padding: 1.5rem; } - .toc h2 { - font-size: 1rem; + font-size: 1rem; } - .toc ol { - margin-left: 0.75rem; - margin-top: 0.5rem; + margin-left: 0.75rem; + margin-top: 0.5rem; } - /* Pattern lists */ .patterns-list { - list-style: none; - margin-left: 0; + list-style: none; + margin-left: 0; } - .patterns-list h2 { - font-size: 1.25rem; + font-size: 1.25rem; } - .patterns-list li + li { - margin-top: 1rem; - padding-top: 1rem; - border-top: 2px solid; + margin-top: 1rem; + padding-top: 1rem; + border-top: 2px solid; } - .patterns-list a { - border: 0; + border: 0; } - /* Tags */ .tags { - margin-top: 0; - font-size: 0.85rem; + margin-top: 0; + font-size: 0.85rem; } - .tags * { - display: inline; - margin: 0; + display: inline; + margin: 0; } - .tags strong { - margin-right: 0.25rem; + margin-right: 0.25rem; } - .tags li { - white-space: nowrap; - margin: 0 0.25rem 0 0; + white-space: nowrap; + margin: 0 0.25rem 0 0; } - /* Notes and warnings */ .note { - border-left: 0.5rem solid; - font-size: 0.85rem; + border-left: 0.5rem solid; + font-size: 0.85rem; } - .note svg { - height: 2.25rem; - width: auto; + height: 2.25rem; + width: auto; } - .note > div { - margin-left: 0.75rem; + margin-left: 0.75rem; } - .note > div > img:first-child { - height: 1.5rem; + height: 1.5rem; } - -.note > div > :first-child + * { - margin-top: 0; +.note > div >:first-child + * { + margin-top: 0; } - .note.warning { - border-left: 0; - background-image: url(images/stripe.svg); - background-size: 0.5rem auto; - background-repeat: repeat-y; + border-left: 0; + background-image: url(images/stripe.svg); + background-size: 0.5rem auto; + background-repeat: repeat-y; } - .note.warning > div { - margin-left: 1.25rem; + margin-left: 1.25rem; } - /* Tick lists */ .ticks li { - list-style: none; - position: relative; + list-style: none; + position: relative; } - .ticks li::before { - 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; + 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; } - /* Figures */ figure { - text-align: center; + text-align: center; } - figcaption { - font-size: 0.85rem; - font-style: italic; - margin-top: 0.5rem; + font-size: 0.85rem; + font-style: italic; + margin-top: 0.5rem; } - main { - display: block; - counter-reset: fig; - min-height: 100vh; + display: block; + counter-reset: fig; + min-height: 100vh; } - figcaption::before { - counter-increment: fig; - content: 'Figure ' counter(fig) ':\0020'; - font-weight: bold; + counter-increment: fig; + content: 'Figure ' counter(fig) ':\0020'; + font-weight: bold; } - /* Code blocks */ pre[class*=language-] { - background: none; - margin-top: 2.25rem; - margin-bottom: 0; - overflow-y: hidden; - overflow-x: auto; + background: none; + margin-top: 2.25rem; + margin-bottom: 0; + overflow-y: hidden; + overflow-x: auto; } - pre[class*=language-][data-line] { - padding: 1em 0 0 2.25rem; + padding: 1em 0 0 2.25rem; } - pre[class*=language-] code * { - margin-top: 0 !important; + margin-top: 0 !important; } - [data-codeblock-shortcode] { - display: block; - margin-top: -1rem; + display: block; + margin-top: -1rem; } - .token.property, .token.tag, .token.boolean, @@ -576,477 +483,391 @@ pre[class*=language-] code * { .token.constant, .token.symbol, .token.deleted { - color: #888; + color: #888; } - .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { - color: #111; + color: #111; } - .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { - color: #333; - background: none; + color: #333; + background: none; } - .token.atrule, .token.attr-value, .token.keyword { - color: #666; + color: #666; } - .token.function { - color: #888; + color: #888; } - .line-numbers code { - padding-left: 3rem; - margin-top: -1rem; - overflow-x: auto; - overflow-y: hidden; + padding-left: 3rem; + margin-top: -1rem; + overflow-x: auto; + overflow-y: hidden; } - .line-numbers { - padding: 1.5rem !important; + padding: 1.5rem !important; } - .line-numbers .line-numbers-rows { - margin-left: 2.25rem; - left: -3.5em; - top: 1.25rem; - color: #111; - border-color: #111; + margin-left: 2.25rem; + left: -3.5em; + top: 1.25rem; + color: #111; + border-color: #111; } - .line-numbers-rows > span:before { - color: inherit; + color: inherit; } - /* file tree lists */ .file-tree { - overflow-x: auto; + overflow-x: auto; } - .file-tree ul { - font-family: Courier, monospace; - margin: 0; - padding: 0; - padding-left: 3rem; - list-style: none; - line-height: 1.25; - position: relative; + font-family: Courier, monospace; + margin: 0; + padding: 0; + padding-left: 3rem; + list-style: none; + line-height: 1.25; + position: relative; } - .file-tree > ul { - padding-left: 0; - overflow-x: auto; + padding-left: 0; + overflow-x: auto; } - .file-tree li { - background: #fff; - position: relative; - white-space: nowrap; + background: #fff; + position: relative; + white-space: nowrap; } - .file-tree li + li { - margin-top: 0; + margin-top: 0; } - .file-tree li:not(:last-child) > ul::before { - 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; + 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; } - .file-tree li::before { - content: '\251C\2500\2500\0020'; + content: '\251C\2500\2500\0020'; } - .file-tree li:last-child::before { - content: '\2514\2500\2500\0020'; + content: '\2514\2500\2500\0020'; } - /* Expandable sections */ .expandable-section { - border-top: 1px solid; - border-bottom: 1px solid; - padding: 0.75rem 0; + border-top: 1px solid; + border-bottom: 1px solid; + padding: 0.75rem 0; } - [id^="js-expandable-"] { - margin: 0; - padding: 1.5rem 0 0.75rem; + margin: 0; + padding: 1.5rem 0 0.75rem; } - @media screen { - - .expandable-section + .expandable-section { - margin-top: 0; - border-top: 0; - } - + .expandable-section + .expandable-section { + margin-top: 0; + border-top: 0; + } } - [data-expands] { - 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; + 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; } - [data-expands] svg { - margin-top: 0; - width: 1em; - height: 1em; + margin-top: 0; + width: 1em; + height: 1em; } - [data-expands][aria-expanded="true"] svg .up-strut { - display: none; + display: none; } - [data-expands]:focus { - outline: none; + outline: none; } - p:empty { - display: none; + display: none; } - *:not(p) + p:empty + p { - margin-top: 2.25rem; + margin-top: 2.25rem; } - /* WCAG and principles */ .wcag ul li { - font-size: 0.85em; + font-size: 0.85em; } - .principles p { - font-size: 0.85rem; - margin-top: 0.75rem; + font-size: 0.85rem; + margin-top: 0.75rem; } - .principles.with-desc > li + li, .wcag.with-desc > li + li { - border-top: 1px solid; - margin-top: 0.75rem; - padding-top: 0.75rem; + border-top: 1px solid; + margin-top: 0.75rem; + padding-top: 0.75rem; } - /* Site errors */ .site-error { - padding: 1.5rem; - background: #efefef; + padding: 1.5rem; + background: #efefef; } - .site-error strong { - color: #C83737; + color: #C83737; } - /* SVG icons */ -a svg, button svg, h1 svg { - height: 0.75em; - width: auto; - margin-right: 0.25em; -} - -h1 svg, li > svg, h2 a svg { - height: 1em; - vertical-align: middle; -} - +a svg, +button svg, h1 svg { - margin-right: 0; + height: 0.75em; + width: auto; + margin-right: 0.25em; +} +h1 svg, +li > svg, +h2 a svg { + height: 1em; + vertical-align: middle; +} +h1 svg { + margin-right: 0; } - .print { - white-space: nowrap; + white-space: nowrap; } - .svg-outer { - width: 0.75em; - display: inline-block; - vertical-align: middle; + width: 0.75em; + display: inline-block; + vertical-align: middle; } - /* Color palettes */ .colors { - display: flex; - height: 5rem; - margin: -0.25rem; - list-style: none; - flex-wrap: nowrap; + display: flex; + height: 5rem; + margin: -0.25rem; + list-style: none; + flex-wrap: nowrap; } - .colors li { - margin: 0.25rem; - flex: 1 0 auto; - position: relative; + margin: 0.25rem; + flex: 1 0 auto; + position: relative; } - .colors span { - line-height: 1; - background-color: #111; - color: #fff; - font-size: 0.75rem; - padding: 0.25rem; - position: absolute; - bottom: 0.25rem; - right: 0.25rem; + line-height: 1; + background-color: #111; + color: #fff; + font-size: 0.75rem; + padding: 0.25rem; + position: absolute; + bottom: 0.25rem; + right: 0.25rem; } - /* cross references */ .pattern-link { - font-weight: bold; + font-weight: bold; } - /* inline demos */ [id^="js-demo-"] { - all: initial; - display: block; + all: initial; + display: block; } - /* Section links */ .h2-container { - position: relative; - font-size: 1.66rem; + position: relative; + font-size: 1.66rem; } - .h2-container a { - position: absolute; - margin-top: 0; - top: 0; - line-height: 1; - left: -1em; - border: 0; + position: absolute; + margin-top: 0; + top: 0; + line-height: 1; + left: -1em; + border: 0; } - /* Single page layout */ .wrapper.print-version .main-and-footer { - margin-left: 0; -} - -.wrapper.print-version .intro-and-nav { - position: static; - border: 0; - width: auto; - text-align: center; - display: flex; - align-items: center; - justify-content: center; -} - -.wrapper.print-version main { - min-height: 0; -} - -.wrapper.print-version .library-desc { - font-size: 1rem; -} - -.wrapper.print-version .intro-and-nav > div { - height: auto; -} - -.wrapper.print-version #patterns-list { - margin-left: 0; - margin-top: 1.5rem; - display: block; -} - -.wrapper.print-version .toc { - font-size: 1rem; -} - -.wrapper.print-version .toc h2 { - font-size: 1.66rem; -} - -.wrapper.print-version #patterns-list h3 { - font-size: 1.25rem; -} - -.pattern-section:not(:last-child) { - padding-bottom: 2.25rem; - border-bottom: 2px solid; -} - -.pattern-section h1 { - padding: 0 !important; -} - -@media screen and (max-width: 45em) { - - [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; - } - - [aria-expanded="true"] + #patterns-list { - display: block; - } - - .tested th, .tested td { - display: block; - } - - .tested td + td { - border-top: 0; - } - -} - -@media print { - - .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: ''; - } - - .cmd { - 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; - } - +} +.wrapper.print-version .intro-and-nav { + position: static; + border: 0; + width: auto; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} +.wrapper.print-version main { + min-height: 0; +} +.wrapper.print-version .library-desc { + font-size: 1rem; +} +.wrapper.print-version .intro-and-nav > div { + height: auto; +} +.wrapper.print-version #patterns-list { + margin-left: 0; + margin-top: 1.5rem; + display: block; +} +.wrapper.print-version .toc { + font-size: 1rem; +} +.wrapper.print-version .toc h2 { + font-size: 1.66rem; +} +.wrapper.print-version #patterns-list h3 { + font-size: 1.25rem; +} +.pattern-section:not(:last-child) { + padding-bottom: 2.25rem; + border-bottom: 2px solid; +} +.pattern-section h1 { + padding: 0 !important; +} +@media screen and (max-width: 45em) { + [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; + } + [aria-expanded="true"] + #patterns-list { + display: block; + } + .tested th, + .tested td { + display: block; + } + .tested td + td { + border-top: 0; + } +} +@media print { + .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: ''; + } + .cmd { + 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; + } } diff --git a/themes/infusion/static/js/dom-scripts.js b/themes/infusion/static/js/dom-scripts.js index 59bfa4b..f960597 100644 --- a/themes/infusion/static/js/dom-scripts.js +++ b/themes/infusion/static/js/dom-scripts.js @@ -31,19 +31,21 @@ /* persist navigation scroll point */ (function () { - var patternsNav = document.getElementById('patterns-nav') - if (patternsNav) { - var scrollPoint = patternsNav.scrollTop - window.onunload = function () { + window.onunload = function () { + var patternsNav = document.getElementById('patterns-nav') + if (patternsNav) { + var scrollPoint = patternsNav.scrollTop localStorage.setItem('scrollPoint', scrollPoint) } } window.addEventListener('DOMContentLoaded', function () { - if (window.location.href.indexOf('patterns/') !== -1) { - scrollPoint = parseInt(localStorage.getItem('scrollPoint')) - } else { - scrollPoint = 0 + if (document.getElementById('patterns-nav')) { + if (window.location.href.indexOf('patterns/') !== -1) { + document.getElementById('patterns-nav').scrollTop = parseInt(localStorage.getItem('scrollPoint')) + } else { + document.getElementById('patterns-nav').scrollTop = 0 + } } }) }());