diff options
32 files changed, 966 insertions, 927 deletions
diff --git a/_build/postcss.ts b/_build/postcss.ts index 7c35334..e5af0ee 100755 --- a/_build/postcss.ts +++ b/_build/postcss.ts @@ -3,7 +3,7 @@ import * as path from "std/path/mod.ts"; import postcss from "npm:postcss@8.4.16"; import nesting from "npm:postcss-nesting@10.1.7"; -import atImport from "npm:postcss-easy-import@4.0.0"; +import atImport from "npm:postcss-import@15.0.0"; import autoprefixer from "npm:autoprefixer@10.4.7"; import csso from "npm:csso@3.5.1"; @@ -17,8 +17,8 @@ const pc = postcss([ export const compile = async () => { const builds = await Promise.all([ - compileFile("src/main.css", "missing"), - compileFile("src/syntax.css", "missing-prism"), + compileFile("src/missing.css", "missing"), + compileFile("src/missing-prism.css", "missing-prism"), ]) return builds.reduce((acc, cur) => Object.assign(acc, cur), {}); }; @@ -1,4 +1,12 @@ +2022-10-21 + +I should add a search function with Lume's Pagefind plugin +(https://lume.land/plugins/pagefind/). + +-- dz4k + + 2022-08-19 Got a proof-of-concept for postcss-literate. However, imported files seem not diff --git a/releases/0.4.0.md b/releases/0.4.0.md new file mode 100644 index 0000000..39f6950 --- /dev/null +++ b/releases/0.4.0.md @@ -0,0 +1,29 @@ +--- +draft: yes +release: 0.4.0 +artifacts: + Missing.css: + Plain: missing.css + Minified: missing.min.css + Missing Prism: + Plain: missing-prism.css + Minified: missing.min.css +--- + +## Changelog + +<section> + +### For developers + - The source code of missing.css was completely reorganized! The source files + now line up with the pages of the documentation to make it easier to find + code. + - Speaking of the docs, they have also received a subtle reorganization. + - The development server will now build changes to the CSS _way_ faster. + +</section> + +--- + + - Added a few missing utilities for setting `justify-content`. +{.flow-gap} diff --git a/src/10-main.css b/src/10-main.css new file mode 100644 index 0000000..8381056 --- /dev/null +++ b/src/10-main.css @@ -0,0 +1,680 @@ + +/*** + 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); +} + +body { + margin: 0; +} + +header, footer, section + section { + margin-block: calc(2 * var(--gap)); +} + +nav { + & a { + text-decoration: none; + color: var(--accent); + } +} + +aside { + /* SEE components/box.css */ + + & h1, + & h2, + & h3, + & h4, + & h5, + & h6 { + font-size: 1em; + text-transform: none; + letter-spacing: none; + } +} + +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; + &::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(--faded-fg); +} + +footer { + font-family: var(--secondary-font); + border-block-start: 1px solid var(--faded-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); + 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(--faded-fg); + color: var(--muted-fg); + + & em, & cite, & dfn, & var, & i, & address { + font-style: normal; + } + + & footer { + text-align: right; + text-align: end; + } +} + +ul, ol { + padding-inline-start: var(--rhythm); + + & & { + padding-inline-start: var(--gap); + } + + &[role="list"] { + 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); + margin: auto; + + &: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 { + color: var(--link-fg, var(--accent)); + font-family: var(--secondary-font); + border-radius: var(--border-radius); + outline-offset: 1px; + + @nest .list-of-links & { + text-decoration: none; + } + + &:hover, &:focus { + text-decoration: none; + outline: 1px solid; + transition: outline-offset .1s ease-in-out; + } + + &:active { + outline-offset: 0; + } +} + +small { + @nest span > &:only-child { + /*** + 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; + + &:hover, &:focus-within { + border: 1px solid var(--faded-fg); + border-radius: var(--border-radius); + transform: translateX(calc( + 0px - var(--sidenote-width) + + min(var(--gutter-width), var(--sidenote-width)) + )) + } + } +} + +s { + color: var(--bad-fg); +} + +q { + font-style: italic; + + & em, & cite, & dfn, & var, & i, & address { + font-style: normal; + } +} + +time { + font-variant-numeric: tabular-nums; +} + +code, samp, kbd { + font-family: var(--mono-font); +} + +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(--faded-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(--fg); +} + +thead { +} + +tfoot { +} + +tr { + +} + +td, th { + vertical-align: top; + + &: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: top; + + 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; + + &:hover, &:focus-visible { + filter: brightness(1.1); + + /* a-specific resets */ + text-decoration: none; + } + + &:active { + filter: brightness(.8); + } + + &[aria-pressed="true"], &[aria-expanded="true"] { + box-shadow: 0 .05em var(--accent); + transform: translateY(.05em); + background: var(--pressed-interactive-bg); + } + + &[disabled] { + color: var(--muted-fg); + } + + @nest strong > & { + background: var(--accent); + color: var(--bg); + border: none; + font-weight: bold; + + &[disabled] { + color: var(--muted-accent); + } + } +} + +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(--faded-fg); + border-radius: var(--border-radius); + + vertical-align: top; + + &:focus-visible { + border: 1px solid var(--accent); + } + + &::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); + &::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); + + & > legend + * { margin-block-start: 0 } + + border: 1px solid var(--faded-fg); +} +/*** + 4.11 Interactive elements + https://html.spec.whatwg.org/multipage/interactive-elements.html#interactive-elements + ***/ + +details { + /* SEE components/box.css */ + + padding-block-start: 0; + &: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; + + background: var(--accent); + color: var(--bg); + + cursor: pointer; + + &:focus-visible, &:active { + filter: brightness(.8); + } + + @nest details[open] & { + border-block-end: 1px solid var(--accent); + border-end-end-radius: 0; + border-end-start-radius: 0; + } +} + + +dialog { + /* SEE components/box.css */ + + position: absolute; + inline-inset: 0; + + block-size: 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; +} diff --git a/src/30-components.css b/src/30-components.css new file mode 100644 index 0000000..cfcc028 --- /dev/null +++ b/src/30-components.css @@ -0,0 +1,176 @@ + +.box, +/* defined elsewhere */ +[role=menu], +.sidebar, +[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(--faded-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(--accent); + 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 { + display: flex; + flex-flow: row wrap; + gap: calc(var(--gap) / 2); + + & > * { margin: 0; } +} + +.sidebar { + /* SEE components/box.css */ + + font-family: var(--secondary-font); + + border-block: none; + border-inline-start: none; + border-radius: 0; + margin: 0; + + font-size: .8em; + --rhythm: 1em; + + & li { + padding: calc(.5 * var(--gap)); + margin-inline: calc(-.5 * var(--gap)); + border-radius: var(--border-radius); + } + + & a { + font-weight: bold; + text-decoration: none; + } +} +.breadcrumbs[aria-label] { + font-family: var(--secondary-font); + + & ul, & ol { + list-style: none; + padding-inline-start: 0; + } + + & li { + display: inline; + &+li::before { + content: ' / ' / ''; + content: ' / '; + display: inline; + } + } + + & [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 { + margin: 0 0 var(--gap) 0; + 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; + + /* Inner layout */ + display: flex; + flex-flow: row; + justify-content: center; + gap: calc(2 * var(--rhythm)); + + & * { + flex-shrink: 0; + margin-block: 0; + } + + & nav ul[role="list"] { + padding-inline-start: 0; + display: flex; + flex-flow: row; + gap: var(--rhythm); + + & * { flex-shrink: 0 } + } + + & a { + font-weight: bold; + text-decoration: none; + padding-inline: .2em; + } + + & a:hover, & a:focus { + text-decoration: underline; + } + + & [aria-current=page] { + background: var(--accent); + color: var(--box-bg); + border-radius: var(--border-radius); + } +} + +.permalink-anchor { + display: none; + + @nest *:hover > & { + display: initial; + } +} diff --git a/src/components/tabs.css b/src/40-aria.css index 32c6b10..527df7e 100644 --- a/src/components/tabs.css +++ b/src/40-aria.css @@ -49,3 +49,29 @@ border-start-end-radius: 0; z-index: 1; } + +[role="menu"] { + /* SEE components/box.css */ + position: absolute; + + 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; + + color: var(--fg); + + &:focus { + background: var(--accent); + color: var(--bg); + } +} diff --git a/src/util/colorway.css b/src/50-colorways.css index b501533..b501533 100644 --- a/src/util/colorway.css +++ b/src/50-colorways.css diff --git a/src/main.css b/src/60-variables.css index fd8b781..053e3db 100644 --- a/src/main.css +++ b/src/60-variables.css @@ -1,12 +1,4 @@ -@import "./core/sanitize.css"; -@import "./core/colors.css"; - -@import "./shared/*.css"; -@import "./components/*.css"; -@import "./util/*.css"; -@import "./elements/*.css"; - :root { /* Colors */ --fg: var(--gray-12); /* Text. */ diff --git a/src/util/layout.css b/src/70-layout.css index 35ec420..35ec420 100644 --- a/src/util/layout.css +++ b/src/70-layout.css diff --git a/src/80-utils.css b/src/80-utils.css new file mode 100644 index 0000000..eeda8a6 --- /dev/null +++ b/src/80-utils.css @@ -0,0 +1,32 @@ + +.airy { --density: 3; } +.dense { --density: 1; } +.crowded { --density: .5; } +.packed { --density: 0; } + +.autodensity { + --density: 1; + @media (min-width: 768px) { --density: 2 } + @media (min-width: 1024px) { --density: 3 } +} +.vh, v-h { + clip: rect(0 0 0 0); + clip-path: inset(50%); + block-size: 1px; + inline-size: 1px; + overflow: hidden; + white-space: nowrap; +} + +.all\:initial { + all: initial; +} + +.allcaps { + text-transform: uppercase; + letter-spacing: .1rem; +} + +.monospace { + font-family: var(--mono-font); +} diff --git a/src/util/flex.css b/src/90-flex.css index c98b47f..c98b47f 100644 --- a/src/util/flex.css +++ b/src/90-flex.css diff --git a/src/components/box.css b/src/components/box.css deleted file mode 100644 index e313343..0000000 --- a/src/components/box.css +++ /dev/null @@ -1,33 +0,0 @@ - -.box, -/* defined elsewhere */ -[role=menu], -.sidebar, -[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(--faded-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(--accent); - color: var(--bg); -} diff --git a/src/components/breadcrumbs.css b/src/components/breadcrumbs.css deleted file mode 100644 index 9a2973d..0000000 --- a/src/components/breadcrumbs.css +++ /dev/null @@ -1,22 +0,0 @@ - -.breadcrumbs[aria-label] { - font-family: var(--secondary-font); - - & ul, & ol { - list-style: none; - padding-inline-start: 0; - } - - & li { - display: inline; - &+li::before { - content: ' / ' / ''; - content: ' / '; - display: inline; - } - } - - & [aria-current="page"] { - font-weight: bold; - } -} diff --git a/src/components/chip.css b/src/components/chip.css deleted file mode 100644 index e148415..0000000 --- a/src/components/chip.css +++ /dev/null @@ -1,8 +0,0 @@ - -.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); -} diff --git a/src/components/menu.css b/src/components/menu.css deleted file mode 100644 index 9bdc659..0000000 --- a/src/components/menu.css +++ /dev/null @@ -1,26 +0,0 @@ - -[role="menu"] { - /* SEE components/box.css */ - position: absolute; - - 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; - - color: var(--fg); - - &:focus { - background: var(--accent); - color: var(--bg); - } -} diff --git a/src/components/nav-bar.css b/src/components/nav-bar.css deleted file mode 100644 index 483891f..0000000 --- a/src/components/nav-bar.css +++ /dev/null @@ -1,49 +0,0 @@ - -.navbar { - margin: 0 0 var(--gap) 0; - 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; - - /* Inner layout */ - display: flex; - flex-flow: row; - justify-content: center; - gap: calc(2 * var(--rhythm)); - - & * { - flex-shrink: 0; - margin-block: 0; - } - - & nav ul[role="list"] { - padding-inline-start: 0; - display: flex; - flex-flow: row; - gap: var(--rhythm); - - & * { flex-shrink: 0 } - } - - & a { - font-weight: bold; - text-decoration: none; - padding-inline: .2em; - } - - & a:hover, & a:focus { - text-decoration: underline; - } - - & [aria-current=page] { - background: var(--accent); - color: var(--box-bg); - border-radius: var(--border-radius); - } -} diff --git a/src/components/permalink.css b/src/components/permalink.css deleted file mode 100644 index b9a4f1f..0000000 --- a/src/components/permalink.css +++ /dev/null @@ -1,8 +0,0 @@ - -.permalink-anchor { - display: none; - - @nest *:hover > & { - display: initial; - } -} diff --git a/src/components/sidebar.css b/src/components/sidebar.css deleted file mode 100644 index bf0e002..0000000 --- a/src/components/sidebar.css +++ /dev/null @@ -1,25 +0,0 @@ - -.sidebar { - /* SEE components/box.css */ - - font-family: var(--secondary-font); - - border-block: none; - border-inline-start: none; - border-radius: 0; - margin: 0; - - font-size: .8em; - --rhythm: 1em; - - & li { - padding: calc(.5 * var(--gap)); - margin-inline: calc(-.5 * var(--gap)); - border-radius: var(--border-radius); - } - - & a { - font-weight: bold; - text-decoration: none; - } -}
\ No newline at end of file diff --git a/src/components/sub-title.css b/src/components/sub-title.css deleted file mode 100644 index ec1deb5..0000000 --- a/src/components/sub-title.css +++ /dev/null @@ -1,24 +0,0 @@ - -.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); -} - diff --git a/src/components/tool-bar.css b/src/components/tool-bar.css deleted file mode 100644 index bfc26ce..0000000 --- a/src/components/tool-bar.css +++ /dev/null @@ -1,8 +0,0 @@ - -.tool-bar { - display: flex; - flex-flow: row wrap; - gap: calc(var(--gap) / 2); - - & > * { margin: 0; } -} diff --git a/src/elements/embedded.css b/src/elements/embedded.css deleted file mode 100644 index 31407e6..0000000 --- a/src/elements/embedded.css +++ /dev/null @@ -1,10 +0,0 @@ -/*** - 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; -} diff --git a/src/elements/forms.css b/src/elements/forms.css deleted file mode 100644 index 852904e..0000000 --- a/src/elements/forms.css +++ /dev/null @@ -1,167 +0,0 @@ -/*** - 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: top; - - 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; - - &:hover, &:focus-visible { - filter: brightness(1.1); - - /* a-specific resets */ - text-decoration: none; - } - - &:active { - filter: brightness(.8); - } - - &[aria-pressed="true"], &[aria-expanded="true"] { - box-shadow: 0 .05em var(--accent); - transform: translateY(.05em); - background: var(--pressed-interactive-bg); - } - - &[disabled] { - color: var(--muted-fg); - } - - @nest strong > & { - background: var(--accent); - color: var(--bg); - border: none; - font-weight: bold; - - &[disabled] { - color: var(--muted-accent); - } - } -} - -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(--faded-fg); - border-radius: var(--border-radius); - - vertical-align: top; - - &:focus-visible { - border: 1px solid var(--accent); - } - - &::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); - &::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); - - & > legend + * { margin-block-start: 0 } - - border: 1px solid var(--faded-fg); -} diff --git a/src/elements/grouping.css b/src/elements/grouping.css deleted file mode 100644 index 72a1fd3..0000000 --- a/src/elements/grouping.css +++ /dev/null @@ -1,114 +0,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); - 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(--faded-fg); - color: var(--muted-fg); - - & em, & cite, & dfn, & var, & i, & address { - font-style: normal; - } - - & footer { - text-align: right; - text-align: end; - } -} - -ul, ol { - padding-inline-start: var(--rhythm); - - & & { - padding-inline-start: var(--gap); - } - - &[role="list"] { - 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); - margin: auto; - - &:first-child { padding-top: var(--gap); } -} - diff --git a/src/elements/inline.css b/src/elements/inline.css deleted file mode 100644 index 41b238b..0000000 --- a/src/elements/inline.css +++ /dev/null @@ -1,141 +0,0 @@ -/*** - 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 { - color: var(--link-fg, var(--accent)); - font-family: var(--secondary-font); - border-radius: var(--border-radius); - outline-offset: 1px; - - @nest .list-of-links & { - text-decoration: none; - } - - &:hover, &:focus { - text-decoration: none; - outline: 1px solid; - transition: outline-offset .1s ease-in-out; - } - - &:active { - outline-offset: 0; - } -} - -small { - @nest span > &:only-child { - /*** - 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; - - &:hover, &:focus-within { - border: 1px solid var(--faded-fg); - border-radius: var(--border-radius); - transform: translateX(calc( - 0px - var(--sidenote-width) - + min(var(--gutter-width), var(--sidenote-width)) - )) - } - } -} - -s { - color: var(--bad-fg); -} - -q { - font-style: italic; - - & em, & cite, & dfn, & var, & i, & address { - font-style: normal; - } -} - -time { - font-variant-numeric: tabular-nums; -} - -code, samp, kbd { - font-family: var(--mono-font); -} - -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(--faded-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); -} - diff --git a/src/elements/interactive.css b/src/elements/interactive.css deleted file mode 100644 index f61def6..0000000 --- a/src/elements/interactive.css +++ /dev/null @@ -1,68 +0,0 @@ -/*** - 4.11 Interactive elements - https://html.spec.whatwg.org/multipage/interactive-elements.html#interactive-elements - ***/ - -details { - /* SEE components/box.css */ - - padding-block-start: 0; - &: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; - - background: var(--accent); - color: var(--bg); - - cursor: pointer; - - &:focus-visible, &:active { - filter: brightness(.8); - } - - @nest details[open] & { - border-block-end: 1px solid var(--accent); - border-end-end-radius: 0; - border-end-start-radius: 0; - } -} - - -dialog { - /* SEE components/box.css */ - - position: absolute; - inline-inset: 0; - - block-size: 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; -} diff --git a/src/elements/sections.css b/src/elements/sections.css deleted file mode 100644 index 2116610..0000000 --- a/src/elements/sections.css +++ /dev/null @@ -1,134 +0,0 @@ - -/*** - 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); -} - -body { - margin: 0; -} - -header, footer, section + section { - margin-block: calc(2 * var(--gap)); -} - -nav { - & a { - text-decoration: none; - color: var(--accent); - } -} - -aside { - /* SEE components/box.css */ - - & h1, - & h2, - & h3, - & h4, - & h5, - & h6 { - font-size: 1em; - text-transform: none; - letter-spacing: none; - } -} - -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; - &::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(--faded-fg); -} - -footer { - font-family: var(--secondary-font); - border-block-start: 1px solid var(--faded-fg); -} - -body > header, -body > footer, -main + footer { - padding: var(--rhythm) calc((100% - var(--eff-line-length)) / 2) -} - -address { - --density: 0; -} diff --git a/src/elements/tabular.css b/src/elements/tabular.css deleted file mode 100644 index 16885b6..0000000 --- a/src/elements/tabular.css +++ /dev/null @@ -1,46 +0,0 @@ -/*** - 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(--fg); -} - -thead { -} - -tfoot { -} - -tr { - -} - -td, th { - vertical-align: top; - - &:not(:last-child) { - padding-inline-end: var(--rhythm); - } -} - - td { - } - - th { - font-family: var(--secondary-font); - text-align: start; - } - diff --git a/src/syntax.css b/src/missing-prism.css index 23e48b5..23e48b5 100644 --- a/src/syntax.css +++ b/src/missing-prism.css diff --git a/src/missing.css b/src/missing.css new file mode 100644 index 0000000..62c8123 --- /dev/null +++ b/src/missing.css @@ -0,0 +1,12 @@ + +@import "./core/sanitize.css"; +@import "./core/colors.css"; + +@import "./10-main.css"; +@import "./30-components.css"; +@import "./40-aria.css"; +@import "./50-colorways.css"; +@import "./60-variables.css"; +@import "./70-layout.css"; +@import "./80-utils.css"; +@import "./90-flex.css"; diff --git a/src/util/density.css b/src/util/density.css deleted file mode 100644 index 9377cbc..0000000 --- a/src/util/density.css +++ /dev/null @@ -1,11 +0,0 @@ - -.airy { --density: 3; } -.dense { --density: 1; } -.crowded { --density: .5; } -.packed { --density: 0; } - -.autodensity { - --density: 1; - @media (min-width: 768px) { --density: 2 } - @media (min-width: 1024px) { --density: 3 } -}
\ No newline at end of file diff --git a/src/util/generic.css b/src/util/generic.css deleted file mode 100644 index 462533b..0000000 --- a/src/util/generic.css +++ /dev/null @@ -1,13 +0,0 @@ - -.vh, v-h { - clip: rect(0 0 0 0); - clip-path: inset(50%); - block-size: 1px; - inline-size: 1px; - overflow: hidden; - white-space: nowrap; -} - -.all\:initial { - all: initial; -} diff --git a/src/util/typographic.css b/src/util/typographic.css deleted file mode 100644 index 8089104..0000000 --- a/src/util/typographic.css +++ /dev/null @@ -1,9 +0,0 @@ - -.allcaps { - text-transform: uppercase; - letter-spacing: .1rem; -} - -.monospace { - font-family: var(--mono-font); -} |