🌓 Adds Dark Mode (#210)

* feat(dark mode): set up first set of colors * feat(dark mode): define state colours * 🧹 * feat(dark mode): variablify all teh wordz * feat(dark mode): set colors on body * feat(dark mode): replace hard coded color value * feat(dark mode): 🌑 * feat(a11y): update link focus styles - restores visible focus in windows high contrast mode - increases visibility in boxes with bg colour * feat(dark mode): enable postcss * 💅 * feat(dark mode): add user control * chore: use generic headline name * feat(dark mode): hide switch until script loads * feat(dark mode): increase link contrast * add content warning to footer nav partial * feat(dark mode): replace hard coded colour value in alertbox * feat(dark mode): tone down text colour * feat(dark mode): properly invert code elements * 🧹 move box styles into own partial * feat(dark mode): use darker colour as background for links
2025-10-31 14:18:32 +00:00 · 2020-08-26 12:10:24 +02:00
parent 7f11b552a6
commit 7f7943d2fc
31 changed files with 880 additions and 241 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie 10
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -198,6 +198,8 @@ module.exports = function(config) {

  config.setLibrary('md', mdIt);

+  config.addPassthroughCopy({ [`./11ty/assets/js/**/*`]: '/js' });
+
  // You can return your Config object (optional).
  return {
    dir: {
--- a/.postcssrc
+++ b/.postcssrc
@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "postcss-preset-env": true
+  }
+}
--- a/11ty/_data/site.js
+++ b/11ty/_data/site.js
@@ -0,0 +1,7 @@
+module.exports = {
+  themes: [
+    { value: 'system', label: 'Operating System' },
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' }
+  ]
+};
--- a/11ty/_includes/components/base/site-footer.njk
+++ b/11ty/_includes/components/base/site-footer.njk
@@ -0,0 +1,29 @@
+<footer class="site-footer">
+  <nav aria-label="Complimentary">
+    <ul class="navigation-list">
+      <li>
+        <a href="/documentation/">Documentation</a>
+      </li>
+      <li>
+        <a href="/content-warning-guidelines/">Content Warning Guidelines</a>
+      </li>
+      <li>
+        <a href="{{ metadata.feedPermalink | absoluteUrl(metadata.url) }}">RSS Feed</a>
+      </li>
+    </ul>
+  </nav>
+  <div role="group" class="js-theme-switch" aria-labelledby="clrmd-hl" hidden>
+    <h2 id="clrmd-hl" class="smcp-headline">Colour mode</h2>
+    {% for theme in site.themes %}
+      <div class="radio-wrapper">
+        <input
+          type="radio"
+          name="display-mode"
+          value="{{ theme.value }}"
+          id="display-mode-{{ theme.value }}"
+        >
+        <label for="display-mode-{{ theme.value }}">{{ theme.label }}</label>
+      </div>
+    {% endfor %}
+  </div>
+</footer>
--- a/11ty/_includes/layouts/base.njk
+++ b/11ty/_includes/layouts/base.njk
@@ -42,22 +42,9 @@
  </head>
  <body>
    {% block content %}{% endblock content %}
-    <footer class="site-footer">
-      <nav aria-label="Complimentary">
-        <ul class="navigation-list">
-          <li>
-            <a href="/documentation/">Documentation</a>
-          </li>
-          <li>
-            <a href="/content-warning-guidelines/">Content Warning Guidelines</a>
-          </li>
-          <li>
-            <a href="{{ metadata.feedPermalink | absoluteUrl(metadata.url) }}">RSS Feed</a>
-          </li>
-        </ul>
-      </nav>
-    </footer>
+    {% include 'components/base/site-footer.njk' %}
    {% block pageScript %}
    {% endblock pageScript %}
  </body>
+  <script defer src="/js/theme-switcher.js"></script>
 </html>
--- a/11ty/assets/js/theme-switcher.js
+++ b/11ty/assets/js/theme-switcher.js
@@ -0,0 +1,63 @@
+function initThemeSwitch() {
+  let $switchContainer = document.querySelector('.js-theme-switch');
+
+  if (!$switchContainer) return;
+
+  $switchContainer.hidden = false;
+
+  let userOverwrite = ['light', 'dark'];
+
+  let $buttons = $switchContainer.querySelectorAll('[type="radio"]');
+
+  /**
+   * @type String
+   */
+  let userThemeSetting = localStorage.getItem('sdUserTheme');
+
+  function setInitialState() {
+    if (userThemeSetting) {
+      document.documentElement.setAttribute(
+        'data-user-theme',
+        userThemeSetting
+      );
+      $switchContainer.querySelector(
+        `[value="${userThemeSetting}"]`
+      ).checked = true;
+    } else {
+      $switchContainer.querySelector('[value="system"]').checked = true;
+    }
+  }
+
+  function setUserPreference(value) {
+    localStorage.setItem('sdUserTheme', value);
+    document.documentElement.setAttribute('data-user-theme', value);
+  }
+
+  function unsetUserPreference() {
+    localStorage.removeItem('sdUserTheme');
+    document.documentElement.removeAttribute('data-user-theme');
+  }
+
+  Array.from($buttons).forEach(function($button) {
+    $button.addEventListener('change', function() {
+      // only run the switch functionality for the currently active radio button
+      if (!$button.checked) return;
+
+      if (userOverwrite.includes($button.value)) {
+        setUserPreference($button.value);
+      } else {
+        unsetUserPreference();
+      }
+    });
+  });
+
+  setInitialState();
+}
+
+if (document.readyState === 'complete') {
+  initThemeSwitch();
+} else {
+  window.addEventListener('load', function() {
+    initThemeSwitch();
+  });
+}
--- a/11ty/shortcodes/tests/renderDefinitionContentNextEntries.spec.js
+++ b/11ty/shortcodes/tests/renderDefinitionContentNextEntries.spec.js
@@ -11,11 +11,11 @@ test('first item', (t) => {
    renderDefinitionContentNextEntries(title, slug, testCollection),
    `<section class="definition-navigation definition__further-definitions_nav">
    <h2 class="visually-hidden">Browse</h2>
-    <div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3>
+    <div><h3 class="smcp-headline" id="context-nav-previous">Previous words</h3>
      <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
        </nav>
    </div>
-    <div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3>
+    <div><h3 class="smcp-headline" id="context-nav-next">Next words</h3>
      <nav class="definition-navigation__nav" aria-labelledby="context-nav-next"><ul class="definition-navigation__list"><li><a href=/definitions/ableism/>Ableism</a></li><li><a href=/definitions/barbaric/>Barbaric</a></li><li><a href=/definitions/biromantic/>Biromantic</a></li></ul></nav>
    </div>
    </section>`
@@ -28,11 +28,11 @@ test('last item', (t) => {
    renderDefinitionContentNextEntries(title, slug, testCollection),
    `<section class="definition-navigation definition__further-definitions_nav">
    <h2 class="visually-hidden">Browse</h2>
-    <div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3>
+    <div><h3 class="smcp-headline" id="context-nav-previous">Previous words</h3>
      <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
        <ul class="definition-navigation__list"><li><a href=/definitions/transgender/>Transgender</a></li><li><a href=/definitions/unreal/>unreal</a></li><li><a href=/definitions/white-fragility/>White Fragility</a></li></ul></nav>
    </div>
-    <div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3>
+    <div><h3 class="smcp-headline" id="context-nav-next">Next words</h3>
      <nav class="definition-navigation__nav" aria-labelledby="context-nav-next"></nav>
    </div>
    </section>`
--- a/11ty/shortcodes/renderDefinitionContentNextEntries.js
+++ b/11ty/shortcodes/renderDefinitionContentNextEntries.js
@@ -19,7 +19,7 @@ module.exports = function definitionContentNextEntries(

  return `<section class="definition-navigation definition__further-definitions_nav">
    <h2 class="visually-hidden">Browse</h2>
-    <div><h3 class="definition-navigation__sub-headline" id="context-nav-previous">Previous words</h3>
+    <div><h3 class="smcp-headline" id="context-nav-previous">Previous words</h3>
      <nav class="definition-navigation__nav" aria-labelledby="context-nav-previous">
        ${
          previous.length
@@ -29,7 +29,7 @@ module.exports = function definitionContentNextEntries(
            : ''
        }</nav>
    </div>
-    <div><h3 class="definition-navigation__sub-headline" id="context-nav-next">Next words</h3>
+    <div><h3 class="smcp-headline" id="context-nav-next">Next words</h3>
      <nav class="definition-navigation__nav" aria-labelledby="context-nav-next">${
        next.length
          ? `<ul class="definition-navigation__list">${next
--- a/assets/css/_sass/_colours.scss
+++ b/assets/css/_sass/_colours.scss
@@ -1,11 +0,0 @@
-$primary-color: hsl(0, 100%, 50%);
-$secondary-color: hsl(120, 100%, 25%);
-
-$dark-red: hsl(0, 100%, 32.2%);
-$pink: hsl(349.5, 100%, 87.6%); 
-$black: hsl(0, 0%, 13%);
-$white: hsl(0, 0%, 100%);
-
-$dark-grey: hsl(0, 0%, 31%);
-$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
-$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
--- a/assets/css/abstracts/_colours.scss
+++ b/assets/css/abstracts/_colours.scss
@@ -1,11 +0,0 @@
-$primary-color: hsl(0, 100%, 50%);
-$secondary-color: hsl(120, 100%, 25%);
-
-$dark-red: hsl(0, 100%, 32.2%);
-$pink: hsl(349.5, 100%, 87.6%); 
-$black: hsl(0, 0%, 13%);
-$white: hsl(0, 0%, 100%);
-
-$dark-grey: hsl(0, 0%, 31%);
-$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
-$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
--- a/assets/css/abstracts/_variables.scss
+++ b/assets/css/abstracts/_variables.scss
@@ -1,20 +1,20 @@
-$primary-color: hsl(0, 100%, 50%);
-$secondary-color: hsl(120, 100%, 25%);
-
-$dark-red: hsl(0, 100%, 32.2%);
-$pink: hsl(349.5, 100%, 87.6%);
-$dark-green: hsl(120, 100%, 15%);
-$yellow: hsl(50, 100%, 50%);
-$dark-yellow: hsl(50, 100%, 20%);
-$pale-yellow: hsl(50, 100%, 86%);
-$black: hsl(0, 0%, 13%);
-$white: hsl(0, 0%, 100%);
-
-$dark-grey: hsl(0, 0%, 31%);
-$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
-$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
+$colors: (
+  red: hsl(0, 100%, 50%),
+  green: hsl(120, 100%, 25%),
+  dark-red: hsl(0, 100%, 32.2%),
+  pink: hsl(349.5, 100%, 87.6%),
+  berry: hsl(350deg 54% 44%),
+  dark-green: hsl(120s, 100%, 15%),
+  pale-green: hsl(120, 73%, 80%),
+  yellow: hsl(50, 100%, 50%),
+  dark-yellow: hsl(50, 100%, 20%),
+  pale-yellow: hsl(50, 100%, 86%),
+  black: hsl(0, 0%, 13%),
+  black-transparent: hsla(0, 0%, 13%, 85%),
+  white-transparent: hsl(0, 0%, 100%, 85%),
+  light-grey: hsl(0, 0%, 92%),
+  dark-grey: hsl(0, 0%, 31%),
+  mid-grey: hsl(0, 0%, 46.3%)
+);

 $browser-context: 16;
-
-$lt-background-color: $pink;
-$lt-background-color-warning: $pale-yellow;
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -10,7 +10,7 @@

 // 3. Base stuff
@import 'base/custom-properties', 'base/fonts', 'base/base', 'base/selection',
-  'base/typography', './base/a', 'base/helpers';
+  'base/typography', './base/a', 'base/helpers', 'base/radio-buttons', 'base/code';

 // 4. Layout-related sections
@import 'structures/header', 'structures/footer', 'structures/grid',
@@ -18,7 +18,7 @@
  './structures/definition-content', './structures/definition-navigation';

 // 5. Components
-@import 'components/word', 'components/lists', 'components/definitions',
+@import 'components/word', './components/box', 'components/lists', 'components/definitions',
  'components/flag', 'components/alertbox';

 // 6. Page-specific styles
--- a/assets/css/base/_a.scss
+++ b/assets/css/base/_a.scss
@@ -1,18 +1,28 @@
 a {
-  color: $black;
+  color: var(--clr-foreground);
  font-family: $ext-sans;
-  margin: 1rem 0;
-  text-decoration-color: $dark-grey;
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  padding: 0.125rem 0.25rem;
+  text-decoration-color: var(--clr-border-main);
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;

  &:hover,
  &:focus {
-    text-decoration-color: $primary-color;
+    text-decoration-color: var(--clr-primary);
  }
+
  &:focus {
-    background-color: $lt-background-color;
-    color: $black;
-    outline: 0;
+    background-color: var(--clr-accent);
+    color: var(--clr-foreground);
+    // makes focus visible in windows high contrast mode, do not delete
+    outline: 2px solid transparent;
+
+    /* @media (prefers-color-scheme: dark) {
+      :root:not([data-user-theme='light']) & {
+        color: var(--clr-background);
+      }
+    } */
  }
 }
--- a/assets/css/base/_base.scss
+++ b/assets/css/base/_base.scss
@@ -1,25 +1,15 @@
 body {
-  border-top: 1rem solid $primary-color;
+  background-color: var(--clr-background);
+  border-top: 1rem solid var(--clr-primary);
+  color: var(--clr-foreground);
  font-family: $sans-serif;
  font-size: pxToRem(20);
  margin: 0;
  padding: 2rem;
 }

-code {
-  background-color: $dark-grey;
-  border: pxToRem(1px) solid $black;
-  border-radius: 0.25em;
-  color: $white;
-  font-size: 95%;
-  padding: 0.15em;
-
-  pre & {
-    border: none;
-    border-radius: 0;
-    font-size: inherit;
-    padding: 0;
-  }
+[hidden] {
+  display: none;
 }

 ul[class] {
--- a/assets/css/base/_code.scss
+++ b/assets/css/base/_code.scss
@@ -0,0 +1,15 @@
+code {
+  background-color: var(--clr-foreground);
+  border: pxToRem(1px) solid var(--clr-foreground-transparent);
+  border-radius: 0.25em;
+  color: var(--clr-background);
+  font-size: 95%;
+  padding: 0.15em;
+
+  pre & {
+    border: none;
+    border-radius: 0;
+    font-size: inherit;
+    padding: 0;
+  }
+}
--- a/assets/css/base/_custom-properties.scss
+++ b/assets/css/base/_custom-properties.scss
@@ -1,4 +1,67 @@
+// create variables for all colours
+@mixin raw-color-names {
+  @each $name, $value in $colors {
+    --clr-#{$name}: #{$value};
+  }
+}
+
+// map the raw colours to abstract names in standard color mode
+// we map the colour values here to prepare for dark mode
+// with these mapping we express the _design intention_ rather than the colour value
+@mixin color-scheme-light {
+  --clr-primary: var(--clr-red);
+  --clr-secondary: var(--clr-green);
+  --clr-foreground: var(--clr-black);
+  --clr-foreground-transparent: var(--clr-black-transparent);
+  --clr-background: white;
+  --clr-accent: var(--clr-pink);
+  --clr-border-main: var(--clr-dark-grey);
+
+  --clr-positive: var(--clr-green);
+  --clr-positive-text: var(--clr-dark-green);
+  --clr-positive-background: var(--clr-pale-green);
+
+  --clr-warning: var(--clr-yellow);
+  --clr-warning-background: var(--clr-pale-yellow);
+  --clr-warning-text: var(--clr-dark-yellow);
+
+  --clr-avoid: var(--clr-red);
+  --clr-avoid-background: var(--clr-pink);
+  --clr-avoid-text: var(--clr-dark-red);
+}
+
+// update colors which need to change in dark mode
+@mixin color-scheme-dark {
+  --clr-foreground: var(--clr-light-grey);
+  --clr-foreground-transparent: var(--clr-white-transparent);
+  --clr-background: var(--clr-black);
+  --clr-accent: var(--clr-berry);
+
+  --clr-positive-text: var(--clr-pale-green);
+  --clr-positive-background: var(--clr-dark-green);
+
+  --clr-warning-background: var(--clr-dark-yellow);
+  --clr-warning-text: var(--clr-pale-yellow);
+
+  --clr-avoid-background: var(--clr-dark-red);
+  --clr-avoid-text: var(--clr-pink);
+}
+
 :root {
+  @include raw-color-names();
+
+  @include color-scheme-light();
+
  --auto-grid-min-size: 17rem;
  --l-gap: 1rem;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-user-theme='light']) {
+    @include color-scheme-dark();
+  }
+}
+
+:root[data-user-theme='dark'] {
+  @include color-scheme-dark();
+}
--- a/assets/css/base/_radio-buttons.scss
+++ b/assets/css/base/_radio-buttons.scss
@@ -0,0 +1,53 @@
+.radio-wrapper {
+  & + & {
+    margin-top: 0.25rem;
+  }
+
+  [type='radio'] {
+    opacity: 0;
+    position: absolute;
+  }
+
+  & label {
+    --inner-size: 0.25rem;
+    --outer-top: 0.33rem;
+    line-height: 1;
+
+    padding-left: 1.55rem;
+    position: relative;
+
+    &::after,
+    &::before {
+      border-radius: 50%;
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &::after {
+      border: var(--inner-size) solid var(--clr-foreground);
+      left: var(--inner-size);
+      opacity: 0;
+      top: calc(var(--inner-size) + var(--outer-top));
+      transition: opacity 0.12s ease-out;
+    }
+
+    &::before {
+      background: var(--clr-background);
+      border: 0.125rem solid var(--clr-foreground);
+      height: 1rem;
+      left: 0;
+      top: var(--outer-top);
+      width: 1rem;
+    }
+  }
+
+  [type='radio']:focus + label::before {
+    outline: 0.125rem solid var(--clr-foreground);
+    outline-offset: 0.125rem;
+  }
+
+  [type='radio']:checked + label::after {
+    opacity: 1;
+  }
+}
--- a/assets/css/base/_selection.scss
+++ b/assets/css/base/_selection.scss
@@ -1,4 +1,4 @@
 ::selection {
-  background-color: #000000cc;
-  color: white;
+  background-color: var(--clr-foreground-transparent);
+  color: var(--clr-background);
 }
--- a/assets/css/base/_typography.scss
+++ b/assets/css/base/_typography.scss
@@ -1,63 +1,71 @@
 h1 {
-	font-family: $ext-sans;
-	font-weight: $bold;
+  font-family: $ext-sans;
+  font-weight: $bold;
 }

 h1,
 h2,
 h3,
 h4 {
-	margin-bottom: 0.5em;
-	margin-top: 1em;
-	word-break: break-word;
+  margin-bottom: 0.5em;
+  margin-top: 1em;
+  word-break: break-word;
 }

 p {
-	font-size: 1.25rem;
-	line-height: 1.25;
-	margin: 0.75rem 0;
+  font-size: 1.25rem;
+  line-height: 1.25;
+  margin: 0.75rem 0;
 }

 .thicc-headline {
-	// a sensible base font size
-	font-size: 3rem;
-	line-height: 0.75;
-	margin: 0.5rem 0rem;
-	padding: 0;
+  // a sensible base font size
+  font-size: 3rem;
+  line-height: 0.75;
+  margin: 0.5rem 0rem;
+  padding: 0;
 }

@media (min-width: 51rem) and (min-height: 400px) {
-	// a dramatic font size
-	.thicc-headline {
-		font-size: 12vh;
-	}
+  // a dramatic font size
+  .thicc-headline {
+    font-size: 12vh;
+  }
 }

@media (min-width: 51rem) and (min-height: 850px) {
-	// cap the maximum font size of the title
-	// at the same size that 12vh computes to
-	// when the viewport is 850px high
-	// One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp
-	.thicc-headline {
-		font-size: 6.75rem;
-	}
+  // cap the maximum font size of the title
+  // at the same size that 12vh computes to
+  // when the viewport is 850px high
+  // One day we can use CSS clamp https://caniuse.com/#feat=mdn-css_types_clamp
+  .thicc-headline {
+    font-size: 6.75rem;
+  }
 }

 .main-headline {
-	font-family: orpheuspro, Palatino, Times, serif;
-	font-size: 3.5rem;
-	line-height: 1.2;
-	margin: 0;
+  font-family: orpheuspro, Palatino, Times, serif;
+  font-size: 3.5rem;
+  line-height: 1.2;
+  margin: 0;
 }

 .sub-headline {
-	font-family: $ext-sans;
-	font-size: 1.25rem;
-	font-weight: $bold;
-	letter-spacing: 0.1;
-	margin: .75rem 0;
+  font-family: $ext-sans;
+  font-size: 1.25rem;
+  font-weight: $bold;
+  letter-spacing: 0.1;
+  margin: 0.75rem 0;
+}
+
+.smcp-headline {
+  font-size: 1rem;
+  font-variant-caps: all-small-caps;
+  letter-spacing: 0.01em;
+  margin-top: 0;
+  word-spacing: 0.01em;
 }

 .small {
-	font-size: 0.75em;
+  font-size: 0.75em;
 }
--- a/assets/css/components/_alertbox.scss
+++ b/assets/css/components/_alertbox.scss
@@ -1,5 +1,5 @@
 .alertbox {
-  border: 2px solid black;
+  border: 2px solid var(--clr-foreground);
  padding: 2.25rem;

  &__title {
--- a/assets/css/components/_box.scss
+++ b/assets/css/components/_box.scss
@@ -0,0 +1,31 @@
+.box {
+  background: var(--clr-foreground);
+  color: var(--clr-background);
+  grid-column: span 2;
+  height: auto;
+  margin: 1rem 0;
+  padding: 1rem;
+
+  @media (min-width: #{pxToRem(768)}) {
+    margin: 1rem 0.5rem;
+  }
+
+  &--divider {
+    margin: 2rem 0;
+  }
+
+  a {
+    color: var(--clr-background);
+
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-user-theme='light']) &:focus {
+        background-color: var(--clr-pink);
+      }
+    }
+  }
+
+  *::selection {
+    background: var(--clr-background);
+    color: var(--clr-foreground);
+  }
+}
--- a/assets/css/components/_definitions.scss
+++ b/assets/css/components/_definitions.scss
@@ -1,32 +1,23 @@
 .word__type {
-    font-family: $con-sans;
-    font-size: 0.85rem;
-    padding-right: 1rem;
-    text-align: right;
-    text-transform: uppercase;
-  }
-
-.word__link {
-    border-bottom: darkgrey solid 0.1em;
-    color: black;
-    font-family: $ext-sans;
-    text-decoration: none;
-  }
-
-.word__breakdown {
-    border-left: 0.1rem solid lightgrey;
-    font-family: $sans-serif;
-    padding-left: 1rem;
+  font-family: $con-sans;
+  font-size: 0.85rem;
+  padding-right: 1rem;
+  text-align: right;
+  text-transform: uppercase;
 }

 .content-flag {
-  background-color: $lt-background-color-warning;
+  background-color: var(--clr-warning-background);
  overflow: hidden;
  padding: 0 1rem 0 3rem;
  position: relative;

+  & a:focus {
+    background-color: var(--clr-background);
+  }
+
  &:before {
-    content: "⚠️";
+    content: '⚠️';
    left: 1rem;
    position: absolute;
    top: 50%;
@@ -34,10 +25,10 @@
  }

  &--avoid {
-    background-color: $pink;
+    background-color: var(--clr-avoid-background);

    &:before {
-      content: "🚨";
+      content: '🚨';
    }
  }
 }
--- a/assets/css/components/_flag.scss
+++ b/assets/css/components/_flag.scss
@@ -6,19 +6,22 @@
  margin: 0.5rem 0.75rem 0.25rem 0;
  padding: 0.45rem 0.65rem;
  text-transform: lowercase;
+
  &--red {
-    background-color:$lt-background-color;
+    background-color: var(--clr-avoid-background);
+
    &:before {
      @include icon__avoid();
      @include icon__embed();
    }
  }
+
  &--yellow {
-    background-color: $lt-background-color-warning;
-  
+    background-color: var(--clr-warning-background);
+
    &:before {
      @include icon__warning();
      @include icon__embed();
    }
  }
-}
+}
--- a/assets/css/components/_word.scss
+++ b/assets/css/components/_word.scss
@@ -74,7 +74,7 @@
    text-transform: uppercase;

    &--avoid {
-      --word-signal-color: $dark-red;
+      --word-signal-color: var(--clr-dark-red);

      &:before {
        @include icon__avoid();
@@ -83,7 +83,7 @@
    }

    &--better {
-      --word-signal-color: $dark-green;
+      --word-signal-color: var(--clr-positive-text);

      &:before {
        @include icon__alt();
@@ -97,8 +97,10 @@
        @include icon__hanging();
      }
    }
+
    &--warning {
-      --word-signal-color: $dark-yellow;
+      --word-signal-color: var(--clr-warning-text);
+
      &:before {
        @include icon__warning();
        @include icon__hanging();
--- a/assets/css/structures/_definition-content.scss
+++ b/assets/css/structures/_definition-content.scss
@@ -81,7 +81,7 @@
    text-transform: uppercase;

    &--avoid {
-      --word-signal-color: $dark-red;
+      --word-signal-color: var(--clr-avoid-text);

      &:before {
        @include icon__avoid();
@@ -90,7 +90,7 @@
    }

    &--better {
-      --word-signal-color: $dark-green;
+      --word-signal-color: var(--clr-positive-text);

      &:before {
        @include icon__alt();
@@ -106,7 +106,7 @@
    }

    &--warning {
-      --word-signal-color: $dark-yellow;
+      --word-signal-color: var(--clr-warning-text);

      &:before {
        @include icon__warning();
--- a/assets/css/structures/_definition-navigation.scss
+++ b/assets/css/structures/_definition-navigation.scss
@@ -15,15 +15,6 @@
  }
 }

-.definition-navigation__sub-headline {
-  color: #333;
-  font-size: 1rem;
-  font-variant-caps: all-small-caps;
-  letter-spacing: 0.01em;
-  margin-top: 0;
-  word-spacing: 0.01em;
-}
-
 .definition-navigation__nav {
  flex: 0 0 max-content;

--- a/assets/css/structures/_footer.scss
+++ b/assets/css/structures/_footer.scss
@@ -1,8 +1,12 @@
 .site-footer {
+  display: flex;
+  flex-wrap: wrap;
  grid-column: 1 / -1;
  margin-top: 3rem;

-  ul > li {
-    display: inline-block;
+  & > * {
+    flex: 0 1 19rem;
+    margin-bottom: 1em;
+    margin-right: 1rem;
  }
 }
--- a/assets/css/structures/_grid.scss
+++ b/assets/css/structures/_grid.scss
@@ -1,88 +1,62 @@
 .grid {
-	display: grid;
-	grid-column-gap: 4rem;
-	grid-row-gap: 10rem;
-	grid-template-columns: repeat(4, [col] 1fr [col]);
-	grid-template-rows: fit-content, fit-content, auto;
+  display: grid;
+  grid-column-gap: 4rem;
+  grid-row-gap: 10rem;
+  grid-template-columns: repeat(4, [col] 1fr [col]);
+  grid-template-rows: fit-content, fit-content, auto;
 }

 .auto-grid {
-	display: grid;
-	grid-gap: var(--l-gap);
-	grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr));
+  display: grid;
+  grid-gap: var(--l-gap);
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(var(--auto-grid-min-size), 1fr)
+  );
 }

@media screen and (max-width: 880px) {
-	.auto-grid {
-		display: flex;
-		flex-direction: column;
-	}
+  .auto-grid {
+    display: flex;
+    flex-direction: column;
+  }
 }

 .small-left-grid {
-	display: grid;
-	grid-gap: 1rem;
+  display: grid;
+  grid-gap: 1rem;

-	@media (min-width: #{pxToRem(800)}) {
-		grid-template-columns: 10rem 60ch;
-	}
+  @media (min-width: #{pxToRem(800)}) {
+    grid-template-columns: 10rem 60ch;
+  }
 }

 .block__dictionary {
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 50rem;
-	padding: 0 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 50rem;
+  padding: 0 1rem;
 }

 .block__word {
-	display: flex;
-	flex-direction: column;
-	grid-column: span 2;
-	margin: 1rem;
+  display: flex;
+  flex-direction: column;
+  grid-column: span 2;
+  margin: 1rem;
 }

 .block__type {
-	align-items: flex-start;
-	display: grid;
-	grid-template-columns: 1fr 4fr;
+  align-items: flex-start;
+  display: grid;
+  grid-template-columns: 1fr 4fr;
 }

 .list {
-	margin: 1rem 0;
-	li {
-		margin: 0.75rem 0;
-	}
-	a {
-		word-break: break-word;
-	}
-}
-
-.box {
-	background: black;
-	color: white;
-	grid-column: span 2;
-	height: auto;
-	margin: 1rem 0;
-	padding: 1rem;
-	@media (min-width: #{pxToRem(768)}) {
-		margin: 1rem 0.5rem;
-	}
-
-	&--divider {
-		margin: 2rem 0;
-	}
-
-	a {
-		color: white;
-
-		&:focus {
-			background-color: $lt-background-color;
-			color: $black;
-		}
-	}
-	*::selection {
-		background: white; /* WebKit/Blink Browsers */
-		color: black;
-	}
+  margin: 1rem 0;
+  li {
+    margin: 0.75rem 0;
+  }
+  a {
+    word-break: break-word;
+  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -1029,6 +1029,12 @@
        }
      }
    },
+    "@csstools/convert-colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
+      "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
+      "dev": true
+    },
    "@iarna/toml": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz",
@@ -1913,27 +1919,27 @@
          }
        },
        "caniuse-lite": {
-          "version": "1.0.30001066",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
-          "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==",
+          "version": "1.0.30001084",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz",
+          "integrity": "sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==",
          "dev": true
        },
        "electron-to-chromium": {
-          "version": "1.3.453",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz",
-          "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw==",
+          "version": "1.3.477",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.477.tgz",
+          "integrity": "sha512-81p6DZ/XmHDD7O0ITJMa7ESo9bSCfE+v3Fny3MIYR0y77xmhoriu2ShNOLXcPS4eowF6dkxw6d2QqxTkS3DjBg==",
          "dev": true
        },
        "node-releases": {
-          "version": "1.1.57",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.57.tgz",
-          "integrity": "sha512-ZQmnWS7adi61A9JsllJ2gdj2PauElcjnOwTp2O011iGzoakTxUsDGSe+6vD7wXbKdqhSFymC0OSx35aAMhrSdw==",
+          "version": "1.1.58",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
+          "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==",
          "dev": true
        },
        "postcss": {
-          "version": "7.0.31",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.31.tgz",
-          "integrity": "sha512-a937VDHE1ftkjk+8/7nj/mrjtmkn69xxzJgRETXdAUU+IgOYPQNJF17haGWbeDxSyk++HA14UA98FurvPyBJOA==",
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
          "dev": true,
          "requires": {
            "chalk": "^2.4.2",
@@ -4365,6 +4371,15 @@
      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
      "dev": true
    },
+    "css-blank-pseudo": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
+      "integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
    "css-color-names": {
      "version": "0.0.4",
      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4381,6 +4396,16 @@
        "timsort": "^0.3.0"
      }
    },
+    "css-has-pseudo": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz",
+      "integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.6",
+        "postcss-selector-parser": "^5.0.0-rc.4"
+      }
+    },
    "css-modules-loader-core": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
@@ -4444,6 +4469,15 @@
        }
      }
    },
+    "css-prefers-color-scheme": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
+      "integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
    "css-select": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -4537,6 +4571,12 @@
      "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
      "dev": true
    },
+    "cssdb": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
+      "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==",
+      "dev": true
+    },
    "cssesc": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -6056,6 +6096,12 @@
      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
      "dev": true
    },
+    "flatten": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
+      "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
+      "dev": true
+    },
    "follow-redirects": {
      "version": "1.5.10",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
@@ -8665,6 +8711,12 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
    },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+      "dev": true
+    },
    "lodash.clone": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
@@ -8724,6 +8776,25 @@
      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
      "dev": true
    },
+    "lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
    "lodash.uniq": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -10653,6 +10724,35 @@
        }
      }
    },
+    "postcss-attribute-case-insensitive": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz",
+      "integrity": "sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
    "postcss-calc": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz",
@@ -10665,6 +10765,58 @@
        "postcss-value-parser": "^3.3.1"
      }
    },
+    "postcss-color-functional-notation": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
+      "integrity": "sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-gray": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz",
+      "integrity": "sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-hex-alpha": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz",
+      "integrity": "sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14",
+        "postcss-values-parser": "^2.0.1"
+      }
+    },
+    "postcss-color-mod-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz",
+      "integrity": "sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-rebeccapurple": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz",
+      "integrity": "sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
    "postcss-colormin": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
@@ -10688,6 +10840,45 @@
        "postcss-value-parser": "^3.0.0"
      }
    },
+    "postcss-custom-media": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz",
+      "integrity": "sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14"
+      }
+    },
+    "postcss-custom-properties": {
+      "version": "8.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz",
+      "integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.17",
+        "postcss-values-parser": "^2.0.1"
+      }
+    },
+    "postcss-custom-selectors": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz",
+      "integrity": "sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      }
+    },
+    "postcss-dir-pseudo-class": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz",
+      "integrity": "sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      }
+    },
    "postcss-discard-comments": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
@@ -10724,6 +10915,62 @@
        "postcss": "^7.0.0"
      }
    },
+    "postcss-double-position-gradients": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz",
+      "integrity": "sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-env-function": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz",
+      "integrity": "sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-focus-visible": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz",
+      "integrity": "sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-focus-within": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz",
+      "integrity": "sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-font-variant": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz",
+      "integrity": "sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-gap-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
+      "integrity": "sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-html": {
      "version": "0.36.0",
      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz",
@@ -10733,6 +10980,37 @@
        "htmlparser2": "^3.10.0"
      }
    },
+    "postcss-image-set-function": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz",
+      "integrity": "sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-initial": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",
+      "integrity": "sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==",
+      "dev": true,
+      "requires": {
+        "lodash.template": "^4.5.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-lab-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
+      "integrity": "sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
    "postcss-less": {
      "version": "3.1.4",
      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
@@ -10742,6 +11020,24 @@
        "postcss": "^7.0.14"
      }
    },
+    "postcss-logical": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-3.0.0.tgz",
+      "integrity": "sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-media-minmax": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz",
+      "integrity": "sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-media-query-parser": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@@ -10999,6 +11295,15 @@
        }
      }
    },
+    "postcss-nesting": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
+      "integrity": "sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-normalize-charset": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -11109,6 +11414,89 @@
        "postcss-value-parser": "^3.0.0"
      }
    },
+    "postcss-overflow-shorthand": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz",
+      "integrity": "sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-page-break": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-2.0.0.tgz",
+      "integrity": "sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-place": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-4.0.1.tgz",
+      "integrity": "sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-preset-env": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz",
+      "integrity": "sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^9.6.1",
+        "browserslist": "^4.6.4",
+        "caniuse-lite": "^1.0.30000981",
+        "css-blank-pseudo": "^0.1.4",
+        "css-has-pseudo": "^0.10.0",
+        "css-prefers-color-scheme": "^3.1.1",
+        "cssdb": "^4.4.0",
+        "postcss": "^7.0.17",
+        "postcss-attribute-case-insensitive": "^4.0.1",
+        "postcss-color-functional-notation": "^2.0.1",
+        "postcss-color-gray": "^5.0.0",
+        "postcss-color-hex-alpha": "^5.0.3",
+        "postcss-color-mod-function": "^3.0.3",
+        "postcss-color-rebeccapurple": "^4.0.1",
+        "postcss-custom-media": "^7.0.8",
+        "postcss-custom-properties": "^8.0.11",
+        "postcss-custom-selectors": "^5.1.2",
+        "postcss-dir-pseudo-class": "^5.0.0",
+        "postcss-double-position-gradients": "^1.0.0",
+        "postcss-env-function": "^2.0.2",
+        "postcss-focus-visible": "^4.0.0",
+        "postcss-focus-within": "^3.0.0",
+        "postcss-font-variant": "^4.0.0",
+        "postcss-gap-properties": "^2.0.0",
+        "postcss-image-set-function": "^3.0.1",
+        "postcss-initial": "^3.0.0",
+        "postcss-lab-function": "^2.0.1",
+        "postcss-logical": "^3.0.0",
+        "postcss-media-minmax": "^4.0.0",
+        "postcss-nesting": "^7.0.0",
+        "postcss-overflow-shorthand": "^2.0.0",
+        "postcss-page-break": "^2.0.0",
+        "postcss-place": "^4.0.1",
+        "postcss-pseudo-class-any-link": "^6.0.0",
+        "postcss-replace-overflow-wrap": "^3.0.0",
+        "postcss-selector-matches": "^4.0.0",
+        "postcss-selector-not": "^4.0.0"
+      }
+    },
+    "postcss-pseudo-class-any-link": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz",
+      "integrity": "sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      }
+    },
    "postcss-reduce-initial": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -11133,6 +11521,15 @@
        "postcss-value-parser": "^3.0.0"
      }
    },
+    "postcss-replace-overflow-wrap": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz",
+      "integrity": "sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-reporter": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
@@ -11207,6 +11604,26 @@
        "postcss": "^7.0.6"
      }
    },
+    "postcss-selector-matches": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",
+      "integrity": "sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-selector-not": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz",
+      "integrity": "sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-selector-parser": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
@@ -11271,6 +11688,17 @@
      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
      "dev": true
    },
+    "postcss-values-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
+      "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
+      "dev": true,
+      "requires": {
+        "flatten": "^1.0.2",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
    "posthtml": {
      "version": "0.11.6",
      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.11.6.tgz",
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
    "markdown-it-prism": "^2.0.5"
  },
  "devDependencies": {
+    "autoprefixer": "^9.8.0",
    "ava": "^3.8.2",
    "concurrently": "^5.2.0",
    "eslint": "^6.8.0",
@@ -70,6 +71,7 @@
    "lint-staged": "^10.2.7",
    "markdownlint-cli": "^0.23.1",
    "parcel-bundler": "^1.12.4",
+    "postcss-preset-env": "^6.7.0",
    "prettier": "^1.19.1",
    "sass": "^1.26.7",
    "slugify": "^1.4.0",