diff options
Diffstat (limited to 'releases/_artifacts/v1.0.5/missing.css')
-rw-r--r-- | releases/_artifacts/v1.0.5/missing.css | 2382 |
1 files changed, 2382 insertions, 0 deletions
diff --git a/releases/_artifacts/v1.0.5/missing.css b/releases/_artifacts/v1.0.5/missing.css new file mode 100644 index 0000000..35c468e --- /dev/null +++ b/releases/_artifacts/v1.0.5/missing.css @@ -0,0 +1,2382 @@ +/* Document + * ========================================================================== */ + +/** + * 1. Add border box sizing in all browsers (opinionated). + * 2. Backgrounds do not repeat by default (opinionated). + */ + +*, +::before, +::after { + box-sizing: border-box; /* 1 */ + background-repeat: no-repeat; /* 2 */ +} + +/** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + +::before, +::after { + text-decoration: inherit; /* 1 */ + vertical-align: inherit; /* 2 */ +} + +/** + * 1. Use the default cursor in all browsers (opinionated). + * 3. Breaks words to prevent overflow in all browsers (opinionated). + * 5. Remove the grey highlight on links in iOS (opinionated). + * 6. Prevent adjustments of font size after orientation changes in iOS. + */ + +:root { + cursor: default; /* 1 */ + overflow-wrap: break-word; /* 3 */ + -webkit-tap-highlight-color: transparent; /* 5 */ + text-size-adjust: none; + -webkit-text-size-adjust: none; +} + +/* Text-level semantics + * ========================================================================== */ + +/** + * Add the correct text decoration in Safari. + */ + +abbr[title] { + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +strong, b { + font-weight: bolder; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* Embedded content + * ========================================================================== */ + +/* + * Change the alignment on media elements in all browsers (opinionated). + */ + +audio, canvas, iframe, img, svg, video { + vertical-align: middle; +} + +/** + * Change the fill color to match the text color in all browsers (opinionated). + */ + +svg:not([fill]) { + fill: currentColor; +} + +/* Tabular data + * ========================================================================== */ + +/** + * 1. Collapse border spacing in all browsers (opinionated). + * 2. Correct table border color in Chrome, Edge, and Safari. + * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. + */ + +table { + border-collapse: collapse; /* 1 */ + border-color: currentColor; /* 2 */ + text-indent: 0; /* 3 */ +} + +/* Forms + * ========================================================================== */ + +/** + * Remove the margin on controls in Safari. + */ + +button, input, select { + margin: 0; +} + +/** + * Correct the inability to style buttons in iOS and Safari. + */ + +button, [type="button"], [type="reset"], [type="submit"] { + -webkit-appearance: button; +} + +/** + * Change the inconsistent appearance in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #a0a0a0; +} + +/** + * Add the correct vertical alignment in Chrome, Edge, and Firefox. + */ + +progress { + vertical-align: baseline; +} + +/** + * 1. Remove the margin in Firefox and Safari. + */ + +textarea { + margin: 0; /* 1 */ +} + +/** + * 1. Correct the odd appearance in Chrome, Edge, and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Safari. + */ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + block-size: auto; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * Remove the inner padding in Chrome, Edge, and Safari on macOS. + */ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style upload buttons in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + * ========================================================================== */ + +[hidden] { + display: none !important; +} + +:focus-visible { + outline: .2em solid var(--accent); + z-index: 32; +} + +iframe:focus-visible, + html:focus-visible, + body:focus-visible { + outline: none; + } + +:target { + outline: .2em solid var(--fg); + z-index: 2; +} + +/* + * Add the correct display in Safari. + */ + +details > summary:first-of-type { + display: list-item; +} + +/* Accessibility + * ========================================================================== */ + +/** + * Change the cursor on busy elements in all browsers (opinionated). + */ + +[aria-busy="true"] { + cursor: progress; +} + +/* + * Change the cursor on disabled, not-editable, or otherwise + * inoperable elements in all browsers (opinionated). + */ + +[aria-disabled="true"], [disabled] { + cursor: not-allowed; +} + +datalist { + display: none !important; +} + +/* https://github.com/fchristant/colar/ */ + +:root { + --gray-0: #f8fafb; + --gray-1: #f2f4f6; + --gray-2: #ebedef; + --gray-3: #e0e4e5; + --gray-4: #d1d6d8; + --gray-5: #b1b6b9; + --gray-6: #979b9d; + --gray-7: #7e8282; + --gray-8: #666968; + --gray-9: #50514f; + --gray-10: #3a3a37; + --gray-11: #252521; + --gray-12: #121210; + + --red-0: #fff5f5; + --red-1: #ffe3e3; + --red-2: #ffc9c9; + --red-3: #ffa8a8; + --red-4: #ff8787; + --red-5: #ff6b6b; + --red-6: #fa5252; + --red-7: #f03e3e; + --red-8: #e03131; + --red-9: #c92a2a; + --red-10: #b02525; + --red-11: #962020; + --red-12: #7d1a1a; + + --pink-0: #fff0f6; + --pink-1: #ffdeeb; + --pink-2: #fcc2d7; + --pink-3: #faa2c1; + --pink-4: #f783ac; + --pink-5: #f06595; + --pink-6: #e64980; + --pink-7: #d6336c; + --pink-8: #c2255c; + --pink-9: #a61e4d; + --pink-10: #8c1941; + --pink-11: #731536; + --pink-12: #59102a; + + --purple-0: #f8f0fc; + --purple-1: #f3d9fa; + --purple-2: #eebefa; + --purple-3: #e599f7; + --purple-4: #da77f2; + --purple-5: #cc5de8; + --purple-6: #be4bdb; + --purple-7: #ae3ec9; + --purple-8: #9c36b5; + --purple-9: #862e9c; + --purple-10: #702682; + --purple-11: #5a1e69; + --purple-12: #44174f; + + --violet-0: #f3f0ff; + --violet-1: #e5dbff; + --violet-2: #d0bfff; + --violet-3: #b197fc; + --violet-4: #9775fa; + --violet-5: #845ef7; + --violet-6: #7950f2; + --violet-7: #7048e8; + --violet-8: #6741d9; + --violet-9: #5f3dc4; + --violet-10: #5235ab; + --violet-11: #462d91; + --violet-12: #3a2578; + + --indigo-0: #edf2ff; + --indigo-1: #dbe4ff; + --indigo-2: #bac8ff; + --indigo-3: #91a7ff; + --indigo-4: #748ffc; + --indigo-5: #5c7cfa; + --indigo-6: #4c6ef5; + --indigo-7: #4263eb; + --indigo-8: #3b5bdb; + --indigo-9: #364fc7; + --indigo-10: #2f44ad; + --indigo-11: #283a94; + --indigo-12: #21307a; + + --blue-0: #e7f5ff; + --blue-1: #d0ebff; + --blue-2: #a5d8ff; + --blue-3: #74c0fc; + --blue-4: #4dabf7; + --blue-5: #339af0; + --blue-6: #228be6; + --blue-7: #1c7ed6; + --blue-8: #1971c2; + --blue-9: #1864ab; + --blue-10: #145591; + --blue-11: #114678; + --blue-12: #0d375e; + + --cyan-0: #e3fafc; + --cyan-1: #c5f6fa; + --cyan-2: #99e9f2; + --cyan-3: #66d9e8; + --cyan-4: #3bc9db; + --cyan-5: #22b8cf; + --cyan-6: #15aabf; + --cyan-7: #1098ad; + --cyan-8: #0c8599; + --cyan-9: #0b7285; + --cyan-10: #095c6b; + --cyan-11: #074652; + --cyan-12: #053038; + + --teal-0: #e6fcf5; + --teal-1: #c3fae8; + --teal-2: #96f2d7; + --teal-3: #63e6be; + --teal-4: #38d9a9; + --teal-5: #20c997; + --teal-6: #12b886; + --teal-7: #0ca678; + --teal-8: #099268; + --teal-9: #087f5b; + --teal-10: #066649; + --teal-11: #054d37; + --teal-12: #033325; + + --green-0: #ebfbee; + --green-1: #d3f9d8; + --green-2: #b2f2bb; + --green-3: #8ce99a; + --green-4: #69db7c; + --green-5: #51cf66; + --green-6: #40c057; + --green-7: #37b24d; + --green-8: #2f9e44; + --green-9: #2b8a3e; + --green-10: #237032; + --green-11: #1b5727; + --green-12: #133d1b; + + --lime-0: #f4fce3; + --lime-1: #e9fac8; + --lime-2: #d8f5a2; + --lime-3: #c0eb75; + --lime-4: #a9e34b; + --lime-5: #94d82d; + --lime-6: #82c91e; + --lime-7: #74b816; + --lime-8: #66a80f; + --lime-9: #5c940d; + --lime-10: #4c7a0b; + --lime-11: #3c6109; + --lime-12: #2c4706; + + --yellow-0: #fff9db; + --yellow-1: #fff3bf; + --yellow-2: #ffec99; + --yellow-3: #ffe066; + --yellow-4: #ffd43b; + --yellow-5: #fcc419; + --yellow-6: #fab005; + --yellow-7: #f59f00; + --yellow-8: #f08c00; + --yellow-9: #e67700; + --yellow-10: #b35c00; + --yellow-11: #804200; + --yellow-12: #663500; + + --orange-0: #fff4e6; + --orange-1: #ffe8cc; + --orange-2: #ffd8a8; + --orange-3: #ffc078; + --orange-4: #ffa94d; + --orange-5: #ff922b; + --orange-6: #fd7e14; + --orange-7: #f76707; + --orange-8: #e8590c; + --orange-9: #d9480f; + --orange-10: #bf400d; + --orange-11: #99330b; + --orange-12: #802b09; + + --choco-0: #fff8dc; + --choco-1: #fce1bc; + --choco-2: #f7ca9e; + --choco-3: #f1b280; + --choco-4: #e99b62; + --choco-5: #df8545; + --choco-6: #d46e25; + --choco-7: #bd5f1b; + --choco-8: #a45117; + --choco-9: #8a4513; + --choco-10: #703a13; + --choco-11: #572f12; + --choco-12: #3d210d; + + --brown-0: #faf4eb; + --brown-1: #ede0d1; + --brown-2: #e0cab7; + --brown-3: #d3b79e; + --brown-4: #c5a285; + --brown-5: #b78f6d; + --brown-6: #a87c56; + --brown-7: #956b47; + --brown-8: #825b3a; + --brown-9: #6f4b2d; + --brown-10:#5e3a21; + --brown-11:#4e2b15; + --brown-12: #422412; + + --sand-0: #f8fafb; + --sand-1: #e6e4dc; + --sand-2: #d5cfbd; + --sand-3: #c2b9a0; + --sand-4: #aea58c; + --sand-5: #9a9178; + --sand-6: #867c65; + --sand-7: #736a53; + --sand-8: #5f5746; + --sand-9: #4b4639; + --sand-10:#38352d; + --sand-11:#252521; + --sand-12: #121210; + + --camo-0: #f9fbe7; + --camo-1: #e8ed9c; + --camo-2: #d2df4e; + --camo-3: #c2ce34; + --camo-4: #b5bb2e; + --camo-5: #a7a827; + --camo-6: #999621; + --camo-7: #8c851c; + --camo-8: #7e7416; + --camo-9: #6d6414; + --camo-10: #5d5411; + --camo-11: #4d460e; + --camo-12: #36300a; + + --jungle-0: #ecfeb0; + --jungle-1: #def39a; + --jungle-2: #d0e884; + --jungle-3: #c2dd6e; + --jungle-4: #b5d15b; + --jungle-5: #a8c648; + --jungle-6: #9bbb36; + --jungle-7: #8fb024; + --jungle-8: #84a513; + --jungle-9: #7a9908; + --jungle-10: #658006; + --jungle-11: #516605; + --jungle-12: #3d4d04; +} + +/*** + 4.1 The document element + https://html.spec.whatwg.org/multipage/semantics.html#the-root-element + + 4.3 Sections + https://html.spec.whatwg.org/multipage/sections.html + ***/ + +html { + font-family: var(--main-font); + line-height: var(--rhythm); + + background: var(--bg); + color: var(--fg); + scroll-padding-block-start: calc(4 * var(--gap)); +} + +body { + margin: 0; +} + +header, footer, section + section { + margin-block: calc(2 * var(--gap)); +} + +nav a { + text-decoration: none; + color: var(--accent); + } + +/* SEE components/box.css */ + +aside h1, + aside h2, + aside h3, + aside h4, + aside h5, + aside h6 { + font-size: 1em; + text-transform: none; + letter-spacing: none; + } + +aside.big { + /* Pull quote */ + background: none; + border: none; + border-inline-start: 1px solid var(--muted-fg); + border-radius: 0; + padding: 0; + padding-inline-start: var(--rhythm); + font-style: italic; + color: var(--accent); + } + +h1, h2, h3, h4, h5, h6, +.\<h1\>, .\<h2\>, .\<h3\>, .\<h4\>, .\<h5\>, .\<h6\> { + margin-block-end: var(--gap); + font-family: var(--secondary-font); + font-size: 1em; + margin-block-start: calc(2 * var(--gap)); + position: relative; +} + +h1, .\<h1\> { + font-size: 2em; + text-transform: none; + line-height: calc(2 * var(--rhythm)); + letter-spacing: 0; +} + +h2, .\<h2\> { + font-size: 1.6em; + text-transform: none; + line-height: calc(1.5 * var(--rhythm)); + letter-spacing: 0; +} + +h3, .\<h3\> { + font-size: 1.17em; + line-height: calc(1 * var(--rhythm)); +} + +h4, .\<h4\>, h5, .\<h5\>, h6, .\<h6\> { + font-size: 1em; + text-transform: none; + line-height: calc(1 * var(--rhythm)); + letter-spacing: 0; + margin-block-start: var(--gap); +} + +h1 + h2, +h2 + h3, +h3 + h4, +h4 + h5, +h5 + h6, +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child { + margin-block-start: var(--gap); +} + +h1:target, +h2:target, +h3:target, +h4:target, +h5:target, +h6:target { + outline: none +} + +h1:target::before, h2:target::before, h3:target::before, h4:target::before, h5:target::before, h6:target::before { + content: ""; + display: block; + position: absolute; + left: -.5em; + width: 4px; + height: 100%; + background: var(--accent); + } + +header { + font-family: var(--secondary-font); + border-block-end: 1px solid var(--graphical-fg); +} + +footer { + font-family: var(--secondary-font); + border-block-start: 1px solid var(--graphical-fg); +} + +body > header, +body > footer, +main + footer { + padding: var(--rhythm) calc((100% - var(--eff-line-length)) / 2) +} + +address { + --density: 0; +} + +/*** + 4.4 Grouping content + https://html.spec.whatwg.org/multipage/grouping-content.html + ***/ + +p { + margin-block: var(--gap); +} + +hr { + color: inherit; + margin-inline: 0; + margin-block: var(--gap); + + flex: 0 1 0px; + border-inline-start: 1px solid var(--accent); + block-size: auto; + border-block-start: 1px solid var(--accent); + border-block-end: none; + border-inline-end: none; +} + +pre { + font-family: var(--mono-font); + font-size: .9em; + line-height: var(--rhythm); + -o-tab-size: 2; + tab-size: 2; + + margin: var(--gap) 0; + + overflow-x: auto; + scrollbar-width: thin; + scrollbar-color: var(--accent) transparent; +} + +blockquote { + margin-inline: 0 var(--gap); + padding-inline: var(--gap) 0; + margin-block: var(--gap); + + font-size: 1.1em; + line-height: var(--rhythm); + font-style: italic; + + border-inline-start: 1px solid var(--graphical-fg); + color: var(--muted-fg) +} + +blockquote em, blockquote cite, blockquote dfn, blockquote var, blockquote i, blockquote address { + font-style: normal; + } + +blockquote footer { + text-align: right; + text-align: end; + } + +ul, ol { + padding-inline-start: var(--rhythm) +} + +ul ul, ul ol, ol ul, ol ol { + padding-inline-start: var(--gap); + } + +ul[role="list"], ol[role="list"], ul[role="listbox"], ol[role="listbox"] { + padding-inline-start: 0; + list-style: none; + } + +ul { +} + +ol { + list-style: decimal; +} + +dl { + margin-block: var(--gap); +} + +dt { + font-weight: bold; + } + +dd { + margin-inline-start: var(--rhythm); + } + +li::marker { + font-family: var(--secondary-font); +} + +figure { + max-width: 100%; + margin-inline: 0; + + /* SEE components/box.css */ +} + +figcaption { + margin-block: var(--gap); + + font-family: var(--secondary-font); + + color: var(--muted-fg); +} + +main { + max-inline-size: var(--eff-line-length); + inline-size: 100%; + margin-inline: auto +} + +main:first-child { padding-top: var(--gap); } + +/*** + 4.5 Text-level semantics + https://html.spec.whatwg.org/multipage/text-level-semantics.html + + 4.7 Edits + https://html.spec.whatwg.org/multipage/edits.html + ***/ + +/* Text-level semantics */ + +a, .\<a\> { + color: var(--link-fg, var(--accent)); + font-family: var(--secondary-font); + border-radius: var(--border-radius); + outline-offset: 1px; + background: none; + border: none; + font-size: 1em +} + +.list-of-links :is(a,.\<a\>) { + text-decoration: none +} + +:is(a,.\<a\>):hover, :is(a,.\<a\>):focus { + text-decoration: none; + outline: 1px solid; + transition: outline-offset .1s ease-in-out; + } + +:is(a,.\<a\>):active { + outline-offset: 0; + } + +small[role="note"] { + /*** + Sidenote + ***/ + display: block; + float: inline-end; + clear: inline-end; + + --sidenote-width: 20ch; + + max-inline-size: var(--sidenote-width); + padding-inline: 1.5ch 1ch; + + margin-inline-end: calc(1em - var(--sidenote-width)); + margin-block-end: var(--rhythm); + + font-family: var(--secondary-font); + + background: var(--bg); + border: 1px solid transparent; + + transition: transform .1s ease-in-out + } + +small[role="note"]:hover, small[role="note"]:focus-within { + border: 1px solid var(--graphical-fg); + border-radius: var(--border-radius); + transform: translateX(calc( + 0px - var(--sidenote-width) + + min(var(--gutter-width), var(--sidenote-width)) + )) + } + +small, .\<small\> { + font-size: .8em; +} + +s { + color: var(--bad-fg); +} + +q { + font-style: italic +} + +q em, q cite, q dfn, q var, q i, q address { + font-style: normal; + } + +time { + font-variant-numeric: tabular-nums; +} + +code, samp, kbd { + font-family: var(--mono-font); + font-style: normal; +} + +samp { + color: var(--ok-fg); +} + +kbd kbd /* + We apply the key-like styling to a nested kbd element, a pattern shown in + WHATWG HTML for marking up keyboard input: + + > Here the kbd element is used to indicate keys to press: + > ~~~ html + > <p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p> + > ~~~ + + The plain kbd element can also be used for clicking menus (<kbd>File | + New...</kbd>) or voice input (<kbd>Hey Siri, </kbd>) +*/ { + display: inline-block; + + padding: 0 .3em; + font-size: .8em; + line-height: 1.1em; + + background: var(--interactive-bg); + border: 1px outset var(--graphical-fg); + border-block-end-width: 3px; + border-radius: var(--border-radius); +} + +sub { + vertical-align: bottom; + line-height: 1; +} + +sup { + vertical-align: top; + line-height: 1; +} + +mark { + background: var(--warn-bg); + color: var(--warn-fg); +} + +/* Edits */ + +ins { + background: var(--ok-bg); + color: var(--ok-fg); +} + +del { + background: var(--bad-bg); + color: var(--bad-fg); +} + +/*** + 4.8 Embedded content + https://html.spec.whatwg.org/multipage/embedded-content.html + ***/ + +img, video, audio, iframe, object, embed { + max-inline-size: 100%; + inline-size: max-content; + block-size: auto; +} + +/*** + 4.9 Tabular data + https://html.spec.whatwg.org/multipage/tables.html + ***/ + +table { + font-variant-numeric: tabular-nums; + font: inherit; +} + +caption { + text-align: start; + font-family: var(--secondary-font); + font-style: italic; +} + +tbody { + border-block: 1px solid var(--faded-fg); +} + +thead { +} + +tfoot { +} + +tr { + +} + +td, th { + vertical-align: top +} + +td:not(:last-child), th:not(:last-child) { + padding-inline-end: var(--rhythm); + } + +td { + } + +th { + font-family: var(--secondary-font); + text-align: start; + } + +/*** + 4.10 Forms + https://html.spec.whatwg.org/multipage/forms.html + ***/ + +input { display: block; } + +label input:not([specificity-hack]) { display: inline; padding-block: 0; } + +button, +input[type="submit"], +input[type="reset"], +input[type="button"], +input::file-selector-button, +.\<button\> { + display: inline-block; + padding: 0 calc(var(--rhythm) / 4); + vertical-align: middle; + + font-size: .8rem; + line-height: 1.125em; + font-family: var(--secondary-font); + min-height: var(--rhythm); + + background: var(--interactive-bg); + color: var(--fg); + border: 1px solid var(--muted-fg); + box-sizing: border-box; + border-radius: var(--border-radius); + + /* a-specific resets */ + color: var(--fg); + text-decoration: none; + display: inline-flex; + place-items: center +} + +:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):hover, :is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):focus-visible { + filter: brightness(1.1); + + /* a-specific resets */ + text-decoration: none; + } + +:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>):active { + filter: brightness(.8); + } + +[aria-pressed="true"]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>), [aria-expanded="true"]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) { + box-shadow: 0 .05em var(--accent) inset; + background: var(--pressed-interactive-bg); + } + +[disabled]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) { + color: var(--muted-fg); + } + +strong > :is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) { + background: var(--accent); + color: var(--bg); + border: none; + font-weight: bold +} + +strong > [disabled]:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) { + color: var(--muted-accent); + } + +.big:is(button,input[type="submit"],input[type="reset"],input[type="button"],input::file-selector-button,.\<button\>) { + min-block-size: calc(1.5 * var(--rhythm)); + font-size: 1rem; + padding-inline: calc(.5 * var(--rhythm)); + line-height: var(--rhythm) +} + +input:not([type]), +input[type="text"], +input[type="search"], +input[type="tel"], +input[type="url"], +input[type="email"], +input[type="password"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="number"], +select, +textarea { + padding: calc(var(--rhythm) / 4); + vertical-align: top; + + font-size: 1rem; + line-height: inherit; + font-family: var(--main-font); + + background: var(--bg); + color: var(--fg); + border: 1px solid var(--graphical-fg); + border-radius: var(--border-radius); + + vertical-align: top +} + +:is(input:not([type]),input[type="text"],input[type="search"],input[type="tel"],input[type="url"],input[type="email"],input[type="password"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="number"],select,textarea):focus-visible { + border: 1px solid var(--accent); + } + +:is(input:not([type]),input[type="text"],input[type="search"],input[type="tel"],input[type="url"],input[type="email"],input[type="password"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="number"],select,textarea)::placeholder { + color: var(--muted-fg); + opacity: 1; + text-align: end; + } + +input[type="range"] { + width: 100%; + padding: calc(var(--gap) / 4); +} + +input[type="color"] { + padding: 0; + margin: 0; + height: calc(1.5 * var(--rhythm)); + + border: none; + background: none; +} + +input[type="file"] { + padding: calc(var(--gap) / 4) 0; + font: inherit; + line-height: calc(var(--rhythm) / 2) +} + +input[type="file"]::file-selector-button { + margin-block: .1em 0; + margin-inline-end: 1ch; + } + +select[multiple] { + vertical-align: top; +} + +optgroup::before { + color: var(--muted-fg); + font-style: normal; +} + +progress { + /* TODO */ +} + +meter { + /* TODO */ +} + +label[for] { + display: block; + padding-block: calc(var(--gap) / 4); +} + +fieldset { + position: relative; + + padding: var(--gap); + margin: var(--gap) 0; + width: 100%; + border-radius: var(--border-radius); +} + +fieldset > legend + * { margin-block-start: 0 } + +fieldset { + + border: 1px solid var(--graphical-fg); +} + +/*** + 4.11 Interactive elements + https://html.spec.whatwg.org/multipage/interactive-elements.html#interactive-elements + ***/ + +details:not(specificity-hack) { + /* SEE components/box.css */ + + padding-block-start: 0 +} + +details:not(specificity-hack):not([open]) { padding-block-end: 0; } + +summary { + margin: calc(0px - var(--gap)); + margin-top: calc(0px - var(--gap)); + margin-bottom: 0; + padding-inline: var(--gap); + + font-family: var(--secondary-font); + font-weight: bold; + + cursor: pointer +} + +summary:focus-visible, summary:active { + filter: brightness(.8); + outline: none; + } + +dialog { + /* SEE components/box.css */ + + inline-inset: 0; + + block-size: -moz-fit-content; + + block-size: fit-content; + inline-size: -moz-fit-content; + inline-size: fit-content; + + margin: auto !important; + + background-color: var(--bg); + color: var(--fg); + border-color: var(--accent); +} + +dialog[open]::backdrop { + display: block; + background: black; + opacity: .4; + animation: bg 2s; +} + +@keyframes bg { + from { background: transparent; } +} + +dialog:not([open]) { + display: none; +} + +.box, +/* defined elsewhere */ +[role=menu], +.sidebar-layout > header, +[role=tabpanel], +figure, +details, +dialog, +aside { + margin: var(--gap) 0; + padding: var(--gap); + overflow: clip; + + border-radius: var(--border-radius); + background: var(--box-bg); + border: 1px solid var(--graphical-fg); +} + +.titlebar { + margin-inline: calc(0px - var(--gap)); + margin-block-end: calc(0px - var(--gap)); + padding-inline: var(--gap); + + font: inherit; + font-family: var(--secondary-font); + font-weight: bold; + + translate: 0 calc(-1px - var(--gap)); + + background: var(--graphical-fg); + color: var(--bg); +} + +.sub-title, sub-title { + /*** + Meant for use in headings. Make sure to also use visually-hidden punctuation + to mark the subtitle as shown below: + + 1 | <h1> + 2 | Foo Bar<v-h>:</v-h> + 3 | <sub-title>How I Learned To Stop Worrying and Love Baz</sub-title> + 4 | </h1> + + 1 | <h1> + 2 | <sub-title class="-allcaps">Breaking News</sub-title><v-h>:</v-h> + 3 | Bad Thing Happens + 4 | <h1> + ***/ + + display: block; + + font-weight: normal; + + color: var(--muted-fg); +} + +.tool-bar, [role=toolbar] { + display: flex; + flex-flow: row wrap; + gap: calc(var(--gap) / 2) +} + +.tool-bar > *, [role=toolbar] > * { margin: 0; } + +.sidebar-layout header li { + margin-block: calc(.5 * var(--gap)); + } + +.sidebar-layout header a { + font-weight: bold; + } + +@media (min-width: 75ch) { + +.sidebar-layout { + display: grid; + grid-template-columns: 25ch auto; + inset: 0 +} + + .sidebar-layout > header { + border-block: none; + border-inline-start: none; + margin: 0; + } + + .sidebar-layout > :nth-child(2) { + overflow: auto; + --full-width: calc(100vw - 25ch); + margin-top: var(--gap); + } + } + +.breadcrumbs[aria-label] { + font-family: var(--secondary-font) +} + +.breadcrumbs[aria-label] ul, .breadcrumbs[aria-label] ol { + list-style: none; + padding-inline-start: 0; + } + +.breadcrumbs[aria-label] li { + display: inline + } + +:is(.breadcrumbs[aria-label] li)+li::before { + content: ' / ' / ''; + content: ' / '; + display: inline; + } + +.breadcrumbs[aria-label] [aria-current="page"] { + font-weight: bold; + } + +.chip, chip { + font-family: var(--secondary-font); + border: 1px solid var(--accent); + background: var(--box-bg); + border-radius: calc(var(--rhythm) / 2); + padding-inline: calc(var(--rhythm) / 2); +} + +.navbar { + padding: var(--rhythm); + + font-family: var(--secondary-font); + + background: var(--box-bg); + border-block-end: 1px solid var(--accent); + + overflow-x: auto; + scrollbar-width: thin; + + position: sticky; + z-index: 5; + top: 0; + left: 0; + right: 0; + + /* Inner layout */ + display: flex; + flex-flow: row; + align-items: center; + gap: var(--gap) +} + +.navbar.expanded { + flex-flow: column; + align-items: start; + + max-height: 90vh; + overflow-y: auto + } + +.navbar.expanded ul[role="list"] { flex-flow: column; } + +.navbar * { + flex-shrink: 0; + margin-block: 0; + } + +.navbar:not(.expanded) > :first-child, .navbar:not(.expanded) nav > :first-child { margin-inline-start: auto; } + +.navbar:not(.expanded) > :last-child, .navbar:not(.expanded) nav > :last-child { margin-inline-end: auto; } + +.navbar hr { align-self: stretch; } + +.navbar nav ul[role="list"] { + display: flex; + flex-flow: row; + gap: var(--rhythm) + } + +.navbar nav ul[role="list"] * { flex-shrink: 0 } + +.navbar nav ul[role="list"] { + padding-inline-start: 0; + } + +.navbar a { + font-weight: bold; + text-decoration: none; + padding-inline: .2em; + } + +.navbar a:hover, .navbar a:focus { + text-decoration: underline; + } + +.navbar [aria-current=page] { + position: relative; + } + +.navbar [aria-current=page]::after { + width: 100%; + height: 6px; + content: ""; + display: block; + position: absolute; + bottom: calc(-1 * var(--gap)); + background: currentcolor; + } + +.navbar.expanded [aria-current=page]::after { + width: 6px; + height: 100%; + position: absolute; + left: calc(-1 * var(--gap)); + top: 0; + } + +.permalink-anchor { + display: none +} + +*:hover > .permalink-anchor { + display: initial +} + +button.iconbutton { + border: none; + background: none; + color: currentcolor; + padding: 0; + line-height: var(--rhythm); + font-size: 24px; + width: 24px; + height: 24px; + display: inline-block; + text-align: center; + border-radius: 50%; + transition: font-weight .2s ease-in-out +} + +button.iconbutton:hover, button.iconbutton:focus-visible { + outline: 1px solid var(--accent); + outline-offset: 6px; + } + +button.iconbutton:active { + outline-offset: 3px; + background: none; + } + +button.iconbutton[aria-pressed=true] { + box-shadow: none; + transform: none; + } + +[role="tablist"] { + display: flex; + gap: .5ch; + scrollbar-width: thin; +} + +[role="tab"][role="tab"] { + all: initial; + + font-family: var(--secondary-font); + + padding: 0 calc(var(--rhythm) / 4); + margin: 0; + min-height: var(--rhythm); + + color: var(--fg); + border: solid var(--graphical-fg); + border-width: 1px 1px 0 1px; + border-block-end-color: transparent; + background: var(--interactive-bg); + + border-start-start-radius: .4em; + border-start-end-radius: .4em +} + +[role="tab"][role="tab"]:active, [role="tab"][role="tab"][aria-selected="true"] { + transform: none; + bottom: -1px; + position: relative; + background: var(--box-bg); + border-block-end: 1px solid var(--box-bg); + } + +[role="tab"][role="tab"]:hover { + background-color: var(--box-bg); + } + +[role="tab"][role="tab"]:focus { + background-color: var(--box-bg); + border-color: var(--accent); + outline: 1px solid var(--accent); + } + +[role="tabpanel"] { + /* SEE components/box.css */ + + margin-block-start: 0; + border-start-start-radius: 0; + border-start-end-radius: 0; + z-index: 1; +} + +[role="menu"] { + /* SEE components/box.css */ + position: absolute; + + z-index: 10; + + padding: calc(var(--gap) / 2) 0; + margin: 1px 0 0 0; + + display: flex; + flex-flow: column nowrap; +} + +[role=menuitem] { + padding: 0 calc(var(--gap) / 2); + + display: block; + + text-decoration: none; + border-radius: 0; + + color: var(--fg) +} + +[role=menuitem]:focus, [role=menuitem]:active { + background: var(--accent); + color: var(--bg); + } + +[role=listbox] { + list-style: none +} + +[role=listbox] [role=option] { + margin-inline: calc(-1 * var(--gap)); + padding-inline: var(--gap); + } + +[role=listbox] [role=option][aria-selected=true] { + background: var(--interactive-bg); + } + +[role=listbox] .active[role=option] { + --temporary-bg: var(--accent); + --temporary-fg: var(--bg); + --temporary-accent: parent-var(--muted-accent); + --temporary-muted-accent: parent-var(--box-bg); + + background: var(--temporary-bg); + color: var(--temporary-fg) + } + +[role=listbox] .active[role=option] > * { + --bg: var(--temporary-bg); + --fg: var(--temporary-fg); + --accent: var(--temporary-accent); + --muted-accent: var(--temporary-muted-accent); + } + +[aria-orientation="vertical"] { + flex-direction: column; + width: -moz-fit-content; + width: fit-content; + text-align: center; +} + +.plain { + --box-bg: var(--plain-bg); + --accent: var(--plain-fg); + --graphical-fg: var(--plain-graphical-fg); +} + +.info { + --box-bg: var(--info-bg); + --accent: var(--info-fg); + --graphical-fg: var(--info-graphical-fg); +} + +.ok { + --box-bg: var(--ok-bg); + --accent: var(--ok-fg); + --graphical-fg: var(--ok-graphical-fg); +} + +.warn { + --box-bg: var(--warn-bg); + --accent: var(--warn-fg); + --graphical-fg: var(--warn-graphical-fg); +} + +.bad { + --box-bg: var(--bad-bg); + --accent: var(--bad-fg); + --graphical-fg: var(--bad-graphical-fg); +} + +.color { + color: var(--accent); +} + +.bg { + background: var(--box-bg); +} + +.border { + border-style: solid; + border-color: var(--graphical-fg); +} + +:root { + /* Colors */ + --fg: var(--gray-12); /* Text. */ + --muted-fg: var(--gray-10); /* Secondary text color. Will be + used with a background of --c-bg and --c-bg-2 -- check contrast! */ + --faded-fg: var(--gray-6); /* Disabled text color. */ + --graphical-fg: var(--plain-graphical-fg); /* Graphical elements. Will not + be used as a text color. */ + + --plain-fg: var(--blue-10); + --info-fg: var(--blue-11); + --ok-fg: var(--green-11); + --bad-fg: var(--red-11); + --warn-fg: var(--yellow-11); + + --plain-graphical-fg: var(--gray-6); + --info-graphical-fg: var(--blue-6); + --ok-graphical-fg: var(--green-6); + --bad-graphical-fg: var(--red-6); + --warn-graphical-fg: var(--yellow-6); + + --bg: var(--gray-0); /* Page background. */ + --box-bg: var(--plain-bg); /* Background for blocks: cards, admonitions etc. */ + --interactive-bg: var(--gray-4); /* Background for interactive elements */ + + --plain-bg: var(--gray-1); + --info-bg: var(--blue-1); + --ok-bg: var(--green-1); + --bad-bg: var(--red-1); + --warn-bg: var(--yellow-1); + + --accent: var(--blue-10); /* Accent color. Will be used *as a text color* with a + background of --c-bg and --c-bg-2 -- check contrast! */ + --muted-accent: var(--blue-7); /* Muted accent color. Will not be used for text. */ + + /* Lengths */ + --rhythm: 1.4rem; /* Vertical rhythm, line height. */ + --line-length: 40rem; /* Maximum line length for prose. */ + --border-radius: .2rem; + + /* Fonts */ + --main-font: 'Source Sans 3', 'Source Sans Pro', -apple-system, system-ui, sans-serif; + --secondary-font: var(--main-font); /* Headings etc. */ + --mono-font: 'M Plus Code Latin', monospace, monospace; /* monospace twice stops browsers from + shrinking this */ + + /* Density */ + --density: 1; + + /* Width */ + --full-width: 100vw; + + /* Do not set these. */ + --eff-line-length: /* Effective line length for prose. */ + min( + calc( var(--full-width) - (2 * var(--rhythm)) ), + var(--line-length) + ); + + --gutter-width: /* Width of spaces at each side of page content. */ + calc( + ( + var(--full-width) /* Viewport width */ + - var(--eff-line-length) /* minus line width */ + ) / 2); /* Divide by 2: there are two page margins */ +} + +@media (prefers-color-scheme: dark) { + :root:not(.-no-dark-theme) { + --fg: var(--gray-0); + --muted-fg: var(--gray-2); + --faded-fg: var(--gray-7); + + --plain-bg: var(--gray-11); + --info-bg: var(--blue-12); + --ok-bg: var(--green-12); + --bad-bg: var(--red-12); + --warn-bg: var(--yellow-12); + + --plain-faded-fg: var(--blue-6); + --info-faded-fg: var(--blue-6); + --ok-faded-fg: var(--green-6); + --bad-faded-fg: var(--red-6); + --warn-faded-fg: var(--yellow-6); + + --bg: var(--gray-12); + --box-bg: var(--gray-10); + --interactive-bg: var(--gray-8); + + --plain-fg: (--blue-3); + --info-fg: var(--blue-3); + --ok-fg: var(--green-3); + --bad-fg: var(--red-3); + --warn-fg: var(--yellow-3); + + --accent: var(--blue-3); + --muted-accent: var(--blue-5); + } +} + +* { + --gap: calc(var(--rhythm) * var(--density)); + accent-color: var(--accent); +} + +.textcolumns { + --col-width: 30ch; + column-width: var(--col-width); + column-gap: var(--gap); + margin-block: var(--gap) +} + +.textcolumns :first-child { margin-block-start: 0 !important } + +.text-align\:center { + text-align: center; +} + +.center { + display: grid; + place-items: center; +} + +/**/ + +.container { + max-inline-size: var(--eff-line-length); + margin-inline: auto; +} + +.fullbleed { + position: relative; + width: var(--full-width); + left: 50%; + transform: translateX(calc(-.5 * var(--full-width))); + + border-radius: 0; + border-inline: none; +} + +.fullscreen { + height: 100vh; + + position: relative; + width: 100vw; + left: 50%; + transform: translateX(-50vw); + + border-radius: 0; + border-inline: none; +} + +.width\:100\% { width:100%; max-width: 100% } + +.height\:100\% { height:100%; max-height: 100% } + +/**/ + +/* margin-trim had better be implemented soon */ + +:is( + body, + .box, + [role=menu], + .sidebar-layout > header, + [role=tabpanel], + figure, + details, + dialog, + aside, + fieldset, + dd, + td, + th +)>:first-child:first-child:first-child:first-child, + :is( + body, + .box, + [role=menu], + .sidebar-layout > header, + [role=tabpanel], + figure, + details, + dialog, + aside, + fieldset, + dd, + td, + th +)>:first-child>:first-child:first-child:first-child, + :is( + body, + .box, + [role=menu], + .sidebar-layout > header, + [role=tabpanel], + figure, + details, + dialog, + aside, + fieldset, + dd, + td, + th +)>:first-child>:first-child>:first-child:first-child, + :is( + body, + .box, + [role=menu], + .sidebar-layout > header, + [role=tabpanel], + figure, + details, + dialog, + aside, + fieldset, + dd, + td, + th +)>:first-child>:first-child>:first-child>:first-child { margin-block-start: 0; } + +:is( + body, + .box, + [role=menu], + .sidebar-layout > header, + [role=tabpanel], + figure, + details, + dialog, + aside, + fieldset, + dd, + td, + th +)>:last-child:last-child:last-child:last-child, + :is( + body, + .box, + [role=menu], + .sidebar-layout > header, + [role=tabpanel], + figure, + details, + dialog, + aside, + fieldset, + dd, + td, + th +)>:last-child>:last-child:last-child:last-child, + :is( + body, + .box, + [role=menu], + .sidebar-layout > header, + [role=tabpanel], + figure, + details, + dialog, + aside, + fieldset, + dd, + td, + th +)>:last-child>:last-child>:last-child:last-child, + :is( + body, + .box, + [role=menu], + .sidebar-layout > header, + [role=tabpanel], + figure, + details, + dialog, + aside, + fieldset, + dd, + td, + th +)>:last-child>:last-child>:last-child>:last-child { margin-block-end: 0; } + +/**/ + +.padding { padding-inline: var(--gap) } + +.padding-block { padding-block: var(--gap) } + +.padding-block-start { padding-block-start: var(--gap) } + +.padding-block-end { padding-block-end: var(--gap) } + +.padding-inline { padding-inline: var(--gap) } + +.padding-inline-start { padding-inline-start: var(--gap) } + +.padding-inline-end { padding-inline-start: var(--gap) } + +.margin { margin: var(--gap) } + +.margin-block { margin-block: var(--gap) } + +.margin-block-start { margin-block-start: var(--gap) } + +.margin-block-end { margin-block-end: var(--gap) } + +.margin-inline { margin-inline: var(--gap) } + +.margin-inline-start { margin-inline-start: var(--gap) } + +.margin-inline-end { margin-inline-end: var(--gap) } + +.flow-gap > :not(:last-child) { + margin-bottom: 1em; + } + +/**/ + +.inline { display: inline } + +.block { display: block } + +.contents { display: contents } + +.table { + display: table; + width: 100%; + margin: 0; +} + +.row, .rows > * { + display: table-row +} + +.row:not(:last-child):not([specificity-hack]) > *, .rows > *:not(:last-child):not([specificity-hack]) > * { + margin-bottom: var(--gap); + } + +.row > *:not([specificity-hack]), .rows > * > *:not([specificity-hack]) { + display: table-cell; + vertical-align: top; + } + +.row > * + *:not([specificity-hack]), :is(.rows > *) > * + *:not([specificity-hack]) { + margin-inline-start: var(--gap); + display: inline-block; + } + +/**/ + +.big { + font-size: 1.4em; + line-height: calc(1.5 * var(--rhythm)); +} + +/**/ + +.fixed { position: fixed } + +.sticky { position: sticky } + +.top { top: 0 } + +.right { right: 0 } + +.bottom { bottom: 0 } + +.left { left: 0 } + +.float\:left { float: left } + +.float\:right { float: right } + +.overflow\:auto { overflow: auto } + +.overflow\:scroll { overflow: scroll } + +.airy { --density: 3; } + +.spacious { --density: 2; } + +.dense { --density: 1; } + +.crowded { --density: .5; } + +.packed { --density: 0; } + +.autodensity { + --density: 1 +} + +@media (min-width: 768px) { + +.autodensity { --density: 2 +}} + +@media (min-width: 1024px) { + +.autodensity { --density: 3 +}} + +.vh, v-h { + clip: rect(0 0 0 0); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + block-size: 1px; + inline-size: 1px; + overflow: hidden; + white-space: nowrap; +} + +.all\:initial { + all: initial; +} + +.bold { font-weight: bold } + +.italic { + font-style: italic +} + +.italic em, .italic cite, .italic dfn, .italic var, .italic i, .italic address { + font-style: normal; + } + +.allcaps { + text-transform: uppercase; + letter-spacing: .1rem; +} + +.primary-font { font-family: var(--primary-font) } + +.secondary-font { font-family: var(--secondary-font) } + +.display-font { font-family: var(--display-font) } + +.mono-font, .monospace { font-family: var(--mono-font) } + +.massivetext { + font-size: calc(.13 * var(--eff-line-length)); + line-height: 1em; + letter-spacing: 0; +} + +.aestheticbreak { + display: block; + margin: 0; + padding: 0; + height: calc(.5 * var(--gap)); +} + +.f-row { + display: flex; + flex-direction: row; + gap: var(--gap) +} + +.f-row > * { margin: 0 } + +.f-col { + display: flex; + flex-direction: column; + gap: var(--gap) +} + +.f-col > * { margin: 0 } + +.f-switch { + display: flex; + flex-wrap: wrap; + gap: var(--gap); + --f-switch-threshold: 55ch +} + +.f-switch > * { + margin: 0; + + flex-grow: 1; + flex-basis: calc((var(--f-switch-threshold) - 100%) * 999); + } + +.justify-content\:start { justify-content: start } + +.justify-content\:end { justify-content: end } + +.justify-content\:baseline { justify-content: baseline } + +.justify-content\:center { justify-content: center } + +.justify-content\:stretch { justify-content: stretch } + +.justify-content\:space-between { justify-content: space-between } + +.justify-content\:space-around { justify-content: space-around } + +.justify-content\:space-evenly { justify-content: space-evenly } + +.align-items\:start { align-items: start } + +.align-items\:end { align-items: end } + +.align-items\:baseline { align-items: baseline } + +.align-items\:center { align-items: center } + +.align-items\:stretch { align-items: stretch } + +.align-self\:start { align-self: start } + +.align-self\:end { align-self: end } + +.align-self\:baseline { align-self: baseline } + +.align-self\:center { align-self: center } + +.align-self\:stretch { align-self: stretch } + +.flex-grow\:0 { flex-grow: 0 } + +.flex-grow\:1 { flex-grow: 1 } + +.flex-grow\:2 { flex-grow: 2 } + +.flex-grow\:3 { flex-grow: 3 } + +.flex-grow\:4 { flex-grow: 4 } + +.flex-grow\:5 { flex-grow: 5 } + +.flex-grow\:6 { flex-grow: 6 } + +.flex-grow\:7 { flex-grow: 7 } + +.flex-grow\:8 { flex-grow: 8 } + +.flex-grow\:9 { flex-grow: 9 } + +.flex-grow\:10 { flex-grow: 10 } + +.flex-grow\:11 { flex-grow: 11 } + +.flex-grow\:12 { flex-grow: 12 } + +.flex-wrap\:wrap { flex-wrap: wrap } + +.flex-wrap\:nowrap { flex-wrap: nowrap } + +.grid { + display: grid; + grid-auto-columns: var(--grid-col-width, 1fr); + grid-auto-rows: var(--grid-row-width, auto); + gap: var(--gap) +} + +.grid > * { margin: 0 } + +.grid-even-rows { --grid-row-width: 1fr; } + +.grid-variable-cols { --grid-column-width: auto; } + +[data-cols^="1 " ] { grid-column-start: 1 } + +[data-cols$=" 1" ] { grid-column-end: 2 } + +[data-cols="1" ] { grid-column: 1 } + +[data-cols^="2 " ] { grid-column-start: 2 } + +[data-cols$=" 2" ] { grid-column-end: 3 } + +[data-cols="2" ] { grid-column: 2 } + +[data-cols^="3 " ] { grid-column-start: 3 } + +[data-cols$=" 3" ] { grid-column-end: 4 } + +[data-cols="3" ] { grid-column: 3 } + +[data-cols^="4 " ] { grid-column-start: 4 } + +[data-cols$=" 4" ] { grid-column-end: 5 } + +[data-cols="4" ] { grid-column: 4 } + +[data-cols^="5 " ] { grid-column-start: 5 } + +[data-cols$=" 5" ] { grid-column-end: 6 } + +[data-cols="5" ] { grid-column: 5 } + +[data-cols^="6 " ] { grid-column-start: 6 } + +[data-cols$=" 6" ] { grid-column-end: 7 } + +[data-cols="6" ] { grid-column: 6 } + +[data-cols^="7 " ] { grid-column-start: 7 } + +[data-cols$=" 7" ] { grid-column-end: 8 } + +[data-cols="7" ] { grid-column: 7 } + +[data-cols^="8 " ] { grid-column-start: 8 } + +[data-cols$=" 8" ] { grid-column-end: 9 } + +[data-cols="8" ] { grid-column: 8 } + +[data-cols^="9 " ] { grid-column-start: 9 } + +[data-cols$=" 9" ] { grid-column-end: 10 } + +[data-cols="9" ] { grid-column: 9 } + +[data-cols^="10 "] { grid-column-start: 10 } + +[data-cols$=" 10"] { grid-column-end: 11 } + +[data-cols="10"] { grid-column: 10 } + +[data-cols^="11 "] { grid-column-start: 11 } + +[data-cols$=" 11"] { grid-column-end: 12 } + +[data-cols="11"] { grid-column: 11 } + +[data-cols^="12 "] { grid-column-start: 12 } + +[data-cols$=" 12"] { grid-column-end: 13 } + +[data-cols="12"] { grid-column: 12 } + +[data-rows^="1 " ] { grid-row-start: 1 } + +[data-rows$=" 1" ] { grid-row-end: 2 } + +[data-rows="1" ] { grid-row: 1 } + +[data-rows^="2 " ] { grid-row-start: 2 } + +[data-rows$=" 2" ] { grid-row-end: 3 } + +[data-rows="2" ] { grid-row: 2 } + +[data-rows^="3 " ] { grid-row-start: 3 } + +[data-rows$=" 3" ] { grid-row-end: 4 } + +[data-rows="3" ] { grid-row: 3 } + +[data-rows^="4 " ] { grid-row-start: 4 } + +[data-rows$=" 4" ] { grid-row-end: 5 } + +[data-rows="4" ] { grid-row: 4 } + +[data-rows^="5 " ] { grid-row-start: 5 } + +[data-rows$=" 5" ] { grid-row-end: 6 } + +[data-rows="5" ] { grid-row: 5 } + +[data-rows^="6 " ] { grid-row-start: 6 } + +[data-rows$=" 6" ] { grid-row-end: 7 } + +[data-rows="6" ] { grid-row: 6 } + +[data-rows^="7 " ] { grid-row-start: 7 } + +[data-rows$=" 7" ] { grid-row-end: 8 } + +[data-rows="7" ] { grid-row: 7 } + +[data-rows^="8 " ] { grid-row-start: 8 } + +[data-rows$=" 8" ] { grid-row-end: 9 } + +[data-rows="8" ] { grid-row: 8 } + +[data-rows^="9 " ] { grid-row-start: 9 } + +[data-rows$=" 9" ] { grid-row-end: 10 } + +[data-rows="9" ] { grid-row: 9 } + +[data-rows^="10 "] { grid-row-start: 10 } + +[data-rows$=" 10"] { grid-row-end: 11 } + +[data-rows="10"] { grid-row: 10 } + +[data-rows^="11 "] { grid-row-start: 11 } + +[data-rows$=" 11"] { grid-row-end: 12 } + +[data-rows="11"] { grid-row: 11 } + +[data-rows^="12 "] { grid-row-start: 12 } + +[data-rows$=" 12"] { grid-row-end: 13 } + +[data-rows="12"] { grid-row: 12 } + +@media (max-width: 768px) { + [data-cols\@s^="1 " ] { grid-column-start: 1 } [data-cols\@s$=" 1" ] { grid-column-end: 2 } [data-cols\@s="1" ] { grid-column: 1 } + [data-cols\@s^="2 " ] { grid-column-start: 2 } [data-cols\@s$=" 2" ] { grid-column-end: 3 } [data-cols\@s="2" ] { grid-column: 2 } + [data-cols\@s^="3 " ] { grid-column-start: 3 } [data-cols\@s$=" 3" ] { grid-column-end: 4 } [data-cols\@s="3" ] { grid-column: 3 } + [data-cols\@s^="4 " ] { grid-column-start: 4 } [data-cols\@s$=" 4" ] { grid-column-end: 5 } [data-cols\@s="4" ] { grid-column: 4 } + [data-cols\@s^="5 " ] { grid-column-start: 5 } [data-cols\@s$=" 5" ] { grid-column-end: 6 } [data-cols\@s="5" ] { grid-column: 5 } + [data-cols\@s^="6 " ] { grid-column-start: 6 } [data-cols\@s$=" 6" ] { grid-column-end: 7 } [data-cols\@s="6" ] { grid-column: 6 } + [data-cols\@s^="7 " ] { grid-column-start: 7 } [data-cols\@s$=" 7" ] { grid-column-end: 8 } [data-cols\@s="7" ] { grid-column: 7 } + [data-cols\@s^="8 " ] { grid-column-start: 8 } [data-cols\@s$=" 8" ] { grid-column-end: 9 } [data-cols\@s="8" ] { grid-column: 8 } + [data-cols\@s^="9 " ] { grid-column-start: 9 } [data-cols\@s$=" 9" ] { grid-column-end: 10 } [data-cols\@s="9" ] { grid-column: 9 } + [data-cols\@s^="10 "] { grid-column-start: 10 } [data-cols\@s$=" 10"] { grid-column-end: 11 } [data-cols\@s="10"] { grid-column: 10 } + [data-cols\@s^="11 "] { grid-column-start: 11 } [data-cols\@s$=" 11"] { grid-column-end: 12 } [data-cols\@s="11"] { grid-column: 11 } + [data-cols\@s^="12 "] { grid-column-start: 12 } [data-cols\@s$=" 12"] { grid-column-end: 13 } [data-cols\@s="12"] { grid-column: 12 } + + [data-rows\@s^="1 " ] { grid-row-start: 1 } [data-rows\@s$=" 1" ] { grid-row-end: 2 } [data-rows\@s="1" ] { grid-row: 1 } + [data-rows\@s^="2 " ] { grid-row-start: 2 } [data-rows\@s$=" 2" ] { grid-row-end: 3 } [data-rows\@s="2" ] { grid-row: 2 } + [data-rows\@s^="3 " ] { grid-row-start: 3 } [data-rows\@s$=" 3" ] { grid-row-end: 4 } [data-rows\@s="3" ] { grid-row: 3 } + [data-rows\@s^="4 " ] { grid-row-start: 4 } [data-rows\@s$=" 4" ] { grid-row-end: 5 } [data-rows\@s="4" ] { grid-row: 4 } + [data-rows\@s^="5 " ] { grid-row-start: 5 } [data-rows\@s$=" 5" ] { grid-row-end: 6 } [data-rows\@s="5" ] { grid-row: 5 } + [data-rows\@s^="6 " ] { grid-row-start: 6 } [data-rows\@s$=" 6" ] { grid-row-end: 7 } [data-rows\@s="6" ] { grid-row: 6 } + [data-rows\@s^="7 " ] { grid-row-start: 7 } [data-rows\@s$=" 7" ] { grid-row-end: 8 } [data-rows\@s="7" ] { grid-row: 7 } + [data-rows\@s^="8 " ] { grid-row-start: 8 } [data-rows\@s$=" 8" ] { grid-row-end: 9 } [data-rows\@s="8" ] { grid-row: 8 } + [data-rows\@s^="9 " ] { grid-row-start: 9 } [data-rows\@s$=" 9" ] { grid-row-end: 10 } [data-rows\@s="9" ] { grid-row: 9 } + [data-rows\@s^="10 "] { grid-row-start: 10 } [data-rows\@s$=" 10"] { grid-row-end: 11 } [data-rows\@s="10"] { grid-row: 10 } + [data-rows\@s^="11 "] { grid-row-start: 11 } [data-rows\@s$=" 11"] { grid-row-end: 12 } [data-rows\@s="11"] { grid-row: 11 } + [data-rows\@s^="12 "] { grid-row-start: 12 } [data-rows\@s$=" 12"] { grid-row-end: 13 } [data-rows\@s="12"] { grid-row: 12 } +} + +@media (min-width: 1024px) { + [data-cols\@l^="1 " ] { grid-column-start: 1 } [data-cols\@l$=" 1" ] { grid-column-end: 2 } [data-cols\@l="1" ] { grid-column: 1 } + [data-cols\@l^="2 " ] { grid-column-start: 2 } [data-cols\@l$=" 2" ] { grid-column-end: 3 } [data-cols\@l="2" ] { grid-column: 2 } + [data-cols\@l^="3 " ] { grid-column-start: 3 } [data-cols\@l$=" 3" ] { grid-column-end: 4 } [data-cols\@l="3" ] { grid-column: 3 } + [data-cols\@l^="4 " ] { grid-column-start: 4 } [data-cols\@l$=" 4" ] { grid-column-end: 5 } [data-cols\@l="4" ] { grid-column: 4 } + [data-cols\@l^="5 " ] { grid-column-start: 5 } [data-cols\@l$=" 5" ] { grid-column-end: 6 } [data-cols\@l="5" ] { grid-column: 5 } + [data-cols\@l^="6 " ] { grid-column-start: 6 } [data-cols\@l$=" 6" ] { grid-column-end: 7 } [data-cols\@l="6" ] { grid-column: 6 } + [data-cols\@l^="7 " ] { grid-column-start: 7 } [data-cols\@l$=" 7" ] { grid-column-end: 8 } [data-cols\@l="7" ] { grid-column: 7 } + [data-cols\@l^="8 " ] { grid-column-start: 8 } [data-cols\@l$=" 8" ] { grid-column-end: 9 } [data-cols\@l="8" ] { grid-column: 8 } + [data-cols\@l^="9 " ] { grid-column-start: 9 } [data-cols\@l$=" 9" ] { grid-column-end: 10 } [data-cols\@l="9" ] { grid-column: 9 } + [data-cols\@l^="10 "] { grid-column-start: 10 } [data-cols\@l$=" 10"] { grid-column-end: 11 } [data-cols\@l="10"] { grid-column: 10 } + [data-cols\@l^="11 "] { grid-column-start: 11 } [data-cols\@l$=" 11"] { grid-column-end: 12 } [data-cols\@l="11"] { grid-column: 11 } + [data-cols\@l^="12 "] { grid-column-start: 12 } [data-cols\@l$=" 12"] { grid-column-end: 13 } [data-cols\@l="12"] { grid-column: 12 } + + [data-rows\@l^="1 " ] { grid-row-start: 1 } [data-rows\@l$=" 1" ] { grid-row-end: 2 } [data-rows\@l="1" ] { grid-row: 1 } + [data-rows\@l^="2 " ] { grid-row-start: 2 } [data-rows\@l$=" 2" ] { grid-row-end: 3 } [data-rows\@l="2" ] { grid-row: 2 } + [data-rows\@l^="3 " ] { grid-row-start: 3 } [data-rows\@l$=" 3" ] { grid-row-end: 4 } [data-rows\@l="3" ] { grid-row: 3 } + [data-rows\@l^="4 " ] { grid-row-start: 4 } [data-rows\@l$=" 4" ] { grid-row-end: 5 } [data-rows\@l="4" ] { grid-row: 4 } + [data-rows\@l^="5 " ] { grid-row-start: 5 } [data-rows\@l$=" 5" ] { grid-row-end: 6 } [data-rows\@l="5" ] { grid-row: 5 } + [data-rows\@l^="6 " ] { grid-row-start: 6 } [data-rows\@l$=" 6" ] { grid-row-end: 7 } [data-rows\@l="6" ] { grid-row: 6 } + [data-rows\@l^="7 " ] { grid-row-start: 7 } [data-rows\@l$=" 7" ] { grid-row-end: 8 } [data-rows\@l="7" ] { grid-row: 7 } + [data-rows\@l^="8 " ] { grid-row-start: 8 } [data-rows\@l$=" 8" ] { grid-row-end: 9 } [data-rows\@l="8" ] { grid-row: 8 } + [data-rows\@l^="9 " ] { grid-row-start: 9 } [data-rows\@l$=" 9" ] { grid-row-end: 10 } [data-rows\@l="9" ] { grid-row: 9 } + [data-rows\@l^="10 "] { grid-row-start: 10 } [data-rows\@l$=" 10"] { grid-row-end: 11 } [data-rows\@l="10"] { grid-row: 10 } + [data-rows\@l^="11 "] { grid-row-start: 11 } [data-rows\@l$=" 11"] { grid-row-end: 12 } [data-rows\@l="11"] { grid-row: 11 } + [data-rows\@l^="12 "] { grid-row-start: 12 } [data-rows\@l$=" 12"] { grid-row-end: 13 } [data-rows\@l="12"] { grid-row: 12 } +} |