diff --git a/assets/sass/_fonts.scss b/assets/sass/_fonts.scss index c3e3858..96830b3 100644 --- a/assets/sass/_fonts.scss +++ b/assets/sass/_fonts.scss @@ -5,30 +5,23 @@ // 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 Google. Here are a few +// 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: -// - http://www.fontsquirrel.com/fontface -// - http://www.theleagueofmoveabletype.com +// - https://www.fontsquirrel.com/ +// - https://www.theleagueofmoveabletype.com // - https://fonts.google.com // -// In order to use these fonts, you will need to convert them into formats -// suitable for web fonts. We recommend the free-to-use Font Squirrel's -// Font-Face Generator: -// http://www.fontsquirrel.com/fontface/generator +// 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; // -// Since we're using Sass, you'll need to declare your font faces here, then you -// can add them to the font variables in the _init.scss partial. - // @font-face { // font-family: 'Example'; -// src: url('../fonts/example.eot'); -// src: url('../fonts/example.eot?iefix') format('eot'), -// url('../fonts/example.woff') format('woff'), -// url('../fonts/example.ttf') format('truetype'), -// url('../fonts/example.svg#webfontOkOndcij') format('svg'); +// src: url('../fonts/example.woff2') format('woff2'); // font-weight: normal; // font-style: normal; +// font-display: swap; // } diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 993ad24..eb33872 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -2,8 +2,6 @@ // Variables -// Set variables for this site before a library sets its !default value. - // Font faces, stacks and sizes. // Font styling and line heights are controlled by the several variables that @@ -12,28 +10,54 @@ // homepage](https://github.com/jptaranto/typey). // The font size set on the root html element. -$base-font-size: 18px; +// Specify unitless, it will be recalculated as %. +$base-font-size: 18; -// The base line height determines the basic unit of vertical rhythm. -$base-line-height: $base-font-size * 1.5; +// Base and heading line height, unitless. +$base-line-height: 1.5; +$heading-line-height: 1.3; + +// The pt font-size to be used for printing. +$print-font-size: 12pt; // The font sizes in our type hierarchy as tee shirt sizes. -$font-size: ( - xxl: 36px, - xl: 28px, - l: 22px, - m: $base-font-size, - s: 16px, - xs: 14px, +// Size m is base. +$font-size-fixed: ( + xxxxl: 2.778rem, + xxxl: 2.335rem, + xxl: 2rem, + xl: 1.556rem, + l: 1.223rem, + m: 1rem, + s: 0.889rem, + xs: 0.778rem, ); -// Typey allows you to alter font weights site-wide with this map. +// The responsive font sizes in our type hierarchy as tee shirt sizes. +// Size m is base. +$font-size-fluid: ( + xxxxl: clamp(1.80rem, calc(1.45rem + 1.73vw), 2.80rem), + xxxl: clamp(1.60rem, calc(1.35rem + 1.27vw), 2.33rem), + xxl: clamp(1.42rem, calc(1.24rem + 0.90vw), 1.94rem), + xl: clamp(1.27rem, calc(1.14rem + 0.62vw), 1.62rem), + l: clamp(1.13rem, calc(1.05rem + 0.39vw), 1.35rem), + m: 1rem, + s: 0.889rem, + xs: 0.778rem, +); + +// Set the font sizes to use, fixed or fluid. +$font-size: $font-size-fixed; +//$font-size: $font-size-fluid; + +// Font weights. $font-weight: ( - bold: bold, - medium: 500, - normal: normal, - light: 300, - lighter: lighter, + bolder: 900, + bold: 700, + medium: 500, + normal: 400, + light: 300, + lighter: 200, ); // The following font family declarations use widely available fonts. @@ -53,8 +77,6 @@ $garamond: Garamond, Charter, 'Times New Roman', serif; $verdana: Verdana, Tahoma, 'DejaVu Sans', sans-serif; $tahoma: Tahoma, Verdana, 'DejaVu Sans', sans-serif; $helvetica: Helvetica, Arial, 'Nimbus Sans L', sans-serif; -$arial: Arial, Helvetica, 'Nimbus Sans L', sans-serif; -$impact: Impact, 'Arial Narrow', Helvetica, sans-serif; $lucida: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif; $futura: Futura, 'Century Gothic', AppleGothic, sans-serif; @@ -64,81 +86,66 @@ $system-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Rob // 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, 'DejaVu Sans Mono', 'Ubuntu Mono', Courier, 'Courier New', monospace, sans-serif; $menlo: Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif; -// The font faces you specify in the $typefaces map can be used in the -// typeface() mixin. -$typefaces: ( - body: ( - font-family: $garamond, - ), - headings: ( - font-family: $futura, - ), - monospace: ( - font-family: $menlo, - ), - compact: ( - font-family: $impact, - weight: bold, - case: uppercase, - // We could also specify the following property: - // letter-spacing: .5px, - ), -); // stylelint-disable indentation - -// Output a horizontal grid to help with debugging typography. -$typey-debug: false; -$with-wireframes: false; - -// The length unit in which to output font size and margin values. -// Supported values: px, em, rem. -$base-unit: 'rem'; - -// px fallbacks for rem units are needed for IE 8 and earlier. -$rem-fallback: false; - -// We have separate print file. -$auto-print-sizing: false; +$font-family: ( + body: $garamond, + headings: $futura, + alt: $system-ui, + monospace: $menlo, +); // Breakpoints - // Use the `respond-to()` mixin to use named breakpoints. - $breakpoints: ( - 'xxxs': 333px, - 'xxs': 444px, - 'xs': 555px, - 's': 666px, - 'm': 777px, - 'l': 888px, - 'xl': 999px, - 'xxl': 1111px, - 'xxxl': 1222px -) !default; - -// Layout - -// The max content width. -$max-content-width: 1000px; - -// The max line width for readability. -$max-line-width: 70ch; - -// The default left/right gutter/padding. -$zen-gutters: calc(5px + 1.5625vw); -$zen-gutters-reverse: calc(0px - (5px + 1.5625vw)); + 'xxxl': 1222px, + 'xxl': 1111px, + 'xl': 999px, + 'l': 888px, + 'm': 777px, + 's': 666px, + 'xs': 555px, + 'xxs': 444px, + 'xxxs': 333px, +); // Border radius. -$s-radius: 3px; -$m-radius: .3rem; -$l-radius: 1rem; +$border-radius: ( + l: 1rem, + m: 0.3rem, + s: 3px, +); -// Miscellaneous variables +// Spacing. +$spacing: ( + xxxl: 5rem, + xxl: 3rem, + xl: 2rem, + l: 1.5rem, + m: 1rem, + s: 0.75rem, + xs: 0.5rem, + xxs: 0.4rem, + xxxs: 0.3rem, +); -// `$indent-amount` controls the amount lists, blockquotes and comments are indented. -$indent-amount: 2 * $base-font-size; +// The max content width. (Consider using one of the breakpoints.) +$max-content-width: 1111px; -// `$include-rtl` controls whether RTL styles are output. +// The max page width. Defaults to max-content-width. +// Setting this to a larger value than max-content-width allows +// content with class "stetch" to strech out to the page edge. +//$max-page-width: 1111px; + +// The max line width for readability. +$max-line-width: 70ch; + +// 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; + +// Control whether RTL styles are added. $include-rtl: false; diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index bd87493..529b318 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -11,12 +11,12 @@ body { } .header { - padding-top: $zen-gutters; + padding-top: var(--gutters); } .footer { @include margin-top(1.5); - @include padding(.5 0); + @include padding(.3); text-align: center; border-top: 2px solid var(--color-brand); @@ -31,14 +31,14 @@ th, label, legend, figcaption { - @include font-size(s); + font-size: var(--fs-s); } .language-selector, article > header, .content-dates, .footer { - @include font-size(xs); + font-size: var(--fs-xs); } // Apply heading font stack to heading, labels etc. @@ -54,9 +54,9 @@ article > header, .content-dates, .header, .footer { - @include typeface(headings); + font-family: var(--ff-headings); + font-weight: var(--fw-normal); color: var(--color-headings); - font-weight: normal; } article > .content, @@ -72,16 +72,13 @@ aside { article { & > header { + @include margin-bottom(.75); color: var(--color-text-meta); } - .submitted { - margin-bottom: .5rem; - } - .submitted, .tags { - @include respond-to(l) { + @include respond-to(s) { display: inline-block; padding-right: 1rem; } @@ -96,8 +93,8 @@ article { } li { - @include padding-right(.2); - list-style-type: none; + list-style: none; + padding-right: .4rem; } } @@ -107,13 +104,13 @@ article { } code { - @include font-size(xs); + font-size: var(--fs-xs); overflow-wrap: break-word; } pre { color: var(--color-code); - border-radius: $s-radius; + border-radius: var(--radius-s); padding: 5px; border: 1px solid var(--color-border); background-color: var(--color-text-bg); @@ -131,10 +128,6 @@ article { white-space: pre; } } - - .js-clipboard-button { - display: block; - } } .title-submitted { @@ -146,8 +139,7 @@ img { &.image { @include respond-to(s) { &.center { - margin-left: auto; - margin-right: auto; + margin-inline: auto; } &.left { @@ -246,11 +238,11 @@ figure { // Search .search-input { - @include margin(1 0); + @include margin-block(1); } .search-text { - @include font-size(l); + font-size: var(--fs-l); max-width: 80%; } diff --git a/assets/sass/components/box/_box.scss b/assets/sass/components/box/_box.scss index ad94b85..43b08c0 100644 --- a/assets/sass/components/box/_box.scss +++ b/assets/sass/components/box/_box.scss @@ -19,32 +19,17 @@ .box, %box { - @include margin-bottom(1); + // Add vertical rhythm margins. + @include margin-block(1); + @include padding(.5); border: 5px solid var(--color-border); - padding: 1em; // Sass compiles this to the selector: .box__title, %box__title {} // The "__" (double underscore) is part of a BEM naming convention that // indicates the "title" is an _element_ of (a piece of) the "box" component. - &__title { - margin: 0; - } - - // Sass compiles this nested ruleset's selector into: - // .box:focus, .box:hover, .box.is-focus, .box--is-focus, - // %box:focus, %box:hover, %box.is-focus, %box--is-focus {} - // - // The ".box--is-focus" class is a stray class we don't actually want, but we - // deal with it because we often want a placeholder selector like - // %box--is-focus in case we need to use @extends later. - // - // The ".is-" part of the class name is a Drupal 8 BEM naming convention that - // indicates the "focus" is a _state_ of the "box" component. - &:focus, - &:hover, - &.is-focus, - &--is-focus { - border-color: var(--color-text); + &__title, + .title { + margin-top: 0; } // Sass compiles this to the selector: .box--highlight, %box--highlight {} @@ -52,6 +37,22 @@ // the "highlight" is a _modifier_, creating a new variation of the standard // "box" component. &--highlight { - border-color: var(--color-link); + border-color: var(--color-highlight); + } + + &--inverted { + @extend %link-inverted; + background: var(--color-border); + color: var(--color-text-bg); + } + + > * { + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } } diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss index d08197d..0e87c81 100644 --- a/assets/sass/components/button/_button.scss +++ b/assets/sass/components/button/_button.scss @@ -15,12 +15,12 @@ button, [type='reset'], [type='submit'] { @extend %button--disabled; - @include typeface(headings); @include margin-right(.75); @include margin-bottom(.75); @include padding(.2 1); // 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; // Improve usability and consistency of cursor style between image-type `input` and others. @@ -28,7 +28,7 @@ button, color: var(--color-button-text); background-color: var(--color-button); border: 0; - border-radius: $m-radius; + border-radius: var(--radius-m); &:hover, &:focus, @@ -44,10 +44,10 @@ button, .button, %button { &--small { - @include font-size(xs); @include margin-right(.3); @include margin-bottom(.3); @include padding(.1 .5); + font-size: var(--fs-xs); } &--alt { @@ -79,18 +79,9 @@ button, // The disabled variation should always go last, so that it overrides any // other variations. %button--disabled[disabled] { - // Re-set default cursor for disabled elements. - cursor: default; - color: var(--color-button-disabled); + @extend %disabled; background-color: var(--color-grey-extra-light); border: 1px solid var(--color-button-disabled); background-image: none; text-shadow: none; - - &:hover, - &:focus, - &:active { - // Override any link underlines and color changes. - color: var(--color-button-disabled); - } } diff --git a/assets/sass/components/cookieconsent/_cookieconsent.scss b/assets/sass/components/cookieconsent/_cookieconsent.scss index 0ed86f9..b92e8bc 100644 --- a/assets/sass/components/cookieconsent/_cookieconsent.scss +++ b/assets/sass/components/cookieconsent/_cookieconsent.scss @@ -1,13 +1,13 @@ // Cookieconsent .cookieconsent { - @include font-size(s); position: sticky; bottom: 0; width: 100%; color: var(--color-warning); background-color: var(--color-warning-bg); border-top: 4px solid var(--color-warning-border); + font-size: var(--fs-s); text-align: center; transform: translateY(100vh); transition: all 130ms ease-out; diff --git a/assets/sass/components/divider/_divider.scss b/assets/sass/components/divider/_divider.scss index ce96fed..0de6146 100644 --- a/assets/sass/components/divider/_divider.scss +++ b/assets/sass/components/divider/_divider.scss @@ -4,7 +4,8 @@ .divider, %divider { - @include margin(1 0); + // Add vertical rhythm margins. + @include margin-block(1); border: 0; border-top: 1px solid var(--color-border); diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss index 1f2e1e8..0f79323 100644 --- a/assets/sass/components/header/_header.scss +++ b/assets/sass/components/header/_header.scss @@ -9,10 +9,10 @@ // Wrapping link for logo. &__logo { @include respond-to(s) { - margin: 0 $zen-gutters 0 0; + margin: 0 var(--gutters) 0 0; @include rtl() { - margin: 0 0 0 $zen-gutters; + margin: 0 0 0 var(--gutters); } } } diff --git a/assets/sass/components/highlight-mark/_highlight-mark.scss b/assets/sass/components/highlight-mark/_highlight-mark.scss index c6510e9..eceaa5a 100644 --- a/assets/sass/components/highlight-mark/_highlight-mark.scss +++ b/assets/sass/components/highlight-mark/_highlight-mark.scss @@ -7,6 +7,5 @@ .highlight-mark, %highlight-mark { color: var(--color-mark-highlight); - // Remove background highlighting from in normalize. - background-color: transparent; + background-color: var(--color-mark-bg); } diff --git a/assets/sass/components/inline-links/_inline-links.scss b/assets/sass/components/inline-links/_inline-links.scss deleted file mode 100644 index 5b0a74a..0000000 --- a/assets/sass/components/inline-links/_inline-links.scss +++ /dev/null @@ -1,20 +0,0 @@ -// Inline links -// -// A list of links that are inline with each other. - -.inline-links, -%inline-links { - padding: 0; - - &__item { - display: inline; - list-style-type: none; - padding: 0 1em 0 0; - - @include rtl() { - // Bug in Safari causes display: inline to fail. - display: inline-block; - padding: 0 0 0 1em; - } - } -} diff --git a/assets/sass/components/list-straight-left/_list-straight-left.scss b/assets/sass/components/list-straight-left/_list-straight-left.scss index 49a3c16..ab9270c 100644 --- a/assets/sass/components/list-straight-left/_list-straight-left.scss +++ b/assets/sass/components/list-straight-left/_list-straight-left.scss @@ -9,10 +9,10 @@ display: table-row; &::before { - @include font-size(s); @include padding-right(.5); display: table-cell; content: '\2022'; + font-size: var(--fs-s); } } } @@ -27,10 +27,10 @@ counter-increment: table-ol; &::before { - @include font-size(s); @include padding-right(.5); display: table-cell; content: counter(table-ol) '.'; + font-size: var(--fs-s); text-align: right; } } diff --git a/assets/sass/components/responsive-video/_responsive-video.scss b/assets/sass/components/responsive-video/_responsive-video.scss index 3e78b22..71d05be 100644 --- a/assets/sass/components/responsive-video/_responsive-video.scss +++ b/assets/sass/components/responsive-video/_responsive-video.scss @@ -10,7 +10,7 @@ .responsive-video, %responsive-video { position: relative; - padding-bottom: (9 / 16) * 100%; // 16:9 aspect ratio + padding-bottom: calc(9 / 16 * 100%); // 16:9 aspect ratio padding-top: 25px; // Height of video controls height: 0; @@ -27,6 +27,6 @@ } &--4-3 { - padding-bottom: (3 / 4) * 100%; // 4:3 aspect ratio + padding-bottom: calc(3 / 4 * 100%); // 4:3 aspect ratio } } diff --git a/assets/sass/layouts/_layouts.scss b/assets/sass/layouts/_layouts.scss index 24dd4c2..2e59e0b 100644 --- a/assets/sass/layouts/_layouts.scss +++ b/assets/sass/layouts/_layouts.scss @@ -2,10 +2,10 @@ .layout { &__page { - max-width: $max-content-width; + max-width: var(--max-page-width); @include respond-to(s) { - margin: 0 auto; + margin-inline: auto; min-height: 100vh; } } @@ -19,9 +19,28 @@ &__page-top, &__page-bottom, &__cookieconsent { - padding: 0 $zen-gutters; + padding-inline: var(--gutters); min-width: 0; // With display grid defaults to auto, making 
 overflow.
   }
+
+  @if $max-page-width > $max-content-width {
+    &__main {
+      padding-inline: 0;
+    }
+
+    &__navigation > *,
+    &__main > * {
+      max-width: var(--max-content-width);
+
+      &:not(.stretch) {
+        padding-inline: var(--gutters);
+      }
+
+      @include respond-to(s) {
+        margin-inline: auto;
+      }
+    }
+  }
 }
 
 @supports (display: grid) {
diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss
index fcefe61..9f47015 100644
--- a/assets/sass/mobile.scss
+++ b/assets/sass/mobile.scss
@@ -2,7 +2,6 @@
 // The mobile navigation stylesheet for this theme.
 
 @import 'init';
-@import 'extra';
 
 .main-menu,
 .header__region { // stylelint-disable selector-class-pattern
@@ -14,13 +13,13 @@
 } // stylelint-enable selector-class-pattern
 
 .mobile-nav {
-  @include typeface(headings);
   position: absolute;
   right: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  font-family: var(--ff-headings);
   z-index: 20;
   pointer-events: none;
 
@@ -54,10 +53,10 @@
     display: flex;
     align-items: center;
     position: absolute;
-    top: $zen-gutters;
-    right: $zen-gutters;
+    top: var(--gutters);
+    right: var(--gutters);
     margin: 0;
-    font-weight: bold;
+    font-weight: var(--fw-bold);
     background-color: transparent;
     color: var(--color-text);
     z-index: 22;
@@ -110,11 +109,11 @@
   }
 
   &__sheet {
+    @include padding(1.5);
     visibility: hidden;
     background-color: var(--color-mobile-menu);
     width: 90vw;
     height: 100vh;
-    padding: 2rem;
     transform: translateX(100vw);
     z-index: 21;
 
@@ -143,7 +142,7 @@
     margin: 0;
 
     li {
-      list-style-type: none;
+      list-style: none;
       margin: .4rem 0;
     }
   }
diff --git a/assets/sass/navigation/more-link/_more-link.scss b/assets/sass/navigation/more-link/_more-link.scss
deleted file mode 100644
index 496d32e..0000000
--- a/assets/sass/navigation/more-link/_more-link.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// "More" link
-//
-// Styles the "Read more…" and "Help" links common on the web.
-
-.more-link,
-%more-link {
-  text-align: right;
-
-  @include rtl() {
-    text-align: left;
-  }
-
-  &__help-icon {
-    padding: 1px 0 1px 20px;
-    background-image: image-url('navigation', 'more-link/more-link__help-icon.svg');
-    background-position: 0 50%;
-    background-repeat: no-repeat;
-
-    @include rtl() {
-      padding: 1px 20px 1px 0;
-      background-position: 100% 50%;
-    }
-  }
-}
diff --git a/assets/sass/navigation/more-link/more-link__help-icon.svg b/assets/sass/navigation/more-link/more-link__help-icon.svg
deleted file mode 100644
index 1b3519c..0000000
--- a/assets/sass/navigation/more-link/more-link__help-icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/assets/sass/navigation/navbar/_navbar.scss b/assets/sass/navigation/navbar/_navbar.scss
index 4a4e179..8b8ab40 100644
--- a/assets/sass/navigation/navbar/_navbar.scss
+++ b/assets/sass/navigation/navbar/_navbar.scss
@@ -1,24 +1,6 @@
 // Navbar
-//
-// A simple method to get navigation links to appear in one line.
 
-.navbar,
-%navbar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: .5rem;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-
-  @include rtl() {
-    flex-direction: row-reverse;
-    text-align: right;
-  }
-
-  &__item,
-  li {
-    list-style-type: none;
-    list-style-image: none;
-  }
+.navbar {
+  @extend %flex-inline;
+  margin-block: 0;
 }
diff --git a/assets/sass/navigation/pager/_pager.scss b/assets/sass/navigation/pager/_pager.scss
index 8691ac6..24b033f 100644
--- a/assets/sass/navigation/pager/_pager.scss
+++ b/assets/sass/navigation/pager/_pager.scss
@@ -3,49 +3,30 @@
 // Paged navigation is a list of page numbers when more than 1 page of content
 // is available.
 
+.pagination,
 .pager,
 %pager {
-  @include margin-top(.5);
-  @include margin-bottom(.5);
-  clear: both;
-  padding: 0;
-  text-align: center;
+  @extend %flex-inline;
+  @extend %link-nav;
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+  justify-content: center;
 
-  // A page item in the pager list.
-  &__item {
-    display: inline;
-    padding: 0 .5em;
-    list-style-type: none;
-    background-image: none;
+  .page-item {
   }
 
-  // The current page's list item.
-  &__current-item {
-    @extend %pager__item;
-    font-weight: bold;
+  &__item,
+  .page-link {
+    padding-inline: 2px;
+  }
+
+  .active {
+    font-weight: var(--fw-bold);
+  }
+
+  .disabled {
+    .page-link {
+      @extend %disabled;
+    }
   }
 }
-
-//
-// Zen selectors.
-//
-
-// .pager-item     - A list item containing a page number in the list of pages.
-// .pager-first    - The first page's list item.
-// .pager-previous - The previous page's list item.
-// .pager-next     - The next page's list item.
-// .pager-last     - The last page's list item.
-// .pager-ellipsis - A concatenation of several list items using an ellipsis.
-
-.pager-item,
-.pager-first,
-.pager-previous,
-.pager-next,
-.pager-last,
-.pager-ellipsis {
-  @extend %pager__item;
-}
-
-.pager-current {
-  @extend %pager__current-item;
-}
diff --git a/assets/sass/reset/_reset.scss b/assets/sass/reset/_reset.scss
index 5936a55..2b69ccf 100644
--- a/assets/sass/reset/_reset.scss
+++ b/assets/sass/reset/_reset.scss
@@ -5,7 +5,6 @@
 @import 'embedded/embedded';
 @import 'forms/forms';
 @import 'grouping/grouping';
-@import 'interactive/interactive';
 @import 'links/links';
 @import 'sections/sections';
 @import 'tables/tables';
diff --git a/assets/sass/reset/document/_document.scss b/assets/sass/reset/document/_document.scss
index 4b5eb9a..c9940d5 100644
--- a/assets/sass/reset/document/_document.scss
+++ b/assets/sass/reset/document/_document.scss
@@ -4,11 +4,11 @@
 
 html {
   // Change the default font family in all browsers (opinionated).
-  @include typeface(body);
+  font-family: var(--ff-body);
   // Set base font size in percent.
-  font-size: $base-font-size / $browser-font-size * 100%;
+  font-size: calc(#{$base-font-size} / 16 * 100%);
   // Correct the line height in all browsers.
-  line-height: 1.5;
+  line-height: $base-line-height;
   // Prevent adjustments of font size.
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
diff --git a/assets/sass/reset/forms/_forms.scss b/assets/sass/reset/forms/_forms.scss
index 174afa3..268846f 100644
--- a/assets/sass/reset/forms/_forms.scss
+++ b/assets/sass/reset/forms/_forms.scss
@@ -2,6 +2,11 @@
 
 // Form defaults.
 
+form {
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+}
+
 input,
 button,
 textarea,
@@ -12,7 +17,7 @@ select {
 
 label {
   display: block;
-  font-weight: bold;
+  font-weight: var(--fw-bold);
 }
 
 fieldset {
diff --git a/assets/sass/reset/grouping/_grouping.scss b/assets/sass/reset/grouping/_grouping.scss
index 40e7f52..89643c7 100644
--- a/assets/sass/reset/grouping/_grouping.scss
+++ b/assets/sass/reset/grouping/_grouping.scss
@@ -12,38 +12,42 @@
 
 blockquote {
   // Add vertical rhythm margins.
+  @include margin-block(1);
   // Also indent the quote on both sides.
-  @include margin(1 $indent-amount);
+  margin-inline: var(--indent-amount);
 }
 
 // Lists
 
 dl,
 ol,
-ul {
+ul,
+menu {
   // Add vertical rhythm margins.
-  @include margin(1 0);
+  @include margin-block(1);
 }
 
 dd {
-  margin: 0 0 0 $indent-amount;
+  margin: 0 0 0 var(--indent-amount);
 
   @include rtl {
-    margin: 0 $indent-amount 0 0;
+    margin: 0 var(--indent-amount) 0 0;
   }
 }
 
 ol,
-ul {
-  padding: 0 0 0 $indent-amount;
+ul,
+menu {
+  padding: 0 0 0 var(--indent-amount);
 
   @include rtl {
-    padding: 0 $indent-amount 0 0;
+    padding: 0 var(--indent-amount) 0 0;
   }
 
   // Turn off margins on nested lists.
   ol,
-  ul {
+  ul,
+  menu {
     margin: 0;
   }
 }
@@ -52,7 +56,7 @@ ul {
 
 figure {
   // Add vertical rhythm margins.
-  @include margin(1 0);
+  @include margin-block(1);
 }
 
 // Horizontal rule
@@ -66,11 +70,12 @@ hr {
 
 p,
 pre {
-  @include margin(.75 0);
+  // Add vertical rhythm margins.
+  @include margin-block(.75);
 }
 
 // Preformatted text
 
 pre {
-  @extend %monospace;
+  font-family: var(--ff-monospace);
 }
diff --git a/assets/sass/reset/interactive/_interactive.scss b/assets/sass/reset/interactive/_interactive.scss
deleted file mode 100644
index f8e019c..0000000
--- a/assets/sass/reset/interactive/_interactive.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Interactive
-
-// Menu
-
-menu {
-  // Set 1 unit of vertical rhythm on the top and bottom margin.
-  @include margin(1 0);
-  // Set consistent space for the list style image.
-  padding: 0 0 0 $indent-amount;
-
-  @include rtl {
-    padding: 0 $indent-amount 0 0;
-  }
-
-  // Turn off margins on nested lists.
-  menu &,
-  ol &,
-  ul & {
-    margin: 0;
-  }
-}
diff --git a/assets/sass/reset/links/_links.scss b/assets/sass/reset/links/_links.scss
index 315e3e3..c0d5611 100644
--- a/assets/sass/reset/links/_links.scss
+++ b/assets/sass/reset/links/_links.scss
@@ -31,3 +31,36 @@ a:focus {
 a:active {
   color: var(--color-link-active);
 }
+
+.link-nav,
+%link-nav {
+  a {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+}
+
+// Inverted links, for dark backgrounds.
+.link-inverted,
+%link-inverted {
+  a {
+    color: var(--color-link-inverted);
+
+    &:visited {
+      color: var(--color-link-visited-inverted);
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--color-link-hover-inverted);
+    }
+
+    &:active {
+      color: var(--color-link-active-inverted);
+    }
+  }
+}
diff --git a/assets/sass/reset/sections/_sections.scss b/assets/sass/reset/sections/_sections.scss
index 5b3a7d3..b920e60 100644
--- a/assets/sass/reset/sections/_sections.scss
+++ b/assets/sass/reset/sections/_sections.scss
@@ -1,9 +1,6 @@
 // Sections
 
 body {
-  // Output a horizontal grid to help with debugging typography. The
-  // $typey-debug variable will toggle its output.
-  @include typey-debug-grid();
   // Remove the margin in all browsers (opinionated).
   margin: 0;
   padding: 0;
@@ -14,62 +11,49 @@ 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.
-
-// Correct the font size and margin on `h1` elements within `section` and
-// `article` contexts in Chrome, Firefox, and Safari.
 h1,
 %h1 {
-  // Set the font-size while keeping a proper vertical rhythm.
-  @include font-size(xxl);
-
-  // Set 1 unit of vertical rhythm on the top and bottom margins.
-  @include margin-top(1, xxl);
-  @include margin-bottom(1, xxl);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-xxl);
+  line-height: var(--heading-line-height);
 }
 
 h2,
 %h2 {
-  @include font-size(xl);
-  @include margin-top(1, xl);
-  @include margin-bottom(1, xl);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-xl);
+  line-height: var(--heading-line-height);
 }
 
 h3,
 %h3 {
-  @include font-size(l);
-  @include margin-top(1, l);
-  @include margin-bottom(1, l);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-l);
+  line-height: var(--heading-line-height);
 }
 
 h4,
 %h4 {
-  @include font-size(m);
-  @include margin-top(1, m);
-  @include margin-bottom(1, m);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-m);
+  line-height: var(--heading-line-height);
 }
 
 h5,
 %h5 {
-  @include font-size(s);
-  @include margin-top(1, s);
-  @include margin-bottom(1, s);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-s);
+  line-height: var(--heading-line-height);
 }
 
 h6,
 %h6 {
-  @include font-size(xs);
-  @include margin-top(1, xs);
-  @include margin-bottom(1, xs);
-  line-height: 1.3;
+  @include margin-block(1);
+  font-size: var(--fs-xs);
+  line-height: var(--heading-line-height);
 }
 
 // Set max text line width for readability.
-
 .main {
   h2,
   h3,
@@ -80,6 +64,6 @@ h6,
   ol,
   dl,
   p {
-    max-width: $max-line-width;
+    max-width: var(--max-line-width);
   }
 }
diff --git a/assets/sass/reset/tables/_tables.scss b/assets/sass/reset/tables/_tables.scss
index abfcc06..d064087 100644
--- a/assets/sass/reset/tables/_tables.scss
+++ b/assets/sass/reset/tables/_tables.scss
@@ -4,7 +4,7 @@
 
 table {
   // Add vertical rhythm margins.
-  @include margin(1 0);
+  @include margin-block(1);
   // Remove most spacing between table cells.
   border-collapse: collapse;
   border-spacing: 0;
diff --git a/assets/sass/reset/text/_text.scss b/assets/sass/reset/text/_text.scss
index b6b0102..029314b 100644
--- a/assets/sass/reset/text/_text.scss
+++ b/assets/sass/reset/text/_text.scss
@@ -7,14 +7,13 @@
 code,
 kbd,
 samp {
-  @extend %monospace;
+  font-family: var(--ff-monospace);
 }
 
-// Small text
+// Mark text
 
-small {
-  // Add the correct font size in all browsers.
-  @include font-size(s);
+mark {
+  @extend %highlight-mark;
 }
 
 // Superscript / Subscript
@@ -23,7 +22,7 @@ sub,
 sup {
   // Prevent `sub` and `sup` elements from affecting the line height in
   // all browsers.
-  @include font-size(xs);
+  font-size: var(--fs-xs);
   line-height: 0;
   position: relative;
   vertical-align: baseline;