From a1e745c686dee189627e00a5d1c4bf87b3935cc2 Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Sat, 25 Dec 2021 18:28:17 +0100
Subject: [PATCH] Replace obsolete normalize with a lightweight reset.

---
 assets/sass/_colors.scss                      |   1 +
 assets/sass/_variables.scss                   |   2 +-
 assets/sass/_zen.scss                         |   7 +
 assets/sass/base/_normalize.scss              |  25 --
 assets/sass/base/embedded/_embedded.scss      |  31 ---
 assets/sass/base/forms/_forms.scss            | 229 ------------------
 assets/sass/base/grouping/_grouping.scss      | 141 -----------
 assets/sass/base/scripting/_scripting.scss    |  13 -
 assets/sass/base/text/_text.scss              | 165 -------------
 assets/sass/components/box/box.json           |   4 -
 assets/sass/components/button/_button.scss    |  58 ++---
 assets/sass/components/divider/divider.json   |   3 -
 .../sass/components/monospace/_monospace.scss |  10 +
 .../visually-hidden/visually-hidden.json      |   3 -
 .../sass/components/watermark/_watermark.scss |   1 -
 .../sass/components/watermark/watermark.json  |   4 -
 .../sass/components/wireframe/wireframe.json  |   3 -
 assets/sass/reset/_reset.scss                 |  12 +
 .../{base => reset}/document/_document.scss   |  14 +-
 assets/sass/reset/embedded/_embedded.scss     |  15 ++
 assets/sass/reset/forms/_forms.scss           |  25 ++
 assets/sass/reset/grouping/_grouping.scss     |  78 ++++++
 .../interactive/_interactive.scss             |  12 -
 assets/sass/{base => reset}/links/_links.scss |   3 -
 .../{base => reset}/sections/_sections.scss   |   0
 .../sass/{base => reset}/tables/_tables.scss  |   0
 assets/sass/reset/text/_text.scss             |  38 +++
 assets/sass/styles.scss                       |  26 +-
 28 files changed, 220 insertions(+), 703 deletions(-)
 delete mode 100644 assets/sass/base/_normalize.scss
 delete mode 100644 assets/sass/base/embedded/_embedded.scss
 delete mode 100644 assets/sass/base/forms/_forms.scss
 delete mode 100644 assets/sass/base/grouping/_grouping.scss
 delete mode 100644 assets/sass/base/scripting/_scripting.scss
 delete mode 100644 assets/sass/base/text/_text.scss
 delete mode 100644 assets/sass/components/box/box.json
 delete mode 100644 assets/sass/components/divider/divider.json
 create mode 100644 assets/sass/components/monospace/_monospace.scss
 delete mode 100644 assets/sass/components/visually-hidden/visually-hidden.json
 delete mode 100644 assets/sass/components/watermark/watermark.json
 delete mode 100644 assets/sass/components/wireframe/wireframe.json
 create mode 100644 assets/sass/reset/_reset.scss
 rename assets/sass/{base => reset}/document/_document.scss (74%)
 create mode 100644 assets/sass/reset/embedded/_embedded.scss
 create mode 100644 assets/sass/reset/forms/_forms.scss
 create mode 100644 assets/sass/reset/grouping/_grouping.scss
 rename assets/sass/{base => reset}/interactive/_interactive.scss (66%)
 rename assets/sass/{base => reset}/links/_links.scss (85%)
 rename assets/sass/{base => reset}/sections/_sections.scss (100%)
 rename assets/sass/{base => reset}/tables/_tables.scss (100%)
 create mode 100644 assets/sass/reset/text/_text.scss

diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss
index 8d71ee4..dccda8f 100644
--- a/assets/sass/_colors.scss
+++ b/assets/sass/_colors.scss
@@ -48,6 +48,7 @@ $colors: (
   mobile-menu-cover:      rgba($black, .2),
 
   button:                 $nearblack,
+  button-text:            $white,
   button-disabled:        $grey,
 
   form-error:             $red,
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
index d7555d4..db229f5 100644
--- a/assets/sass/_variables.scss
+++ b/assets/sass/_variables.scss
@@ -63,7 +63,7 @@ $font-weight: (
 $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 Premier Pro', Charter, 'Times New Roman', serif;
+$garamond:        'Garamond Premier Pro', Garamond, Charter, 'Times New Roman', serif;
 
 // Sans-serif font stacks.
 $verdana:         Verdana, Tahoma, 'DejaVu Sans', sans-serif;
diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index 8d612a7..da0577f 100644
--- a/assets/sass/_zen.scss
+++ b/assets/sass/_zen.scss
@@ -298,6 +298,13 @@ figure {
   }
 }
 
+// Icons.
+
+.icon {
+  // Reset set SVG to block but icons are normally inline.
+  display: inline;
+}
+
 // Header anchor links
 
 .anchor-link {
diff --git a/assets/sass/base/_normalize.scss b/assets/sass/base/_normalize.scss
deleted file mode 100644
index 74f9522..0000000
--- a/assets/sass/base/_normalize.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Normalize.css is intended to be used as an alternative to CSS resets.
-//
-// @see https://necolas.github.io/normalize.css/
-//
-// This directory is a slight fork of this original source:
-// normalize.css 8.0.1 | MIT License
-
-
-// Universal
-// ==========================================================================
-
-// Broken into modular pieces to make it easier to edit.
-@import 'document/document';
-@import 'sections/sections';
-@import 'grouping/grouping';
-@import 'links/links';
-@import 'text/text';
-@import 'embedded/embedded';
-@import 'forms/forms';
-@import 'tables/tables';
-@import 'interactive/interactive';
-@import 'scripting/scripting';
-
-// Note: we allow the .button component (loaded by forms) to override :link, by
-// loading links first.
diff --git a/assets/sass/base/embedded/_embedded.scss b/assets/sass/base/embedded/_embedded.scss
deleted file mode 100644
index 68147c5..0000000
--- a/assets/sass/base/embedded/_embedded.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// Embedded content
-
-// Audio
-
-audio {
-  // Add your styles.
-}
-
-// Image
-//
-// An `<img>` element represents an image.
-
-img {
-  // Add your styles.
-}
-
-img,
-svg {
-  // Suppress the space beneath the baseline
-  // vertical-align: bottom;
-
-  // Responsive images
-  max-width: 100%;
-  height: auto;
-}
-
-// Video
-
-video {
-  // Add your styles.
-}
diff --git a/assets/sass/base/forms/_forms.scss b/assets/sass/base/forms/_forms.scss
deleted file mode 100644
index 95fff17..0000000
--- a/assets/sass/base/forms/_forms.scss
+++ /dev/null
@@ -1,229 +0,0 @@
-// stylelint-disable property-no-vendor-prefix
-
-// Form defaults
-//
-// These are the default base styles applied to HTML form elements.
-//
-// Component classes can override these styles, but if no class applies a style
-// to an HTML form element, these styles will be the ones displayed.
-
-//
-// The following rules are from normalize.css and help to fix inconsistencies
-// across various browsers. You should probably leave these rules as is and jump
-// to the "Buttons" rule on line 92 before you start editing this file.
-//
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  // Change the font styles in all browsers (opinionated).
-  @include typeface(body);
-  @include line-height(1);
-  font-size: 100%;
-  // Keep form elements constrained in their containers.
-  box-sizing: border-box;
-  max-width: 100%;
-  // Remove the margin in Firefox and Safari.
-  margin: 0;
-}
-
-// Show the overflow in IE.
-button {
-  overflow: visible;
-}
-
-// Remove the inheritance of text transform in Edge, Firefox, and IE.
-button,
-select {
-  text-transform: none;
-}
-
-// Show the overflow in Edge.
-input {
-  overflow: visible;
-}
-
-// Correct the cursor style of increment and decrement buttons in Chrome.
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type='search'] {
-  // Correct the odd appearance in Chrome and Safari.
-  -webkit-appearance: textfield;
-  // Correct the outline style in Safari.
-  outline-offset: -2px;
-
-  // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-}
-
-::-webkit-file-upload-button {
-  // Correct the inability to style clickable types in iOS and Safari.
-  -webkit-appearance: button;
-  // Change font properties to `inherit` in Safari.
-  font: inherit;
-}
-
-// Buttons
-//
-// Buttons built with the `<button>` element are the most flexible for styling
-// purposes. But `<input>` elements with `type` set to `submit`, `image`,
-// `reset`, or `button` are also supported.
-//
-// Below is the default button styling. To see variations on the button styling
-// see the [button component](section-forms.html#kssref-forms-button).
-//
-// :hover        - Hover styling.
-// :active:hover - Depressed button styling.
-
-@import 'components/button/button';
-
-// The %text-form-element can be used to style `<input>` text types and
-// `<textarea>` elements at the same time.
-%text-form-element {
-  // Add your styles.
-}
-
-// Inputs
-//
-// The `<input>` element is mostly used for text-based inputs that include the
-// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
-// `time`, `number`, `range`, `color`, and `file`.
-//
-// Note: Certain font size values applied to `number` inputs cause the cursor
-// style of the decrement button to change from `default` to `text`.
-//
-// Note: The search input is not fully stylable by default. In Chrome and Safari
-// on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
-// Chrome and Safari on Windows you can't control `border` properly. It will
-// apply `border-width` but will only show a border color (which cannot be
-// controlled) for the outer 1px of that border. Applying
-// `-webkit-appearance: textfield` addresses these issues without removing the
-// benefits of search inputs (e.g. showing past searches). Safari (but not
-// Chrome) will clip the cancel button on when it has padding (and `textfield`
-// appearance).
-
-[type='text'],
-[type='search'],
-[type='tel'],
-[type='url'],
-[type='email'],
-[type='password'],
-[type='date'],
-[type='time'],
-[type='number'] {
-  @extend %text-form-element !optional;
-}
-
-[type='range'] {
-  // Add your styles.
-}
-
-[type='color'] {
-  // Add your styles.
-}
-
-[type='file'] {
-  // Add your styles.
-}
-
-// Checkboxes
-//
-// If an `<input>` element has the `type='checkbox'` attribute set, the form
-// field is displayed as a checkbox.
-//
-// It is recommended that you do not style checkbox and radio inputs as
-// Firefox's implementation does not respect box-sizing, padding, or width.
-
-// Radio buttons
-//
-// If an `<input>` element has the `type='radio'` attribute set, the form field
-// is displayed as a radio button.
-//
-// It is recommended that you do not style checkbox and radio inputs as
-// Firefox's implementation does not respect box-sizing, padding, or width.
-
-[type='checkbox'],
-[type='radio'] {
-  // Add the correct box sizing in IE 10-.
-  box-sizing: border-box;
-  // Remove the padding in IE 10-.
-  padding: 0;
-}
-
-// Fieldsets
-//
-// The `<fieldset>` element groups a set of form fields, optionally under a
-// common name given by the `<legend>` element.
-
-fieldset {
-  // Correct the padding in Firefox.
-  @include padding(.35 .5 .65);
-  border: 1px solid var(--color-border);
-}
-
-legend {
-  // Correct the text wrapping in Edge and IE.
-  box-sizing: border-box;
-  display: table;
-  max-width: 100%;
-  // Align legend text with a fieldset's text while removing left padding so
-  // people aren't caught out if they zero out fieldset padding.
-  margin-left: -5px;
-  padding: 0 5px;
-  // Correct the color inheritance from `fieldset` elements in IE.
-  color: inherit;
-  white-space: normal;
-}
-
-// Labels
-//
-// The `<label>` element represents a caption of a form field. The label can be
-// associated with a specific form control by using the `for` attribute or by
-// putting the form control inside the label element itself.
-
-label {
-  // Drupal-style form labels.
-  display: block;
-  font-weight: bold;
-}
-
-// Select list
-//
-// The `<select>` element represents a form field for selecting amongst a set of
-// options.
-//
-// Known limitation: by default, Chrome and Safari on OS X allow very limited
-// styling of `<select>`, unless a `border` property is set. The default font
-// weight on `optgroup` elements cannot safely be changed in Chrome on OSX and
-// Safari on OS X.
-
-select {
-  // Add your styles.
-}
-
-// Progress
-//
-// The `<progress>` element represents the completion progress of a task.
-
-progress {
-  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-  vertical-align: baseline;
-}
-
-// Text areas
-//
-// The `<textarea>` element represents a multi-line plain text form field.
-
-textarea {
-  @extend %text-form-element !optional;
-  // Remove the default vertical scrollbar in IE.
-  overflow: auto;
-}
diff --git a/assets/sass/base/grouping/_grouping.scss b/assets/sass/base/grouping/_grouping.scss
deleted file mode 100644
index 9fb814e..0000000
--- a/assets/sass/base/grouping/_grouping.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-// Dependencies.
-@import 'components/divider/divider';
-
-// Grouping content
-
-
-// Block quotes
-//
-// The `<blockquote>` element is for quoting blocks of content from another
-// source within your document. Wrap the `<blockquote>` around any <abbr
-// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
-// quotes, we recommend a `<p>`.
-//
-// Optionally, add a `<footer>` to identify the source of the quote, wrapping
-// the name of the source work in `<cite>`.
-
-blockquote {
-  // Set 1 unit of vertical rhythm on the top and bottom margin.
-  // Also indent the quote on both sides.
-  @include margin(1 $indent-amount);
-}
-
-// Lists
-//
-// Style guide: base.grouping.lists
-
-// Unordered list
-//
-// The `<ul>` element is a list of items in which the order does <em>not</em>
-// explicitly matter.
-
-// Ordered list
-//
-// The `<ol>` element is a list of items in which the order <em>does</em>
-// explicitly matter.
-
-// Description list
-//
-// The `<dl>` element is a list of terms with their associated descriptions.
-
-dl,
-ol,
-ul {
-  // Add vertical rhythm margins.
-  @include margin(1 0);
-}
-
-dt {
-  // Add your styles.
-}
-
-dd {
-  margin: 0 0 0 $indent-amount;
-
-  @include rtl {
-    margin: 0 $indent-amount 0 0;
-  }
-}
-
-ol,
-ul {
-  padding: 0 0 0 $indent-amount;
-
-  @include rtl {
-    padding: 0 $indent-amount 0 0;
-  }
-
-  // Turn off margins on nested lists.
-  ol,
-  ul {
-    margin: 0;
-  }
-}
-
-// Figures
-//
-// The `<figure>` element can be used to annotate illustrations, diagrams,
-// photos, code listings, etc.
-//
-// Optionally, a `<figcaption>` element inside the `<figure>` represents the
-// caption of the figure.
-
-figure {
-  // Add vertical rhythm margins.
-  @include margin(1 0);
-}
-
-figcaption {
-  // Add your styles.
-}
-
-// Horizontal rule
-//
-// The `<hr>` element represents a paragraph-level thematic break, e.g. a scene
-// change in a story, or a transition to another topic within a section of a
-// reference book.
-
-hr {
-  @extend %divider;
-  // Add the correct box sizing in Firefox.
-  box-sizing: content-box;
-  height: 0;
-  // Show the overflow in Edge and IE.
-  overflow: visible;
-}
-
-// Main
-//
-// The `<main>` element represents the main content of the page.
-
-main {
-  // Add your styles.
-}
-
-// Body copy
-//
-// The default `font-size` and `line-height` properties are applied to the
-// `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
-// a top and bottom margin.
-
-p,
-pre {
-  @include margin(.75 0);
-}
-
-// Preformatted text
-//
-// The `<pre>` element represents a block of preformatted text, such as
-// fragments of computer code, ASCII art, etc.
-
-%monospace {
-  // Correct the inheritance and scaling of font size in all browsers.
-  // The font-family value ends with ", serif".
-  @include typeface(monospace);
-  // Correct the odd `em` font sizing in all browsers.
-  font-size: 1em;
-}
-
-pre {
-  @extend %monospace;
-}
diff --git a/assets/sass/base/scripting/_scripting.scss b/assets/sass/base/scripting/_scripting.scss
deleted file mode 100644
index a97c2ed..0000000
--- a/assets/sass/base/scripting/_scripting.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// Scripting
-
-// Canvas
-
-canvas {
-  // Add your styles.
-}
-
-// Template
-
-template {
-  // Add your styles.
-}
diff --git a/assets/sass/base/text/_text.scss b/assets/sass/base/text/_text.scss
deleted file mode 100644
index 78c4d0e..0000000
--- a/assets/sass/base/text/_text.scss
+++ /dev/null
@@ -1,165 +0,0 @@
-// Text-level semantics
-//
-// The elements in this section give semantics to inline text.
-
-// Abbreviation / Acroynym
-//
-// The `<abbr>` element makes the meanings of abbreviations and acronyms visible
-// on hover.
-
-abbr[title] {
-  // Remove the bottom border in Chrome 57- and Firefox 39-.
-  border-bottom: 0;
-  // stylelint-disable no-duplicate-properties
-  // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-
-// Bold
-//
-// The `<strong>` element or the `<b>` element is for emphasizing a snippet of
-// text with a heavier font-weight.
-//
-// Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
-// without conveying additional importance.
-
-// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-// stylelint-disable no-mergeable-selectors
-b,
-strong {
-  // Add the correct font weight in Chrome, Edge, and Safari.
-  font-weight: bolder;
-}
-// sass-lint:enable no-mergeable-selectors
-
-// Cite
-//
-// The `<cite>` element represents a reference to a creative work.
-
-cite {
-  // Add your styles.
-}
-
-// Code
-//
-// The `<code>` element represents a fragment of computer code. The `<samp>`
-// element represents (sample) output from a program or computing system. The
-// `<kbd>` element represents user input (typically keyboard input.)
-
-code,
-kbd,
-samp {
-  @extend %monospace;
-}
-
-// Deleted text
-//
-// The `<del>` element indicates blocks of text that have been deleted.
-
-del {
-  // Add your styles.
-}
-
-// Definition
-//
-// The `<dfn>` element represents the defining instance of a term.
-
-dfn {
-  // Add your styles.
-}
-
-// Italics
-//
-// The `<em>` element or the `<i>` element is used for emphasizing a snippet of
-// text with italics.
-//
-// Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
-// technical terms, etc.
-
-i,
-em {
-  // Add your styles.
-}
-
-// Inserted text
-//
-// The `<ins>` element indicates additions to the document.
-
-ins {
-  // Add your styles.
-}
-
-// Marked text
-//
-// The `<mark>` element highlights a run of text due to its relevance in another
-// context.
-
-mark {
-  // Add your styles.
-}
-
-// Quote
-//
-// The `<q>` element represents an inline quote from another source. Longer
-// quotes should use the `<blockquote>` element.
-
-q {
-  // Add your styles.
-}
-
-// Strikethrough text
-//
-// The `<s>` element indicates blocks of text that are no longer relevant.
-
-s {
-  // Add your styles.
-}
-
-// Small text
-//
-// For de-emphasizing inline or blocks of text, use the `<small>` element to set
-// text at 80% the size of the parent.
-
-small {
-  // Add the correct font size in all browsers.
-  @include font-size(s);
-}
-
-// Superscript / Subscript
-//
-// The `<sup>` element represents a superscript and the `<sub>` element
-// represents a subscript.
-
-sub,
-sup {
-  // Prevent `sub` and `sup` elements from affecting the line height in
-  // all browsers.
-  @include font-size(xs);
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -.25em;
-}
-
-sup {
-  top: -.5em;
-}
-
-// Underlined text
-//
-// To underline text use the `<u>` element. Not recommended since underlines are
-// used by web browsers to style hyperlinks.
-
-u {
-  // Add your styles.
-}
diff --git a/assets/sass/components/box/box.json b/assets/sass/components/box/box.json
deleted file mode 100644
index 55e9862..0000000
--- a/assets/sass/components/box/box.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "title": "Box title",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-}
diff --git a/assets/sass/components/button/_button.scss b/assets/sass/components/button/_button.scss
index 7db215c..235187c 100644
--- a/assets/sass/components/button/_button.scss
+++ b/assets/sass/components/button/_button.scss
@@ -14,60 +14,29 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  // stylelint-disable color-no-hex, color-named
   @extend %button--disabled;
   @include typeface(headings);
   @include margin-right(.75);
   @include margin-bottom(.75);
   // Some styles don't apply to <a> links since they are inline elements by default.
   display: inline-block;
-  padding: 2px 10px;
-  // Address Firefox 4+ setting `line-height` on `input` using `!important` in
-  // the UA stylesheet. And prevent its "line-height: normal" rule below from
-  // breaking the "appearance: button" styling on the input elements.
-  line-height: inherit;
+  padding: 4px 10px;
   text-decoration: none;
+  text-align: center;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
-  color: var(--color-button);
-  text-align: center;
-  background-image: linear-gradient(#f6f6f6, #e2e2e2);
-  border: 1px solid #e4e4e4;
-  border-left-color: #d2d2d2;
-  border-right-color: #d2d2d2;
-  border-bottom-color: #b4b4b4;
+  color: var(--color-button-text);
+  background-color: var(--color-button);
+  border: 0;
   border-radius: 2px;
 
-  // stylelint-disable property-no-vendor-prefix
-  // Correct the inability to style clickable types in iOS and Safari.
-  -moz-appearance: button;
-  -webkit-appearance: button;
-
-  // Remove the inner border and padding in Firefox.
-  &::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
-  }
-
-  // Restore the focus styles unset by the previous rule.
-  &:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-  // sass-lint:enable property-no-vendor-prefix
-
   &:hover,
   &:focus,
   &:active {
     // Override any link underlines and color changes.
     text-decoration: none;
     color: var(--color-button);
-  }
-
-  &:active {
-    border-color: #555;
-    text-shadow: var(--color-button 0 -1px 0)  0 -1px 0;
-    background: var(--color-grey-dark);
-    color: var(--color-text-bg);
+    background-color: var(--color-button-text);
   }
 }
 
@@ -78,11 +47,20 @@ button,
     @include type-layout(xs, 1);
     @include margin-right(.3);
     @include margin-bottom(.3);
-    padding: 0 6px;
+    padding: 2px 6px;
   }
 
-  &--variant-name {
-    // Add styles here.
+  &--outline {
+    color: var(--color-button);
+    background-color: var(--color-button-text);
+    border: 1px solid var(--color-button);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--color-button-text);
+      background-color: var(--color-button);
+    }
   }
 }
 
diff --git a/assets/sass/components/divider/divider.json b/assets/sass/components/divider/divider.json
deleted file mode 100644
index 91e6347..0000000
--- a/assets/sass/components/divider/divider.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-}
diff --git a/assets/sass/components/monospace/_monospace.scss b/assets/sass/components/monospace/_monospace.scss
new file mode 100644
index 0000000..8118ef2
--- /dev/null
+++ b/assets/sass/components/monospace/_monospace.scss
@@ -0,0 +1,10 @@
+// Monospace
+
+.monospace,
+%monospace {
+  // Correct the inheritance and scaling of font size in all browsers.
+  // The font-family value ends with ", serif".
+  @include typeface(monospace);
+  // Correct the odd `em` font sizing in all browsers.
+  font-size: 1em;
+}
diff --git a/assets/sass/components/visually-hidden/visually-hidden.json b/assets/sass/components/visually-hidden/visually-hidden.json
deleted file mode 100644
index fae1ce1..0000000
--- a/assets/sass/components/visually-hidden/visually-hidden.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "content": "This text will be read by screen readers, but will be visually hidden."
-}
diff --git a/assets/sass/components/watermark/_watermark.scss b/assets/sass/components/watermark/_watermark.scss
index b992966..7509907 100644
--- a/assets/sass/components/watermark/_watermark.scss
+++ b/assets/sass/components/watermark/_watermark.scss
@@ -8,7 +8,6 @@
   display: block;
   height: 0;
   overflow: visible;
-  // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
   color: var(--color-watermark);
   font-size: 75px;
diff --git a/assets/sass/components/watermark/watermark.json b/assets/sass/components/watermark/watermark.json
deleted file mode 100644
index 6a49983..0000000
--- a/assets/sass/components/watermark/watermark.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "content": "Unpublished",
-  "sibling": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-}
diff --git a/assets/sass/components/wireframe/wireframe.json b/assets/sass/components/wireframe/wireframe.json
deleted file mode 100644
index 4424215..0000000
--- a/assets/sass/components/wireframe/wireframe.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "content": "An item inside a wireframe."
-}
diff --git a/assets/sass/reset/_reset.scss b/assets/sass/reset/_reset.scss
new file mode 100644
index 0000000..5936a55
--- /dev/null
+++ b/assets/sass/reset/_reset.scss
@@ -0,0 +1,12 @@
+// Reset browsers to some sane defaults.
+
+// Broken into modular pieces to make it easier to edit.
+@import 'document/document';
+@import 'embedded/embedded';
+@import 'forms/forms';
+@import 'grouping/grouping';
+@import 'interactive/interactive';
+@import 'links/links';
+@import 'sections/sections';
+@import 'tables/tables';
+@import 'text/text';
diff --git a/assets/sass/base/document/_document.scss b/assets/sass/reset/document/_document.scss
similarity index 74%
rename from assets/sass/base/document/_document.scss
rename to assets/sass/reset/document/_document.scss
index 032bf3e..07cf3a7 100644
--- a/assets/sass/base/document/_document.scss
+++ b/assets/sass/reset/document/_document.scss
@@ -1,18 +1,16 @@
 // stylelint-disable property-no-vendor-prefix
 
+
 // Document
-//
-// The default font styles are inherited from the `<html>` element.
 
 html {
   // Change the default font family in all browsers (opinionated).
   @include typeface(body);
   // Correct the line height in all browsers.
   @include define-type-sizing();
-  // Prevent adjustments of font size after orientation changes in IE on Windows
-  // Phone and in iOS.
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
+  // Prevent adjustments of font size.
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
   // On short pages, we want any background gradients to fill the entire height
   // of the browser.
   min-height: 100%;
@@ -20,16 +18,18 @@ html {
   box-sizing: border-box;
   // Use smooth scrolling.
   scroll-behavior: smooth;
+  // Improve text rendering.
+  -webkit-font-smoothing: antialiased;
 
   @include respond-to(xxl) {
     @include define-type-sizing($base-font-size-2, $base-line-height-2);
   }
 }
 
+
 // Use the saner border-box model for all elements.
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
-
diff --git a/assets/sass/reset/embedded/_embedded.scss b/assets/sass/reset/embedded/_embedded.scss
new file mode 100644
index 0000000..4e096fb
--- /dev/null
+++ b/assets/sass/reset/embedded/_embedded.scss
@@ -0,0 +1,15 @@
+// Embedded content
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+img,
+svg {
+  height: auto;
+}
diff --git a/assets/sass/reset/forms/_forms.scss b/assets/sass/reset/forms/_forms.scss
new file mode 100644
index 0000000..706afc5
--- /dev/null
+++ b/assets/sass/reset/forms/_forms.scss
@@ -0,0 +1,25 @@
+// Form defaults.
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  max-width: 100%;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+}
+
+fieldset {
+  border: 1px solid var(--color-border);
+}
+
+[type='search'] {
+  // Correct the odd appearance in Chrome and Safari.
+  -webkit-appearance: textfield;
+  // Correct the outline style in Safari.
+  outline-offset: -2px;
+}
diff --git a/assets/sass/reset/grouping/_grouping.scss b/assets/sass/reset/grouping/_grouping.scss
new file mode 100644
index 0000000..90fd827
--- /dev/null
+++ b/assets/sass/reset/grouping/_grouping.scss
@@ -0,0 +1,78 @@
+// Grouping content
+
+
+// Block quotes
+//
+// The `<blockquote>` element is for quoting blocks of content from another
+// source within your document. Wrap the `<blockquote>` around any <abbr
+// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
+// quotes, we recommend a `<p>`.
+//
+// Optionally, add a `<footer>` to identify the source of the quote, wrapping
+// the name of the source work in `<cite>`.
+
+blockquote {
+  // Add vertical rhythm margins.
+  // Also indent the quote on both sides.
+  @include margin(1 $indent-amount);
+}
+
+// Lists
+
+dl,
+ol,
+ul {
+  // Add vertical rhythm margins.
+  @include margin(1 0);
+}
+
+dd {
+  margin: 0 0 0 $indent-amount;
+
+  @include rtl {
+    margin: 0 $indent-amount 0 0;
+  }
+}
+
+ol,
+ul {
+  padding: 0 0 0 $indent-amount;
+
+  @include rtl {
+    padding: 0 $indent-amount 0 0;
+  }
+
+  // Turn off margins on nested lists.
+  ol,
+  ul {
+    margin: 0;
+  }
+}
+
+// Figures
+
+figure {
+  // Add vertical rhythm margins.
+  @include margin(1 0);
+}
+
+// Horizontal rule
+
+hr {
+  @extend %divider;
+  height: 0;
+}
+
+
+// Paragraphs
+
+p,
+pre {
+  @include margin(.75 0);
+}
+
+// Preformatted text
+
+pre {
+  @extend %monospace;
+}
diff --git a/assets/sass/base/interactive/_interactive.scss b/assets/sass/reset/interactive/_interactive.scss
similarity index 66%
rename from assets/sass/base/interactive/_interactive.scss
rename to assets/sass/reset/interactive/_interactive.scss
index 541c505..f8e019c 100644
--- a/assets/sass/base/interactive/_interactive.scss
+++ b/assets/sass/reset/interactive/_interactive.scss
@@ -1,17 +1,5 @@
 // Interactive
 
-// Details
-
-details {
-  // Add the correct display in Edge, IE, and Firefox.
-  display: block;
-}
-
-summary {
-  // Add the correct display in all browsers.
-  display: list-item;
-}
-
 // Menu
 
 menu {
diff --git a/assets/sass/base/links/_links.scss b/assets/sass/reset/links/_links.scss
similarity index 85%
rename from assets/sass/base/links/_links.scss
rename to assets/sass/reset/links/_links.scss
index 5e27b52..315e3e3 100644
--- a/assets/sass/base/links/_links.scss
+++ b/assets/sass/reset/links/_links.scss
@@ -14,9 +14,6 @@
 a,
 %link {
   color: var(--color-link);
-  // stylelint-disable property-no-vendor-prefix
-  // Remove gaps in links underline in iOS 8+ and Safari 8+.
-  -webkit-text-decoration-skip: objects;
 }
 
 // Any element can receive focus, but only links can be visited, so we can
diff --git a/assets/sass/base/sections/_sections.scss b/assets/sass/reset/sections/_sections.scss
similarity index 100%
rename from assets/sass/base/sections/_sections.scss
rename to assets/sass/reset/sections/_sections.scss
diff --git a/assets/sass/base/tables/_tables.scss b/assets/sass/reset/tables/_tables.scss
similarity index 100%
rename from assets/sass/base/tables/_tables.scss
rename to assets/sass/reset/tables/_tables.scss
diff --git a/assets/sass/reset/text/_text.scss b/assets/sass/reset/text/_text.scss
new file mode 100644
index 0000000..b6b0102
--- /dev/null
+++ b/assets/sass/reset/text/_text.scss
@@ -0,0 +1,38 @@
+// Text-level semantics
+//
+// The elements in this section give semantics to inline text.
+
+// Code
+
+code,
+kbd,
+samp {
+  @extend %monospace;
+}
+
+// Small text
+
+small {
+  // Add the correct font size in all browsers.
+  @include font-size(s);
+}
+
+// Superscript / Subscript
+
+sub,
+sup {
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+  @include font-size(xs);
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 326503f..b8abd9f 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -1,12 +1,8 @@
 //
 // The major stylesheet for this theme.
 //
-// We categorize our components by creating headings in this file. See the
-// description on the style guide home page for more information.
 
 // Colors and Sass
-//
-// Documentation for colors and Sass mixins and variables.
 
 @import 'init';
 
@@ -14,19 +10,11 @@
 
 @import 'fonts';
 
-// Defaults
-//
-// These are the default base styles applied to HTML elements.
-//
-// Component classes can override these styles, but if no class applies a style
-// to an HTML element, these styles will be the ones displayed.
+// Reset browsers to some sane defaults.
 
-@import 'base/normalize';
+@import 'reset/reset';
 
 // Layouts
-//
-// The layout styling for major parts of the page that are included with the
-// theme.
 
 @import 'layouts/layouts';
 
@@ -36,8 +24,10 @@
 // class names specified in the component.
 
 @import 'components/box/box';
+@import 'components/button/button';
 @import 'components/clearfix/clearfix';
 @import 'components/cookieconsent/cookieconsent';
+@import 'components/divider/divider';
 @import 'components/header/header';
 @import 'components/hidden/hidden';
 @import 'components/highlight-mark/highlight-mark';
@@ -47,22 +37,22 @@
 @import 'components/language-selector/language-selector';
 @import 'components/list-straight-left/list-straight-left';
 @import 'components/messages/messages';
+@import 'components/monospace/monospace';
 @import 'components/responsive-video/responsive-video';
 @import 'components/visually-hidden/visually-hidden';
 @import 'components/watermark/watermark';
 @import 'components/wireframe/wireframe';
 
 // Navigation
-//
-// Navigation components are specialized design components that are used for
-// page navigation.
 
 @import 'navigation/more-link/more-link';
 @import 'navigation/navbar/navbar';
 @import 'navigation/pager/pager';
 
-// zen
+// Zen
+
 @import 'zen';
 
 // Custom
+
 @import 'custom';