diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 66812e1..843efc0 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -56,6 +56,7 @@ $font-size: $font-size-fixed; // Font weights. // Use like this: var(--fw-normal) $font-weight: ( + headings: 700, bolder: 900, bold: 700, medium: 500, @@ -71,34 +72,31 @@ $font-weight: ( // monospace) hints at what type of font to use if the web browser doesn't // find any of the fonts in the list. +// System-ui font stack. +$system-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Liberation Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; + // Serif font stacks. -$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif; -$times: Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif; -$georgia: Georgia, 'Times New Roman', 'DejaVu Serif', serif; -$garamond: Garamond, Charter, 'Times New Roman', serif; +$ui-serif: ui-serif, Constantia, 'Noto Serif', Georgia, serif; +$times: 'Times New Roman', 'Liberation Serif', 'Nimbus Roman No9 L', serif; +$georgia: Georgia, 'Noto Serif', ui-serif, serif; +$garamond: Garamond, Charter, Cambria, 'Noto Serif', ui-serif, serif; // Sans-serif font stacks. -$verdana: Verdana, Tahoma, 'DejaVu Sans', sans-serif; -$tahoma: Tahoma, Verdana, 'DejaVu Sans', sans-serif; -$helvetica: Helvetica, Arial, 'Nimbus Sans L', sans-serif; -$lucida: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif; -$futura: Futura, 'Century Gothic', AppleGothic, sans-serif; - -// System-ui font stack. -$system-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; +$ui-sans-serif: ui-sans-serif, $system-ui; +$helvetica: 'Helvetica Neue', Helvetica, 'Liberation Sans', 'Nimbus Sans L', Arial, sans-serif; +$futura: Futura, 'Century Gothic', Montserrat, Calibri, ui-sans-serif, sans-serif; // Monospace font stacks. -// For an explanation of why "sans-serif" is at the end of this list, see -// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ -$menlo: Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif; +$ui-monospace: ui-monospace, Menlo, 'Cascadia Mono', 'Segoe UI Mono', 'Noto Sans Mono', 'Liberation Mono', Monaco, Consolas, monospace; + // Font family. // Use like this: var(--ff-body) $font-family: ( - body: $garamond, - headings: $futura, + body: $ui-serif, + headings: $ui-sans-serif, alt: $system-ui, - monospace: $menlo, + monospace: $ui-monospace, ); // Breakpoints diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 87366c6..3c91261 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -41,11 +41,8 @@ article > header, font-size: var(--fs-xs); } -// Apply heading font stack to heading, labels etc. +// Apply heading font stack and colour to labels etc. -h1, -h2, -h3, th, nav, label, @@ -54,9 +51,9 @@ article > header, .content-dates, .header, .footer { - font-family: var(--ff-headings); - font-weight: var(--fw-normal); color: var(--color-headings); + font-family: var(--ff-headings); + font-weight: var(--fw-headings); } // Article and content. @@ -111,7 +108,6 @@ article { } pre { - color: var(--color-code); border-radius: var(--radius-s); padding: 5px; border: 1px solid var(--color-border-light); diff --git a/assets/sass/reset/document/_document.scss b/assets/sass/reset/document/_document.scss index c9940d5..69d89f9 100644 --- a/assets/sass/reset/document/_document.scss +++ b/assets/sass/reset/document/_document.scss @@ -3,12 +3,14 @@ // Document html { - // Change the default font family in all browsers (opinionated). + // 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%); // Correct the line height in all browsers. line-height: $base-line-height; + // Set text colour. + color: var(--color-text); // Prevent adjustments of font size. -webkit-text-size-adjust: none; text-size-adjust: none; diff --git a/assets/sass/reset/sections/_sections.scss b/assets/sass/reset/sections/_sections.scss index b920e60..e1672ed 100644 --- a/assets/sass/reset/sections/_sections.scss +++ b/assets/sass/reset/sections/_sections.scss @@ -1,7 +1,7 @@ // Sections body { - // Remove the margin in all browsers (opinionated). + // Remove the margin in all browsers. margin: 0; padding: 0; } @@ -10,47 +10,54 @@ body { // // All HTML headings, `

` through `

`, are available. `%h1` through `%h6` // classes are also available, for when you want to match the font styling of a -// heading but still want your text to be displayed inline. +// heading but not be a heading. +h1, +%h1, +h2, +%h2, +h3, +%h3, +h4, +%h4, +h5, +%h5, +h6, +%h6 { + @include margin-block(1); + color: var(--color-headings); + font-family: var(--ff-headings); + font-weight: var(--fw-headings); + line-height: var(--heading-line-height); +} + h1, %h1 { - @include margin-block(1); font-size: var(--fs-xxl); - line-height: var(--heading-line-height); } h2, %h2 { - @include margin-block(1); font-size: var(--fs-xl); - line-height: var(--heading-line-height); } h3, %h3 { - @include margin-block(1); font-size: var(--fs-l); - line-height: var(--heading-line-height); } h4, %h4 { - @include margin-block(1); font-size: var(--fs-m); - line-height: var(--heading-line-height); } h5, %h5 { - @include margin-block(1); font-size: var(--fs-s); - line-height: var(--heading-line-height); } h6, %h6 { - @include margin-block(1); font-size: var(--fs-xs); - line-height: var(--heading-line-height); } // Set max text line width for readability. diff --git a/assets/sass/reset/text/_text.scss b/assets/sass/reset/text/_text.scss index 029314b..f430194 100644 --- a/assets/sass/reset/text/_text.scss +++ b/assets/sass/reset/text/_text.scss @@ -7,6 +7,7 @@ code, kbd, samp { + color: var(--color-code); font-family: var(--ff-monospace); }