Implement new css.Build.
This commit is contained in:
Fredrik Jonsson
parent
5ca43e14d3
commit
d984bcaf5d
45 changed files with 1681 additions and 1695 deletions
|
|
@ -13,6 +13,7 @@ rules:
|
||||||
- stylelint-commands
|
- stylelint-commands
|
||||||
- after-comment
|
- after-comment
|
||||||
hue-degree-notation: number
|
hue-degree-notation: number
|
||||||
|
import-notation: null
|
||||||
keyframes-name-pattern:
|
keyframes-name-pattern:
|
||||||
- "--.+"
|
- "--.+"
|
||||||
- message: Keyframe name should be written as <dashed-ident>
|
- message: Keyframe name should be written as <dashed-ident>
|
||||||
|
|
|
||||||
|
|
@ -2,98 +2,96 @@
|
||||||
|
|
||||||
/* Override css variables in "assets/css/_custom.css" */
|
/* Override css variables in "assets/css/_custom.css" */
|
||||||
|
|
||||||
@layer vars {
|
:root {
|
||||||
:root {
|
/* Base colours. */
|
||||||
/* Base colours. */
|
--color-black: oklch(1% 0.01 0);
|
||||||
--color-black: oklch(1% 0.01 0);
|
--color-nearblack: oklch(25% 0.01 0);
|
||||||
--color-nearblack: oklch(25% 0.01 0);
|
--color-grey-700: oklch(38% 0 0);
|
||||||
--color-grey-700: oklch(38% 0 0);
|
--color-grey-600: oklch(49% 0 0);
|
||||||
--color-grey-600: oklch(49% 0 0);
|
--color-grey-500: oklch(60% 0 0);
|
||||||
--color-grey-500: oklch(60% 0 0);
|
--color-grey-400: oklch(71% 0 0);
|
||||||
--color-grey-400: oklch(71% 0 0);
|
--color-grey-300: oklch(80% 0 0);
|
||||||
--color-grey-300: oklch(80% 0 0);
|
--color-grey-200: oklch(89% 0 0);
|
||||||
--color-grey-200: oklch(89% 0 0);
|
--color-grey-100: oklch(95% 0 0);
|
||||||
--color-grey-100: oklch(95% 0 0);
|
--color-nearwhite: oklch(98% 0 0);
|
||||||
--color-nearwhite: oklch(98% 0 0);
|
--color-white: oklch(100% 0 0);
|
||||||
--color-white: oklch(100% 0 0);
|
--color-red: oklch(65% 0.2 24);
|
||||||
--color-red: oklch(65% 0.2 24);
|
--color-yellow: oklch(65% 0.12 80);
|
||||||
--color-yellow: oklch(65% 0.12 80);
|
--color-green: oklch(65% 0.19 138);
|
||||||
--color-green: oklch(65% 0.19 138);
|
--color-blue: oklch(65% 0.16 247);
|
||||||
--color-blue: oklch(65% 0.16 247);
|
|
||||||
|
|
||||||
/* Transparent colours. */
|
/* Transparent colours. */
|
||||||
--color-black-60: oklch(0% 0 0 / 0.6);
|
--color-black-60: oklch(0% 0 0 / 0.6);
|
||||||
--color-black-40: oklch(0% 0 0 / 0.4);
|
--color-black-40: oklch(0% 0 0 / 0.4);
|
||||||
--color-black-20: oklch(0% 0 0 / 0.2);
|
--color-black-20: oklch(0% 0 0 / 0.2);
|
||||||
--color-black-10: oklch(0% 0 0 / 0.1);
|
--color-black-10: oklch(0% 0 0 / 0.1);
|
||||||
--color-white-20: oklch(100% 0 0 / 0.2);
|
--color-white-20: oklch(100% 0 0 / 0.2);
|
||||||
--color-white-10: oklch(100% 0 0 / 0.1);
|
--color-white-10: oklch(100% 0 0 / 0.1);
|
||||||
|
|
||||||
/* Brand colours. */
|
/* Brand colours. */
|
||||||
--color-brand: var(--color-nearblack);
|
--color-brand: var(--color-nearblack);
|
||||||
--color-brand-alt: var(--color-grey-500);
|
--color-brand-alt: var(--color-grey-500);
|
||||||
--color-brand-light: var(--color-grey-300);
|
--color-brand-light: var(--color-grey-300);
|
||||||
--color-brand-dark: var(--color-grey-700);
|
--color-brand-dark: var(--color-grey-700);
|
||||||
|
|
||||||
/* Text colours. */
|
/* Text colours. */
|
||||||
--color-text: var(--color-black);
|
--color-text: var(--color-black);
|
||||||
--color-text-bg: var(--color-white);
|
--color-text-bg: var(--color-white);
|
||||||
--color-text-meta: var(--color-grey-600);
|
--color-text-meta: var(--color-grey-600);
|
||||||
--color-headings: var(--color-nearblack);
|
--color-headings: var(--color-nearblack);
|
||||||
--color-code: var(--color-nearblack);
|
--color-code: var(--color-nearblack);
|
||||||
|
|
||||||
/* Link colours. */
|
/* Link colours. */
|
||||||
--color-link: var(--color-brand);
|
--color-link: var(--color-brand);
|
||||||
--color-link-visited: var(--color-brand);
|
--color-link-visited: var(--color-brand);
|
||||||
--color-link-hover: var(--color-brand-alt);
|
--color-link-hover: var(--color-brand-alt);
|
||||||
--color-link-active: var(--color-red);
|
--color-link-active: var(--color-red);
|
||||||
--color-link-inverted: var(--color-white);
|
--color-link-inverted: var(--color-white);
|
||||||
--color-link-visited-inverted: var(--color-white);
|
--color-link-visited-inverted: var(--color-white);
|
||||||
--color-link-hover-inverted: var(--color-white);
|
--color-link-hover-inverted: var(--color-white);
|
||||||
--color-link-active-inverted: var(--color-red);
|
--color-link-active-inverted: var(--color-red);
|
||||||
|
|
||||||
/* Button colours. */
|
/* Button colours. */
|
||||||
--color-button: var(--color-brand);
|
--color-button: var(--color-brand);
|
||||||
--color-button-hover: var(--color-brand-alt);
|
--color-button-hover: var(--color-brand-alt);
|
||||||
--color-button-text: var(--color-white);
|
--color-button-text: var(--color-white);
|
||||||
--color-button-text-hover: var(--color-white);
|
--color-button-text-hover: var(--color-white);
|
||||||
--color-button-disabled: var(--color-grey-400);
|
--color-button-disabled: var(--color-grey-400);
|
||||||
|
|
||||||
/* Border colours. */
|
/* Border colours. */
|
||||||
--color-border: var(--color-brand);
|
--color-border: var(--color-brand);
|
||||||
--color-border-light: var(--color-brand-light);
|
--color-border-light: var(--color-brand-light);
|
||||||
--color-border-dark: var(--color-brand-dark);
|
--color-border-dark: var(--color-brand-dark);
|
||||||
|
|
||||||
/* Background colours. */
|
/* Background colours. */
|
||||||
--color-header-bg: var(--color-white);
|
--color-header-bg: var(--color-white);
|
||||||
--color-body-bg: var(--color-white);
|
--color-body-bg: var(--color-white);
|
||||||
--color-footer-bg: var(--color-white);
|
--color-footer-bg: var(--color-white);
|
||||||
--color-backdrop: var(--color-grey-100);
|
--color-backdrop: var(--color-grey-100);
|
||||||
|
|
||||||
/* Mobil menu colours. */
|
/* Mobil menu colours. */
|
||||||
--color-mobile-menu: var(--color-brand);
|
--color-mobile-menu: var(--color-brand);
|
||||||
--color-mobile-menu-cover: var(--color-black-20);
|
--color-mobile-menu-cover: var(--color-black-20);
|
||||||
|
|
||||||
/* Form colours. */
|
/* Form colours. */
|
||||||
--color-accent: var(--color-brand);
|
--color-accent: var(--color-brand);
|
||||||
|
|
||||||
/* Row (e.g. in table) colours. */
|
/* Row (e.g. in table) colours. */
|
||||||
--color-row-header: transparent;
|
--color-row-header: transparent;
|
||||||
--color-row-odd: var(--color-nearwhite);
|
--color-row-odd: var(--color-nearwhite);
|
||||||
--color-row-even: transparent;
|
--color-row-even: transparent;
|
||||||
|
|
||||||
/* Status colours. */
|
/* Status colours. */
|
||||||
--color-info: var(--color-blue);
|
--color-info: var(--color-blue);
|
||||||
--color-info-bg: oklch(from var(--color-blue) 100% 0.03 h);
|
--color-info-bg: oklch(from var(--color-blue) 100% 0.03 h);
|
||||||
--color-success: var(--color-green);
|
--color-success: var(--color-green);
|
||||||
--color-success-bg: oklch(from var(--color-green) 100% 0.03 h);
|
--color-success-bg: oklch(from var(--color-green) 100% 0.03 h);
|
||||||
--color-warning: var(--color-yellow);
|
--color-warning: var(--color-yellow);
|
||||||
--color-warning-bg: oklch(from var(--color-yellow) 100% 0.03 h);
|
--color-warning-bg: oklch(from var(--color-yellow) 100% 0.03 h);
|
||||||
--color-error: var(--color-red);
|
--color-error: var(--color-red);
|
||||||
--color-error-bg: oklch(from var(--color-red) 100% 0.03 h);
|
--color-error-bg: oklch(from var(--color-red) 100% 0.03 h);
|
||||||
|
|
||||||
/* Highlight colours. */
|
/* Highlight colours. */
|
||||||
--color-highlight: var(--color-brand-alt);
|
--color-highlight: var(--color-brand-alt);
|
||||||
--color-mark-highlight: var(--color-red);
|
--color-mark-highlight: var(--color-red);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,3 @@ used in any ruleset using a property like this: font-family: Example, serif;
|
||||||
|
|
||||||
The fonts layer is loaded early to minimize front-end performance impact.
|
The fonts layer is loaded early to minimize front-end performance impact.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@layer fonts {
|
|
||||||
/* Add your fonts here. */
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,125 +1,123 @@
|
||||||
@layer vars {
|
:root {
|
||||||
:root {
|
/* Set theme css variables.
|
||||||
/* Set theme css variables.
|
Override css variables in "assets/css/_custom.css" */
|
||||||
Override css variables in "assets/css/_custom.css" */
|
|
||||||
|
|
||||||
/* The max content width. (Consider using one of the breakpoints.) */
|
/* The max content width. (Consider using one of the breakpoints.) */
|
||||||
--max-content-width: 1111px;
|
--max-content-width: 1111px;
|
||||||
|
|
||||||
/* The max page width. Defaults to max-content-width.
|
/* The max page width. Defaults to max-content-width.
|
||||||
Setting this to a larger value than max-content-width allows
|
Setting this to a larger value than max-content-width allows
|
||||||
content with class "stretch" to stretch out to the page edge. */
|
content with class "stretch" to stretch out to the page edge. */
|
||||||
--max-page-width: var(--max-content-width);
|
--max-page-width: var(--max-content-width);
|
||||||
|
|
||||||
/* Base line height, unitless. */
|
/* Base line height, unitless. */
|
||||||
--base-line-height: 1.5;
|
--base-line-height: 1.5;
|
||||||
|
|
||||||
/* Heading line height, unitless. */
|
/* Heading line height, unitless. */
|
||||||
--heading-line-height: 1.3;
|
--heading-line-height: 1.3;
|
||||||
|
|
||||||
/* The font size set on the root html element.
|
/* The font size set on the root html element.
|
||||||
Specify unitless, it will be recalculated as %. */
|
Specify unitless, it will be recalculated as %. */
|
||||||
--base-font-size: 18;
|
--base-font-size: 18;
|
||||||
|
|
||||||
/* Font sizes. */
|
/* Font sizes. */
|
||||||
--fs-xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem);
|
--fs-xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem);
|
||||||
--fs-xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem);
|
--fs-xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem);
|
||||||
--fs-xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem);
|
--fs-xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem);
|
||||||
--fs-xl: clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem);
|
--fs-xl: clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem);
|
||||||
--fs-l: clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem);
|
--fs-l: clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem);
|
||||||
--fs-m: 1rem;
|
--fs-m: 1rem;
|
||||||
--fs-s: 0.889rem;
|
--fs-s: 0.889rem;
|
||||||
--fs-xs: 0.778rem;
|
--fs-xs: 0.778rem;
|
||||||
|
|
||||||
/* Modern font stacks. See how they look at https://modernfontstacks.com/.
|
/* Modern font stacks. See how they look at https://modernfontstacks.com/.
|
||||||
|
|
||||||
The following font family declarations use widely available fonts.
|
The following font family declarations use widely available fonts.
|
||||||
A user's web browser will look at the comma-separated list and will
|
A user's web browser will look at the comma-separated list and will
|
||||||
attempt to use each font in turn until it finds one that is available
|
attempt to use each font in turn until it finds one that is available
|
||||||
on the user's computer. The final "generic" font (sans-serif, serif or
|
on the user's computer. The final "generic" font (sans-serif, serif or
|
||||||
monospace) hints at what type of font to use if the web browser doesn't
|
monospace) hints at what type of font to use if the web browser doesn't
|
||||||
find any of the fonts in the list. */
|
find any of the fonts in the list. */
|
||||||
|
|
||||||
/* stylelint-disable value-keyword-case */
|
/* stylelint-disable value-keyword-case */
|
||||||
|
|
||||||
/* Emojis font stack. Add to end of other stacks when needed. */
|
/* Emojis font stack. Add to end of other stacks when needed. */
|
||||||
--emojis: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
--emojis: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||||
|
|
||||||
/* System-ui font stack. */
|
/* System-ui font stack. */
|
||||||
--system-ui: system-ui, sans-serif;
|
--system-ui: system-ui, sans-serif;
|
||||||
|
|
||||||
/* Serif font stacks. */
|
/* Serif font stacks. */
|
||||||
--ui-serif: ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
--ui-serif: ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
||||||
--transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
--transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
||||||
--old: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
|
--old: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
|
||||||
--slab: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
|
--slab: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
|
||||||
--antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
|
--antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
|
||||||
--didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
|
--didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
|
||||||
|
|
||||||
/* Sans-serif font stacks. */
|
/* Sans-serif font stacks. */
|
||||||
--ui-sans-serif: ui-sans-serif, system-ui, sans-serif;
|
--ui-sans-serif: ui-sans-serif, system-ui, sans-serif;
|
||||||
--humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
--humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
||||||
--geometric: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
--geometric: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||||
--classical: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
|
--classical: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
|
||||||
--neo: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
--neo: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
||||||
--industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
|
--industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
|
||||||
--futura: Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
--futura: Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
||||||
|
|
||||||
/* Rounded Sans-serif font stacks. */
|
/* Rounded Sans-serif font stacks. */
|
||||||
--ui-rounded: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
--ui-rounded: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
||||||
|
|
||||||
/* Monospace font stacks. */
|
/* Monospace font stacks. */
|
||||||
--ui-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
--ui-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
||||||
/* stylelint-enable value-keyword-case */
|
/* stylelint-enable value-keyword-case */
|
||||||
|
|
||||||
/* Font family. */
|
/* Font family. */
|
||||||
--ff-body: var(--ui-serif);
|
--ff-body: var(--ui-serif);
|
||||||
--ff-headings: var(--ui-sans-serif);
|
--ff-headings: var(--ui-sans-serif);
|
||||||
--ff-alt: var(--system-ui);
|
--ff-alt: var(--system-ui);
|
||||||
--ff-monospace: var(--ui-monospace);
|
--ff-monospace: var(--ui-monospace);
|
||||||
|
|
||||||
/* Font weights. */
|
/* Font weights. */
|
||||||
--fw-headings: 700;
|
--fw-headings: 700;
|
||||||
--fw-bolder: 900;
|
--fw-bolder: 900;
|
||||||
--fw-bold: 700;
|
--fw-bold: 700;
|
||||||
--fw-medium: 500;
|
--fw-medium: 500;
|
||||||
--fw-normal: 400;
|
--fw-normal: 400;
|
||||||
--fw-light: 300;
|
--fw-light: 300;
|
||||||
--fw-lighter: 200;
|
--fw-lighter: 200;
|
||||||
|
|
||||||
/* Spacing.
|
/* Spacing.
|
||||||
Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
|
Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
|
||||||
mx--m (mx = margin-block) classes. */
|
mx--m (mx = margin-block) classes. */
|
||||||
--spacing-xxl: calc(3rem * var(--base-line-height));
|
--spacing-xxl: calc(3rem * var(--base-line-height));
|
||||||
--spacing-xl: calc(2rem * var(--base-line-height));
|
--spacing-xl: calc(2rem * var(--base-line-height));
|
||||||
--spacing-l: calc(1.5rem * var(--base-line-height));
|
--spacing-l: calc(1.5rem * var(--base-line-height));
|
||||||
--spacing-m: calc(1rem * var(--base-line-height));
|
--spacing-m: calc(1rem * var(--base-line-height));
|
||||||
--spacing-s: calc(0.75rem * var(--base-line-height));
|
--spacing-s: calc(0.75rem * var(--base-line-height));
|
||||||
--spacing-xs: calc(0.5rem * var(--base-line-height));
|
--spacing-xs: calc(0.5rem * var(--base-line-height));
|
||||||
--spacing-xxs: calc(0.3rem * var(--base-line-height));
|
--spacing-xxs: calc(0.3rem * var(--base-line-height));
|
||||||
|
|
||||||
/* Border radius. */
|
/* Border radius. */
|
||||||
--radius-xl: 1rem;
|
--radius-xl: 1rem;
|
||||||
--radius-l: 0.75rem;
|
--radius-l: 0.75rem;
|
||||||
--radius-m: 0.5rem;
|
--radius-m: 0.5rem;
|
||||||
--radius-s: 0.3rem;
|
--radius-s: 0.3rem;
|
||||||
--radius-xs: 0.125rem;
|
--radius-xs: 0.125rem;
|
||||||
|
|
||||||
/* Breakout amount.
|
/* Breakout amount.
|
||||||
How much should the "breakout" be. Defaults to same as gutters value. */
|
How much should the "breakout" be. Defaults to same as gutters value. */
|
||||||
--breakout: calc(5px + 1.5625vw);
|
--breakout: calc(5px + 1.5625vw);
|
||||||
|
|
||||||
/* The left/right gutter/padding. */
|
/* The left/right gutter/padding. */
|
||||||
--gutters: calc(5px + 1.5625vw);
|
--gutters: calc(5px + 1.5625vw);
|
||||||
--gutters-reverse: calc(0px - (5px + 1.5625vw));
|
--gutters-reverse: calc(0px - (5px + 1.5625vw));
|
||||||
|
|
||||||
/* The amount lists, blockquotes and comments are indented. */
|
/* The amount lists, blockquotes and comments are indented. */
|
||||||
--indent-amount: 2rem;
|
--indent-amount: 2rem;
|
||||||
|
|
||||||
/* The max line width for readability. */
|
/* The max line width for readability. */
|
||||||
--max-line-width: 70ch;
|
--max-line-width: 70ch;
|
||||||
|
|
||||||
/* The pt font-size to be used for printing. */
|
/* The pt font-size to be used for printing. */
|
||||||
--print-font-size: 12pt;
|
--print-font-size: 12pt;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,207 +1,205 @@
|
||||||
/* Zen custom styles */
|
/* Zen custom styles */
|
||||||
|
|
||||||
@layer zen {
|
/* Page */
|
||||||
/* Page */
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--color-backdrop);
|
background-color: var(--color-backdrop);
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
background-color: var(--color-body-bg);
|
background-color: var(--color-body-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
border-block-start: 2px solid var(--color-border);
|
border-block-start: 2px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Apply smaller text to blocks, footer etc. */
|
/* Apply smaller text to blocks, footer etc. */
|
||||||
|
|
||||||
th,
|
th,
|
||||||
label,
|
label,
|
||||||
legend,
|
legend,
|
||||||
figcaption {
|
figcaption {
|
||||||
font-size: var(--fs-s);
|
font-size: var(--fs-s);
|
||||||
}
|
}
|
||||||
|
|
||||||
.language-selector,
|
.language-selector,
|
||||||
.footer {
|
.footer {
|
||||||
font-size: var(--fs-xs);
|
font-size: var(--fs-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Apply heading font stack and colour to labels etc. */
|
/* Apply heading font stack and colour to labels etc. */
|
||||||
|
|
||||||
th,
|
th,
|
||||||
label,
|
label,
|
||||||
legend,
|
legend,
|
||||||
.main-menu,
|
.main-menu,
|
||||||
.header,
|
.header,
|
||||||
.footer {
|
.footer {
|
||||||
color: var(--color-headings);
|
color: var(--color-headings);
|
||||||
font-family: var(--ff-headings);
|
font-family: var(--ff-headings);
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
label {
|
label {
|
||||||
font-weight: var(--fw-headings);
|
font-weight: var(--fw-headings);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Article and content. */
|
/* Article and content. */
|
||||||
|
|
||||||
article,
|
article,
|
||||||
aside {
|
aside {
|
||||||
& > ul {
|
& > ul {
|
||||||
display: table;
|
display: table;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
& > li {
|
& > li {
|
||||||
display: table-row;
|
display: table-row;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
padding-inline-end: var(--spacing-xs);
|
padding-inline-end: var(--spacing-xs);
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
content: '\2981';
|
content: '\2981';
|
||||||
font-size: var(--fs-s);
|
font-size: var(--fs-s);
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > ol {
|
|
||||||
display: table;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
& > li {
|
|
||||||
display: table-row;
|
|
||||||
counter-increment: table-ol;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
padding-inline-end: var(--spacing-xs);
|
|
||||||
display: table-cell;
|
|
||||||
content: counter(table-ol) '.';
|
|
||||||
font-size: var(--fs-s);
|
|
||||||
text-align: end;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
& > ol {
|
||||||
.submitted,
|
display: table;
|
||||||
.tags {
|
list-style: none;
|
||||||
@media (min-width: 666px) {
|
padding: 0;
|
||||||
display: inline-block;
|
|
||||||
padding-inline-end: 1rem;
|
& > li {
|
||||||
|
display: table-row;
|
||||||
|
counter-increment: table-ol;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
padding-inline-end: var(--spacing-xs);
|
||||||
|
display: table-cell;
|
||||||
|
content: counter(table-ol) '.';
|
||||||
|
font-size: var(--fs-s);
|
||||||
|
text-align: end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
.submitted,
|
||||||
|
.tags {
|
||||||
|
@media (min-width: 666px) {
|
||||||
|
display: inline-block;
|
||||||
|
padding-inline-end: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
code {
|
pre {
|
||||||
font-size: var(--fs-xs);
|
border-radius: var(--radius-xs);
|
||||||
overflow-wrap: break-word;
|
padding: 5px;
|
||||||
|
border: 1px solid var(--color-border-light);
|
||||||
|
background-color: var(--color-text-bg);
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 300px;
|
||||||
|
|
||||||
|
&.chroma {
|
||||||
|
max-height: initial;
|
||||||
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
& > code {
|
||||||
border-radius: var(--radius-xs);
|
display: inline-block;
|
||||||
padding: 5px;
|
white-space: pre;
|
||||||
border: 1px solid var(--color-border-light);
|
|
||||||
background-color: var(--color-text-bg);
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 300px;
|
|
||||||
|
|
||||||
&.chroma {
|
|
||||||
max-height: initial;
|
|
||||||
overflow-x: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > code {
|
|
||||||
display: inline-block;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content-dates {
|
.content-dates {
|
||||||
text-align: end;
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.repository-links {
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
order: 1;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
|
||||||
.repository-links {
|
.main-menu {
|
||||||
justify-content: end;
|
a {
|
||||||
align-items: center;
|
display: block;
|
||||||
|
background-color: var(--color-button);
|
||||||
|
color: var(--color-button-text);
|
||||||
|
padding: 2px 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
svg {
|
&:hover,
|
||||||
order: 1;
|
&:focus {
|
||||||
|
background-color: var(--color-button-hover);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Navigation */
|
&:active,
|
||||||
|
&[aria-current] {
|
||||||
.main-menu {
|
text-decoration: underline;
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
background-color: var(--color-button);
|
|
||||||
color: var(--color-button-text);
|
|
||||||
padding: 2px 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background-color: var(--color-button-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&[aria-current] {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Search */
|
/* Search */
|
||||||
|
|
||||||
.search-text {
|
.search-text {
|
||||||
font-size: var(--fs-l);
|
font-size: var(--fs-l);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Copy code */
|
/* Copy code */
|
||||||
|
|
||||||
[data-codeblock] {
|
[data-codeblock] {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
& > pre {
|
& > pre {
|
||||||
padding-block-start: 1lh;
|
padding-block-start: 1lh;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.codebutton {
|
||||||
|
position: absolute;
|
||||||
|
inset-inline-end: 1rem;
|
||||||
|
background: unset;
|
||||||
|
border: unset;
|
||||||
|
text-shadow: unset;
|
||||||
|
font-size: var(--fs-l);
|
||||||
|
color: var(--color-border);
|
||||||
|
rotate: 90deg;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codebutton {
|
|
||||||
position: absolute;
|
|
||||||
inset-inline-end: 1rem;
|
|
||||||
background: unset;
|
|
||||||
border: unset;
|
|
||||||
text-shadow: unset;
|
|
||||||
font-size: var(--fs-l);
|
|
||||||
color: var(--color-border);
|
|
||||||
rotate: 90deg;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
& > span {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&:active {
|
&:active {
|
||||||
scale: 1.15;
|
scale: 1.15;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.flash-item {
|
.flash-item {
|
||||||
animation: --flash 500ms ease-in-out 1ms;
|
animation: --flash 500ms ease-in-out 1ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes --flash {
|
@keyframes --flash {
|
||||||
50% {
|
50% {
|
||||||
border-color: var(--color-warning);
|
border-color: var(--color-warning);
|
||||||
background-color: var(--color-warning-bg);
|
background-color: var(--color-warning-bg);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,21 @@
|
||||||
/* Document */
|
/* Document */
|
||||||
|
|
||||||
@layer base {
|
html {
|
||||||
html {
|
/* Change the default font family in all browsers. */
|
||||||
/* Change the default font family in all browsers. */
|
font-family: var(--ff-body);
|
||||||
font-family: var(--ff-body);
|
|
||||||
|
|
||||||
/* Set base font size in percent. */
|
/* Set base font size in percent. */
|
||||||
font-size: calc(var(--base-font-size) / 16 * 100%);
|
font-size: calc(var(--base-font-size) / 16 * 100%);
|
||||||
|
|
||||||
/* Set text colour. */
|
/* Set text colour. */
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
/* Correct the line height in all browsers. */
|
|
||||||
line-height: var(--base-line-height);
|
|
||||||
|
|
||||||
/* Accent colour for forms. */
|
|
||||||
accent-color: var(--color-accent);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/* Correct the line height in all browsers. */
|
||||||
|
line-height: var(--base-line-height);
|
||||||
|
|
||||||
|
/* Accent colour for forms. */
|
||||||
|
accent-color: var(--color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,89 +1,87 @@
|
||||||
/* Form defaults. */
|
/* Form defaults. */
|
||||||
|
|
||||||
@layer base {
|
form {
|
||||||
form {
|
/* Add vertical rhythm margins. */
|
||||||
/* Add vertical rhythm margins. */
|
margin-block: 0 var(--spacing-m);
|
||||||
margin-block: 0 var(--spacing-m);
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
margin-block: 0 var(--spacing-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: var(--fw-bold);
|
||||||
|
|
||||||
|
/* Display as block if before input. */
|
||||||
|
&:has(+ input),
|
||||||
|
&:has(+ textarea){
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
/* Mark field as required if needed. */
|
||||||
textarea,
|
&:has(+ :required) {
|
||||||
select {
|
&::after {
|
||||||
margin-block: 0 var(--spacing-m);
|
content: '*';
|
||||||
}
|
color: var(--color-mark-highlight);
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: var(--fw-bold);
|
|
||||||
|
|
||||||
/* Display as block if before input. */
|
|
||||||
&:has(+ input),
|
|
||||||
&:has(+ textarea){
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mark field as required if needed. */
|
|
||||||
&:has(+ :required) {
|
|
||||||
&::after {
|
|
||||||
content: '*';
|
|
||||||
color: var(--color-mark-highlight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Valid and invalid state. */
|
|
||||||
input,
|
|
||||||
textarea {
|
|
||||||
&:user-valid {
|
|
||||||
border-color: var(--color-success);
|
|
||||||
border-style: solid;
|
|
||||||
background-color: var(--color-success-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:user-valid {
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:user-invalid {
|
|
||||||
border-color: var(--color-error);
|
|
||||||
border-style: solid;
|
|
||||||
background-color: var(--color-error-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus:user-invalid {
|
|
||||||
border-color: transparent;
|
|
||||||
background-color: var(--color-warning-bg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Set max text line width for readability. */
|
|
||||||
input,
|
|
||||||
label,
|
|
||||||
textarea,
|
|
||||||
select {
|
|
||||||
max-width: var(--max-line-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make field where you enter more info a bit wider. */
|
|
||||||
[type='email'],
|
|
||||||
[type='password'],
|
|
||||||
[type='range'],
|
|
||||||
[type='search'],
|
|
||||||
[type='url'] {
|
|
||||||
width: min(20em, 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make field where you enter more info a bit wider. */
|
|
||||||
[type='text'],
|
|
||||||
textarea {
|
|
||||||
width: min(30em, 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make sure textareas without a rows attribute are not tiny. */
|
|
||||||
textarea:not([rows]) {
|
|
||||||
min-height: 7lh;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Valid and invalid state. */
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
&:user-valid {
|
||||||
|
border-color: var(--color-success);
|
||||||
|
border-style: solid;
|
||||||
|
background-color: var(--color-success-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:user-valid {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:user-invalid {
|
||||||
|
border-color: var(--color-error);
|
||||||
|
border-style: solid;
|
||||||
|
background-color: var(--color-error-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus:user-invalid {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: var(--color-warning-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Set max text line width for readability. */
|
||||||
|
input,
|
||||||
|
label,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
max-width: var(--max-line-width);
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make field where you enter more info a bit wider. */
|
||||||
|
[type='email'],
|
||||||
|
[type='password'],
|
||||||
|
[type='range'],
|
||||||
|
[type='search'],
|
||||||
|
[type='url'] {
|
||||||
|
width: min(20em, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make field where you enter more info a bit wider. */
|
||||||
|
[type='text'],
|
||||||
|
textarea {
|
||||||
|
width: min(30em, 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make sure textareas without a rows attribute are not tiny. */
|
||||||
|
textarea:not([rows]) {
|
||||||
|
min-height: 7lh;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,107 +1,105 @@
|
||||||
/* Grouping content */
|
/* Grouping content */
|
||||||
|
|
||||||
@layer base {
|
/* Block quotes */
|
||||||
/* Block quotes */
|
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
/* Add vertical rhythm margins. */
|
/* Add vertical rhythm margins. */
|
||||||
margin-block: 0 var(--spacing-m);
|
margin-block: 0 var(--spacing-m);
|
||||||
|
|
||||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||||
text-wrap: pretty;
|
text-wrap: pretty;
|
||||||
|
|
||||||
/* Also indent the quote on both sides. */
|
/* Also indent the quote on both sides. */
|
||||||
margin-inline: var(--indent-amount);
|
margin-inline: var(--indent-amount);
|
||||||
|
|
||||||
/* Set max text line width in main for readability. */
|
/* Set max text line width in main for readability. */
|
||||||
max-width: var(--max-line-width);
|
max-width: var(--max-line-width);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Lists */
|
/* Lists */
|
||||||
|
|
||||||
dl,
|
dl,
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
menu {
|
||||||
|
/* Add vertical rhythm margins. */
|
||||||
|
margin-block: 0 var(--spacing-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: var(--fw-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin: 0;
|
||||||
|
margin-inline-start: var(--indent-amount);
|
||||||
|
|
||||||
|
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||||
|
text-wrap: pretty;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
menu {
|
||||||
|
padding: 0;
|
||||||
|
padding-inline-start: var(--indent-amount);
|
||||||
|
|
||||||
|
/* Turn off margins on nested lists. */
|
||||||
ol,
|
ol,
|
||||||
ul,
|
ul,
|
||||||
menu {
|
menu {
|
||||||
/* Add vertical rhythm margins. */
|
|
||||||
margin-block: 0 var(--spacing-m);
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: var(--fw-bold);
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-inline-start: var(--indent-amount);
|
|
||||||
|
|
||||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
|
||||||
text-wrap: pretty;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
menu {
|
|
||||||
padding: 0;
|
|
||||||
padding-inline-start: var(--indent-amount);
|
|
||||||
|
|
||||||
/* Turn off margins on nested lists. */
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
menu {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
|
||||||
text-wrap: pretty;
|
|
||||||
|
|
||||||
/* Set max text line width in main for readability. */
|
|
||||||
.main & {
|
|
||||||
max-width: var(--max-line-width);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Horizontal rule */
|
|
||||||
|
|
||||||
hr {
|
|
||||||
/* Add vertical rhythm margins. */
|
|
||||||
margin-block: var(--spacing-m);
|
|
||||||
border: 0;
|
|
||||||
border-block-start: 1px solid var(--color-border);
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Paragraphs */
|
|
||||||
|
|
||||||
p {
|
|
||||||
/* Add vertical rhythm margins. */
|
|
||||||
margin-block: 0 var(--spacing-m);
|
|
||||||
|
|
||||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
|
||||||
text-wrap: pretty;
|
|
||||||
|
|
||||||
/* Set max text line width in main for readability. */
|
|
||||||
.main & {
|
|
||||||
max-width: var(--max-line-width);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Preformatted text */
|
|
||||||
|
|
||||||
pre {
|
|
||||||
/* Add vertical rhythm margins. */
|
|
||||||
margin-block: 0 var(--spacing-m);
|
|
||||||
font-family: var(--ff-monospace);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Code */
|
|
||||||
|
|
||||||
/* Do not set colour for code with syntax highlighting. */
|
|
||||||
code:not([data-lang]),
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
color: var(--color-code);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||||
|
text-wrap: pretty;
|
||||||
|
|
||||||
|
/* Set max text line width in main for readability. */
|
||||||
|
.main & {
|
||||||
|
max-width: var(--max-line-width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Horizontal rule */
|
||||||
|
|
||||||
|
hr {
|
||||||
|
/* Add vertical rhythm margins. */
|
||||||
|
margin-block: var(--spacing-m);
|
||||||
|
border: 0;
|
||||||
|
border-block-start: 1px solid var(--color-border);
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Paragraphs */
|
||||||
|
|
||||||
|
p {
|
||||||
|
/* Add vertical rhythm margins. */
|
||||||
|
margin-block: 0 var(--spacing-m);
|
||||||
|
|
||||||
|
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||||
|
text-wrap: pretty;
|
||||||
|
|
||||||
|
/* Set max text line width in main for readability. */
|
||||||
|
.main & {
|
||||||
|
max-width: var(--max-line-width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Preformatted text */
|
||||||
|
|
||||||
|
pre {
|
||||||
|
/* Add vertical rhythm margins. */
|
||||||
|
margin-block: 0 var(--spacing-m);
|
||||||
|
font-family: var(--ff-monospace);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code */
|
||||||
|
|
||||||
|
/* Do not set colour for code with syntax highlighting. */
|
||||||
|
code:not([data-lang]),
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
color: var(--color-code);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,58 +2,56 @@
|
||||||
|
|
||||||
All HTML headings, `<h1>` through `<h6>`, are available. */
|
All HTML headings, `<h1>` through `<h6>`, are available. */
|
||||||
|
|
||||||
@layer base {
|
h1,
|
||||||
h1,
|
h2,
|
||||||
h2,
|
h3,
|
||||||
h3,
|
h4,
|
||||||
h4,
|
h5,
|
||||||
h5,
|
h6 {
|
||||||
h6 {
|
margin-block: 1.5em .5em;
|
||||||
margin-block: 1.5em .5em;
|
color: var(--color-headings);
|
||||||
color: var(--color-headings);
|
font-family: var(--ff-headings);
|
||||||
font-family: var(--ff-headings);
|
font-weight: var(--fw-headings);
|
||||||
font-weight: var(--fw-headings);
|
line-height: var(--heading-line-height);
|
||||||
line-height: var(--heading-line-height);
|
text-wrap: balance;
|
||||||
text-wrap: balance;
|
|
||||||
|
|
||||||
/* Smaller margin when a headeing is right after another heading. */
|
/* Smaller margin when a headeing is right after another heading. */
|
||||||
& + & {
|
& + & {
|
||||||
margin-block-start: .75em;
|
margin-block-start: .75em;
|
||||||
}
|
|
||||||
|
|
||||||
/* Set max text line width in main for readability. */
|
|
||||||
.main & {
|
|
||||||
max-width: var(--max-line-width);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
/* Set max text line width in main for readability. */
|
||||||
/* h1 only on top of page so different margins. */
|
.main & {
|
||||||
margin-block-start: var(--spacing-m);
|
max-width: var(--max-line-width);
|
||||||
margin-block-end: var(--spacing-xs);
|
|
||||||
font-size: var(--fs-xxl);
|
|
||||||
letter-spacing: -.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: var(--fs-xl);
|
|
||||||
letter-spacing: -.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: var(--fs-l);
|
|
||||||
letter-spacing: -.01em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: var(--fs-m);
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: var(--fs-s);
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: var(--fs-xs);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
/* h1 only on top of page so different margins. */
|
||||||
|
margin-block-start: var(--spacing-m);
|
||||||
|
margin-block-end: var(--spacing-xs);
|
||||||
|
font-size: var(--fs-xxl);
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: var(--fs-xl);
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: var(--fs-l);
|
||||||
|
letter-spacing: -.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: var(--fs-m);
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: var(--fs-s);
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,89 +1,87 @@
|
||||||
/* Figure and image. */
|
/* Figure and image. */
|
||||||
|
|
||||||
@layer base {
|
figure,
|
||||||
figure,
|
img {
|
||||||
img {
|
&.image {
|
||||||
&.image {
|
--image-padding: .75rem;
|
||||||
--image-padding: .75rem;
|
|
||||||
|
|
||||||
@media (min-width: 666px) {
|
@media (min-width: 666px) {
|
||||||
&.center {
|
&.center {
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
|
||||||
|
|
||||||
&.left {
|
|
||||||
padding-inline-end: var(--image-padding);
|
|
||||||
padding-block-end: var(--image-padding);
|
|
||||||
margin: 0;
|
|
||||||
float: left;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
padding-inline-start: var(--image-padding);
|
|
||||||
padding-block-end: var(--image-padding);
|
|
||||||
margin: 0;
|
|
||||||
float: right;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
/* Add vertical rhythm margins. */
|
|
||||||
margin-block: 0 var(--spacing-m);
|
|
||||||
|
|
||||||
&.image {
|
|
||||||
figcaption {
|
|
||||||
padding-block-start: var(--image-padding);
|
|
||||||
contain: inline-size;
|
|
||||||
|
|
||||||
/* Set max text line width in main for readability. */
|
|
||||||
max-width: var(--max-line-width);
|
|
||||||
|
|
||||||
/* Nicer text wrap, e.g. no lone word on last line. */
|
|
||||||
text-wrap: pretty;
|
|
||||||
|
|
||||||
@media (min-width: 666px) {
|
|
||||||
padding-block-start: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 666px) {
|
&.left {
|
||||||
inline-size: fit-content;
|
padding-inline-end: var(--image-padding);
|
||||||
|
padding-block-end: var(--image-padding);
|
||||||
&.left {
|
margin: 0;
|
||||||
figcaption {
|
float: left;
|
||||||
padding-inline-end: var(--image-padding);
|
clear: both;
|
||||||
padding-block-end: var(--image-padding);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
|
||||||
figcaption {
|
|
||||||
padding-inline-start: var(--image-padding);
|
|
||||||
padding-block-end: var(--image-padding);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.podcast {
|
&.right {
|
||||||
audio {
|
padding-inline-start: var(--image-padding);
|
||||||
width: 95%;
|
padding-block-end: var(--image-padding);
|
||||||
|
margin: 0;
|
||||||
|
float: right;
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
figure {
|
||||||
&.image {
|
/* Add vertical rhythm margins. */
|
||||||
/* Add vertical rhythm margins. */
|
margin-block: 0 var(--spacing-m);
|
||||||
margin-block: 0 var(--spacing-m);
|
|
||||||
|
&.image {
|
||||||
|
figcaption {
|
||||||
|
padding-block-start: var(--image-padding);
|
||||||
|
contain: inline-size;
|
||||||
|
|
||||||
|
/* Set max text line width in main for readability. */
|
||||||
|
max-width: var(--max-line-width);
|
||||||
|
|
||||||
|
/* Nicer text wrap, e.g. no lone word on last line. */
|
||||||
|
text-wrap: pretty;
|
||||||
|
|
||||||
|
@media (min-width: 666px) {
|
||||||
|
padding-block-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 666px) {
|
||||||
|
inline-size: fit-content;
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
figcaption {
|
||||||
|
padding-inline-end: var(--image-padding);
|
||||||
|
padding-block-end: var(--image-padding);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
figcaption {
|
||||||
|
padding-inline-start: var(--image-padding);
|
||||||
|
padding-block-end: var(--image-padding);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.podcast {
|
||||||
|
audio {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
&.image {
|
||||||
|
/* Add vertical rhythm margins. */
|
||||||
|
margin-block: 0 var(--spacing-m);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,71 +11,69 @@ http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
|
||||||
:focus - A link that has been given keyboard focus.
|
:focus - A link that has been given keyboard focus.
|
||||||
:active - A link that is being actively clicked. */
|
:active - A link that is being actively clicked. */
|
||||||
|
|
||||||
@layer base {
|
a {
|
||||||
|
color: var(--color-link);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Any element can receive focus, but only links can be visited, so we can
|
||||||
|
safely lower this selector's specificity. This also ensures visited links
|
||||||
|
with additional styles won't have their styles overridden. */
|
||||||
|
:visited {
|
||||||
|
color: var(--color-link-visited);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
color: var(--color-link-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: var(--color-link-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove underline from links to current page to */
|
||||||
|
/* indicate that there is no need to click on it. */
|
||||||
|
[aria-current] {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Use smooth scrolling unless user prefer less motion. */
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
:has(:target) {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
scroll-padding-block-start: var(--gutters);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-nav {
|
||||||
a {
|
a {
|
||||||
color: var(--color-link);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Any element can receive focus, but only links can be visited, so we can
|
|
||||||
safely lower this selector's specificity. This also ensures visited links
|
|
||||||
with additional styles won't have their styles overridden. */
|
|
||||||
:visited {
|
|
||||||
color: var(--color-link-visited);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover,
|
|
||||||
a:focus {
|
|
||||||
color: var(--color-link-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
color: var(--color-link-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Remove underline from links to current page to */
|
|
||||||
/* indicate that there is no need to click on it. */
|
|
||||||
[aria-current] {
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
|
|
||||||
/* Use smooth scrolling unless user prefer less motion. */
|
&:hover,
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
&:focus {
|
||||||
:has(:target) {
|
text-decoration: underline;
|
||||||
scroll-behavior: smooth;
|
|
||||||
scroll-padding-block-start: var(--gutters);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.link-nav {
|
/* Inverted links, for dark backgrounds. */
|
||||||
a {
|
.link-inverted {
|
||||||
text-decoration: none;
|
a {
|
||||||
|
&:link {
|
||||||
|
color: var(--color-link-inverted);
|
||||||
|
}
|
||||||
|
|
||||||
&:hover,
|
&:visited {
|
||||||
&:focus {
|
color: var(--color-link-visited-inverted);
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Inverted links, for dark backgrounds. */
|
&:hover,
|
||||||
.link-inverted {
|
&:focus {
|
||||||
a {
|
color: var(--color-link-hover-inverted);
|
||||||
&:link {
|
}
|
||||||
color: var(--color-link-inverted);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:visited {
|
|
||||||
color: var(--color-link-visited-inverted);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: var(--color-link-hover-inverted);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: var(--color-link-active-inverted);
|
color: var(--color-link-active-inverted);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,32 @@
|
||||||
/* Tables */
|
/* Tables */
|
||||||
|
|
||||||
@layer base {
|
table {
|
||||||
table {
|
/* Add vertical rhythm margins. */
|
||||||
/* Add vertical rhythm margins. */
|
margin-block: 0 var(--spacing-m);
|
||||||
margin-block: 0 var(--spacing-m);
|
|
||||||
|
|
||||||
/* Remove default spacing between table cells. */
|
/* Remove default spacing between table cells. */
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|
||||||
/* Prevent cramped-looking tables */
|
/* Prevent cramped-looking tables */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
/* Remove most spacing between table cells. */
|
/* Remove most spacing between table cells. */
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
/* Align content to top of cells. */
|
/* Align content to top of cells. */
|
||||||
vertical-align: text-top;
|
vertical-align: text-top;
|
||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
/* Align content to bottom of headers. */
|
/* Align content to bottom of headers. */
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
caption,
|
caption,
|
||||||
th {
|
th {
|
||||||
/* Align all text the same. */
|
/* Align all text the same. */
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,34 @@
|
||||||
/* Anchor */
|
/* Anchor */
|
||||||
|
|
||||||
@layer components {
|
.anchor {
|
||||||
.anchor {
|
--anchor-gap: .5rem;
|
||||||
--anchor-gap: .5rem;
|
--anchor-opacity: .4;
|
||||||
--anchor-opacity: .4;
|
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto;
|
grid-template-columns: auto auto;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
gap: var(--anchor-gap);
|
gap: var(--anchor-gap);
|
||||||
|
|
||||||
|
a {
|
||||||
|
opacity: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(:focus-visible),
|
||||||
|
&:hover {
|
||||||
a {
|
a {
|
||||||
opacity: 0;
|
opacity: var(--anchor-opacity);
|
||||||
text-decoration: none;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:has(:focus-visible),
|
&:focus-visible,
|
||||||
&:hover {
|
&:hover {
|
||||||
a {
|
opacity: 1;
|
||||||
opacity: var(--anchor-opacity);
|
|
||||||
|
|
||||||
&:focus-visible,
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
p:has(+ .anchor) {
|
p:has(+ .anchor) {
|
||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,66 +1,64 @@
|
||||||
/* Box */
|
/* Box */
|
||||||
|
|
||||||
@layer components {
|
.box {
|
||||||
.box {
|
/* Add vertical rhythm margins. */
|
||||||
/* Add vertical rhythm margins. */
|
margin-block: var(--spacing-m);
|
||||||
margin-block: var(--spacing-m);
|
padding: var(--spacing-xs);
|
||||||
padding: var(--spacing-xs);
|
border: 5px solid var(--color-border);
|
||||||
border: 5px solid var(--color-border);
|
|
||||||
|
|
||||||
.box__title,
|
.box__title,
|
||||||
.title {
|
.title {
|
||||||
|
margin-block-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
&:first-child {
|
||||||
margin-block-start: 0;
|
margin-block-start: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > * {
|
&:last-child {
|
||||||
&:first-child {
|
margin-block-end: 0;
|
||||||
margin-block-start: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-block-end: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.box--highlight {
|
.box--highlight {
|
||||||
border-color: var(--color-highlight);
|
border-color: var(--color-highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box--fit {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
.box--fit {
|
.box--gutter {
|
||||||
width: fit-content;
|
padding-inline: var(--gutters);
|
||||||
}
|
}
|
||||||
|
|
||||||
.box--gutter {
|
.box--inverted {
|
||||||
padding-inline: var(--gutters);
|
background: var(--color-border);
|
||||||
}
|
color: var(--color-text-bg);
|
||||||
|
|
||||||
.box--inverted {
|
/* Make sure headings etc. also gets inverted. */
|
||||||
background: var(--color-border);
|
* {
|
||||||
color: var(--color-text-bg);
|
color: var(--color-text-bg);
|
||||||
|
}
|
||||||
|
|
||||||
/* Make sure headings etc. also gets inverted. */
|
a {
|
||||||
* {
|
&:link {
|
||||||
color: var(--color-text-bg);
|
color: var(--color-link-inverted);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
&:visited {
|
||||||
&:link {
|
color: var(--color-link-visited-inverted);
|
||||||
color: var(--color-link-inverted);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&:visited {
|
&:hover,
|
||||||
color: var(--color-link-visited-inverted);
|
&:focus {
|
||||||
}
|
color: var(--color-link-hover-inverted);
|
||||||
|
}
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
color: var(--color-link-hover-inverted);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: var(--color-link-active-inverted);
|
color: var(--color-link-active-inverted);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,108 +2,106 @@
|
||||||
|
|
||||||
/* Button */
|
/* Button */
|
||||||
|
|
||||||
@layer components {
|
.button,
|
||||||
.button,
|
[type='button'],
|
||||||
[type='button'],
|
[type='submit'] {
|
||||||
[type='submit'] {
|
/* Some styles don't apply to <a> links since they are inline elements by default. */
|
||||||
/* Some styles don't apply to <a> links since they are inline elements by default. */
|
display: inline-block;
|
||||||
display: inline-block;
|
font-family: var(--ff-headings);
|
||||||
font-family: var(--ff-headings);
|
text-decoration: none;
|
||||||
text-decoration: none;
|
text-align: center;
|
||||||
text-align: center;
|
width: fit-content;
|
||||||
width: fit-content;
|
padding: .2rem 1rem;
|
||||||
padding: .2rem 1rem;
|
|
||||||
|
|
||||||
/* Improve usability and consistency of cursor style between image-type `input` and others. */
|
/* Improve usability and consistency of cursor style between image-type `input` and others. */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: var(--color-button-text);
|
||||||
|
text-shadow: var(--color-button) 0 1px 0;
|
||||||
|
background: linear-gradient(var(--color-button), var(--color-button-hover));
|
||||||
|
border: 1px solid var(--color-button-hover);
|
||||||
|
border-radius: var(--radius-s);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus-visible,
|
||||||
|
&:active {
|
||||||
|
/* Override any link underlines and color changes. */
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-button-text-hover);
|
||||||
|
text-shadow: var(--color-button-hover) 0 1px 0;
|
||||||
|
background: linear-gradient(var(--color-button-hover), var(--color-button));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
box-shadow: inset 2px 2px 5px var(--color-black-40);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--small {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
padding: .2rem .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--alt {
|
||||||
|
color: var(--color-button-text-hover);
|
||||||
|
background: var(--color-button-hover);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus-visible,
|
||||||
|
&:active {
|
||||||
color: var(--color-button-text);
|
color: var(--color-button-text);
|
||||||
text-shadow: var(--color-button) 0 1px 0;
|
background: var(--color-button);
|
||||||
background: linear-gradient(var(--color-button), var(--color-button-hover));
|
}
|
||||||
border: 1px solid var(--color-button-hover);
|
}
|
||||||
border-radius: var(--radius-s);
|
|
||||||
|
.button--outline {
|
||||||
|
color: var(--color-button);
|
||||||
|
background: var(--color-button-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--accept {
|
||||||
|
border-color: var(--color-success);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--decline {
|
||||||
|
border-color: var(--color-warning);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The disabled variation should always go last, so that it overrides any
|
||||||
|
other variations. */
|
||||||
|
.button,
|
||||||
|
[type='button'],
|
||||||
|
[type='submit'] {
|
||||||
|
&:disabled {
|
||||||
|
background-color: var(--color-grey-200);
|
||||||
|
border: 1px solid var(--color-button-disabled);
|
||||||
|
background-image: none;
|
||||||
|
text-shadow: none;
|
||||||
|
cursor: default;
|
||||||
|
color: var(--color-button-disabled);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus-visible,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
/* Override any link underlines and color changes. */
|
/* Override any link underlines and color changes. */
|
||||||
text-decoration: none;
|
|
||||||
color: var(--color-button-text-hover);
|
|
||||||
text-shadow: var(--color-button-hover) 0 1px 0;
|
|
||||||
background: linear-gradient(var(--color-button-hover), var(--color-button));
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
box-shadow: inset 2px 2px 5px var(--color-black-40);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--small {
|
|
||||||
font-size: var(--fs-xs);
|
|
||||||
padding: .2rem .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--alt {
|
|
||||||
color: var(--color-button-text-hover);
|
|
||||||
background: var(--color-button-hover);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus-visible,
|
|
||||||
&:active {
|
|
||||||
color: var(--color-button-text);
|
|
||||||
background: var(--color-button);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--outline {
|
|
||||||
color: var(--color-button);
|
|
||||||
background: var(--color-button-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--accept {
|
|
||||||
border-color: var(--color-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--decline {
|
|
||||||
border-color: var(--color-warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The disabled variation should always go last, so that it overrides any
|
|
||||||
other variations. */
|
|
||||||
.button,
|
|
||||||
[type='button'],
|
|
||||||
[type='submit'] {
|
|
||||||
&:disabled {
|
|
||||||
background-color: var(--color-grey-200);
|
|
||||||
border: 1px solid var(--color-button-disabled);
|
|
||||||
background-image: none;
|
|
||||||
text-shadow: none;
|
|
||||||
cursor: default;
|
|
||||||
color: var(--color-button-disabled);
|
color: var(--color-button-disabled);
|
||||||
|
text-decoration: none;
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
/* Override any link underlines and color changes. */
|
|
||||||
color: var(--color-button-disabled);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* For forms with multiple fields show submit button below the form. */
|
/* For forms with multiple fields show submit button below the form. */
|
||||||
input:not(:only-of-type),
|
input:not(:only-of-type),
|
||||||
textarea {
|
textarea {
|
||||||
& + [type='submit'] {
|
& + [type='submit'] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* For forms on mobile with single field add space between it and the submit button. */
|
/* For forms on mobile with single field add space between it and the submit button. */
|
||||||
@media (min-width: 666px) {
|
@media (min-width: 666px) {
|
||||||
input:only-of-type {
|
input:only-of-type {
|
||||||
&:has(+ [type='submit']) {
|
&:has(+ [type='submit']) {
|
||||||
margin-inline-end: .5rem;
|
margin-inline-end: .5rem;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,69 +2,67 @@
|
||||||
|
|
||||||
A simple cards style. */
|
A simple cards style. */
|
||||||
|
|
||||||
@layer components {
|
.cards {
|
||||||
.cards {
|
--grid-group-column-min: 200px;
|
||||||
--grid-group-column-min: 200px;
|
--grid-group-gap: 1.5rem;
|
||||||
--grid-group-gap: 1.5rem;
|
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--grid-group-gap);
|
gap: var(--grid-group-gap);
|
||||||
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-group-column-min), 100%), 1fr));
|
||||||
|
|
||||||
/* Add vertical rhythm margins. */
|
/* Add vertical rhythm margins. */
|
||||||
margin-block: var(--spacing-m);
|
margin-block: var(--spacing-m);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
padding: var(--spacing-xs);
|
padding: var(--spacing-xs);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-block-start: 0;
|
margin-block-start: 0;
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-block-end: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.card--highlight {
|
&:last-child {
|
||||||
border-color: var(--color-highlight);
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.card--featured {
|
.card--highlight {
|
||||||
grid-row: span 2;
|
border-color: var(--color-highlight);
|
||||||
grid-column: span 2;
|
}
|
||||||
}
|
|
||||||
|
.card--featured {
|
||||||
|
grid-row: span 2;
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
.card--gutter {
|
.card--gutter {
|
||||||
padding-inline: var(--gutters);
|
padding-inline: var(--gutters);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card--inverted {
|
.card--inverted {
|
||||||
background: var(--color-border);
|
background: var(--color-border);
|
||||||
color: var(--color-text-bg);
|
color: var(--color-text-bg);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
&:link {
|
&:link {
|
||||||
color: var(--color-link-inverted);
|
color: var(--color-link-inverted);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:visited {
|
&:visited {
|
||||||
color: var(--color-link-visited-inverted);
|
color: var(--color-link-visited-inverted);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: var(--color-link-hover-inverted);
|
color: var(--color-link-hover-inverted);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: var(--color-link-active-inverted);
|
color: var(--color-link-active-inverted);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,12 @@
|
||||||
@layer components {
|
.grid-center {
|
||||||
.grid-center {
|
display: grid;
|
||||||
display: grid;
|
place-content: center;
|
||||||
place-content: center;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.margin-center {
|
.margin-center {
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,17 +3,15 @@
|
||||||
Allows the bottom of an element to extend to the bottom of all floated child
|
Allows the bottom of an element to extend to the bottom of all floated child
|
||||||
elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
|
elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||||
|
|
||||||
@layer components {
|
.clearfix {
|
||||||
.clearfix {
|
&::before {
|
||||||
&::before {
|
content: '';
|
||||||
content: '';
|
display: table;
|
||||||
display: table;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
display: table;
|
display: table;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,32 @@
|
||||||
/* Cookieconsent */
|
/* Cookieconsent */
|
||||||
|
|
||||||
@layer components {
|
.cookieconsent {
|
||||||
.cookieconsent {
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: .5rem;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--spacing-xs);
|
||||||
|
color: var(--color-warning);
|
||||||
|
background-color: var(--color-warning-bg);
|
||||||
|
border-block-start: 4px solid var(--color-warning);
|
||||||
|
font-size: var(--fs-s);
|
||||||
|
transform: translateY(100vh);
|
||||||
|
transition: all 130ms ease-out;
|
||||||
|
z-index: 99;
|
||||||
|
|
||||||
|
.cookieconsent__actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: .5rem;
|
gap: .5rem;
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: var(--spacing-xs);
|
|
||||||
color: var(--color-warning);
|
|
||||||
background-color: var(--color-warning-bg);
|
|
||||||
border-block-start: 4px solid var(--color-warning);
|
|
||||||
font-size: var(--fs-s);
|
|
||||||
transform: translateY(100vh);
|
|
||||||
transition: all 130ms ease-out;
|
|
||||||
z-index: 99;
|
|
||||||
|
|
||||||
.cookieconsent__actions {
|
|
||||||
display: flex;
|
|
||||||
gap: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-cookieconsentopen] {
|
&[hidden] {
|
||||||
transform: translateY(0);
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-cookieconsentopen] {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,13 @@
|
||||||
@layer components {
|
.disabled {
|
||||||
.disabled {
|
/* Re-set default cursor for disabled elements. */
|
||||||
/* Re-set default cursor for disabled elements. */
|
cursor: default;
|
||||||
cursor: default;
|
color: var(--color-button-disabled);
|
||||||
color: var(--color-button-disabled);
|
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
/* Override any link underlines and color changes. */
|
/* Override any link underlines and color changes. */
|
||||||
color: var(--color-button-disabled);
|
color: var(--color-button-disabled);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue