diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 90db779..ff846aa 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,4 +1,4 @@ -.btn { +button, .btn { --hover: rgba(var(--neutral-highest), .8); --active: rgba(var(--neutral-highest), .8); text-decoration: none; @@ -15,6 +15,11 @@ max-width: 100%; cursor: pointer; border: none; + border-radius: var(--border-radius); + color: rgb(var(--neutral-lower)); + background-color: var(--text); + font-weight: var(--font-weight-semibold); + font-stretch: var(--font-stretch, condensed); &:disabled { --hover: inherit; diff --git a/src/scss/components/_reset.scss b/src/scss/components/_reset.scss index de74a35..341e3f0 100644 --- a/src/scss/components/_reset.scss +++ b/src/scss/components/_reset.scss @@ -10,10 +10,8 @@ } :where(html) { overflow-x: hidden; + block-size: 100%; } -// :where(html, body) { -// block-size: 100%; -// } :where(body) { text-rendering: optimizeSpeed; line-height: 1.5; diff --git a/src/scss/components/_superminimal.scss b/src/scss/components/_superminimal.scss index bbf36ab..7d4100a 100644 --- a/src/scss/components/_superminimal.scss +++ b/src/scss/components/_superminimal.scss @@ -2,370 +2,18 @@ https://codepen.io/mikemai2awesome/full/KKvMZVz \* ------------------------------------ */ -:root { - color: var(--text); - background-color: var(--background); - accent-color: var(--text); - } - - :where(a) { - color: var(--text); - } - - :where(input, textarea, select) { - color: var(--text); - background-color: var(--background); - } - - :where(button, .btn) { - color: var(--primary-light); - background-color: var(--text); - } - - :where(code) { - color: var(--text); - background-color: var(--primary-dark); - } - - /* ------------------------------------ *\ - Typography - \* ------------------------------------ */ - - :root { - font-size: clamp( - var(--font-size), - var(--font-size) * 0.9 + 0.25vw, - var(--font-size) * 2 - ); // % ensures browser zoom is supported. - font-family: var(--font); // Use system UI font. - font-weight: var(--font-weight-regular); - line-height: var(--leading); // Standard leading for good legibility. - letter-spacing: var(--tracking); - } - - :where(a) { - text-decoration: underline; - text-decoration-thickness: var(--border-width); - text-underline-offset: calc(var(--border-width) * 2); - } - - :where(a):hover { - text-decoration-thickness: calc(var(--border-width) * 2); - } - - :where(pre, code, kbd, dl, figcaption, abbr, table) { - font-family: var(--font-code); // Differentiate preformatted, code, description, and table text from body text. - font-size: 0.8em; // Make monospace and small text smaller than body text. - } - - :where(pre code) { - display: block; // Define block code. - font-size: 1em; // Prevent cascading. - } - - :where(blockquote, em, i, cite) { - font-family: var(--font-italic); // Differentiate blockquote, citation, idiomatic, and emphasisized text from body text. Also, sans-serif italic is ugly. - font-weight: var(--font-weight-regular); // Prevent italics to be bold. Bold italic is also ugly and unnecessary. - } - - :where(blockquote) { - font-size: clamp(1.5rem, 1.25rem + 1vw, 3rem); - letter-spacing: 0; - } - - :where(blockquote p) { - max-inline-size: 35ch; - } - - :where(blockquote q):before { - position: absolute; - transform: translateX(-100%); - } - - :where(strong, b, th, button, .btn) { - font-weight: var(--font-weight-semibold); // Make non-heading emphasized text less bold than heading text. - } - - :where(h1, h2, h3, h4, h5, h6, summary strong, legend) { - font-weight: var(--font-weight-semibold); - } - - :where(h1, h2, h3, h4, h5, h6, summary strong, legend) { - font-stretch: var(--font-stretch, expanded); - } - - :where(button, .btn, input[type="file"]) { - font-stretch: var(--font-stretch, condensed); - } - - :where(abbr) { - text-decoration: underline; - text-decoration-style: dotted; // Differentiate abbreviaions from links. - text-underline-offset: calc(var(--border-width) * 2); - } - - :where(button, label, select, summary) { - cursor: pointer; - } - - :where(summary:hover > *) { - text-decoration: underline; - text-underline-offset: calc(var(--border-width) * 2); - } - - :where(figcaption) { - text-align: center; - } - - :where(th) { - text-align: start; - } - - :where(th, td) { - vertical-align: baseline; - } - - :where(fieldset > ol) { - list-style: none; - } - - /* ------------------------------------ *\ - Spacing - \* ------------------------------------ */ - - :where(h1, h2, h3, h4, h5, h6, p, figure, form, pre, blockquote, ul, ol, dl, li, details) { - margin-block-end: 0; - } - - :where(h1, h2, h3, h4, h5, h6) { - margin-block-start: calc(var(--stack) * 1.75); - } - - :where(p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details) { - margin-inline: 0; - margin-block-start: var(--stack); - } - - :where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):first-child, - :where(legend + *) { - margin-block-start: 0; - } - - :where(h1, h2, h3, h4, h5, h6) + * { - margin-block-start: calc(var(--stack) / 5); - } - - :where(ul, ol) { - padding: 0; - } - - :where(li > ul, li > ol) { - margin-block-start: calc(var(--stack) / 5); - } - - :where(details ul, details ol) { - margin-inline-start: 4ch; // Unify indent for all lists inside details. - } - - :where(li > ul, li > ol, fieldset ul, fieldset ol) { - margin-inline-start: 2.25ch; // Unify indent for all nested lists. - } - - :where(li + li) { - margin-block-start: calc(var(--stack) / 5); - } - - :where(fieldset > ol li + li) { - margin-block-start: calc(var(--stack) / 2); - } - - :where(fieldset > ol) { - margin-inline: 0; - } - - :where(hr) { - margin-block-start: calc(var(--stack) * 3); - margin-block-end: calc(var(--stack) * 3); - } - - :where(hr + *) { - margin-block-start: 0; - } - - :where(figure > img, table) { - margin-inline: auto; - } - - :where(blockquote > *) { - margin-block-start: calc(var(--stack) / 4); - } - - :where(blockquote:not(:last-child)) { - padding-block-end: calc(var(--stack) / 2); - } - - :where(button, .btn, dd, th, td) { - // Unify inset spacing on bordered elements. - padding-block: calc(var(--stack) / 6); - padding-inline: calc(var(--gutter) / 3); - } - - :where(input, textarea) { - padding-inline: 2px; - } - - :where(caption, figcaption) { - padding-block: calc(var(--stack) / 2); - } - - :where(code, kbd) { - padding-block: 0.25ex; - padding-inline: 0.5ch; - } - - :where(figure, pre) { - padding-block-start: calc( - var(--stack) / 2.5 - ); // Line up top of images/codeblocks with text in an adjacent column layout. - } - - :where(pre) { - padding-block-end: calc(var(--stack) / 2.5); - } - - :where(pre code) { - padding-block: var(--stack); - padding-inline: var(--gutter); - } - - details[open] summary + * { - margin-block-start: calc(var(--stack) / 4); - } - - /* ------------------------------------ *\ - General - \* ------------------------------------ */ - - *, - *:before, - *:after { - font-feature-settings: "kern"; - font-kerning: normal; - -moz-osx-font-smoothing: grayscale !important; - -webkit-font-smoothing: antialiased !important; - box-sizing: border-box; - } - - :where(input, textarea, select, fieldset, button, kbd, dd, table, th, td) { - // Unify border styles. - border: var(--border-width) solid var(--text); - } - - :where(input, textarea, select, fieldset, button, .btn, kbd) { - // Unify interactive elements border radius. - border-radius: var(--border-radius); - } - - :where(pre) { - white-space: -moz-pre-wrap; - white-space: -o-pre-wrap; - white-space: pre-wrap; - word-spacing: normal; - word-break: normal; - word-wrap: break-word; - } - - :where(dl) { - display: grid; - grid-template-columns: auto minmax(75%, 1fr); - gap: calc(var(--gutter) / 2); - align-items: baseline; - } - - :where(dt) { - border-block-end: var(--border-width) dotted; - } - - :where(dd) { - block-size: 100%; - margin-inline-start: 0; - } - - :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { - display: block; - inline-size: 100%; - } - - :where(input[type="radio"], input[type="checkbox"]) { - size: 1.5ex; - vertical-align: baseline; - } - - :where(input[type="file"]) { - padding-inline: 0; - border: 0; - } - - ::-webkit-file-upload-button { - appearance: button; - cursor: pointer; - font: inherit; - } - - :where(input, textarea, select) ~ * { - margin-block-start: 0; - font-size: 0.8em; - } - - :where(input:required + mark) { - display: none; - color: var(--text); - background-color: transparent; - } - - :where(input:required:invalid + mark) { - display: block; - } - - :where(hr) { - block-size: 0; - border: 0; - border-block-start: var(--border-width) dashed var(--text); - } - - :where(figure, figure table) { - inline-size: 100%; - } - - :where(figure) { - overflow-x: auto; - } - - :where(figure > img) { - display: block; - } - - :where(table) { - caption-side: bottom; - border-collapse: collapse; - border-spacing: 0; - } - - :where(tr > *:first-child) { - white-space: nowrap; - } - - :where(summary > *) { - display: inline; - vertical-align: middle; - } - - /* ------------------------------------ *\ - Add-ons - - Requires data attributes. - - Remove to do your own layouts. - \* ------------------------------------ */ - - :where(body main) { - padding-block-start: clamp(var(--stack) * 1, 10vmax, var(--stack) * 2); - } \ No newline at end of file +:where(h1, h2, h3, h4, h5, h6, summary strong, legend) { + font-stretch: var(--font-stretch, expanded); +} + +/* ------------------------------------ *\ + Spacing +\* ------------------------------------ */ + +:where(h1, h2, h3, h4, h5, h6, p, figure, form, fieldset, pre, blockquote, ul, ol, dl, details):first-child { + margin-block-start: 0; +} + +:where(h1, h2, h3, h4, h5, h6) + * { + margin-block-start: calc(var(--stack) / 5); +} diff --git a/src/scss/critical.scss b/src/scss/critical.scss index c10e63f..7884cb6 100644 --- a/src/scss/critical.scss +++ b/src/scss/critical.scss @@ -9,8 +9,31 @@ @use './components/icons'; @use './components/header'; +*, +*:before, +*:after { + font-feature-settings: "kern"; + font-kerning: normal; + -moz-osx-font-smoothing: grayscale !important; + -webkit-font-smoothing: antialiased !important; + box-sizing: border-box; +} + html { scroll-padding-top: 2rem; + color: var(--text); + background-color: var(--background); + accent-color: var(--text); + + font-size: clamp( + var(--font-size), + var(--font-size) * 0.9 + 0.25vw, + var(--font-size) * 2 + ); // % ensures browser zoom is supported. + font-family: var(--font); // Use system UI font. + font-weight: var(--font-weight-regular); + line-height: var(--leading); // Standard leading for good legibility. + letter-spacing: var(--tracking); @media screen and (max-width: 767px) { scroll-padding-top: 8rem; @@ -24,6 +47,19 @@ body { padding: .5rem clamp(.2rem, 3vw, 2rem); } } +a { + color: var(--text); + text-decoration: underline; + text-decoration-thickness: var(--border-width); + text-underline-offset: calc(var(--border-width) * 2); + + &:hover { + text-decoration-thickness: calc(var(--border-width) * 2); + } +} +strong { + font-weight: var(--font-weight-semibold); // Make non-heading emphasized text less bold than heading text. +} main { margin: 0;