diff --git a/assets/sass/_custom.scss b/assets/sass/_custom.scss index bb3af8b..e7a6a76 100644 --- a/assets/sass/_custom.scss +++ b/assets/sass/_custom.scss @@ -1,8 +1,9 @@ // Site custom styles and colours. This file loads last. -// Override colours like this -// :root { -// --color-brand: red; -// --color-brand-alt: blue; -// --color-brand-dark: green; -// } +/* Override colours like this +:root { + --color-brand: red; + --color-brand-alt: blue; + --color-brand-dark: green; +} +*/ diff --git a/assets/sass/_fonts.scss b/assets/sass/_fonts.scss index 96830b3..72a5712 100644 --- a/assets/sass/_fonts.scss +++ b/assets/sass/_fonts.scss @@ -1,27 +1,28 @@ -// Font faces -// -// Instead of relying on the fonts that are available on a user's computer, you -// can use web fonts which, like images, are resources downloaded to the user's -// browser. Because of the bandwidth and rendering resources required, web fonts -// should be used with care. -// -// Numerous resources for web fonts can be found on the web. Here are a few -// websites where you can find Open Source fonts to download: -// - https://www.fontsquirrel.com/ -// - https://www.theleagueofmoveabletype.com -// - https://fonts.google.com -// -// In order to use fonts on a web site you will need to convert them into woff2 format. -// Font Squirrel's Font-Face Generator is a good option: -// https://www.fontsquirrel.com/tools/webfont-generator -// -// The following is an example @font-face declaration. This font can then be -// used in any ruleset using a property like this: font-family: Example, serif; -// -// @font-face { -// font-family: 'Example'; -// src: url('../fonts/example.woff2') format('woff2'); -// font-weight: normal; -// font-style: normal; -// font-display: swap; -// } +/* Font faces + +Instead of relying on the fonts that are available on a user's computer, you +can use web fonts which, like images, are resources downloaded to the user's +browser. Because of the bandwidth and rendering resources required, web fonts +should be used with care. + +Numerous resources for web fonts can be found on the web. Here are a few +websites where you can find Open Source fonts to download: +- https://www.fontsquirrel.com/ +- https://www.theleagueofmoveabletype.com +- https://fonts.google.com + +In order to use fonts on a web site you will need to convert them into woff2 format. +Font Squirrel's Font-Face Generator is a good option: + https://www.fontsquirrel.com/tools/webfont-generator + +The following is an example @font-face declaration. This font can then be +used in any ruleset using a property like this: font-family: Example, serif; + +@font-face { + font-family: 'Example'; + src: url('../fonts/example.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: swap; +} +*/ diff --git a/assets/sass/_init.scss b/assets/sass/_init.scss index a0cf9af..e6a3df9 100644 --- a/assets/sass/_init.scss +++ b/assets/sass/_init.scss @@ -1,9 +1,9 @@ -// Initialization partial +/* Initialization partial -// To make it easier to use all variables and mixins in any Sass file in this -// project, each .scss file has a `@import 'init';` declaration. The _init.scss -// file is in charge of importing all the other partials needed for the -// project. +To make it easier to use all variables and mixins in any Sass file in this +project, each .scss file has a `@import 'init';` declaration. The _init.scss +file is in charge of importing all the other partials needed for the +project. */ // Variables. @import 'sass_variables'; diff --git a/assets/sass/_sass_variables.scss b/assets/sass/_sass_variables.scss index 359a88a..ec9d01c 100644 --- a/assets/sass/_sass_variables.scss +++ b/assets/sass/_sass_variables.scss @@ -1,13 +1,13 @@ -// Variables -// These need to be sass variables since they are used in sass functions and mixins. -// Override sass variables in "assets/sass/_extra.scss" +/* Variables +These need to be sass variables since they are used in sass functions and mixins. +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) +/* 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, @@ -19,9 +19,9 @@ $font-size-fixed: ( 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) +/* 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), @@ -33,12 +33,12 @@ $font-size-fluid: ( xs: 0.778rem, ); -// Set the font sizes to use, fixed or fluid. -// $font-size: $font-size-fluid; +/* Set the font sizes to use, fixed or fluid. +$font-size: $font-size-fluid; */ $font-size: $font-size-fixed; -// Breakpoints (Deprecated in v5, use css @media directly instead.) -// Use the `respond-to(s)` mixin to use named breakpoints. +/* Breakpoints (Deprecated in v5, use css @media directly instead.) +Use the `respond-to(s)` mixin to use named breakpoints. */ $breakpoints: ( 'xxxl': 1222px, 'xxl': 1111px, @@ -51,9 +51,9 @@ $breakpoints: ( 'xxxs': 333px, ); -// Spacing -// Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and -// mx--m (mx = margin-block) classes. +/* Spacing +Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and +mx--m (mx = margin-block) classes. */ $spacing: ( xxl: 3, xl: 2, @@ -68,7 +68,7 @@ $spacing: ( // 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. +/* 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: $max-content-width; diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index c2fb3a9..670993b 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -23,14 +23,15 @@ --base-font-size: 18; // 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'; @@ -93,8 +94,8 @@ --radius-s: 0.3rem; --radius-xs: 0.125rem; - // Breakout amount. - // How much should the "breakout" be. Defaults to same as gutters value. + /* Breakout amount. + How much should the "breakout" be. Defaults to same as gutters value. */ --breakout: calc(5px + 1.5625vw); // The left/right gutter/padding. diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss index 0dc1b03..4ca4714 100644 --- a/assets/sass/base/grouping/_grouping.scss +++ b/assets/sass/base/grouping/_grouping.scss @@ -1,14 +1,6 @@ // Grouping content // Block quotes -// -// The `
` element is for quoting blocks of content from another -// source within your document. Wrap the `
` around any HTML as the quote. For straight -// quotes, we recommend a `

`. -// -// Optionally, add a `