diff --git a/assets/sass/_init.scss b/assets/sass/_init.scss index ddf547a..6e21d5c 100644 --- a/assets/sass/_init.scss +++ b/assets/sass/_init.scss @@ -6,7 +6,7 @@ // project. // Variables. -@import 'variables'; +@import 'sass_variables'; @import 'extra'; // Mixins and functions. diff --git a/assets/sass/_root.scss b/assets/sass/_root.scss deleted file mode 100644 index 909323d..0000000 --- a/assets/sass/_root.scss +++ /dev/null @@ -1,31 +0,0 @@ -$breakout: $gutters !default; -$max-page-width: $max-content-width !default; - -:root { - // Convert sass variables to css4 variables. - // Use like this: var(--color-gutters). - @each $name, $size in $font-size { - --fs-#{$name}: #{$size}; - } - - @each $name, $weight in $font-weight { - --fw-#{$name}: #{$weight}; - } - - @each $name, $family in $font-family { - --ff-#{$name}: #{$family}; - } - - @each $name, $radius in $border-radius { - --radius-#{$name}: #{$radius}; - } - - --breakout: #{$breakout}; - --gutters-reverse: #{$gutters-reverse}; - --gutters: #{$gutters}; - --heading-line-height: #{$heading-line-height}; - --indent-amount: #{$indent-amount}; - --max-content-width: #{$max-content-width}; - --max-line-width: #{$max-line-width}; - --max-page-width: #{$max-page-width}; -} diff --git a/assets/sass/_sass_variables.scss b/assets/sass/_sass_variables.scss new file mode 100644 index 0000000..d32061c --- /dev/null +++ b/assets/sass/_sass_variables.scss @@ -0,0 +1,76 @@ +// Variables +// Override sass variables in "assets/sass/_extra.scss" + +// Base line height, unitless. +$base-line-height: 1.5; + +// The font sizes in our type hierarchy as tee shirt sizes. +// Size m is base. +// Use like this: var(--fs-m) +$font-size-fixed: ( + xxxxl: 3rem, + xxxl: 2.5rem, + xxl: 2rem, + xl: 1.5rem, + l: 1.25rem, + m: 1rem, + s: 0.889rem, + xs: 0.778rem, +); + +// The responsive font sizes in our type hierarchy as tee shirt sizes. +// Size m is base. +// Use like this: var(--fs-m) +$font-size-fluid: ( + xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem), + xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem), + xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem), + xl: clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem), + l: clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem), + m: 1rem, + s: 0.889rem, + xs: 0.778rem, +); + +// Set the font sizes to use, fixed or fluid. +// $font-size: $font-size-fluid; +$font-size: $font-size-fixed; + +// Breakpoints +// Use the `respond-to(s)` mixin to use named breakpoints. +$breakpoints: ( + 'xxxl': 1222px, + 'xxl': 1111px, + 'xl': 999px, + 'l': 888px, + 'm': 777px, + 's': 666px, + 'xs': 555px, + 'xxs': 444px, + 'xxxs': 333px, +); + +// Spacing +// Generates mt-m (mt = margin-top), mb-m (mb = margin-bottom) and +// mtb-m (mtb = margin-block) classes. +$spacing: ( + xxl: 3, + xl: 2, + l: 1.5, + m: 1, + s: 0.75, + xs: 0.5, + xxs: 0.3, + 0: 0, +); + +// 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: 1111px; + +// Show horizontal grid to help with debugging typography. +$debug: false; diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 7f3b0a8..6657018 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -1,173 +1,106 @@ -// stylelint-disable scss/dollar-variable-colon-space-after, value-keyword-case -// stylelint-disable scss/double-slash-comment-empty-line-before +$max-page-width: $max-content-width !default; -// Variables +:root { + // Convert sass variables to css variables. + // These need to be sass variables sincethey are used in sass functions and mixins. -// Font faces, stacks and sizes. + @each $name, $size in $font-size { + --fs-#{$name}: #{$size}; + } -// The font size set on the root html element. -// Specify unitless, it will be recalculated as %. -$base-font-size: 18; + --max-content-width: #{$max-content-width}; + --max-page-width: #{$max-page-width}; -// Base and heading line height, unitless. -$base-line-height: 1.5; -$heading-line-height: 1.3; + // Base line height, unitless. + --base-line-height: #{$base-line-height}; -// The pt font-size to be used for printing. -$print-font-size: 12pt; -// The font sizes in our type hierarchy as tee shirt sizes. -// Size m is base. -// Use like this: var(--fs-m) -$font-size-fixed: ( - xxxxl: 3rem, - xxxl: 2.5rem, - xxl: 2rem, - xl: 1.5rem, - l: 1.25rem, - m: 1rem, - s: 0.889rem, - xs: 0.778rem, -); + // Set theme css variables. + // Override css variables in "assets/sass/_custom.scss" -// The responsive font sizes in our type hierarchy as tee shirt sizes. -// Size m is base. -// Use like this: var(--fs-m) -$font-size-fluid: ( - xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem), - xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem), - xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem), - xl: clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem), - l: clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem), - m: 1rem, - s: 0.889rem, - xs: 0.778rem, -); + // Heading line height, unitless. + --heading-line-height: 1.3; -// Set the font sizes to use, fixed or fluid. -$font-size: $font-size-fixed; -// $font-size: $font-size-fluid; + // The font size set on the root html element. + // Specify unitless, it will be recalculated as %. + --base-font-size: 18; -// Font weights. -// Use like this: var(--fw-normal) -$font-weight: ( - headings: 700, - bolder: 900, - bold: 700, - medium: 500, - normal: 400, - light: 300, - lighter: 200, -); + // stylelint-disable value-keyword-case + // 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. -// 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. + // 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; + // 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. -// Use like this: var(--ff-body) -$font-family: ( - body: $ui-serif, - headings: $ui-sans-serif, - alt: $system-ui, - monospace: $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; -// Breakpoints -// Use the `respond-to(s)` mixin to use named breakpoints. -$breakpoints: ( - 'xxxl': 1222px, - 'xxl': 1111px, - 'xl': 999px, - 'l': 888px, - 'm': 777px, - 's': 666px, - 'xs': 555px, - 'xxs': 444px, - 'xxxs': 333px, -); + // Border radius. + --radius-xl: 1rem; + --radius-l: 0.75rem; + --radius-m: 0.5rem; + --radius-s: 0.3rem; + --radius-xs: 0.125rem; -// Border radius. -// Use like this: var(--radius-m) -$border-radius: ( - xl: 1rem, - l: 0.75rem, - m: 0.5rem, - s: 0.3rem, - xs: 0.125rem, -); + // Breakout amount. + // How much should the "breakout" be. Defaults to same as gutters value. + --breakout: calc(5px + 1.5625vw); -// Spacing -// Generates mt-m (mt = margin-top), mb-m (mb = margin-bottom) and -// mtb-m (mtb = margin-block) classes. -$spacing: ( - xxl: 3, - xl: 2, - l: 1.5, - m: 1, - s: 0.75, - xs: 0.5, - xxs: 0.3, - 0: 0, -); + // The left/right gutter/padding. + --gutters: calc(5px + 1.5625vw); + --gutters-reverse: calc(0px - (5px + 1.5625vw)); -// The max content width. (Consider using one of the breakpoints.) -$max-content-width: 1111px; + // The amount lists, blockquotes and comments are indented. + --indent-amount: 2rem; -// 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: 1111px; + // The max line width for readability. + --max-line-width: 70ch; -// The max line width for readability. -$max-line-width: 70ch; - -// The left/right gutter/padding. -// Use like this: var(--gutters) -$gutters: calc(5px + 1.5625vw); -$gutters-reverse: calc(0px - (5px + 1.5625vw)); - -// Breakout amount. -// How much should the "breakout" be. Defaults to gutters value. -// $breakout: calc(5px + 1.5625vw); - -// The amount lists, blockquotes and comments are indented. -// Use like this: var(--indent-amount) -$indent-amount: 2rem; - -// Show horizontal grid to help with debugging typography. -$debug: false; + // The pt font-size to be used for printing. + --print-font-size: 12pt; +} diff --git a/assets/sass/base/_base.scss b/assets/sass/base/_base.scss index 0b863c5..de92f1e 100644 --- a/assets/sass/base/_base.scss +++ b/assets/sass/base/_base.scss @@ -1,6 +1,7 @@ // Base styles. // Broken into modular pieces to make it easier to edit. +@import 'reset/reset'; @import 'document/document'; @import 'forms/forms'; @import 'grouping/grouping'; diff --git a/assets/sass/base/document/_document.scss b/assets/sass/base/document/_document.scss index 0e3f96f..5a00fe3 100644 --- a/assets/sass/base/document/_document.scss +++ b/assets/sass/base/document/_document.scss @@ -4,14 +4,14 @@ html { // Change the default font family in all browsers. font-family: var(--ff-body); // Set base font size in percent. - font-size: calc(#{$base-font-size} / 16 * 100%); + 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: $base-line-height; + line-height: var(--base-line-height); // Output a horizontal grid to help with debugging typography. The // $debug variable will toggle its output. @include debug-grid(); diff --git a/assets/sass/_reset.scss b/assets/sass/base/reset/_reset.scss similarity index 100% rename from assets/sass/_reset.scss rename to assets/sass/base/reset/_reset.scss diff --git a/assets/sass/mobilemenu.scss b/assets/sass/mobilemenu.scss index cd5b249..d377916 100644 --- a/assets/sass/mobilemenu.scss +++ b/assets/sass/mobilemenu.scss @@ -89,7 +89,7 @@ transform-origin: center; } - [data-navopen] & { // stylelint-disable max-nesting-depth + [data-navopen] & { rect { y: 45px; @@ -105,7 +105,7 @@ transform: rotate(-45deg); } } - } // stylelint-enable max-nesting-depth + } } &__sheet { diff --git a/assets/sass/print.scss b/assets/sass/print.scss index ca55432..5c1d651 100644 --- a/assets/sass/print.scss +++ b/assets/sass/print.scss @@ -1,4 +1,3 @@ - // The print stylesheet for this theme. @import 'init'; @@ -15,7 +14,7 @@ footer { @media print { html { - font-size: $print-font-size; + font-size: var(--print-font-size); } html, diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 3ed3ee8..4a5fb03 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -10,16 +10,12 @@ // Declaring CSS misc variables in :root. -@import 'root'; +@import 'variables'; // Ensure fonts get loaded early to minimize front-end performance impact. @import 'fonts'; -// Reset browsers to some sane defaults. - -@import 'reset'; - // Base styles. @import 'base/base';