|
|
@@ -1,1022 +0,0 @@
|
|
|
-/* Fonts */
|
|
|
-@font-face {
|
|
|
- font-family: 'Miriam Libre';
|
|
|
- src: url('http://localhost:1313/css/fonts/miriamlibre-bold.woff2') format('woff2'), url('http://localhost:1313/css/fonts/miriamlibre-bold.woff') format('woff');
|
|
|
- font-weight: bold;
|
|
|
- font-style: normal;
|
|
|
-}
|
|
|
-*,
|
|
|
-*::before,
|
|
|
-*::after {
|
|
|
- font-family: inherit;
|
|
|
- background-color: inherit;
|
|
|
- color: inherit;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-html {
|
|
|
- font-size: calc(1em + 0.33vw);
|
|
|
- font-family: Arial, Helvetica Neue, sans-serif;
|
|
|
- line-height: 1.5;
|
|
|
- color: #111;
|
|
|
- background-color: #fefefe;
|
|
|
-}
|
|
|
-template {
|
|
|
- display: none !important;
|
|
|
-}
|
|
|
-* + * {
|
|
|
- margin-top: 2.25rem;
|
|
|
-}
|
|
|
-br,
|
|
|
-dt,
|
|
|
-dd,
|
|
|
-th,
|
|
|
-td,
|
|
|
-option,
|
|
|
-[hidden] + *,
|
|
|
-li + li,
|
|
|
-body,
|
|
|
-.main-and-footer {
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-p + p {
|
|
|
- margin-top: 0.75rem;
|
|
|
-}
|
|
|
-.priority {
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-a {
|
|
|
- text-decoration: none;
|
|
|
- border-bottom: 1px solid;
|
|
|
-}
|
|
|
-abbr {
|
|
|
- text-decoration: none;
|
|
|
- cursor: help;
|
|
|
- border-bottom: 1px dashed;
|
|
|
-}
|
|
|
-img {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 50vh;
|
|
|
-}
|
|
|
-.img-link {
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-p img {
|
|
|
- margin: 0.75rem 0;
|
|
|
-}
|
|
|
-figure p img {
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-:focus:not([tabindex="-1"]),
|
|
|
-[data-expands]:focus svg,
|
|
|
-.patterns a:focus .text,
|
|
|
-[for="themer"] :focus + [aria-hidden] {
|
|
|
- outline: 4px solid #999;
|
|
|
-}
|
|
|
-a {
|
|
|
- outline-offset: 2px;
|
|
|
-}
|
|
|
-
|
|
|
-/* Fix for IE :( */
|
|
|
-[tabindex="-1"]:focus,
|
|
|
-div:not([tabindex]):focus {
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-[hidden] {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
-/* Skip link */
|
|
|
-[href="#main"] {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- padding: 0.75rem;
|
|
|
- color: #fefefe;
|
|
|
- background: #000;
|
|
|
- position: absolute;
|
|
|
- top: -3rem;
|
|
|
- text-align: center;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-[href="#main"]:focus {
|
|
|
- top: 0;
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-
|
|
|
-/* Text styles */
|
|
|
-h1,
|
|
|
-h2,
|
|
|
-h3,
|
|
|
-h4 {
|
|
|
- font-family: Miriam Libre, serif;
|
|
|
- line-height: 1.125;
|
|
|
-}
|
|
|
-h1 {
|
|
|
- font-size: 2rem;
|
|
|
-}
|
|
|
-h2 {
|
|
|
- font-size: 1.66rem;
|
|
|
-}
|
|
|
-h3 {
|
|
|
- font-size: 1.25rem;
|
|
|
-}
|
|
|
-h4,
|
|
|
-h5 {
|
|
|
- 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;
|
|
|
-}
|
|
|
-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;
|
|
|
-}
|
|
|
-.cmd {
|
|
|
- padding: 0.75rem;
|
|
|
- background: #111;
|
|
|
-}
|
|
|
-.cmd code {
|
|
|
- color: #fefefe;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-.cmd code::before {
|
|
|
- content: '$';
|
|
|
- font-weight: bold;
|
|
|
- padding-right: 0.25em;
|
|
|
-}
|
|
|
-
|
|
|
-/* Lists */
|
|
|
-main ul,
|
|
|
-main ol {
|
|
|
- margin-left: 2.25rem;
|
|
|
-}
|
|
|
-main li + li {
|
|
|
- margin-top: 0.5rem;
|
|
|
-}
|
|
|
-main ul ul, main ol ol, main li ul, main li ol {
|
|
|
- margin-top: 0.5rem;
|
|
|
-}
|
|
|
-ol ol {
|
|
|
- list-style: lower-latin;
|
|
|
-}
|
|
|
-ol ol ol {
|
|
|
- list-style: lower-roman;
|
|
|
-}
|
|
|
-main dt {
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-main dd {
|
|
|
- padding-left: 2rem;
|
|
|
-}
|
|
|
-dd ul {
|
|
|
- margin-left: 0;
|
|
|
-}
|
|
|
-dd li + li {
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* Blockquotes */
|
|
|
-blockquote {
|
|
|
- border-left: 0.5rem solid;
|
|
|
- padding-left: 0.75rem;
|
|
|
-}
|
|
|
-blockquote .author {
|
|
|
- font-size: 0.85rem;
|
|
|
-}
|
|
|
-
|
|
|
-/* Buttons */
|
|
|
-button {
|
|
|
- font-size: 1.25rem;
|
|
|
- border-radius: 0.33em;
|
|
|
- font-family: inherit;
|
|
|
- background: #111;
|
|
|
- color: #fefefe;
|
|
|
- padding: 0.75rem;
|
|
|
- border: 0;
|
|
|
-}
|
|
|
-[data-launch] {
|
|
|
- font-size: 0.66rem !important;
|
|
|
- padding: 0.5rem !important;
|
|
|
- margin-top: 0 !important;
|
|
|
- border-radius: 0 !important;
|
|
|
- border-top-left-radius: 0.33rem !important;
|
|
|
- box-shadow: none !important;
|
|
|
- background: #111 !important;
|
|
|
- color: #fefefe !important;
|
|
|
- position: absolute !important;
|
|
|
- right: 0 !important;
|
|
|
- bottom: 0 !important;
|
|
|
-}
|
|
|
-
|
|
|
-/* Forms */
|
|
|
-label {
|
|
|
- display: inline-block;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-[for="themer"] {
|
|
|
- background: #111;
|
|
|
- border-radius: 0.33em;
|
|
|
- color: #fefefe;
|
|
|
- padding: 0.25em 0.75em;
|
|
|
- margin: 0.5rem;
|
|
|
-}
|
|
|
-[for="themer"] [aria-hidden]::before {
|
|
|
- content: 'off';
|
|
|
-}
|
|
|
-[for="themer"] :checked + [aria-hidden]::before {
|
|
|
- content: 'on';
|
|
|
-}
|
|
|
-
|
|
|
-/* Tables */
|
|
|
-table {
|
|
|
- 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 {
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-th:empty {
|
|
|
- border: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* Tested using... table */
|
|
|
-.tested {
|
|
|
- text-align: center;
|
|
|
- border: 1px solid #111;
|
|
|
-}
|
|
|
-.tested tr {
|
|
|
- display: flex;
|
|
|
- flex-flow: row wrap;
|
|
|
-}
|
|
|
-.tested td, .tested th {
|
|
|
- vertical-align: middle;
|
|
|
- overflow: hidden;
|
|
|
- flex: 1 0 auto;
|
|
|
- border: 1px solid #111;
|
|
|
-}
|
|
|
-.tested th {
|
|
|
- width: 100%;
|
|
|
- background-color: #111;
|
|
|
- color: #fefefe;
|
|
|
- outline-color: #111;
|
|
|
-}
|
|
|
-.tested img {
|
|
|
- max-width: 3rem;
|
|
|
-}
|
|
|
-.tested span {
|
|
|
- display: block;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.tested .additional {
|
|
|
- font-size: 0.85rem;
|
|
|
-}
|
|
|
-caption {
|
|
|
- font-size: 1.125rem;
|
|
|
- padding-bottom: 0.25rem;
|
|
|
- font-style: italic;
|
|
|
-}
|
|
|
-
|
|
|
-/* Page structure */
|
|
|
-.wrapper {
|
|
|
- position: relative;
|
|
|
- margin-top: 0;
|
|
|
- overflow-x: hidden;
|
|
|
-}
|
|
|
-.intro-and-nav {
|
|
|
- font-size: 0.8rem;
|
|
|
- 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%;
|
|
|
-}
|
|
|
-.intro {
|
|
|
- flex: 0 0 auto;
|
|
|
-}
|
|
|
-.patterns {
|
|
|
- flex: 1 1 auto;
|
|
|
-}
|
|
|
-.logo {
|
|
|
- border: 0;
|
|
|
-}
|
|
|
-.logo img {
|
|
|
- width: 100%;
|
|
|
- max-width: 12rem;
|
|
|
-}
|
|
|
-.library-desc {
|
|
|
- margin-top: 0.5rem;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- max-width: 25rem;
|
|
|
-}
|
|
|
-.main-and-footer {
|
|
|
- margin-left: 15rem;
|
|
|
-}
|
|
|
-.main-and-footer > div {
|
|
|
- max-width: 40rem;
|
|
|
- margin: 0 auto;
|
|
|
- padding: 2.25rem;
|
|
|
-}
|
|
|
-[role="contentinfo"] {
|
|
|
- font-size: 0.85rem;
|
|
|
- margin-top: 4rem;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-/* Patterns navigation */
|
|
|
-.patterns {
|
|
|
- overflow: auto;
|
|
|
- margin-top: 1.5rem;
|
|
|
-}
|
|
|
-.patterns * {
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-.patterns h3 {
|
|
|
- font-size: 1rem;
|
|
|
-}
|
|
|
-.patterns h3 + ul {
|
|
|
- margin-top: 0.75rem;
|
|
|
-}
|
|
|
-.patterns li {
|
|
|
- line-height: 1.125;
|
|
|
- list-style: none;
|
|
|
-}
|
|
|
-.patterns li + li {
|
|
|
- margin-top: 0.75rem;
|
|
|
-}
|
|
|
-.patterns ul ul {
|
|
|
- margin-left: 0.75rem;
|
|
|
-}
|
|
|
-.pattern a {
|
|
|
- border: 0;
|
|
|
- display: flex;
|
|
|
- flex-wrap: nowrap;
|
|
|
- align-items: baseline;
|
|
|
- font-weight: bold;
|
|
|
- padding: 0 1rem;
|
|
|
-}
|
|
|
-.pattern a:focus {
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-.pattern span {
|
|
|
- margin-left: 0.125rem;
|
|
|
-}
|
|
|
-
|
|
|
-/* After */
|
|
|
-.pattern [aria-current] {
|
|
|
- background-color: #111;
|
|
|
- clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
|
|
|
- color: #fefefe;
|
|
|
- padding-top: 0.5em;
|
|
|
- padding-bottom: 0.5em;
|
|
|
-}
|
|
|
-
|
|
|
-/* Menu button */
|
|
|
-#menu-button {
|
|
|
- display: none;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-#menu-button:focus {
|
|
|
- outline: none;
|
|
|
- box-shadow: inset 0 0 0 0.25rem #999;
|
|
|
-}
|
|
|
-
|
|
|
-/* Tables of contents */
|
|
|
-.toc {
|
|
|
- font-size: 0.85rem;
|
|
|
- border: 1px solid;
|
|
|
- padding: 1.5rem;
|
|
|
-}
|
|
|
-.toc h2 {
|
|
|
- font-size: 1rem;
|
|
|
-}
|
|
|
-.toc ol {
|
|
|
- margin-left: 0.75rem;
|
|
|
- margin-top: 0.5rem;
|
|
|
-}
|
|
|
-
|
|
|
-/* Disqus Comments */
|
|
|
-#disqus-container {
|
|
|
- font-size: 0.85rem;
|
|
|
- border: 1px solid;
|
|
|
- padding: 1.5rem;
|
|
|
- max-height: 50vh !important;
|
|
|
-}
|
|
|
-#disqus-button {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-#disqus-comments {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-
|
|
|
-/* Pattern lists */
|
|
|
-.patterns-list {
|
|
|
- list-style: none;
|
|
|
- margin-left: 0;
|
|
|
-}
|
|
|
-.patterns-list h2 {
|
|
|
- font-size: 1.25rem;
|
|
|
- line-height: 1.6;
|
|
|
-}
|
|
|
-.patterns-list li + li {
|
|
|
- margin-top: 1rem;
|
|
|
- padding-top: 1rem;
|
|
|
- border-top: 2px solid;
|
|
|
-}
|
|
|
-.patterns-list a {
|
|
|
- border: 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* Tags */
|
|
|
-.tags {
|
|
|
- margin-top: 0;
|
|
|
- font-size: 0.85rem;
|
|
|
-}
|
|
|
-.tags * {
|
|
|
- display: inline;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.tags strong {
|
|
|
- margin-right: 0.25rem;
|
|
|
-}
|
|
|
-.tags li {
|
|
|
- white-space: nowrap;
|
|
|
- margin: 0 0.25rem 0 0;
|
|
|
-}
|
|
|
-
|
|
|
-/* Date */
|
|
|
-.date {
|
|
|
- margin-top: 0;
|
|
|
- font-size: 0.85rem;
|
|
|
-}
|
|
|
-
|
|
|
-/* Notes and warnings */
|
|
|
-.note {
|
|
|
- border-left: 0.5rem solid;
|
|
|
- font-size: 0.85rem;
|
|
|
-}
|
|
|
-.note .sign {
|
|
|
- height: 2.25rem;
|
|
|
- width: 2.25rem;
|
|
|
-}
|
|
|
-.note > div {
|
|
|
- margin-left: 0.75rem;
|
|
|
-}
|
|
|
-.note > div > img:first-child {
|
|
|
- height: 1.5rem;
|
|
|
-}
|
|
|
-.note > div >:first-child + * {
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-.note.warning {
|
|
|
- border-left: 0;
|
|
|
- background-image: url(http://localhost:1313/css/images/stripe.svg);
|
|
|
- background-size: 0.5rem auto;
|
|
|
- background-repeat: repeat-y;
|
|
|
-}
|
|
|
-.note.warning > div {
|
|
|
- margin-left: 1.25rem;
|
|
|
-}
|
|
|
-
|
|
|
-/* Tick lists */
|
|
|
-.ticks li {
|
|
|
- list-style: none;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.ticks li::before {
|
|
|
- content: '';
|
|
|
- display: inline-block;
|
|
|
- width: 1rem;
|
|
|
- height: 1rem;
|
|
|
- margin-right: 0.25rem;
|
|
|
- background-image: url(http://localhost:1313/css/images/icon-tick.svg);
|
|
|
- background-size: 100% auto;
|
|
|
- position: absolute;
|
|
|
- left: -1.25rem;
|
|
|
- top: 0.25rem;
|
|
|
-}
|
|
|
-
|
|
|
-/* Figures */
|
|
|
-figure {
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-figcaption {
|
|
|
- font-size: 0.85rem;
|
|
|
- font-style: italic;
|
|
|
- margin-top: 0.5rem;
|
|
|
-}
|
|
|
-main {
|
|
|
- display: block;
|
|
|
- counter-reset: fig;
|
|
|
- min-height: 100vh;
|
|
|
-}
|
|
|
-figcaption::before {
|
|
|
- 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;
|
|
|
-}
|
|
|
-code[class*="language-"], pre[class*="language-"] {
|
|
|
- text-shadow: none;
|
|
|
- /* filter: grayscale(100%); */
|
|
|
-}
|
|
|
-pre[class*=language-][data-line] {
|
|
|
- padding: 1em 0 0 2.25rem;
|
|
|
-}
|
|
|
-pre[class*=language-] code * {
|
|
|
- margin-top: 0 !important;
|
|
|
-}
|
|
|
-[data-codeblock-shortcode], .code-annotated code {
|
|
|
- display: inline-block;
|
|
|
- margin-top: -1rem;
|
|
|
-}
|
|
|
-.code-annotated {
|
|
|
- overflow-y: hidden;
|
|
|
- overflow-x: auto;
|
|
|
- padding: 1.5rem;
|
|
|
- border: 1px solid;
|
|
|
- white-space: pre;
|
|
|
- counter-reset: annotation;
|
|
|
-}
|
|
|
-.highlight {
|
|
|
- background: #ddd;
|
|
|
- padding: 0.0625rem 0.33rem;
|
|
|
- border-radius: 0.5rem;
|
|
|
-}
|
|
|
-.numbered .highlight::after,
|
|
|
-.code-annotated.numbered + ol li::before {
|
|
|
- counter-increment: annotation;
|
|
|
- content: counter(annotation);
|
|
|
- font-weight: bold;
|
|
|
- font-size: 0.5rem;
|
|
|
- background: #111;
|
|
|
- color: #fefefe;
|
|
|
- border-radius: 1rem;
|
|
|
- margin-left: 0.25rem;
|
|
|
- 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 {
|
|
|
- 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;
|
|
|
-}
|
|
|
-.file-tree > ul {
|
|
|
- padding-left: 0;
|
|
|
- overflow-x: auto;
|
|
|
- overflow-y: hidden;
|
|
|
-}
|
|
|
-.file-tree li {
|
|
|
- background: #fefefe;
|
|
|
- position: relative;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-.file-tree li + li {
|
|
|
- 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;
|
|
|
-}
|
|
|
-.file-tree li::before {
|
|
|
- content: '\251C\2500\2500\0020';
|
|
|
-}
|
|
|
-.file-tree li:last-child::before {
|
|
|
- content: '\2514\2500\2500\0020';
|
|
|
-}
|
|
|
-
|
|
|
-/* Expandable sections */
|
|
|
-.expandable-section {
|
|
|
- border-top: 1px solid;
|
|
|
- border-bottom: 1px solid;
|
|
|
- padding: 0.75rem 0;
|
|
|
-}
|
|
|
-[id^="js-expandable-"] {
|
|
|
- margin: 0;
|
|
|
- padding: 1.5rem 0 0.75rem;
|
|
|
-}
|
|
|
-@media screen {
|
|
|
- .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;
|
|
|
-}
|
|
|
-[data-expands] svg {
|
|
|
- margin-top: 0;
|
|
|
- width: 1em;
|
|
|
- height: 1em;
|
|
|
-}
|
|
|
-[data-expands][aria-expanded="true"] svg .up-strut {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-[data-expands]:focus {
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-p:empty {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-*:not(p) + p:empty + p {
|
|
|
- margin-top: 2.25rem;
|
|
|
-}
|
|
|
-
|
|
|
-/* WCAG and principles */
|
|
|
-.wcag li {
|
|
|
- font-size: 0.85em;
|
|
|
-}
|
|
|
-.principles p {
|
|
|
- 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;
|
|
|
-}
|
|
|
-
|
|
|
-/* Site errors */
|
|
|
-.site-error {
|
|
|
- padding: 1.5rem;
|
|
|
- background: #efefef;
|
|
|
-}
|
|
|
-.site-error strong {
|
|
|
- color: #C83737;
|
|
|
-}
|
|
|
-
|
|
|
-/* SVG icons */
|
|
|
-a svg,
|
|
|
-button svg,
|
|
|
-h1 svg,
|
|
|
-th svg,
|
|
|
-li > svg {
|
|
|
- height: 0.75em;
|
|
|
- width: 0.75em;
|
|
|
- margin-right: 0.25em;
|
|
|
-}
|
|
|
-h1 svg {
|
|
|
- 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;
|
|
|
-}
|
|
|
-.print {
|
|
|
- white-space: nowrap;
|
|
|
- font-style: normal;
|
|
|
-}
|
|
|
-
|
|
|
-/* Color palettes */
|
|
|
-.colors {
|
|
|
- display: flex;
|
|
|
- height: 5rem;
|
|
|
- margin: -0.25rem;
|
|
|
- list-style: none;
|
|
|
- flex-wrap: nowrap;
|
|
|
-}
|
|
|
-.colors li {
|
|
|
- margin: 0.25rem;
|
|
|
- flex: 1 0 auto;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.colors span {
|
|
|
- line-height: 1;
|
|
|
- background-color: #111;
|
|
|
- color: #fefefe;
|
|
|
- font-size: 0.75rem;
|
|
|
- padding: 0.25rem;
|
|
|
- position: absolute;
|
|
|
- bottom: 0.25rem;
|
|
|
- right: 0.25rem;
|
|
|
-}
|
|
|
-
|
|
|
-/* Cross references */
|
|
|
-.pattern-link {
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-/* 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;
|
|
|
- font-size: 1.66rem;
|
|
|
-}
|
|
|
-.h2-container a {
|
|
|
- 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;
|
|
|
-}
|
|
|
-.wrapper.print-version .patterns {
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-.pattern-section:not(:last-child) {
|
|
|
- padding-bottom: 2.25rem;
|
|
|
- border-bottom: 2px solid;
|
|
|
-}
|
|
|
-.pattern-section h1 {
|
|
|
- padding: 0 !important;
|
|
|
-}
|
|
|
-
|
|
|
-/* Custom 404 */
|
|
|
-.custom-404 {
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.custom-404 * {
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.custom-404 svg {
|
|
|
- max-width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-/* Utilities */
|
|
|
-.vh {
|
|
|
- clip: rect(1px, 1px, 1px, 1px);
|
|
|
- height: 1px;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- white-space: nowrap;
|
|
|
- width: 1px;
|
|
|
-}
|
|
|
-.gallery {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-/* Media queries */
|
|
|
-@media screen and (max-width: 45em) {
|
|
|
- body a {
|
|
|
- hyphens: auto;
|
|
|
- }
|
|
|
- [role="banner"] {
|
|
|
- position: static;
|
|
|
- width: auto;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .intro {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .intro-and-nav {
|
|
|
- border-right: none;
|
|
|
- }
|
|
|
- .intro-and-nav > div {
|
|
|
- padding: 1.5rem;
|
|
|
- }
|
|
|
- .main-and-footer {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- 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;
|
|
|
- }
|
|
|
- .patterns li:not(.pattern) {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- .patterns ul ul {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- .patterns li {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- .pattern {
|
|
|
- font-size: 1rem;
|
|
|
- }
|
|
|
- .pattern a {
|
|
|
- padding: 1rem;
|
|
|
- }
|
|
|
- .pattern [aria-current] {
|
|
|
- clip-path: none;
|
|
|
- padding: 1rem;
|
|
|
- }
|
|
|
- .pattern + .pattern {
|
|
|
- border-top: 1px solid;
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- #menu-button {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- #patterns-list {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .toc-link {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- [aria-expanded="true"] + #patterns-list {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- code {
|
|
|
- word-break: break-all;
|
|
|
- }
|
|
|
-}
|
|
|
-@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 code {
|
|
|
- background: #fefefe;
|
|
|
- color: #111;
|
|
|
- }
|
|
|
- pre code {
|
|
|
- white-space: pre-wrap !important;
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
-}
|
|
|
-@media (-ms-high-contrast: active) {
|
|
|
- img[src*=".svg"] {
|
|
|
- background: #fefefe;
|
|
|
- padding: 0.5rem;
|
|
|
- }
|
|
|
- .ticks li::before {
|
|
|
- content: '✓';
|
|
|
- background: none;
|
|
|
- width: auto;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- .note.warning {
|
|
|
- border-left: 0.5rem solid;
|
|
|
- background: none;
|
|
|
- }
|
|
|
-}
|
Zachary Betz
