From d984bcaf5d11efd3b594d33fd1c51ae82f1cd2e9 Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Wed, 8 Apr 2026 11:17:24 +0200 Subject: [PATCH] Implement new css.Build. --- .stylelintrc.yaml | 1 + assets/css/_colors.css | 162 +++++---- assets/css/_fonts.css | 4 - assets/css/_variables.css | 198 ++++++----- assets/css/_zen.css | 320 +++++++++--------- assets/css/base/_document.css | 33 +- assets/css/base/_forms.css | 162 +++++---- assets/css/base/_grouping.css | 184 +++++----- assets/css/base/_headings.css | 98 +++--- assets/css/base/_images.css | 148 ++++---- assets/css/base/_links.css | 108 +++--- assets/css/base/_tables.css | 48 ++- assets/css/components/_anchor.css | 48 ++- assets/css/components/_box.css | 88 +++-- assets/css/components/_button.css | 178 +++++----- assets/css/components/_cards.css | 94 +++-- assets/css/components/_center.css | 20 +- assets/css/components/_clearfix.css | 20 +- assets/css/components/_cookieconsent.css | 50 ++- assets/css/components/_disabled.css | 22 +- assets/css/components/_flex-group.css | 64 ++-- assets/css/components/_flex-inline.css | 30 +- assets/css/components/_footer.css | 14 +- assets/css/components/_grid-group.css | 74 ++-- assets/css/components/_grid-stack.css | 12 +- assets/css/components/_header.css | 80 +++-- assets/css/components/_hidden.css | 22 +- assets/css/components/_icon-inline.css | 36 +- assets/css/components/_language-selector.css | 14 +- assets/css/components/_list-straight-left.css | 72 ++-- assets/css/components/_messages.css | 68 ++-- assets/css/components/_meta.css | 10 +- assets/css/components/_overlay.css | 10 +- assets/css/components/_pager.css | 84 +++-- assets/css/components/_responsive-video.css | 36 +- assets/css/components/_spacing.css | 190 +++++------ assets/css/components/_tables.css | 90 +++-- assets/css/components/_tags.css | 8 +- assets/css/components/_visually-hidden.css | 20 +- assets/css/components/_wrap.css | 12 +- assets/css/layers-init.css | 1 - assets/css/layouts/_layouts.css | 296 ++++++++-------- assets/css/reset/_reset.css | 170 +++++----- assets/css/styles.css | 45 +++ layouts/_partials/head/styles.html | 46 ++- 45 files changed, 1738 insertions(+), 1752 deletions(-) delete mode 100644 assets/css/layers-init.css create mode 100644 assets/css/styles.css diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml index f21a46b..400f9c4 100644 --- a/.stylelintrc.yaml +++ b/.stylelintrc.yaml @@ -13,6 +13,7 @@ rules: - stylelint-commands - after-comment hue-degree-notation: number + import-notation: null keyframes-name-pattern: - "--.+" - message: Keyframe name should be written as diff --git a/assets/css/_colors.css b/assets/css/_colors.css index 8a8836b..18cd93c 100644 --- a/assets/css/_colors.css +++ b/assets/css/_colors.css @@ -2,98 +2,96 @@ /* Override css variables in "assets/css/_custom.css" */ -@layer vars { - :root { - /* Base colours. */ - --color-black: oklch(1% 0.01 0); - --color-nearblack: oklch(25% 0.01 0); - --color-grey-700: oklch(38% 0 0); - --color-grey-600: oklch(49% 0 0); - --color-grey-500: oklch(60% 0 0); - --color-grey-400: oklch(71% 0 0); - --color-grey-300: oklch(80% 0 0); - --color-grey-200: oklch(89% 0 0); - --color-grey-100: oklch(95% 0 0); - --color-nearwhite: oklch(98% 0 0); - --color-white: oklch(100% 0 0); - --color-red: oklch(65% 0.2 24); - --color-yellow: oklch(65% 0.12 80); - --color-green: oklch(65% 0.19 138); - --color-blue: oklch(65% 0.16 247); +:root { + /* Base colours. */ + --color-black: oklch(1% 0.01 0); + --color-nearblack: oklch(25% 0.01 0); + --color-grey-700: oklch(38% 0 0); + --color-grey-600: oklch(49% 0 0); + --color-grey-500: oklch(60% 0 0); + --color-grey-400: oklch(71% 0 0); + --color-grey-300: oklch(80% 0 0); + --color-grey-200: oklch(89% 0 0); + --color-grey-100: oklch(95% 0 0); + --color-nearwhite: oklch(98% 0 0); + --color-white: oklch(100% 0 0); + --color-red: oklch(65% 0.2 24); + --color-yellow: oklch(65% 0.12 80); + --color-green: oklch(65% 0.19 138); + --color-blue: oklch(65% 0.16 247); - /* Transparent colours. */ - --color-black-60: oklch(0% 0 0 / 0.6); - --color-black-40: oklch(0% 0 0 / 0.4); - --color-black-20: oklch(0% 0 0 / 0.2); - --color-black-10: oklch(0% 0 0 / 0.1); - --color-white-20: oklch(100% 0 0 / 0.2); - --color-white-10: oklch(100% 0 0 / 0.1); + /* Transparent colours. */ + --color-black-60: oklch(0% 0 0 / 0.6); + --color-black-40: oklch(0% 0 0 / 0.4); + --color-black-20: oklch(0% 0 0 / 0.2); + --color-black-10: oklch(0% 0 0 / 0.1); + --color-white-20: oklch(100% 0 0 / 0.2); + --color-white-10: oklch(100% 0 0 / 0.1); - /* Brand colours. */ - --color-brand: var(--color-nearblack); - --color-brand-alt: var(--color-grey-500); - --color-brand-light: var(--color-grey-300); - --color-brand-dark: var(--color-grey-700); + /* Brand colours. */ + --color-brand: var(--color-nearblack); + --color-brand-alt: var(--color-grey-500); + --color-brand-light: var(--color-grey-300); + --color-brand-dark: var(--color-grey-700); - /* Text colours. */ - --color-text: var(--color-black); - --color-text-bg: var(--color-white); - --color-text-meta: var(--color-grey-600); - --color-headings: var(--color-nearblack); - --color-code: var(--color-nearblack); + /* Text colours. */ + --color-text: var(--color-black); + --color-text-bg: var(--color-white); + --color-text-meta: var(--color-grey-600); + --color-headings: var(--color-nearblack); + --color-code: var(--color-nearblack); - /* Link colours. */ - --color-link: var(--color-brand); - --color-link-visited: var(--color-brand); - --color-link-hover: var(--color-brand-alt); - --color-link-active: var(--color-red); - --color-link-inverted: var(--color-white); - --color-link-visited-inverted: var(--color-white); - --color-link-hover-inverted: var(--color-white); - --color-link-active-inverted: var(--color-red); + /* Link colours. */ + --color-link: var(--color-brand); + --color-link-visited: var(--color-brand); + --color-link-hover: var(--color-brand-alt); + --color-link-active: var(--color-red); + --color-link-inverted: var(--color-white); + --color-link-visited-inverted: var(--color-white); + --color-link-hover-inverted: var(--color-white); + --color-link-active-inverted: var(--color-red); - /* Button colours. */ - --color-button: var(--color-brand); - --color-button-hover: var(--color-brand-alt); - --color-button-text: var(--color-white); - --color-button-text-hover: var(--color-white); - --color-button-disabled: var(--color-grey-400); + /* Button colours. */ + --color-button: var(--color-brand); + --color-button-hover: var(--color-brand-alt); + --color-button-text: var(--color-white); + --color-button-text-hover: var(--color-white); + --color-button-disabled: var(--color-grey-400); - /* Border colours. */ - --color-border: var(--color-brand); - --color-border-light: var(--color-brand-light); - --color-border-dark: var(--color-brand-dark); + /* Border colours. */ + --color-border: var(--color-brand); + --color-border-light: var(--color-brand-light); + --color-border-dark: var(--color-brand-dark); - /* Background colours. */ - --color-header-bg: var(--color-white); - --color-body-bg: var(--color-white); - --color-footer-bg: var(--color-white); - --color-backdrop: var(--color-grey-100); + /* Background colours. */ + --color-header-bg: var(--color-white); + --color-body-bg: var(--color-white); + --color-footer-bg: var(--color-white); + --color-backdrop: var(--color-grey-100); - /* Mobil menu colours. */ - --color-mobile-menu: var(--color-brand); - --color-mobile-menu-cover: var(--color-black-20); + /* Mobil menu colours. */ + --color-mobile-menu: var(--color-brand); + --color-mobile-menu-cover: var(--color-black-20); - /* Form colours. */ - --color-accent: var(--color-brand); + /* Form colours. */ + --color-accent: var(--color-brand); - /* Row (e.g. in table) colours. */ - --color-row-header: transparent; - --color-row-odd: var(--color-nearwhite); - --color-row-even: transparent; + /* Row (e.g. in table) colours. */ + --color-row-header: transparent; + --color-row-odd: var(--color-nearwhite); + --color-row-even: transparent; - /* Status colours. */ - --color-info: var(--color-blue); - --color-info-bg: oklch(from var(--color-blue) 100% 0.03 h); - --color-success: var(--color-green); - --color-success-bg: oklch(from var(--color-green) 100% 0.03 h); - --color-warning: var(--color-yellow); - --color-warning-bg: oklch(from var(--color-yellow) 100% 0.03 h); - --color-error: var(--color-red); - --color-error-bg: oklch(from var(--color-red) 100% 0.03 h); + /* Status colours. */ + --color-info: var(--color-blue); + --color-info-bg: oklch(from var(--color-blue) 100% 0.03 h); + --color-success: var(--color-green); + --color-success-bg: oklch(from var(--color-green) 100% 0.03 h); + --color-warning: var(--color-yellow); + --color-warning-bg: oklch(from var(--color-yellow) 100% 0.03 h); + --color-error: var(--color-red); + --color-error-bg: oklch(from var(--color-red) 100% 0.03 h); - /* Highlight colours. */ - --color-highlight: var(--color-brand-alt); - --color-mark-highlight: var(--color-red); - } + /* Highlight colours. */ + --color-highlight: var(--color-brand-alt); + --color-mark-highlight: var(--color-red); } diff --git a/assets/css/_fonts.css b/assets/css/_fonts.css index e8dd1fa..0a6f4b1 100644 --- a/assets/css/_fonts.css +++ b/assets/css/_fonts.css @@ -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. */ - -@layer fonts { -/* Add your fonts here. */ -} diff --git a/assets/css/_variables.css b/assets/css/_variables.css index 5b7b4c2..84669bf 100644 --- a/assets/css/_variables.css +++ b/assets/css/_variables.css @@ -1,125 +1,123 @@ -@layer vars { - :root { - /* Set theme css variables. - Override css variables in "assets/css/_custom.css" */ +:root { + /* Set theme css variables. + Override css variables in "assets/css/_custom.css" */ - /* The max content width. (Consider using one of the breakpoints.) */ - --max-content-width: 1111px; + /* The max content width. (Consider using one of the breakpoints.) */ + --max-content-width: 1111px; - /* The max page width. Defaults to max-content-width. - Setting this to a larger value than max-content-width allows - content with class "stretch" to stretch out to the page edge. */ - --max-page-width: var(--max-content-width); + /* The max page width. Defaults to max-content-width. + Setting this to a larger value than max-content-width allows + content with class "stretch" to stretch out to the page edge. */ + --max-page-width: var(--max-content-width); - /* Base line height, unitless. */ - --base-line-height: 1.5; + /* Base line height, unitless. */ + --base-line-height: 1.5; - /* Heading line height, unitless. */ - --heading-line-height: 1.3; + /* Heading line height, unitless. */ + --heading-line-height: 1.3; - /* The font size set on the root html element. - Specify unitless, it will be recalculated as %. */ - --base-font-size: 18; + /* The font size set on the root html element. + Specify unitless, it will be recalculated as %. */ + --base-font-size: 18; - /* Font sizes. */ - --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-xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem); - --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-m: 1rem; - --fs-s: 0.889rem; - --fs-xs: 0.778rem; + /* Font sizes. */ + --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-xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem); + --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-m: 1rem; + --fs-s: 0.889rem; + --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. - 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 - 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 - find any of the fonts in the list. */ + The following font family declarations use widely available fonts. + 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 + 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 + 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: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + /* Emojis font stack. Add to end of other stacks when needed. */ + --emojis: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - /* System-ui font stack. */ - --system-ui: system-ui, sans-serif; + /* System-ui font stack. */ + --system-ui: system-ui, sans-serif; - /* Serif font stacks. */ - --ui-serif: ui-serif, 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; - --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; - --didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif; + /* Serif font stacks. */ + --ui-serif: ui-serif, 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; + --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; + --didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif; - /* Sans-serif font stacks. */ - --ui-sans-serif: ui-sans-serif, system-ui, 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; - --classical: Optima, Candara, 'Noto Sans', source-sans-pro, 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; - --futura: Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; + /* Sans-serif font stacks. */ + --ui-sans-serif: ui-sans-serif, system-ui, 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; + --classical: Optima, Candara, 'Noto Sans', source-sans-pro, 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; + --futura: Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; - /* 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; + /* 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; - /* Monospace font stacks. */ - --ui-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; - /* stylelint-enable value-keyword-case */ + /* Monospace font stacks. */ + --ui-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; + /* stylelint-enable value-keyword-case */ - /* Font family. */ - --ff-body: var(--ui-serif); - --ff-headings: var(--ui-sans-serif); - --ff-alt: var(--system-ui); - --ff-monospace: var(--ui-monospace); + /* Font family. */ + --ff-body: var(--ui-serif); + --ff-headings: var(--ui-sans-serif); + --ff-alt: var(--system-ui); + --ff-monospace: var(--ui-monospace); - /* Font weights. */ - --fw-headings: 700; - --fw-bolder: 900; - --fw-bold: 700; - --fw-medium: 500; - --fw-normal: 400; - --fw-light: 300; - --fw-lighter: 200; + /* Font weights. */ + --fw-headings: 700; + --fw-bolder: 900; + --fw-bold: 700; + --fw-medium: 500; + --fw-normal: 400; + --fw-light: 300; + --fw-lighter: 200; - /* Spacing. - Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and - mx--m (mx = margin-block) classes. */ - --spacing-xxl: calc(3rem * var(--base-line-height)); - --spacing-xl: calc(2rem * var(--base-line-height)); - --spacing-l: calc(1.5rem * var(--base-line-height)); - --spacing-m: calc(1rem * var(--base-line-height)); - --spacing-s: calc(0.75rem * var(--base-line-height)); - --spacing-xs: calc(0.5rem * var(--base-line-height)); - --spacing-xxs: calc(0.3rem * var(--base-line-height)); + /* Spacing. + Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and + mx--m (mx = margin-block) classes. */ + --spacing-xxl: calc(3rem * var(--base-line-height)); + --spacing-xl: calc(2rem * var(--base-line-height)); + --spacing-l: calc(1.5rem * var(--base-line-height)); + --spacing-m: calc(1rem * var(--base-line-height)); + --spacing-s: calc(0.75rem * var(--base-line-height)); + --spacing-xs: calc(0.5rem * var(--base-line-height)); + --spacing-xxs: calc(0.3rem * var(--base-line-height)); - /* Border radius. */ - --radius-xl: 1rem; - --radius-l: 0.75rem; - --radius-m: 0.5rem; - --radius-s: 0.3rem; - --radius-xs: 0.125rem; + /* Border radius. */ + --radius-xl: 1rem; + --radius-l: 0.75rem; + --radius-m: 0.5rem; + --radius-s: 0.3rem; + --radius-xs: 0.125rem; - /* Breakout amount. - How much should the "breakout" be. Defaults to same as gutters value. */ - --breakout: calc(5px + 1.5625vw); + /* Breakout amount. + How much should the "breakout" be. Defaults to same as gutters value. */ + --breakout: calc(5px + 1.5625vw); - /* The left/right gutter/padding. */ - --gutters: calc(5px + 1.5625vw); - --gutters-reverse: calc(0px - (5px + 1.5625vw)); + /* The left/right gutter/padding. */ + --gutters: calc(5px + 1.5625vw); + --gutters-reverse: calc(0px - (5px + 1.5625vw)); - /* The amount lists, blockquotes and comments are indented. */ - --indent-amount: 2rem; + /* The amount lists, blockquotes and comments are indented. */ + --indent-amount: 2rem; - /* The max line width for readability. */ - --max-line-width: 70ch; + /* The max line width for readability. */ + --max-line-width: 70ch; - /* The pt font-size to be used for printing. */ - --print-font-size: 12pt; - } + /* The pt font-size to be used for printing. */ + --print-font-size: 12pt; } diff --git a/assets/css/_zen.css b/assets/css/_zen.css index 6945f17..9237cae 100644 --- a/assets/css/_zen.css +++ b/assets/css/_zen.css @@ -1,207 +1,205 @@ /* Zen custom styles */ -@layer zen { - /* Page */ +/* Page */ - body { - background-color: var(--color-backdrop); - } +body { + background-color: var(--color-backdrop); +} - .page { - background-color: var(--color-body-bg); - } +.page { + background-color: var(--color-body-bg); +} - .footer { - border-block-start: 2px solid var(--color-border); - } +.footer { + border-block-start: 2px solid var(--color-border); +} - /* Apply smaller text to blocks, footer etc. */ +/* Apply smaller text to blocks, footer etc. */ - th, - label, - legend, - figcaption { - font-size: var(--fs-s); - } +th, +label, +legend, +figcaption { + font-size: var(--fs-s); +} - .language-selector, - .footer { - font-size: var(--fs-xs); - } +.language-selector, +.footer { + font-size: var(--fs-xs); +} - /* Apply heading font stack and colour to labels etc. */ +/* Apply heading font stack and colour to labels etc. */ - th, - label, - legend, - .main-menu, - .header, - .footer { - color: var(--color-headings); - font-family: var(--ff-headings); - } +th, +label, +legend, +.main-menu, +.header, +.footer { + color: var(--color-headings); + font-family: var(--ff-headings); +} - th, - label { - font-weight: var(--fw-headings); - } +th, +label { + font-weight: var(--fw-headings); +} - /* Article and content. */ +/* Article and content. */ - article, - aside { - & > ul { - display: table; - list-style: none; - padding: 0; +article, +aside { + & > ul { + display: table; + list-style: none; + padding: 0; - & > li { - display: table-row; + & > li { + display: table-row; - &::before { - padding-inline-end: var(--spacing-xs); - display: table-cell; - content: '\2981'; - 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; - } + &::before { + padding-inline-end: var(--spacing-xs); + display: table-cell; + content: '\2981'; + font-size: var(--fs-s); } } } - article { - .submitted, - .tags { - @media (min-width: 666px) { - display: inline-block; - padding-inline-end: 1rem; + & > 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 { + .submitted, + .tags { + @media (min-width: 666px) { + display: inline-block; + padding-inline-end: 1rem; + } + } + + code { + font-size: var(--fs-xs); + overflow-wrap: break-word; + } - code { - font-size: var(--fs-xs); - overflow-wrap: break-word; + pre { + border-radius: var(--radius-xs); + 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 { - border-radius: var(--radius-xs); - 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; - } - - & > code { - display: inline-block; - white-space: pre; - } + & > code { + display: inline-block; + white-space: pre; } } +} - .content-dates { - text-align: end; +.content-dates { + text-align: end; +} + +.repository-links { + justify-content: end; + align-items: center; + + svg { + order: 1; } +} + +/* Navigation */ - .repository-links { - justify-content: end; - align-items: center; +.main-menu { + a { + display: block; + background-color: var(--color-button); + color: var(--color-button-text); + padding: 2px 8px; + text-decoration: none; - svg { - order: 1; + &:hover, + &:focus { + background-color: var(--color-button-hover); } - } - /* Navigation */ - - .main-menu { - 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; - } + &:active, + &[aria-current] { + text-decoration: underline; } } +} - /* Search */ +/* Search */ - .search-text { - font-size: var(--fs-l); - } +.search-text { + font-size: var(--fs-l); +} - /* Copy code */ +/* Copy code */ - [data-codeblock] { - position: relative; +[data-codeblock] { + position: relative; - & > pre { - padding-block-start: 1lh; - } + & > pre { + 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, - &:focus-visible, - &:active { - scale: 1.15; - } + &:hover, + &:focus-visible, + &:active { + scale: 1.15; } +} - .flash-item { - animation: --flash 500ms ease-in-out 1ms; - } +.flash-item { + animation: --flash 500ms ease-in-out 1ms; +} - @keyframes --flash { - 50% { - border-color: var(--color-warning); - background-color: var(--color-warning-bg); - } +@keyframes --flash { + 50% { + border-color: var(--color-warning); + background-color: var(--color-warning-bg); } } diff --git a/assets/css/base/_document.css b/assets/css/base/_document.css index 6a8726d..4c27a5a 100644 --- a/assets/css/base/_document.css +++ b/assets/css/base/_document.css @@ -1,22 +1,21 @@ /* Document */ -@layer base { - html { - /* Change the default font family in all browsers. */ - font-family: var(--ff-body); +html { + /* Change the default font family in all browsers. */ + font-family: var(--ff-body); - /* Set base font size in percent. */ - font-size: calc(var(--base-font-size) / 16 * 100%); + /* Set base font size in percent. */ + font-size: calc(var(--base-font-size) / 16 * 100%); - /* Set text colour. */ - 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); - } + /* Set text colour. */ + 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); +} + diff --git a/assets/css/base/_forms.css b/assets/css/base/_forms.css index ae3b2e1..80ac871 100644 --- a/assets/css/base/_forms.css +++ b/assets/css/base/_forms.css @@ -1,89 +1,87 @@ /* Form defaults. */ -@layer base { - form { - /* Add vertical rhythm margins. */ - margin-block: 0 var(--spacing-m); +form { + /* Add vertical rhythm margins. */ + 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, - 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; + /* Mark field as required if needed. */ + &:has(+ :required) { + &::after { + content: '*'; + color: var(--color-mark-highlight); } - - /* 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; +} diff --git a/assets/css/base/_grouping.css b/assets/css/base/_grouping.css index 2a4f24a..520660c 100644 --- a/assets/css/base/_grouping.css +++ b/assets/css/base/_grouping.css @@ -1,107 +1,105 @@ /* Grouping content */ -@layer base { - /* Block quotes */ +/* Block quotes */ - blockquote { - /* Add vertical rhythm margins. */ - margin-block: 0 var(--spacing-m); +blockquote { + /* Add vertical rhythm margins. */ + margin-block: 0 var(--spacing-m); - /* Nicer text wrap, e.g. no lone word on last line. */ - text-wrap: pretty; + /* Nicer text wrap, e.g. no lone word on last line. */ + text-wrap: pretty; - /* Also indent the quote on both sides. */ - margin-inline: var(--indent-amount); + /* Also indent the quote on both sides. */ + margin-inline: var(--indent-amount); - /* Set max text line width in main for readability. */ - max-width: var(--max-line-width); - } + /* Set max text line width in main for readability. */ + 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, 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, - 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); +} diff --git a/assets/css/base/_headings.css b/assets/css/base/_headings.css index c52b09a..d2ab2db 100644 --- a/assets/css/base/_headings.css +++ b/assets/css/base/_headings.css @@ -2,58 +2,56 @@ All HTML headings, `

` through `

`, are available. */ -@layer base { - h1, - h2, - h3, - h4, - h5, - h6 { - margin-block: 1.5em .5em; - color: var(--color-headings); - font-family: var(--ff-headings); - font-weight: var(--fw-headings); - line-height: var(--heading-line-height); - text-wrap: balance; +h1, +h2, +h3, +h4, +h5, +h6 { + margin-block: 1.5em .5em; + color: var(--color-headings); + font-family: var(--ff-headings); + font-weight: var(--fw-headings); + line-height: var(--heading-line-height); + text-wrap: balance; - /* Smaller margin when a headeing is right after another heading. */ - & + & { - margin-block-start: .75em; - } - - /* Set max text line width in main for readability. */ - .main & { - max-width: var(--max-line-width); - } + /* Smaller margin when a headeing is right after another heading. */ + & + & { + margin-block-start: .75em; } - 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); + /* Set max text line width in main for readability. */ + .main & { + max-width: var(--max-line-width); } } + +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); +} diff --git a/assets/css/base/_images.css b/assets/css/base/_images.css index aea8e6b..0d6b12b 100644 --- a/assets/css/base/_images.css +++ b/assets/css/base/_images.css @@ -1,89 +1,87 @@ /* Figure and image. */ -@layer base { - figure, - img { - &.image { - --image-padding: .75rem; +figure, +img { + &.image { + --image-padding: .75rem; - @media (min-width: 666px) { - &.center { - 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) { + &.center { + margin-inline: auto; } - @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); - } - } + &.left { + padding-inline-end: var(--image-padding); + padding-block-end: var(--image-padding); + margin: 0; + float: left; + clear: both; } - } - &.podcast { - audio { - width: 95%; + &.right { + padding-inline-start: var(--image-padding); + padding-block-end: var(--image-padding); + margin: 0; + float: right; + clear: both; } } } +} - img { - &.image { - /* Add vertical rhythm margins. */ - margin-block: 0 var(--spacing-m); +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) { + 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); } } diff --git a/assets/css/base/_links.css b/assets/css/base/_links.css index db60d7b..4443aee 100644 --- a/assets/css/base/_links.css +++ b/assets/css/base/_links.css @@ -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. :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 { - 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); + &:hover, + &:focus { + text-decoration: underline; } } +} - .link-nav { - a { - text-decoration: none; +/* Inverted links, for dark backgrounds. */ +.link-inverted { + a { + &:link { + color: var(--color-link-inverted); + } - &:hover, - &:focus { - text-decoration: underline; - } + &:visited { + color: var(--color-link-visited-inverted); } - } - /* Inverted links, for dark backgrounds. */ - .link-inverted { - a { - &:link { - color: var(--color-link-inverted); - } - - &:visited { - color: var(--color-link-visited-inverted); - } - - &:hover, - &:focus { - color: var(--color-link-hover-inverted); - } + &:hover, + &:focus { + color: var(--color-link-hover-inverted); + } - &:active { - color: var(--color-link-active-inverted); - } + &:active { + color: var(--color-link-active-inverted); } } } diff --git a/assets/css/base/_tables.css b/assets/css/base/_tables.css index 7c3bc29..cdde0d6 100644 --- a/assets/css/base/_tables.css +++ b/assets/css/base/_tables.css @@ -1,34 +1,32 @@ /* Tables */ -@layer base { - table { - /* Add vertical rhythm margins. */ - margin-block: 0 var(--spacing-m); +table { + /* Add vertical rhythm margins. */ + margin-block: 0 var(--spacing-m); - /* Remove default spacing between table cells. */ - border-collapse: collapse; + /* Remove default spacing between table cells. */ + border-collapse: collapse; - /* Prevent cramped-looking tables */ - width: 100%; - } + /* Prevent cramped-looking tables */ + width: 100%; +} - td, - th { - /* Remove most spacing between table cells. */ - padding: 0; +td, +th { + /* Remove most spacing between table cells. */ + padding: 0; - /* Align content to top of cells. */ - vertical-align: text-top; - } + /* Align content to top of cells. */ + vertical-align: text-top; +} - th { - /* Align content to bottom of headers. */ - vertical-align: bottom; - } +th { + /* Align content to bottom of headers. */ + vertical-align: bottom; +} - caption, - th { - /* Align all text the same. */ - text-align: start; - } +caption, +th { + /* Align all text the same. */ + text-align: start; } diff --git a/assets/css/components/_anchor.css b/assets/css/components/_anchor.css index d0209d6..f0e0bb5 100644 --- a/assets/css/components/_anchor.css +++ b/assets/css/components/_anchor.css @@ -1,36 +1,34 @@ /* Anchor */ -@layer components { - .anchor { - --anchor-gap: .5rem; - --anchor-opacity: .4; +.anchor { + --anchor-gap: .5rem; + --anchor-opacity: .4; - display: grid; - grid-template-columns: auto auto; - justify-content: start; - align-items: baseline; - gap: var(--anchor-gap); + display: grid; + grid-template-columns: auto auto; + justify-content: start; + align-items: baseline; + gap: var(--anchor-gap); + a { + opacity: 0; + text-decoration: none; + width: fit-content; + } + + &:has(:focus-visible), + &:hover { a { - opacity: 0; - text-decoration: none; - width: fit-content; - } + opacity: var(--anchor-opacity); - &:has(:focus-visible), - &:hover { - a { - opacity: var(--anchor-opacity); - - &:focus-visible, - &:hover { - opacity: 1; - } + &:focus-visible, + &:hover { + opacity: 1; } } } +} - p:has(+ .anchor) { - margin-block-end: 0; - } +p:has(+ .anchor) { + margin-block-end: 0; } diff --git a/assets/css/components/_box.css b/assets/css/components/_box.css index 8303bbb..2d0d53c 100644 --- a/assets/css/components/_box.css +++ b/assets/css/components/_box.css @@ -1,66 +1,64 @@ /* Box */ -@layer components { - .box { - /* Add vertical rhythm margins. */ - margin-block: var(--spacing-m); - padding: var(--spacing-xs); - border: 5px solid var(--color-border); +.box { + /* Add vertical rhythm margins. */ + margin-block: var(--spacing-m); + padding: var(--spacing-xs); + border: 5px solid var(--color-border); - .box__title, - .title { + .box__title, + .title { + margin-block-start: 0; + } + + & > * { + &:first-child { margin-block-start: 0; } - & > * { - &:first-child { - margin-block-start: 0; - } - - &:last-child { - margin-block-end: 0; - } + &:last-child { + margin-block-end: 0; } } +} - .box--highlight { - border-color: var(--color-highlight); - } +.box--highlight { + border-color: var(--color-highlight); +} + +.box--fit { + width: fit-content; +} - .box--fit { - width: fit-content; - } +.box--gutter { + padding-inline: var(--gutters); +} - .box--gutter { - padding-inline: var(--gutters); - } +.box--inverted { + background: var(--color-border); + color: var(--color-text-bg); - .box--inverted { - background: var(--color-border); + /* Make sure headings etc. also gets inverted. */ + * { color: var(--color-text-bg); + } - /* Make sure headings etc. also gets inverted. */ - * { - color: var(--color-text-bg); + a { + &:link { + color: var(--color-link-inverted); } - a { - &:link { - color: var(--color-link-inverted); - } + &:visited { + color: var(--color-link-visited-inverted); + } - &:visited { - color: var(--color-link-visited-inverted); - } - - &:hover, - &:focus { - color: var(--color-link-hover-inverted); - } + &:hover, + &:focus { + color: var(--color-link-hover-inverted); + } - &:active { - color: var(--color-link-active-inverted); - } + &:active { + color: var(--color-link-active-inverted); } } } diff --git a/assets/css/components/_button.css b/assets/css/components/_button.css index f042297..66889d5 100644 --- a/assets/css/components/_button.css +++ b/assets/css/components/_button.css @@ -2,108 +2,106 @@ /* Button */ -@layer components { - .button, - [type='button'], - [type='submit'] { - /* Some styles don't apply to links since they are inline elements by default. */ - display: inline-block; - font-family: var(--ff-headings); - text-decoration: none; - text-align: center; - width: fit-content; - padding: .2rem 1rem; +.button, +[type='button'], +[type='submit'] { + /* Some styles don't apply to links since they are inline elements by default. */ + display: inline-block; + font-family: var(--ff-headings); + text-decoration: none; + text-align: center; + width: fit-content; + padding: .2rem 1rem; - /* Improve usability and consistency of cursor style between image-type `input` and others. */ - cursor: pointer; + /* Improve usability and consistency of cursor style between image-type `input` and others. */ + 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); - 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); + 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); &:hover, - &:focus-visible, + &:focus, &: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); - 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); - - &:hover, - &:focus, - &:active { - /* Override any link underlines and color changes. */ - color: var(--color-button-disabled); - text-decoration: none; - } + text-decoration: none; } } +} - /* For forms with multiple fields show submit button below the form. */ - input:not(:only-of-type), - textarea { - & + [type='submit'] { - display: block; - } +/* For forms with multiple fields show submit button below the form. */ +input:not(:only-of-type), +textarea { + & + [type='submit'] { + display: block; } +} - /* For forms on mobile with single field add space between it and the submit button. */ - @media (min-width: 666px) { - input:only-of-type { - &:has(+ [type='submit']) { - margin-inline-end: .5rem; - } +/* For forms on mobile with single field add space between it and the submit button. */ +@media (min-width: 666px) { + input:only-of-type { + &:has(+ [type='submit']) { + margin-inline-end: .5rem; } } } diff --git a/assets/css/components/_cards.css b/assets/css/components/_cards.css index 0b4982d..63e7eb5 100644 --- a/assets/css/components/_cards.css +++ b/assets/css/components/_cards.css @@ -2,69 +2,67 @@ A simple cards style. */ -@layer components { - .cards { - --grid-group-column-min: 200px; - --grid-group-gap: 1.5rem; +.cards { + --grid-group-column-min: 200px; + --grid-group-gap: 1.5rem; - display: grid; - gap: var(--grid-group-gap); + display: grid; + 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. */ - margin-block: var(--spacing-m); - } + /* Add vertical rhythm margins. */ + margin-block: var(--spacing-m); +} - .card { - padding: var(--spacing-xs); - border: 1px solid var(--color-border); +.card { + padding: var(--spacing-xs); + border: 1px solid var(--color-border); - & > * { - &:first-child { - margin-block-start: 0; - } - - &:last-child { - margin-block-end: 0; - } + & > * { + &:first-child { + margin-block-start: 0; } - } - .card--highlight { - border-color: var(--color-highlight); + &:last-child { + margin-block-end: 0; + } } +} - .card--featured { - grid-row: span 2; - grid-column: span 2; - } +.card--highlight { + border-color: var(--color-highlight); +} + +.card--featured { + grid-row: span 2; + grid-column: span 2; +} - .card--gutter { - padding-inline: var(--gutters); - } +.card--gutter { + padding-inline: var(--gutters); +} - .card--inverted { - background: var(--color-border); - color: var(--color-text-bg); +.card--inverted { + background: var(--color-border); + color: var(--color-text-bg); - a { - &:link { - color: var(--color-link-inverted); - } + a { + &:link { + color: var(--color-link-inverted); + } - &:visited { - color: var(--color-link-visited-inverted); - } + &:visited { + color: var(--color-link-visited-inverted); + } - &:hover, - &:focus { - color: var(--color-link-hover-inverted); - } + &:hover, + &:focus { + color: var(--color-link-hover-inverted); + } - &:active { - color: var(--color-link-active-inverted); - } + &:active { + color: var(--color-link-active-inverted); } } } diff --git a/assets/css/components/_center.css b/assets/css/components/_center.css index c21db77..f90f4ff 100644 --- a/assets/css/components/_center.css +++ b/assets/css/components/_center.css @@ -1,14 +1,12 @@ -@layer components { - .grid-center { - display: grid; - place-content: center; - } +.grid-center { + display: grid; + place-content: center; +} - .text-center { - text-align: center; - } +.text-center { + text-align: center; +} - .margin-center { - margin-inline: auto; - } +.margin-center { + margin-inline: auto; } diff --git a/assets/css/components/_clearfix.css b/assets/css/components/_clearfix.css index bfd86b4..137a647 100644 --- a/assets/css/components/_clearfix.css +++ b/assets/css/components/_clearfix.css @@ -3,17 +3,15 @@ Allows the bottom of an element to extend to the bottom of all floated child elements. See http://nicolasgallagher.com/micro-clearfix-hack/ */ -@layer components { - .clearfix { - &::before { - content: ''; - display: table; - } +.clearfix { + &::before { + content: ''; + display: table; + } - &::after { - content: ''; - display: table; - clear: both; - } + &::after { + content: ''; + display: table; + clear: both; } } diff --git a/assets/css/components/_cookieconsent.css b/assets/css/components/_cookieconsent.css index 249fa09..a3e5760 100644 --- a/assets/css/components/_cookieconsent.css +++ b/assets/css/components/_cookieconsent.css @@ -1,34 +1,32 @@ /* 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; - 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; - gap: .5rem; - } - - &[hidden] { - display: none; - } } - [data-cookieconsentopen] { - transform: translateY(0); + &[hidden] { + display: none; } } + +[data-cookieconsentopen] { + transform: translateY(0); +} diff --git a/assets/css/components/_disabled.css b/assets/css/components/_disabled.css index 8c25ab9..56f572a 100644 --- a/assets/css/components/_disabled.css +++ b/assets/css/components/_disabled.css @@ -1,15 +1,13 @@ -@layer components { - .disabled { - /* Re-set default cursor for disabled elements. */ - cursor: default; - color: var(--color-button-disabled); +.disabled { + /* Re-set default cursor for disabled elements. */ + cursor: default; + color: var(--color-button-disabled); - &:hover, - &:focus, - &:active { - /* Override any link underlines and color changes. */ - 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; } } diff --git a/assets/css/components/_flex-group.css b/assets/css/components/_flex-group.css index 68175f1..8f4de28 100644 --- a/assets/css/components/_flex-group.css +++ b/assets/css/components/_flex-group.css @@ -1,44 +1,42 @@ -@layer components { - .flex-group { - --flex-gap: calc(var(--base-line-height) * 1rem); +.flex-group { + --flex-gap: calc(var(--base-line-height) * 1rem); - display: flex; - gap: var(--flex-gap); - flex-wrap: wrap; + display: flex; + gap: var(--flex-gap); + flex-wrap: wrap; - & > * { - flex: 1; - } + & > * { + flex: 1; } +} - @media (min-width: 666px) { - .flex-group--2 > * { - flex-basis: calc(100% / 2 - var(--flex-gap)); - flex-grow: 0; - } +@media (min-width: 666px) { + .flex-group--2 > * { + flex-basis: calc(100% / 2 - var(--flex-gap)); + flex-grow: 0; + } - .flex-group--3 > * { - flex-basis: calc(100% / 3 - var(--flex-gap)); - flex-grow: 0; - } + .flex-group--3 > * { + flex-basis: calc(100% / 3 - var(--flex-gap)); + flex-grow: 0; + } - .flex-group--4 > * { - flex-basis: calc(100% / 4 - var(--flex-gap)); - flex-grow: 0; - } + .flex-group--4 > * { + flex-basis: calc(100% / 4 - var(--flex-gap)); + flex-grow: 0; + } - .flex-group--5 > * { - flex-basis: calc(100% / 5 - var(--flex-gap)); - flex-grow: 0; - } + .flex-group--5 > * { + flex-basis: calc(100% / 5 - var(--flex-gap)); + flex-grow: 0; + } - .flex-group--6 > * { - flex-basis: calc(100% / 6 - var(--flex-gap)); - flex-grow: 0; - } + .flex-group--6 > * { + flex-basis: calc(100% / 6 - var(--flex-gap)); + flex-grow: 0; + } - .flex-group--grow > * { - flex-grow: 1; - } + .flex-group--grow > * { + flex-grow: 1; } } diff --git a/assets/css/components/_flex-inline.css b/assets/css/components/_flex-inline.css index f6de006..53b458f 100644 --- a/assets/css/components/_flex-inline.css +++ b/assets/css/components/_flex-inline.css @@ -1,20 +1,18 @@ -@layer components { - .flex-inline { - --flex-inline-gap: .5rem; +.flex-inline { + --flex-inline-gap: .5rem; - display: flex; - flex-wrap: wrap; - gap: var(--flex-inline-gap); - padding: 0; - text-align: start; + display: flex; + flex-wrap: wrap; + gap: var(--flex-inline-gap); + padding: 0; + text-align: start; - .flex-inline__item, - li { - list-style: none; - } - } - - .flex-inline--inline { - display: inline-flex; + .flex-inline__item, + li { + list-style: none; } } + +.flex-inline--inline { + display: inline-flex; +} diff --git a/assets/css/components/_footer.css b/assets/css/components/_footer.css index 996ecfe..44d7ddb 100644 --- a/assets/css/components/_footer.css +++ b/assets/css/components/_footer.css @@ -1,13 +1,11 @@ /* Branding footer */ -@layer components { - .footer { - padding-block: var(--gutters); - background-color: var(--color-footer-bg); - text-align: center; +.footer { + padding-block: var(--gutters); + background-color: var(--color-footer-bg); + text-align: center; - p { - margin: 0; - } + p { + margin: 0; } } diff --git a/assets/css/components/_grid-group.css b/assets/css/components/_grid-group.css index 654d3b5..eea2fe2 100644 --- a/assets/css/components/_grid-group.css +++ b/assets/css/components/_grid-group.css @@ -1,51 +1,49 @@ -@layer components { - .grid-group { - --grid-group-column-min: 200px; - --grid-group-gap: 1.5rem; +.grid-group { + --grid-group-column-min: 200px; + --grid-group-gap: 1.5rem; - display: grid; - gap: var(--grid-group-gap); + display: grid; + 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)); +} - .grid-group--fill { - grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-group-column-min), 100%), 1fr)); - } +.grid-group--fill { + grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-group-column-min), 100%), 1fr)); +} - .grid-group--100 { - --grid-group-column-min: 100px; - } +.grid-group--100 { + --grid-group-column-min: 100px; +} - .grid-group--150 { - --grid-group-column-min: 150px; - } +.grid-group--150 { + --grid-group-column-min: 150px; +} - .grid-group--200 { - --grid-group-column-min: 200px; - } +.grid-group--200 { + --grid-group-column-min: 200px; +} - .grid-group--250 { - --grid-group-column-min: 250px; - } +.grid-group--250 { + --grid-group-column-min: 250px; +} - .grid-group--300 { - --grid-group-column-min: 300px; - } +.grid-group--300 { + --grid-group-column-min: 300px; +} - .grid-group--350 { - --grid-group-column-min: 350px; - } +.grid-group--350 { + --grid-group-column-min: 350px; +} - .grid-group--400 { - --grid-group-column-min: 400px; - } +.grid-group--400 { + --grid-group-column-min: 400px; +} - .grid-group--500 { - --grid-group-column-min: 500px; - } +.grid-group--500 { + --grid-group-column-min: 500px; +} - .grid-group--600 { - --grid-group-column-min: 600px; - } +.grid-group--600 { + --grid-group-column-min: 600px; } diff --git a/assets/css/components/_grid-stack.css b/assets/css/components/_grid-stack.css index 509a477..e7af758 100644 --- a/assets/css/components/_grid-stack.css +++ b/assets/css/components/_grid-stack.css @@ -1,10 +1,8 @@ -@layer components { - .grid-stack { - display: grid; +.grid-stack { + display: grid; - & > * { - grid-column: 1 / 2; - grid-row: 1 / 2; - } + & > * { + grid-column: 1 / 2; + grid-row: 1 / 2; } } diff --git a/assets/css/components/_header.css b/assets/css/components/_header.css index 5de8116..53424f1 100644 --- a/assets/css/components/_header.css +++ b/assets/css/components/_header.css @@ -1,55 +1,53 @@ /* Branding header */ -@layer components { - .header { - --header-gap: var(--spacing-s); +.header { + --header-gap: var(--spacing-s); - padding-block: min(var(--gutters), var(--spacing-m)); - display: flex; - flex-direction: column; - gap: var(--header-gap); - background-color: var(--color-header-bg); + padding-block: min(var(--gutters), var(--spacing-m)); + display: flex; + flex-direction: column; + gap: var(--header-gap); + background-color: var(--color-header-bg); - @media (min-width: 666px) { - flex-direction: row; - align-items: center; - } + @media (min-width: 666px) { + flex-direction: row; + align-items: center; } +} - /* Wrapping link for logo. */ - .header__logo { - width: fit-content; - } +/* Wrapping link for logo. */ +.header__logo { + width: fit-content; +} + +/* Logo image. */ +.header__logo-image { + vertical-align: bottom; +} - /* Logo image. */ - .header__logo-image { - vertical-align: bottom; - } +/* The name of the website. */ +.header__site-name { + margin: 0; + line-height: 1; +} - /* The name of the website. */ - .header__site-name { - margin: 0; - line-height: 1; +/* The link around the name of the website. */ +.header__site-link { + &:link, + &:visited { + color: var(--color-text); + text-decoration: none; } - - /* The link around the name of the website. */ - .header__site-link { - &:link, - &:visited { - color: var(--color-text); - text-decoration: none; - } - &:hover, - &:focus { - text-decoration: underline; - } + &:hover, + &:focus { + text-decoration: underline; } +} - /* Wrapper for any blocks placed in the header region. */ - .header__region { - @media (min-width: 666px) { - margin-inline-start: auto; - } +/* Wrapper for any blocks placed in the header region. */ +.header__region { + @media (min-width: 666px) { + margin-inline-start: auto; } } diff --git a/assets/css/components/_hidden.css b/assets/css/components/_hidden.css index 2f720b1..68682fa 100644 --- a/assets/css/components/_hidden.css +++ b/assets/css/components/_hidden.css @@ -9,20 +9,18 @@ from a user. For anything you want to hide on page load when JavaScript is enabled, use the `.js-hidden` class. */ -@layer components { - .hidden { +.hidden { + display: none; +} + +.js-hidden { + html.js & { display: none; } +} - .js-hidden { - html.js & { - display: none; - } - } - - .nojs-hidden { - html.nojs & { - display: none; - } +.nojs-hidden { + html.nojs & { + display: none; } } diff --git a/assets/css/components/_icon-inline.css b/assets/css/components/_icon-inline.css index 26b0b2b..cc1ba6c 100644 --- a/assets/css/components/_icon-inline.css +++ b/assets/css/components/_icon-inline.css @@ -1,28 +1,26 @@ /* Inline icons. */ -@layer components { - .icon-inline { +.icon-inline { + .icon-link { + opacity: 0; + transition: all 130ms ease-in; + text-decoration: none; + } + + &:focus-visible, + &:hover { .icon-link { - opacity: 0; - transition: all 130ms ease-in; - text-decoration: none; - } + opacity: .3; - &:focus-visible, - &:hover { - .icon-link { - opacity: .3; - - &:focus-visible, - &:hover { - opacity: 1; - } + &:focus-visible, + &:hover { + opacity: 1; } } + } - svg { - display: inline; - vertical-align: middle; - } + svg { + display: inline; + vertical-align: middle; } } diff --git a/assets/css/components/_language-selector.css b/assets/css/components/_language-selector.css index b647aa2..efb44fa 100644 --- a/assets/css/components/_language-selector.css +++ b/assets/css/components/_language-selector.css @@ -1,12 +1,10 @@ /* Language selector */ -@layer components { - .language-selector { - display: flex; - } +.language-selector { + display: flex; +} - .language-icon { - margin-inline-end: var(--spacing-xs); - fill: var(--color-text); - } +.language-icon { + margin-inline-end: var(--spacing-xs); + fill: var(--color-text); } diff --git a/assets/css/components/_list-straight-left.css b/assets/css/components/_list-straight-left.css index d05948a..a686eef 100644 --- a/assets/css/components/_list-straight-left.css +++ b/assets/css/components/_list-straight-left.css @@ -1,54 +1,52 @@ /* Lists with a straight left margin. */ -@layer components { - .ul-straight-left { - display: table; - list-style: none; - padding: 0; +.ul-straight-left { + display: table; + list-style: none; + padding: 0; - & > li { - display: table-row; + & > li { + display: table-row; - &::before { - padding-inline-end: var(--spacing-xs); - display: table-cell; - content: '\2981'; - font-size: var(--fs-s); - } + &::before { + padding-inline-end: var(--spacing-xs); + display: table-cell; + content: '\2981'; + font-size: var(--fs-s); } } +} - .ol-straight-left { - display: table; - list-style: none; - padding: 0; +.ol-straight-left { + display: table; + list-style: none; + padding: 0; - & > li { - display: table-row; - counter-increment: table-ol; + & > 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; - } + &::before { + padding-inline-end: var(--spacing-xs); + display: table-cell; + content: counter(table-ol) '.'; + font-size: var(--fs-s); + text-align: end; } } +} - .ul-straight-left--off { - display: block; - list-style: inherit; +.ul-straight-left--off { + display: block; + list-style: inherit; - & > li { - display: list-item; + & > li { + display: list-item; - &::before { - content: ''; - display: inline; - padding: inherit; - } + &::before { + content: ''; + display: inline; + padding: inherit; } } } diff --git a/assets/css/components/_messages.css b/assets/css/components/_messages.css index 30d91a9..2e1704d 100644 --- a/assets/css/components/_messages.css +++ b/assets/css/components/_messages.css @@ -1,44 +1,42 @@ /* Messages */ -@layer components { - .message { - padding: .5rem; - outline-width: 2px; - outline-style: solid; - width: 95%; +.message { + padding: .5rem; + outline-width: 2px; + outline-style: solid; + width: 95%; - &.success { - background-color: var(--color-success-bg); - color: var(--color-success); - outline-color: var(--color-success); - } - - &.info { - background-color: var(--color-info-bg); - color: var(--color-info); - outline-color: var(--color-info); - } - - &.warning { - background-color: var(--color-warning-bg); - color: var(--color-warning); - outline-color: var(--color-warning); - } - - &.error { - background-color: var(--color-error-bg); - color: var(--color-error); - outline-color: var(--color-error); - } + &.success { + background-color: var(--color-success-bg); + color: var(--color-success); + outline-color: var(--color-success); } - .message--highlight { - animation: 2s ease-in-out infinite --outline-highlight; + &.info { + background-color: var(--color-info-bg); + color: var(--color-info); + outline-color: var(--color-info); } - @keyframes --outline-highlight { - 50% { - outline-width: .3rem; - } + &.warning { + background-color: var(--color-warning-bg); + color: var(--color-warning); + outline-color: var(--color-warning); + } + + &.error { + background-color: var(--color-error-bg); + color: var(--color-error); + outline-color: var(--color-error); + } +} + +.message--highlight { + animation: 2s ease-in-out infinite --outline-highlight; +} + +@keyframes --outline-highlight { + 50% { + outline-width: .3rem; } } diff --git a/assets/css/components/_meta.css b/assets/css/components/_meta.css index 19a3137..3483060 100644 --- a/assets/css/components/_meta.css +++ b/assets/css/components/_meta.css @@ -1,9 +1,7 @@ /* Style for meta content. */ -@layer components { - .meta { - font-family: var(--ff-headings); - font-size: var(--fs-xs); - color: var(--color-text-meta); - } +.meta { + font-family: var(--ff-headings); + font-size: var(--fs-xs); + color: var(--color-text-meta); } diff --git a/assets/css/components/_overlay.css b/assets/css/components/_overlay.css index f83a972..acabc6d 100644 --- a/assets/css/components/_overlay.css +++ b/assets/css/components/_overlay.css @@ -1,7 +1,5 @@ -@layer components { - .overlay { - --color-overlay: var(--color-black-20); - --color-overlay2: var(--color-black-10); - border-image: linear-gradient(var(--color-overlay), var(--color-overlay2)) fill 1; - } +.overlay { + --color-overlay: var(--color-black-20); + --color-overlay2: var(--color-black-10); + border-image: linear-gradient(var(--color-overlay), var(--color-overlay2)) fill 1; } diff --git a/assets/css/components/_pager.css b/assets/css/components/_pager.css index e173a71..2957564 100644 --- a/assets/css/components/_pager.css +++ b/assets/css/components/_pager.css @@ -3,55 +3,53 @@ Paged navigation is a list of page numbers when more than 1 page of content is available. */ -@layer components { - .pagination, - .pager { - --flex-inline-gap: .5rem; +.pagination, +.pager { + --flex-inline-gap: .5rem; - display: flex; - flex-wrap: wrap; - gap: var(--flex-inline-gap); - padding: 0; - text-align: start; + display: flex; + flex-wrap: wrap; + gap: var(--flex-inline-gap); + padding: 0; + text-align: start; - /* Add vertical rhythm margins. */ - margin-block: var(--spacing-m); - justify-content: center; + /* Add vertical rhythm margins. */ + margin-block: var(--spacing-m); + justify-content: center; - a { - text-decoration: none; + a { + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } + } + + .pager__item, + .page-link { + padding-inline: 2px; + } + + .page-item { + } + + .active { + font-weight: var(--fw-bold); + } + + .disabled { + .page-link { + /* Re-set default cursor for disabled elements. */ + cursor: default; + color: var(--color-button-disabled); &:hover, - &:focus { - text-decoration: underline; - } - } - - .pager__item, - .page-link { - padding-inline: 2px; - } - - .page-item { - } - - .active { - font-weight: var(--fw-bold); - } - - .disabled { - .page-link { - /* Re-set default cursor for disabled elements. */ - cursor: default; + &:focus, + &:active { + /* Override any link underlines and color changes. */ color: var(--color-button-disabled); - - &:hover, - &:focus, - &:active { - /* Override any link underlines and color changes. */ - color: var(--color-button-disabled); - text-decoration: none; - } + text-decoration: none; } } } diff --git a/assets/css/components/_responsive-video.css b/assets/css/components/_responsive-video.css index 0d95d07..c57bbf4 100644 --- a/assets/css/components/_responsive-video.css +++ b/assets/css/components/_responsive-video.css @@ -7,26 +7,24 @@ intrinsic aspect ratio is preserved at any screen width. The .responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the default 16:9 one. */ -@layer components { - .responsive-video { - --aspect-ratio: 9 / 16; /* 16:9 aspect ratio */ +.responsive-video { + --aspect-ratio: 9 / 16; /* 16:9 aspect ratio */ - position: relative; - padding-block-end: calc(var(--aspect-ratio) * 100%); /* 16:9 aspect ratio */ - padding-block-start: 25px; /* Height of video controls */ - height: 0; + position: relative; + padding-block-end: calc(var(--aspect-ratio) * 100%); /* 16:9 aspect ratio */ + padding-block-start: 25px; /* Height of video controls */ + height: 0; - iframe, - .responsive-video__embed { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - width: 100%; - height: 100%; - } - } - - .responsive-video--4-3 { - --aspect-ratio: 3 / 4; /* 4:3 aspect ratio */ + iframe, + .responsive-video__embed { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + width: 100%; + height: 100%; } } + +.responsive-video--4-3 { + --aspect-ratio: 3 / 4; /* 4:3 aspect ratio */ +} diff --git a/assets/css/components/_spacing.css b/assets/css/components/_spacing.css index bdf6f6e..6d0bd72 100644 --- a/assets/css/components/_spacing.css +++ b/assets/css/components/_spacing.css @@ -1,97 +1,95 @@ -@layer components { - .mt--xxl { - margin-block-start: var(--spacing-xxl); - } - - .mt--xl { - margin-block-start: var(--spacing-xl); - } - - .mt--l { - margin-block-start: var(--spacing-l); - } - - .mt--m { - margin-block-start: var(--spacing-m); - } - - .mt--s { - margin-block-start: var(--spacing-s); - } - - .mt--xs { - margin-block-start: var(--spacing-xs); - } - - .mt--xxs { - margin-block-start: var(--spacing-xxs); - } - - .mt--0 { - margin-block-start: 0; - } - - .mb--xxl { - margin-block-end: var(--spacing-xxl); - } - - .mb--xl { - margin-block-end: var(--spacing-xl); - } - - .mb--l { - margin-block-end: var(--spacing-l); - } - - .mb--m { - margin-block-end: var(--spacing-m); - } - - .mb--s { - margin-block-end: var(--spacing-s); - } - - .mb--xs { - margin-block-end: var(--spacing-xs); - } - - .mb--xxs { - margin-block-end: var(--spacing-xxs); - } - - .mb--0 { - margin-block-end: 0; - } - - .mx--xxl { - margin-block: var(--spacing-xxl); - } - - .mx--xl { - margin-block: var(--spacing-xl); - } - - .mx--l { - margin-block: var(--spacing-l); - } - - .mx--m { - margin-block: var(--spacing-m); - } - - .mx--s { - margin-block: var(--spacing-s); - } - - .mx--xs { - margin-block: var(--spacing-xs); - } - - .mx--xxs { - margin-block: var(--spacing-xxs); - } - - .mx--0 { - margin-block: 0; - } +.mt--xxl { + margin-block-start: var(--spacing-xxl); +} + +.mt--xl { + margin-block-start: var(--spacing-xl); +} + +.mt--l { + margin-block-start: var(--spacing-l); +} + +.mt--m { + margin-block-start: var(--spacing-m); +} + +.mt--s { + margin-block-start: var(--spacing-s); +} + +.mt--xs { + margin-block-start: var(--spacing-xs); +} + +.mt--xxs { + margin-block-start: var(--spacing-xxs); +} + +.mt--0 { + margin-block-start: 0; +} + +.mb--xxl { + margin-block-end: var(--spacing-xxl); +} + +.mb--xl { + margin-block-end: var(--spacing-xl); +} + +.mb--l { + margin-block-end: var(--spacing-l); +} + +.mb--m { + margin-block-end: var(--spacing-m); +} + +.mb--s { + margin-block-end: var(--spacing-s); +} + +.mb--xs { + margin-block-end: var(--spacing-xs); +} + +.mb--xxs { + margin-block-end: var(--spacing-xxs); +} + +.mb--0 { + margin-block-end: 0; +} + +.mx--xxl { + margin-block: var(--spacing-xxl); +} + +.mx--xl { + margin-block: var(--spacing-xl); +} + +.mx--l { + margin-block: var(--spacing-l); +} + +.mx--m { + margin-block: var(--spacing-m); +} + +.mx--s { + margin-block: var(--spacing-s); +} + +.mx--xs { + margin-block: var(--spacing-xs); +} + +.mx--xxs { + margin-block: var(--spacing-xxs); +} + +.mx--0 { + margin-block: 0; } diff --git a/assets/css/components/_tables.css b/assets/css/components/_tables.css index 11909d9..259a90a 100644 --- a/assets/css/components/_tables.css +++ b/assets/css/components/_tables.css @@ -1,60 +1,58 @@ -@layer components { - .zebra-table { - --table-cell-padding: .5rem; +.zebra-table { + --table-cell-padding: .5rem; - @media (max-width: 666px) { - --table-cell-padding: .3rem; - } + @media (max-width: 666px) { + --table-cell-padding: .3rem; + } - th, - td { - padding: var(--table-cell-padding); - } + th, + td { + padding: var(--table-cell-padding); + } - thead { - tr { - background-color: var(--color-row-header); - } - } - - tbody { - tr { - &:nth-child(odd) { - background-color: var(--color-row-odd); - } - - &:nth-child(even) { - background-color: var(--color-row-even); - } - } + thead { + tr { + background-color: var(--color-row-header); } } - .responsive-table { - --table-gap: .5rem; - - @media (max-width: 666px) { - th { - display: none; + tbody { + tr { + &:nth-child(odd) { + background-color: var(--color-row-odd); } - td { - display: grid; - gap: var(--table-gap); - grid-template-columns: 12ch auto; + &:nth-child(even) { + background-color: var(--color-row-even); + } + } + } +} - &::before { - content: attr(aria-label) ':'; - font-weight: var(--fw-bold); - } +.responsive-table { + --table-gap: .5rem; - &:first-of-type { - padding-block-start: var(--table-gap); - } + @media (max-width: 666px) { + th { + display: none; + } - &:last-of-type { - padding-block-end: var(--table-gap); - } + td { + display: grid; + gap: var(--table-gap); + grid-template-columns: 12ch auto; + + &::before { + content: attr(aria-label) ':'; + font-weight: var(--fw-bold); + } + + &:first-of-type { + padding-block-start: var(--table-gap); + } + + &:last-of-type { + padding-block-end: var(--table-gap); } } } diff --git a/assets/css/components/_tags.css b/assets/css/components/_tags.css index 8ead6b1..4e9c1c7 100644 --- a/assets/css/components/_tags.css +++ b/assets/css/components/_tags.css @@ -1,7 +1,5 @@ -@layer components { - .tags { - ul { - margin-block: 0; - } +.tags { + ul { + margin-block: 0; } } diff --git a/assets/css/components/_visually-hidden.css b/assets/css/components/_visually-hidden.css index 5c2500a..44461db 100644 --- a/assets/css/components/_visually-hidden.css +++ b/assets/css/components/_visually-hidden.css @@ -2,16 +2,14 @@ Make an element visually hidden, but accessible to screen readers, etc. */ -@layer components { - .visually-hidden { - &:not(:focus, :active) { - position: absolute; - clip-path: inset(50%); - height: 1px; - width: 1px; - margin: 0; - overflow: hidden; - white-space: nowrap; - } +.visually-hidden { + &:not(:focus, :active) { + position: absolute; + clip-path: inset(50%); + height: 1px; + width: 1px; + margin: 0; + overflow: hidden; + white-space: nowrap; } } diff --git a/assets/css/components/_wrap.css b/assets/css/components/_wrap.css index 19a3803..07fd687 100644 --- a/assets/css/components/_wrap.css +++ b/assets/css/components/_wrap.css @@ -1,9 +1,7 @@ -@layer components { - .wrap-any { - overflow-wrap: anywhere; - } +.wrap-any { + overflow-wrap: anywhere; +} - .wrap-word { - overflow-wrap: break-word; - } +.wrap-word { + overflow-wrap: break-word; } diff --git a/assets/css/layers-init.css b/assets/css/layers-init.css deleted file mode 100644 index 5d4d48a..0000000 --- a/assets/css/layers-init.css +++ /dev/null @@ -1 +0,0 @@ -@layer reset, fonts, vars, base, layout, components, mobilemenu, print, zen; diff --git a/assets/css/layouts/_layouts.css b/assets/css/layouts/_layouts.css index fcc03ba..5600ed3 100644 --- a/assets/css/layouts/_layouts.css +++ b/assets/css/layouts/_layouts.css @@ -1,174 +1,172 @@ /* stylelint-disable no-duplicate-selectors */ -@layer layout { - /* Initial layout setup. */ - .layout__page { - max-width: var(--max-page-width); +/* Initial layout setup. */ +.layout__page { + max-width: var(--max-page-width); - @media (min-width: 666px) { - margin-inline: auto; - min-height: 100svh; - } + @media (min-width: 666px) { + margin-inline: auto; + min-height: 100svh; + } +} + +.layout__header, +.layout__footer, +.layout__main, +.layout__navigation, +.layout__first-sidebar, +.layout__second-sidebar, +.layout__page-top, +.layout__page-bottom, +.layout__cookieconsent { + padding-inline: var(--gutters); + min-width: 0; /* With display grid defaults to auto, making 
 overflow. */
+}
+
+/* If page width is bigger then content with, */
+.layout__navigation > * {
+  max-width: var(--max-content-width);
+
+  @media (min-width: 666px) {
+    margin-inline: auto;
+  }
+}
+
+.layout__main,
+.layout__grid {
+  display: grid;
+
+  grid-template-columns:
+    [stretch-start] minmax(var(--gutters), 1fr)
+    [breakout-start] minmax(0, var(--breakout))
+    [content-start] min(calc(100% - var(--gutters) * 2), var(--max-content-width)) [content-end]
+    minmax(0, var(--breakout)) [breakout-end]
+    minmax(var(--gutters), 1fr) [stretch-end];
+
+  padding-inline: 0;
+
+  /* Stop content in main from stretching. */
+  height: fit-content;
+
+  & > :not(.breakout, .stretch) {
+    grid-column: content;
   }
 
-  .layout__header,
-  .layout__footer,
-  .layout__main,
-  .layout__navigation,
-  .layout__first-sidebar,
-  .layout__second-sidebar,
-  .layout__page-top,
-  .layout__page-bottom,
-  .layout__cookieconsent {
+  & > .breakout {
+    grid-column: breakout;
+  }
+
+  & > .stretch {
+    grid-column: stretch;
     padding-inline: var(--gutters);
-    min-width: 0;  /* With display grid defaults to auto, making 
 overflow. */
   }
+}
 
-  /* If page width is bigger then content with, */
-  .layout__navigation > * {
-    max-width: var(--max-content-width);
+/* Setup template areas/rown/columns for page. */
+.layout__page {
+  display: grid;
+  grid-template-areas: 'head'
+                       'nav'
+                       'top'
+                       'main'
+                       'side1'
+                       'side2'
+                       'bottom'
+                       'foot'
+                       'notice';
+  grid-template-rows: auto
+                      auto
+                      auto
+                      1fr
+                      auto
+                      auto
+                      auto
+                      auto
+                      auto;
+  grid-template-columns: 1fr;
+}
 
-    @media (min-width: 666px) {
-      margin-inline: auto;
-    }
-  }
-
-  .layout__main,
-  .layout__grid {
-    display: grid;
-
-    grid-template-columns:
-      [stretch-start] minmax(var(--gutters), 1fr)
-      [breakout-start] minmax(0, var(--breakout))
-      [content-start] min(calc(100% - var(--gutters) * 2), var(--max-content-width)) [content-end]
-      minmax(0, var(--breakout)) [breakout-end]
-      minmax(var(--gutters), 1fr) [stretch-end];
-
-    padding-inline: 0;
-
-    /* Stop content in main from stretching. */
-    height: fit-content;
-
-    & > :not(.breakout, .stretch) {
-      grid-column: content;
-    }
-
-    & > .breakout {
-      grid-column: breakout;
-    }
-
-    & > .stretch {
-      grid-column: stretch;
-      padding-inline: var(--gutters);
-    }
-  }
-
-  /* Setup template areas/rown/columns for page. */
+@media (min-width: 999px) {
   .layout__page {
-    display: grid;
-    grid-template-areas: 'head'
-                         'nav'
-                         'top'
-                         'main'
-                         'side1'
-                         'side2'
-                         'bottom'
-                         'foot'
-                         'notice';
     grid-template-rows: auto
                         auto
                         auto
                         1fr
                         auto
                         auto
-                        auto
-                        auto
                         auto;
-    grid-template-columns: 1fr;
   }
 
-  @media (min-width: 999px) {
-    .layout__page {
-      grid-template-rows: auto
-                          auto
-                          auto
-                          1fr
-                          auto
-                          auto
-                          auto;
-    }
-
-    .layout__sidebar-first {
-      grid-template-areas: 'head head'
-                           'nav nav'
-                           'side1 top'
-                           'side1 main'
-                           'side1 bottom'
-                           'foot foot'
-                           'notice notice';
-      grid-template-columns: 1fr
-                             2fr;
-    }
-
-    .layout__sidebar-second {
-      grid-template-areas: 'head head'
-                           'nav nav'
-                           'top side2'
-                           'main side2'
-                           'bottom side2'
-                           'foot foot'
-                           'notice notice';
-      grid-template-columns: 2fr
-                             1fr;
-    }
-
-    .layout__sidebar-two {
-      grid-template-areas: 'head head head'
-                           'nav nav nav'
-                           'side1 top side2'
-                           'side1 main side2'
-                           'side1 bottom side2'
-                           'foot foot foot'
-                           'notice notice notice';
-      grid-template-columns: 1fr
-                             2fr
-                             1fr;
-    }
+  .layout__sidebar-first {
+    grid-template-areas: 'head head'
+                         'nav nav'
+                         'side1 top'
+                         'side1 main'
+                         'side1 bottom'
+                         'foot foot'
+                         'notice notice';
+    grid-template-columns: 1fr
+                           2fr;
   }
 
-  .layout__header {
-    grid-area: head;
+  .layout__sidebar-second {
+    grid-template-areas: 'head head'
+                         'nav nav'
+                         'top side2'
+                         'main side2'
+                         'bottom side2'
+                         'foot foot'
+                         'notice notice';
+    grid-template-columns: 2fr
+                           1fr;
   }
 
-  .layout__navigation {
-    grid-area: nav;
-  }
-
-  .layout__page-top {
-    grid-area: top;
-  }
-
-  .layout__main {
-    grid-area: main;
-  }
-
-  .layout__first-sidebar {
-    grid-area: side1;
-  }
-
-  .layout__second-sidebar {
-    grid-area: side2;
-  }
-
-  .layout__page-bottom {
-    grid-area: bottom;
-  }
-
-  .layout__footer {
-    grid-area: foot;
-  }
-
-  .layout__cookieconsent {
-    grid-area: notice;
+  .layout__sidebar-two {
+    grid-template-areas: 'head head head'
+                         'nav nav nav'
+                         'side1 top side2'
+                         'side1 main side2'
+                         'side1 bottom side2'
+                         'foot foot foot'
+                         'notice notice notice';
+    grid-template-columns: 1fr
+                           2fr
+                           1fr;
   }
 }
+
+.layout__header {
+  grid-area: head;
+}
+
+.layout__navigation {
+  grid-area: nav;
+}
+
+.layout__page-top {
+  grid-area: top;
+}
+
+.layout__main {
+  grid-area: main;
+}
+
+.layout__first-sidebar {
+  grid-area: side1;
+}
+
+.layout__second-sidebar {
+  grid-area: side2;
+}
+
+.layout__page-bottom {
+  grid-area: bottom;
+}
+
+.layout__footer {
+  grid-area: foot;
+}
+
+.layout__cookieconsent {
+  grid-area: notice;
+}
diff --git a/assets/css/reset/_reset.css b/assets/css/reset/_reset.css
index 96f3074..d972864 100644
--- a/assets/css/reset/_reset.css
+++ b/assets/css/reset/_reset.css
@@ -2,107 +2,105 @@
 
 /* Reset browsers to some sane defaults. */
 
-@layer reset {
-  /* Document */
+/* Document */
 
-  /* Use the saner border-box model for all elements. */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+/* Use the saner border-box model for all elements. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
-  :root {
-    /* Activate transition to intrinsic sizes like auto and fit-content. */
-    interpolate-size: allow-keywords;
-  }
+:root {
+  /* Activate transition to intrinsic sizes like auto and fit-content. */
+  interpolate-size: allow-keywords;
+}
 
-  /* Transitioning page view. */
-  @view-transition {
-    navigation: auto;
-  }
+/* Transitioning page view. */
+@view-transition {
+  navigation: auto;
+}
 
-  html {
-    /* Prevent adjustments of font size. */
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
+html {
+  /* Prevent adjustments of font size. */
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
 
-    /* Improve text rendering. */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  /* Improve text rendering. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
-    /* Always keep space for the scrollbar */
-    scrollbar-gutter: stable;
-  }
+  /* Always keep space for the scrollbar */
+  scrollbar-gutter: stable;
+}
 
-  /* Sections */
+/* Sections */
 
-  body {
-    /* Remove the margin in all browsers. */
-    margin: 0;
-    padding: 0;
+body {
+  /* Remove the margin in all browsers. */
+  margin: 0;
+  padding: 0;
 
-    /* On short pages, we want the body to fill the entire height */
-    /* of the browser. */
-    min-height: 100svh;
-  }
+  /* On short pages, we want the body to fill the entire height */
+  /* of the browser. */
+  min-height: 100svh;
+}
 
-  /* Embedded content */
+/* Embedded content */
 
-  img,
-  svg,
-  picture,
-  audio,
-  video,
-  canvas,
-  iframe,
-  embed,
-  object {
-    display: block;
-  }
+img,
+svg,
+picture,
+audio,
+video,
+canvas,
+iframe,
+embed,
+object {
+  display: block;
+}
 
-  img,
-  svg,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
+img,
+svg,
+video {
+  max-width: 100%;
+  height: auto;
+}
 
-  figure {
-    margin-inline: 0;
-  }
+figure {
+  margin-inline: 0;
+}
 
-  /* Form defaults. */
+/* Form defaults. */
 
-  input,
-  button,
-  textarea,
-  select {
-    font: inherit;
-    letter-spacing: inherit;
-    word-spacing: inherit;
-  }
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+}
 
-  [type='search'] {
-    @media (min-width: 666px) {
-      /* Correct the odd appearance in Safari on desktop. */
-      -webkit-appearance: textfield;
-    }
-  }
-
-  /* Code */
-
-  code,
-  kbd,
-  samp {
-    font-family: var(--ff-monospace);
-  }
-
-  /* Numbers */
-
-  td,
-  math,
-  time[datetime*=':'] {
-    font-variant-numeric: tabular-nums lining-nums;
+[type='search'] {
+  @media (min-width: 666px) {
+    /* Correct the odd appearance in Safari on desktop. */
+    -webkit-appearance: textfield;
   }
 }
+
+/* Code */
+
+code,
+kbd,
+samp {
+  font-family: var(--ff-monospace);
+}
+
+/* Numbers */
+
+td,
+math,
+time[datetime*=':'] {
+  font-variant-numeric: tabular-nums lining-nums;
+}
diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..403995e
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,45 @@
+/* Declare the layers first to set their order. */
+@layer reset, fonts, vars, base, layouts, components, mobilemenu, print, zen;
+
+@import './_colors.css' layer(vars);
+@import './_variables.css' layer(vars);
+@import './_fonts.css' layer(fonts);
+@import './reset/_reset.css' layer(reset);
+@import './layouts/_layouts.css' layer(layouts);
+@import './base/_document.css' layer(base);
+@import './base/_forms.css' layer(base);
+@import './base/_grouping.css' layer(base);
+@import './base/_headings.css' layer(base);
+@import './base/_images.css' layer(base);
+@import './base/_links.css' layer(base);
+@import './base/_tables.css' layer(base);
+@import './components/_anchor.css' layer(components);
+@import './components/_box.css' layer(components);
+@import './components/_button.css' layer(components);
+@import './components/_cards.css' layer(components);
+@import './components/_center.css' layer(components);
+@import './components/_clearfix.css' layer(components);
+@import './components/_cookieconsent.css' layer(components);
+@import './components/_disabled.css' layer(components);
+@import './components/_flex-group.css' layer(components);
+@import './components/_flex-inline.css' layer(components);
+@import './components/_footer.css' layer(components);
+@import './components/_grid-group.css' layer(components);
+@import './components/_grid-stack.css' layer(components);
+@import './components/_header.css' layer(components);
+@import './components/_hidden.css' layer(components);
+@import './components/_icon-inline.css' layer(components);
+@import './components/_language-selector.css' layer(components);
+@import './components/_list-straight-left.css' layer(components);
+@import './components/_messages.css' layer(components);
+@import './components/_meta.css' layer(components);
+@import './components/_overlay.css' layer(components);
+@import './components/_pager.css' layer(components);
+@import './components/_responsive-video.css' layer(components);
+@import './components/_spacing.css' layer(components);
+@import './components/_tables.css' layer(components);
+@import './components/_tags.css' layer(components);
+@import './components/_visually-hidden.css' layer(components);
+@import './components/_wrap.css' layer(components);
+@import './_zen.css' layer(zen);
+@import './_custom.css';
diff --git a/layouts/_partials/head/styles.html b/layouts/_partials/head/styles.html
index 598c745..3732993 100644
--- a/layouts/_partials/head/styles.html
+++ b/layouts/_partials/head/styles.html
@@ -1,14 +1,38 @@
-{{ $main_style := resources.Match "css/_*.css" | append (resources.Match "css/**/_*.css") | resources.Concat "css/styles.css" -}}
-{{ $mobile_style := resources.Get "css/mobilemenu.css" -}}
-{{ $print_style := resources.Get "css/print.css" -}}
-{{ if ne hugo.Environment "development" -}}
-  {{ $main_style = $main_style | minify | fingerprint -}}
-  {{ $mobile_style = $mobile_style | minify | fingerprint -}}
-  {{ $print_style = $print_style | minify | fingerprint -}}
+{{ with resources.Get "css/styles.css" -}}
+  {{ $opts := dict
+    "loaders" (dict ".png" "dataurl" ".svg" "dataurl")
+    "minify" (cond hugo.IsDevelopment false true)
+    "sourceMap" (cond hugo.IsDevelopment "linked" "none")
+  -}}
+  {{ with . | css.Build $opts -}}
+    {{ if hugo.IsDevelopment -}}
+      
+    {{ else -}}
+      {{ with . | fingerprint -}}
+        
+      {{ end -}}
+    {{ end }}
+  {{ end -}}
 {{ end -}}
-{{ with resources.Get "css/layers-init.css" }}{{ end }}
-
+
 {{ if $.Param "mobilemenu" -}}
-
+  {{ with resources.Get "css/mobilemenu.css" -}}
+    {{ if hugo.IsDevelopment -}}
+      
+    {{ else -}}
+      {{ with . | minify | fingerprint -}}
+        
+      {{ end -}}
+    {{ end -}}
+  {{ end -}}
+{{ end -}}
+
+{{ with resources.Get "css/print.css" -}}
+  {{ if hugo.IsDevelopment -}}
+    
+  {{ else -}}
+    {{ with . | minify | fingerprint -}}
+      
+    {{ end -}}
+  {{ end -}}
 {{ end -}}
-