From 30569dd481a97a9b986366ac315359844475a11f Mon Sep 17 00:00:00 2001
From: Anthony Loop <anthony@anthonyloop.com>
Date: Fri, 24 Nov 2023 21:22:43 -0800
Subject: [PATCH] refactor css around my aml-css lib

---
 package-lock.json                             |   9 ++
 package.json                                  |   1 +
 postcss.config.cjs                            |   4 +-
 src/components/Breadcrumbs.astro              |   7 +-
 src/components/Navigation.astro               |   9 +-
 src/components/Tags.astro                     |   4 +-
 src/layouts/BaseLayout.astro                  |  16 ++-
 styles/_properties.scss                       |  91 -------------
 styles/_vars.scss                             |   4 -
 styles/abstract/_properties.scss              | 124 ++++++++++++++++++
 styles/abstract/_variables.scss               |  27 ++++
 styles/abstract/functions/_index.scss         |   1 +
 styles/abstract/mixins/_index.scss            |   1 +
 styles/base/_body.scss                        |   8 ++
 styles/base/_code.scss                        |   5 +
 styles/{elements => base}/_headings.scss      |   2 +-
 styles/base/_lists.scss                       |  13 ++
 styles/base/_pseudo.scss                      |   3 +
 styles/base/_root.scss                        |   4 +
 styles/components/_breadcrumbs.scss           |   4 +-
 styles/components/_content.scss               |  70 +++++-----
 styles/components/_copy.scss                  |   5 +-
 styles/components/_heading-anchor.scss        |   5 -
 styles/components/_highlight.scss             |   3 +-
 styles/components/_last-updated.scss          |   2 +-
 styles/components/_skip-to-content.scss       |   3 +-
 styles/components/_tags.scss                  |  17 ++-
 styles/components/_toc.scss                   |   6 +-
 styles/elements/_body.scss                    |  25 ----
 styles/elements/_code.scss                    |   4 -
 styles/elements/_forms.scss                   |  20 ---
 styles/elements/_images.scss                  |   4 -
 styles/elements/_links.scss                   |  11 --
 styles/elements/_lists.scss                   |  13 --
 styles/elements/_paragraphs.scss              |   3 -
 styles/elements/_root.scss                    |   7 -
 styles/functions/_em.scss                     |  12 --
 styles/functions/_index.scss                  |   3 -
 styles/functions/_rem.scss                    |  12 --
 styles/functions/_strip-unit.scss             |   9 --
 styles/generic/_reset.scss                    |  28 ----
 styles/{components => layout}/_main.scss      |   9 +-
 .../_nav-container.scss                       |   3 +-
 styles/{components => layout}/_nav.scss       |  60 ++++-----
 styles/layout/_site-wrapper.scss              |   9 ++
 styles/main.scss                              |  73 +++++++----
 styles/objects/_container.scss                |   9 ++
 styles/overrides/_astro-code.scss             |   8 +-
 styles/pages/.gitkeep                         |   0
 styles/utilities/.gitkeep                     |   0
 styles/utilities/_hidden.scss                 |   7 -
 styles/utilities/_visually-hidden.scss        |  14 --
 styles/vendor/.gitkeep                        |   0
 53 files changed, 386 insertions(+), 405 deletions(-)
 delete mode 100644 styles/_properties.scss
 delete mode 100644 styles/_vars.scss
 create mode 100644 styles/abstract/_properties.scss
 create mode 100644 styles/abstract/_variables.scss
 create mode 100644 styles/abstract/functions/_index.scss
 create mode 100644 styles/abstract/mixins/_index.scss
 create mode 100644 styles/base/_body.scss
 create mode 100644 styles/base/_code.scss
 rename styles/{elements => base}/_headings.scss (88%)
 create mode 100644 styles/base/_lists.scss
 create mode 100644 styles/base/_pseudo.scss
 create mode 100644 styles/base/_root.scss
 delete mode 100644 styles/components/_heading-anchor.scss
 delete mode 100644 styles/elements/_body.scss
 delete mode 100644 styles/elements/_code.scss
 delete mode 100644 styles/elements/_forms.scss
 delete mode 100644 styles/elements/_images.scss
 delete mode 100644 styles/elements/_links.scss
 delete mode 100644 styles/elements/_lists.scss
 delete mode 100644 styles/elements/_paragraphs.scss
 delete mode 100644 styles/elements/_root.scss
 delete mode 100644 styles/functions/_em.scss
 delete mode 100644 styles/functions/_index.scss
 delete mode 100644 styles/functions/_rem.scss
 delete mode 100644 styles/functions/_strip-unit.scss
 delete mode 100644 styles/generic/_reset.scss
 rename styles/{components => layout}/_main.scss (56%)
 rename styles/{components => layout}/_nav-container.scss (58%)
 rename styles/{components => layout}/_nav.scss (69%)
 create mode 100644 styles/layout/_site-wrapper.scss
 create mode 100644 styles/objects/_container.scss
 create mode 100644 styles/pages/.gitkeep
 create mode 100644 styles/utilities/.gitkeep
 delete mode 100644 styles/utilities/_hidden.scss
 delete mode 100644 styles/utilities/_visually-hidden.scss
 create mode 100644 styles/vendor/.gitkeep

diff --git a/package-lock.json b/package-lock.json
index 3c6b128..7e631ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "aloop-docs",
       "version": "1.0.0",
       "dependencies": {
+        "@amloop/aml-css": "^4.1.1",
         "@fullhuman/postcss-purgecss": "^5.0.0",
         "astro": "^3.6.0",
         "autoprefixer": "^10.4.16",
@@ -18,6 +19,14 @@
         "sass": "^1.69.4"
       }
     },
+    "node_modules/@amloop/aml-css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@amloop/aml-css/-/aml-css-4.1.1.tgz",
+      "integrity": "sha512-KDyjFePJRgvqVh56B77Z2LPBdb+KAMjHHi2nkp1J4CwuCM/yMtda+/Lt9yyH34M5n48mcdEKWYIdPjC/vFCDCg==",
+      "bin": {
+        "aml-css": "bin/aml-css.js"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
diff --git a/package.json b/package.json
index 9ca468a..8bcea84 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@amloop/aml-css": "^4.1.1",
     "@fullhuman/postcss-purgecss": "^5.0.0",
     "astro": "^3.6.0",
     "autoprefixer": "^10.4.16",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 89d4c43..2069090 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -11,10 +11,10 @@ const purgecssConfig = {
       extensions: ["astro"],
     },
   ],
+  variables: true,
   safelist: [/^(is-|has-|will-|js-)/],
 };
 
 module.exports = {
-  // plugins: [require("autoprefixer"), purgecss(purgecssConfig), cssnano()],
-  plugins: [require("autoprefixer"), cssnano()],
+  plugins: [require("autoprefixer"), purgecss(purgecssConfig), cssnano()],
 };
diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
index dda79a3..4a064e1 100644
--- a/src/components/Breadcrumbs.astro
+++ b/src/components/Breadcrumbs.astro
@@ -4,9 +4,13 @@ import getPath from "../util/path";
 const path = getPath(Astro.request.url);
 
 const { segments } = Astro.props;
+
+const ariaCurrent = {
+  "aria-current": "page",
+};
 ---
 
-<nav>
+<nav aria-label="Breadcrumb">
   <ol class="c-Breadcrumbs">
     <li class="c-Breadcrumbs-item">
       <a href="/" class="c-Breadcrumbs-link">Home</a>
@@ -17,6 +21,7 @@ const { segments } = Astro.props;
           <a
             href={`/${slug}/`}
             class={`c-Breadcrumbs-link ${slug === path ? "is-current" : ""}`}
+            {...(slug === path ? ariaCurrent : {})}
           >
             {title}
           </a>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 84e61ec..d0a4217 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -35,6 +35,10 @@ documentation
   }, categories);
 
 const currentPath = getPath(Astro.request.url);
+
+const ariaCurrent = {
+  "aria-current": "page",
+};
 ---
 
 <div class="c-NavContainer" id="nav-container-9cc6478e">
@@ -53,7 +57,7 @@ const currentPath = getPath(Astro.request.url);
     <nav
       class="c-Nav"
       id="site-nav-1e445c2f"
-      aria-label="Main Navigation"
+      aria-label="Primary"
       tabindex="-1"
     >
       <ul class="c-Nav-list">
@@ -61,7 +65,7 @@ const currentPath = getPath(Astro.request.url);
           <a
             href="/"
             class={`c-Nav-list-link ${currentPath === "" ? " is-current" : ""}`}
-            >Home</a
+            {...currentPath === "" ? ariaCurrent : {}}>Home</a
           >
         </li>
         {
@@ -79,6 +83,7 @@ const currentPath = getPath(Astro.request.url);
                           class={`c-Nav-list-link ${
                             currentPath === slug ? " is-current" : ""
                           }`}
+                          {...(slug === currentPath ? ariaCurrent : {})}
                         >
                           {title}
                         </a>
diff --git a/src/components/Tags.astro b/src/components/Tags.astro
index 1d39f52..aeb9d94 100644
--- a/src/components/Tags.astro
+++ b/src/components/Tags.astro
@@ -4,7 +4,7 @@ const { tags = [] } = Astro.props;
 
 {
   tags.length > 0 && (
-    <div class="c-Tags-container">
+    <nav class="c-Tags-container" aria-label="Related Tags">
       <div class="c-Tags-container-title">Tags</div>
       <ul class="c-Tags c-Tags--small">
         {tags.sort().map((tag) => (
@@ -15,6 +15,6 @@ const { tags = [] } = Astro.props;
           </li>
         ))}
       </ul>
-    </div>
+    </nav>
   )
 }
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index dc6aa5f..d2feb0a 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -39,11 +39,15 @@ const { title } = Astro.props;
       href="#content-434728a4"
       class="c-SkipToContent u-visuallyHidden is-focusable">Skip to content</a
     >
-    <Navigation />
-    <main class="c-Main">
-      <article id="content-434728a4" class="c-Content">
-        <slot />
-      </article>
-    </main>
+    <div class="o-Container o-Container--fluid">
+      <div class="SiteWrapper">
+        <Navigation />
+        <main class="c-Main">
+          <article id="content-434728a4" class="c-Content">
+            <slot />
+          </article>
+        </main>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/styles/_properties.scss b/styles/_properties.scss
deleted file mode 100644
index d492eba..0000000
--- a/styles/_properties.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@use "./functions" as fns;
-
-:root {
-  // Font
-  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Roboto",
-    "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
-  --font-monospace: ui-monospace, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
-  --content-font-size: #{fns.rem(16)};
-  --line-height: 1.6;
-  --code-line-height: 1.4;
-  --headings-weight: bold;
-  --h1-size: 1.6em;
-  --h2-size: 1.4em;
-  --h3-size: 1.1em;
-  // Sizing
-  --space: #{fns.rem(20)};
-  --li-margin: #{fns.rem(4)};
-  --p-margin: var(--space);
-  --body-padding: env(safe-area-inset-top) env(safe-area-inset-right)
-    env(safe-area-inset-bottom) env(safe-area-inset-left);
-  --body-min-width: #{fns.rem(280)};
-  --main-margin: 0 calc(var(--space) / 2) calc(var(--space) * 2) 0;
-  --content-max-width: #{fns.rem(1200)};
-  --content-padding: calc(var(--space) * 0.75);
-  --content-padding-top: var(--content-padding);
-  --nav-width: #{fns.rem(250)};
-  --nav-icon-size: #{fns.rem(20)};
-  --nav-icon-spacing: #{fns.rem(10)};
-  --nav-icon-full-size: calc(
-    var(--nav-icon-size) + (var(--nav-icon-spacing) * 2)
-  );
-  // Color
-  --bg-color: hsl(276, 35%, 14%);
-  --color: #fff;
-  --link-color: hsl(46, 78%, 48%);
-  --link-color-active: hsl(46, 78%, 80%);
-  --headings-color: #fff;
-  --skip-to-content-bg: var(--link-color);
-  --skip-to-content-color: var(--bg-color);
-  --nav-bg: var(--bg-color);
-  --nav-link-color: var(--link-color);
-  --nav-link-color-active: var(--link-color-active);
-  --nav-icon-color: var(--color);
-  --content-bg: transparent;
-  --content-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.1);
-  --content-headings-color: hsl(46, 78%, 80%);
-  --code-bg: hsl(276, 25%, 18%);
-  --code-color: #fff;
-  --code-border-color: var(--link-color-active);
-  --breadcrumb-color: var(--link-color);
-  --breadcrumb-color-active: hsl(46, 78%, 80%);
-  --breadcrumb-separator: "❯";
-  --last-updated-color: rgba(255, 255, 255, 0.6);
-  --tag-color: #000;
-  --tag-bg: var(--link-color);
-  --tag-color-active: var(--tag-color);
-  --tag-bg-active: var(--link-color-active);
-  --copy-button-bg: var(--bg-color);
-  --copy-button-bg-active: var(--bg-color);
-  --copy-button-border-color: var(--code-bg);
-  --copy-button-color: var(--color);
-  --copy-button-color-active: var(--color);
-  // Animations
-  --nav-transition-props: 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-
-@media screen and (min-width: fns.rem(480)) {
-  :root {
-    --h1-size: 2em;
-    --h2-size: 1.5em;
-    --h3-size: 1.1em;
-    --main-margin: 0 var(--space) calc(var(--space) * 2) 0;
-  }
-}
-
-@media screen and (min-width: fns.rem(680)) {
-  :root {
-    --content-padding-top: calc(var(--space) * 1.5);
-    --content-padding: calc(var(--space) * 1.5) calc(var(--space) * 1.5)
-      calc(var(--space) * 1.5 - var(--space)) calc(var(--space) * 1.5);
-  }
-}
-
-@media screen and (min-width: fns.rem(768)) {
-  :root {
-    --h1-size: 2.4em;
-    --content-margin: 0;
-  }
-}
diff --git a/styles/_vars.scss b/styles/_vars.scss
deleted file mode 100644
index c694895..0000000
--- a/styles/_vars.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@use "sass:math";
-
-$base-font-size: 16;
-$nav-media-query-width: math.div(800, $base-font-size) * 1rem;
diff --git a/styles/abstract/_properties.scss b/styles/abstract/_properties.scss
new file mode 100644
index 0000000..f0c8def
--- /dev/null
+++ b/styles/abstract/_properties.scss
@@ -0,0 +1,124 @@
+@use "sass:map";
+@use "sass:math";
+
+@use "./variables";
+@use "./functions" as fns;
+
+@forward "@amloop/aml-css/lib/abstract/properties";
+
+:root {
+  // -- Typography
+
+  // ---- General
+
+  --aml-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
+    "Roboto", "Liberation Sans", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --aml-font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
+    "Liberation Mono", Menlo, Monaco, Consolas, monospace;
+  --aml-font-scale: #{math.div(variables.$base-font-size, 16)};
+  --aml-line-height: 1.6;
+  --aml-font-weight: 400;
+
+  // -- Colors
+
+  --clr-primary-400: hsl(46, 78%, 48%);
+  --clr-primary-300: hsl(46, 78%, 80%);
+  --clr-secondary-400: hsl(276, 35%, 75%);
+  --clr-secondary-700: hsl(276, 25%, 18%);
+  --clr-secondary-900: hsl(276, 35%, 14%);
+
+  --aml-bg-color: var(--clr-secondary-900);
+  --aml-text-color: #fff;
+  --aml-link-color: var(--clr-primary-400);
+  --aml-link-color-hover: var(--clr-primary-300);
+
+  // ---- Links
+
+  --aml-link-decoration: underline;
+  --aml-link-decoration-hover: none;
+
+  // -- Site width
+
+  // `--aml-max-site-width` is used to determine the container content width
+  --aml-min-site-width: #{fns.rem(variables.$min-site-width)};
+  --aml-max-site-width: #{fns.rem(variables.$max-site-width)};
+
+  --aml-margin: var(--aml-size-md);
+  --aml-padding: var(--aml-size-md);
+
+  // -- List variables
+
+  --aml-list-indentation: var(--aml-size-md);
+
+  // Font
+  --content-font-size: #{fns.rem(16)};
+  --code-line-height: 1.4;
+  --headings-weight: 700;
+  --h1-size: #{fns.fluid(24, 48)};
+  --h2-size: #{fns.fluid(20, 24)};
+  --h3-size: #{fns.fluid(16, 18)};
+
+  // Sizing
+  --list-spacing: var(--aml-size);
+  --list-item-spacing: #{fns.rem(4)};
+  --p-margin: var(--aml-size);
+  --body-padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+  --body-min-width: #{fns.rem(280)};
+  --top-padding: #{fns.fluid(
+      map.get(variables.$sizes, "default") * 0.75,
+      map.get(variables.$sizes, "default") * 1.5
+    )};
+  --nav-width: #{fns.rem(250)};
+  --nav-spacing: var(--aml-size);
+  --nav-icon-size: #{fns.rem(20)};
+  --nav-icon-spacing: #{fns.rem(10)};
+  --nav-icon-full-size: calc(
+    var(--nav-icon-size) + (var(--nav-icon-spacing) * 2)
+  );
+  --code-padding: var(--aml-size);
+
+  // Color
+  --headings-color: var(--aml-text-color);
+
+  --skip-to-content-bg: var(--clr-primary-400);
+  --skip-to-content-color: var(--aml-bg-color);
+
+  --nav-bg: var(--aml-bg-color);
+  --nav-link-color: var(--clr-primary-400);
+  --nav-link-color-active: var(--clr-primary-300);
+  --nav-icon-color: var(--aml-text-color);
+
+  --content-bg: transparent;
+  --content-headings-color: var(--clr-primary-300);
+
+  --code-bg: var(--clr-secondary-700);
+  --code-color: var(--aml-text-color);
+  --code-inline-color: var(--clr-secondary-900);
+  --code-border-color: var(--clr-primary-300);
+
+  --breadcrumb-color: var(--clr-primary-400);
+  --breadcrumb-color-active: var(--clr-primary-300);
+  --breadcrumb-separator: "❯";
+
+  --tag-color: #000;
+  --tag-bg: var(--clr-primary-400);
+  --tag-color-active: var(--tag-color);
+  --tag-bg-active: var(--clr-primary-300);
+
+  --copy-button-bg: var(--aml-bg-color);
+  --copy-button-bg-active: var(--aml-bg-color);
+  --copy-button-border-color: var(--code-bg);
+  --copy-button-color: var(--aml-text-color);
+  --copy-button-color-active: var(--aml-text-color);
+
+  --highlight-color: var(--clr-secondary-400);
+
+  // Shadows
+  --shadow-primary: 0 0 2px rgba(0, 0, 0, 0.2), 0 3px 5px rgba(0, 0, 0, 0.1);
+
+  // Animations/Transitions
+
+  --nav-transition: 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
diff --git a/styles/abstract/_variables.scss b/styles/abstract/_variables.scss
new file mode 100644
index 0000000..faf6349
--- /dev/null
+++ b/styles/abstract/_variables.scss
@@ -0,0 +1,27 @@
+@use "sass:map";
+@use "sass:math";
+
+@forward "@amloop/aml-css/lib/abstract/variables" with (
+  $max-site-width: 1000
+);
+
+@use "@amloop/aml-css/lib/abstract/variables";
+
+/* Example with overrides:
+@forward "@amloop/aml-css/lib/abstract/variables" with (
+  // Customize variables here
+  $base-font-size: 16,
+  $min-site-width: 320,
+  $max-site-width: 1920,
+  $namespace: "",
+  $default-media-type: all,
+  $breakpoints: map.merge(
+    $breakpoints,
+    (
+      xxl: tools.rem(1600),
+    )
+  )
+);
+*/
+
+$nav-media-query-width: math.div(800, variables.$base-font-size) * 1rem;
diff --git a/styles/abstract/functions/_index.scss b/styles/abstract/functions/_index.scss
new file mode 100644
index 0000000..4b28f8b
--- /dev/null
+++ b/styles/abstract/functions/_index.scss
@@ -0,0 +1 @@
+@forward "@amloop/aml-css/lib/abstract/functions";
diff --git a/styles/abstract/mixins/_index.scss b/styles/abstract/mixins/_index.scss
new file mode 100644
index 0000000..3d1a7b2
--- /dev/null
+++ b/styles/abstract/mixins/_index.scss
@@ -0,0 +1 @@
+@forward "@amloop/aml-css/lib/abstract/mixins";
diff --git a/styles/base/_body.scss b/styles/base/_body.scss
new file mode 100644
index 0000000..b69ef94
--- /dev/null
+++ b/styles/base/_body.scss
@@ -0,0 +1,8 @@
+body {
+  overflow-x: clip;
+  min-height: 100dvh;
+  width: 100dvw;
+  position: relative;
+  display: grid;
+  padding: var(--body-padding);
+}
diff --git a/styles/base/_code.scss b/styles/base/_code.scss
new file mode 100644
index 0000000..efe0429
--- /dev/null
+++ b/styles/base/_code.scss
@@ -0,0 +1,5 @@
+code,
+pre {
+  font: inherit;
+  font-family: var(--aml-font-mono);
+}
diff --git a/styles/elements/_headings.scss b/styles/base/_headings.scss
similarity index 88%
rename from styles/elements/_headings.scss
rename to styles/base/_headings.scss
index ade8dc4..6ba700e 100644
--- a/styles/elements/_headings.scss
+++ b/styles/base/_headings.scss
@@ -7,7 +7,7 @@ h6 {
   line-height: 1.2;
   font-weight: var(--headings-weight);
   color: var(--headings-color, inherit);
-  margin-bottom: var(--space);
+  text-wrap: balance;
 }
 
 h1 {
diff --git a/styles/base/_lists.scss b/styles/base/_lists.scss
new file mode 100644
index 0000000..22f48bc
--- /dev/null
+++ b/styles/base/_lists.scss
@@ -0,0 +1,13 @@
+ul {
+  padding-left: var(--list-spacing);
+  margin-bottom: var(--list-spacing);
+  list-style-type: square;
+}
+
+ul ul {
+  margin-bottom: 0;
+}
+
+li {
+  margin-bottom: var(--list-item-spacing);
+}
diff --git a/styles/base/_pseudo.scss b/styles/base/_pseudo.scss
new file mode 100644
index 0000000..e60ecab
--- /dev/null
+++ b/styles/base/_pseudo.scss
@@ -0,0 +1,3 @@
+::selection {
+  background: var(--highlight-color);
+}
diff --git a/styles/base/_root.scss b/styles/base/_root.scss
new file mode 100644
index 0000000..d1e2c8e
--- /dev/null
+++ b/styles/base/_root.scss
@@ -0,0 +1,4 @@
+html {
+  scroll-behavior: smooth;
+  text-size-adjust: none;
+}
diff --git a/styles/components/_breadcrumbs.scss b/styles/components/_breadcrumbs.scss
index 46b4314..c237ede 100644
--- a/styles/components/_breadcrumbs.scss
+++ b/styles/components/_breadcrumbs.scss
@@ -1,4 +1,4 @@
-@use "../functions" as fns;
+@use "../abstract/functions" as fns;
 
 .c-Breadcrumbs {
   --_gap: #{fns.rem(5)};
@@ -6,7 +6,7 @@
   flex-wrap: wrap;
   gap: calc(var(--_gap) / 2) var(--_gap);
   list-style: none;
-  margin-bottom: calc(var(--space) / 2);
+  margin-bottom: calc(var(--aml-size) / 2);
   font-size: fns.rem(14);
 }
 
diff --git a/styles/components/_content.scss b/styles/components/_content.scss
index ee56f8f..06fb42a 100644
--- a/styles/components/_content.scss
+++ b/styles/components/_content.scss
@@ -1,45 +1,47 @@
-@use "../functions" as fns;
+@use "../abstract/functions" as fns;
 
 .c-Content {
-  min-width: 0;
-  width: 100%;
-  max-width: var(--content-max-width, 100%);
-  padding: var(--content-padding);
   font-size: var(--content-font-size);
   --headings-color: var(--content-headings-color);
-}
 
-/* purgecss start ignore */
-.c-Content p > code {
-  background-color: var(--code-bg);
-  color: var(--code-color);
-  border-radius: fns.rem(5);
-  padding: fns.em(4) fns.em(4) fns.em(2) fns.em(4);
-  margin-right: fns.em(1);
-  font-size: fns.em(14);
-}
-/* purgecss end ignore */
+  padding-bottom: var(--aml-size-xl);
 
-.c-Content :where(h1, h2, h3, h4, h5, h6)::before {
-  content: "> ";
-  color: var(--link-color);
-  font-weight: bold;
-  display: none;
-}
+  > * + * {
+    margin-top: fns.em(20);
+  }
 
-.c-Content :where(h1, h2, h3, h4, h5, h6):target {
-  &,
-  & a {
-    text-decoration: underline solid fns.rem(2) var(--link-color);
-    text-underline-position: under;
+  &-title {
+    font-size: fns.fluid(24, 48);
   }
-}
 
-.c-Content :where(h1, h2, h3, h4, h5, h6):target::before {
-  display: inline;
-}
+  & p > code {
+    background-color: var(--clr-secondary-400);
+    color: var(--code-inline-color);
+    border-radius: fns.rem(5);
+    padding: fns.em(4) fns.em(4) fns.em(2) fns.em(4);
+    margin-right: fns.em(1);
+    font-size: fns.em(14);
+    font-weight: 700;
+  }
 
-.c-Content-title {
-  --headings-color: var(--content-headings-color);
-  font-size: unquote("max(var(--h1-size), min(calc(0.5em + 4vw), 3rem))");
+  & :where(h1, h2, h3, h4, h5, h6) {
+    &::before {
+      content: "> ";
+      color: var(--aml-link-color);
+      font-weight: bold;
+      display: none;
+    }
+
+    &:target {
+      &,
+      & a {
+        text-decoration: underline solid fns.rem(2) var(--aml-link-color);
+        text-underline-position: under;
+      }
+    }
+
+    &:target::before {
+      display: inline;
+    }
+  }
 }
diff --git a/styles/components/_copy.scss b/styles/components/_copy.scss
index 8ce1827..2fd4a28 100644
--- a/styles/components/_copy.scss
+++ b/styles/components/_copy.scss
@@ -1,13 +1,16 @@
-@use "../functions" as fns;
+@use "../abstract/functions" as fns;
 
 .c-Copy {
   position: relative;
   z-index: 2; // Prevents drop shadow from showing up over background
 
+  display: inline-flex;
+  align-items: baseline;
   align-self: center;
   margin: fns.rem(5);
   margin-left: auto;
   padding: fns.rem(5) fns.rem(10);
+  height: fns.rem(32);
 
   font-family: var(--font);
   font-size: 0.8em;
diff --git a/styles/components/_heading-anchor.scss b/styles/components/_heading-anchor.scss
deleted file mode 100644
index 4b9ba72..0000000
--- a/styles/components/_heading-anchor.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.c-HeadingAnchor {
-  text-decoration: none;
-  font-weight: bold;
-  color: var(--link-color);
-}
diff --git a/styles/components/_highlight.scss b/styles/components/_highlight.scss
index 7ef0c99..0454a41 100644
--- a/styles/components/_highlight.scss
+++ b/styles/components/_highlight.scss
@@ -1,8 +1,7 @@
-@use "../functions" as fns;
+@use "../abstract/functions" as fns;
 
 .c-Highlight {
   line-height: var(--code-line-height);
-  margin-bottom: var(--p-margin);
   display: grid;
   grid-template-areas:
     "title button"
diff --git a/styles/components/_last-updated.scss b/styles/components/_last-updated.scss
index f90d9aa..72b0019 100644
--- a/styles/components/_last-updated.scss
+++ b/styles/components/_last-updated.scss
@@ -1,4 +1,4 @@
 .c-LastUpdated {
   font-style: italic;
-  color: var(--last-updated-color);
+  opacity: 0.6;
 }
diff --git a/styles/components/_skip-to-content.scss b/styles/components/_skip-to-content.scss
index f241348..cf278c7 100644
--- a/styles/components/_skip-to-content.scss
+++ b/styles/components/_skip-to-content.scss
@@ -1,4 +1,4 @@
-@use "../functions" as fns;
+@use "../abstract/functions" as fns;
 
 .c-SkipToContent {
   position: fixed;
@@ -7,7 +7,6 @@
   margin: 0 auto;
   text-align: center;
   transform: translate(-50%, -100%);
-  transition: transform 100ms ease-in-out;
   background: var(--skip-to-content-bg);
   color: var(--skip-to-content-color);
   padding: fns.rem(6) fns.rem(10);
diff --git a/styles/components/_tags.scss b/styles/components/_tags.scss
index 2c433af..7fc66ff 100644
--- a/styles/components/_tags.scss
+++ b/styles/components/_tags.scss
@@ -1,8 +1,8 @@
-@use "../functions" as fns;
+@use "../abstract/functions" as fns;
 
 .c-Tags-container {
   align-items: center;
-  margin-bottom: var(--space);
+  margin-bottom: var(--aml-size);
 
   > .c-Tags {
     margin-bottom: 0;
@@ -35,16 +35,21 @@
   border-radius: 2.5px;
   background-color: var(--tag-bg);
   color: var(--tag-color);
-  box-shadow: var(--content-box-shadow);
+  box-shadow: var(--shadow-primary);
   text-align: center;
-  --link-color: var(--tag-color);
+
+  a[href] {
+    color: var(--tag-color);
+  }
   --link-color-active: var(--tag-color-active);
 
   &:hover,
-  &:focus,
   &:focus-within {
     background-color: var(--tag-bg-active);
-    color: var(--tag-color-active);
+
+    a[href] {
+      color: var(--tag-color-active);
+    }
   }
 }
 
diff --git a/styles/components/_toc.scss b/styles/components/_toc.scss
index 9889a8c..661ffee 100644
--- a/styles/components/_toc.scss
+++ b/styles/components/_toc.scss
@@ -1,13 +1,13 @@
 .c-TOC {
-  margin-bottom: var(--space);
+  margin-bottom: var(--aml-size);
 }
 
 .c-TOC-title {
   font-weight: bold;
-  margin-bottom: calc(var(--space) / 2);
+  margin-bottom: calc(var(--aml-size) / 2);
   cursor: pointer;
 }
 
 .c-TOC-body {
-  padding-left: calc(var(--space) / 2);
+  padding-left: calc(var(--aml-size) / 2);
 }
diff --git a/styles/elements/_body.scss b/styles/elements/_body.scss
deleted file mode 100644
index f32c493..0000000
--- a/styles/elements/_body.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-body {
-  min-height: 100vh;
-  min-width: var(--body-min-width);
-  max-width: 100%;
-  padding: var(--body-padding);
-  margin: auto;
-  color: var(--color);
-  font-family: var(--font);
-  font-size: 1rem;
-  line-height: var(--line-height);
-  overflow-x: hidden;
-
-  @supports (overflow-x: clip) {
-    overflow-x: clip;
-  }
-
-  display: grid;
-  grid-template-areas: "nav main";
-  grid-template-rows: auto max(100%, 1fr);
-  grid-template-columns: auto minmax(0, 1fr);
-
-  @supports (min-height: 100dvh) {
-    min-height: 100dvh;
-  }
-}
diff --git a/styles/elements/_code.scss b/styles/elements/_code.scss
deleted file mode 100644
index f85d070..0000000
--- a/styles/elements/_code.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-code,
-pre {
-  font-family: var(--font-monospace);
-}
diff --git a/styles/elements/_forms.scss b/styles/elements/_forms.scss
deleted file mode 100644
index 4a1504f..0000000
--- a/styles/elements/_forms.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-button,
-input,
-textarea,
-select {
-  font: inherit;
-  line-height: inherit;
-}
-
-label,
-button,
-input:where([type="checkbox"]) {
-  cursor: pointer;
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
diff --git a/styles/elements/_images.scss b/styles/elements/_images.scss
deleted file mode 100644
index c11e7fd..0000000
--- a/styles/elements/_images.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-img {
-  display: inline-block;
-  vertical-align: bottom;
-}
diff --git a/styles/elements/_links.scss b/styles/elements/_links.scss
deleted file mode 100644
index 8f05f89..0000000
--- a/styles/elements/_links.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-a {
-  display: inline-block;
-  color: var(--link-color);
-  text-decoration: underline;
-
-  &:where(:hover),
-  &:where(:focus) {
-    color: var(--link-color-active);
-    text-decoration: none;
-  }
-}
diff --git a/styles/elements/_lists.scss b/styles/elements/_lists.scss
deleted file mode 100644
index 29686f5..0000000
--- a/styles/elements/_lists.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-ul {
-  padding-left: var(--space);
-  margin-bottom: var(--space);
-  list-style-type: square;
-}
-
-ul ul {
-  margin-bottom: 0;
-}
-
-li {
-  margin-bottom: var(--li-margin);
-}
diff --git a/styles/elements/_paragraphs.scss b/styles/elements/_paragraphs.scss
deleted file mode 100644
index 6009f2b..0000000
--- a/styles/elements/_paragraphs.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-p {
-  margin-bottom: var(--p-margin);
-}
diff --git a/styles/elements/_root.scss b/styles/elements/_root.scss
deleted file mode 100644
index af99265..0000000
--- a/styles/elements/_root.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-html {
-  box-sizing: border-box;
-  min-height: 100%;
-  background-color: var(--bg-color);
-  scroll-behavior: smooth;
-  text-size-adjust: none;
-}
diff --git a/styles/functions/_em.scss b/styles/functions/_em.scss
deleted file mode 100644
index 2ec95c8..0000000
--- a/styles/functions/_em.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use "sass:math";
-
-@use "../vars";
-@use "strip-unit" as *;
-
-@function em($pixels, $base-font-size: vars.$base-font-size) {
-  @if not(unitless($pixels)) {
-    @error "em: $pixels should be a unitless number, '#{$pixels}' given.";
-  }
-
-  @return math.div($pixels, strip-unit($base-font-size)) + 0em;
-}
diff --git a/styles/functions/_index.scss b/styles/functions/_index.scss
deleted file mode 100644
index 7aaa93c..0000000
--- a/styles/functions/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@forward "em";
-@forward "rem";
-@forward "strip-unit";
diff --git a/styles/functions/_rem.scss b/styles/functions/_rem.scss
deleted file mode 100644
index dbb8076..0000000
--- a/styles/functions/_rem.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@use "sass:math";
-
-@use "../vars";
-@use "strip-unit" as *;
-
-@function rem($pixels, $base-font-size: vars.$base-font-size) {
-  @if not(unitless($pixels)) {
-    @error "rem: $pixels should be a unitless number, '#{$pixels}' given.";
-  }
-
-  @return math.div($pixels, strip-unit($base-font-size)) + 0rem;
-}
diff --git a/styles/functions/_strip-unit.scss b/styles/functions/_strip-unit.scss
deleted file mode 100644
index 4a6354d..0000000
--- a/styles/functions/_strip-unit.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use "sass:math";
-
-@function strip-unit($size) {
-  @if type-of($size) != "number" {
-    @error "strip-unit given type '#{type-of($size)}' with value '#{$size}' instead of number";
-  }
-
-  @return math.div($size, $size * 0 + 1);
-}
diff --git a/styles/generic/_reset.scss b/styles/generic/_reset.scss
deleted file mode 100644
index dfa9514..0000000
--- a/styles/generic/_reset.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-  margin: 0;
-  padding: 0;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-label[for] {
-  cursor: pointer;
-}
-
-textarea {
-  overflow: auto;
-}
-
-button,
-select,
-input {
-  font: inherit;
-  line-height: inherit;
-  border-radius: 0;
-}
diff --git a/styles/components/_main.scss b/styles/layout/_main.scss
similarity index 56%
rename from styles/components/_main.scss
rename to styles/layout/_main.scss
index c95b24b..31e47a1 100644
--- a/styles/components/_main.scss
+++ b/styles/layout/_main.scss
@@ -1,12 +1,13 @@
-@use "../functions" as fns;
-@use "../vars";
+@use "../abstract/functions" as fns;
+@use "../abstract/variables";
 
 .c-Main {
   grid-area: main;
   min-height: 100%;
+  padding-top: var(--top-padding);
 
-  @media screen and (max-width: (vars.$nav-media-query-width - fns.rem(1))) {
-    transition: transform var(--nav-transition-props);
+  @media screen and (max-width: (variables.$nav-media-query-width - fns.rem(1))) {
+    transition: transform var(--nav-transition);
 
     .c-NavContainer.is-open ~ &,
     .no-js .c-NavContainer:focus-within ~ & {
diff --git a/styles/components/_nav-container.scss b/styles/layout/_nav-container.scss
similarity index 58%
rename from styles/components/_nav-container.scss
rename to styles/layout/_nav-container.scss
index 6388296..caa9b01 100644
--- a/styles/components/_nav-container.scss
+++ b/styles/layout/_nav-container.scss
@@ -1,5 +1,4 @@
-@use "../functions" as fns;
-@use "../vars";
+@use "../abstract/functions" as fns;
 
 .c-NavContainer {
   position: relative;
diff --git a/styles/components/_nav.scss b/styles/layout/_nav.scss
similarity index 69%
rename from styles/components/_nav.scss
rename to styles/layout/_nav.scss
index 19ce998..589b849 100644
--- a/styles/components/_nav.scss
+++ b/styles/layout/_nav.scss
@@ -1,31 +1,31 @@
-@use "../functions" as fns;
-@use "../vars";
+@use "../abstract/functions" as fns;
+@use "../abstract/variables";
 
 .c-Nav {
   position: relative;
   width: var(--nav-width);
   max-width: var(--nav-width);
   max-height: 100%;
-  padding-right: var(--space);
+  padding-right: fns.rem(20);
   font-size: fns.rem(16);
   line-height: 1.2;
   outline: none;
-  overflow-y: auto;
+  overflow: clip auto;
   -webkit-overflow-scrolling: touch;
 
-  @media screen and (max-width: (vars.$nav-media-query-width - fns.rem(1))) {
-    position: absolute;
-    top: calc(
-      var(--space) + var(--nav-icon-full-size) + var(--nav-icon-spacing) * 2
+  @media screen and (width < variables.$nav-media-query-width) {
+    --nav-offset: calc(
+      (var(--nav-spacing) * 2) + var(--nav-icon-size) +
+        (var(--nav-icon-spacing) * 2)
     );
+
+    position: absolute;
+    top: var(--nav-offset);
     right: 100%;
-    max-height: calc(
-      100% - var(--space) - var(--nav-icon-full-size) - var(--nav-icon-spacing) *
-        2
-    );
+    max-height: calc(100% - var(--nav-offset));
     opacity: 0;
     visibility: hidden;
-    transition: all var(--nav-transition-props);
+    transition: all var(--nav-transition);
 
     .c-NavContainer.is-open &,
     .no-js .c-NavContainer:focus-within & {
@@ -37,17 +37,17 @@
 }
 
 .c-Nav-wrapper {
+  position: sticky;
   height: 100%;
-  padding-top: var(--content-padding-top);
   max-height: calc(
     100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0)
   );
-  position: sticky;
   inset: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0) 0;
+  padding-top: var(--top-padding);
 }
 
 .c-Nav-section {
-  margin: calc(var(--space) * 1.5) 0;
+  margin: calc(var(--nav-spacing) * 1.5) 0;
 }
 
 .c-Nav-section-title {
@@ -55,12 +55,14 @@
   letter-spacing: 1px;
   font-weight: bold;
   font-size: fns.rem(14);
-  margin-bottom: calc(var(--space) / 2);
+  margin-bottom: calc(var(--nav-spacing) / 2);
   cursor: pointer;
 }
 
 .c-Nav-list {
   list-style-type: none;
+  padding: 0;
+  margin: 0;
 
   .c-Nav-list {
     padding-left: 0;
@@ -69,7 +71,7 @@
 }
 
 .c-Nav-list-item {
-  margin-bottom: calc(var(--space) / 3);
+  margin-bottom: calc(var(--nav-spacing) / 3);
 
   &:last-of-type {
     margin-bottom: 0;
@@ -81,10 +83,11 @@
   text-decoration: none;
   display: block;
   line-height: 1.4;
+  text-wrap: balance;
 
   &.is-current,
   &:hover,
-  &:focus {
+  &:focus-within {
     color: var(--nav-link-color-active);
     text-decoration: underline;
     text-decoration-thickness: 2px;
@@ -99,22 +102,17 @@
   cursor: pointer;
   display: flex;
   align-items: center;
-  padding: var(--nav-icon-spacing);
+  padding-block: var(--nav-icon-spacing);
   z-index: 10;
-  width: var(--nav-icon-full-size);
-  height: var(--nav-icon-full-size);
-  transition: transform var(--nav-transition-props);
-
-  .is-open &,
-  .no-js .c-NavContainer:focus-within & {
-    transform: translateX(calc(var(--space) - var(--nav-icon-spacing)));
-  }
+  width: var(--nav-icon-size);
+  height: calc(var(--nav-icon-size) + (var(--nav-icon-spacing) * 2));
+  transition: transform var(--nav-transition);
 
   .no-js .c-NavContainer:focus-within & {
     pointer-events: none;
   }
 
-  @media screen and (min-width: vars.$nav-media-query-width) {
+  @media screen and (width >= variables.$nav-media-query-width) {
     display: none;
   }
 }
@@ -131,8 +129,8 @@
     height: fns.rem(2);
     background-color: var(--nav-icon-color);
     border-radius: var(--nav-icon-size);
-    transition: transform var(--nav-transition-props),
-      background-color var(--nav-transition-props);
+    transition: transform var(--nav-transition),
+      background-color var(--nav-transition);
   }
 
   &::before {
diff --git a/styles/layout/_site-wrapper.scss b/styles/layout/_site-wrapper.scss
new file mode 100644
index 0000000..20c429c
--- /dev/null
+++ b/styles/layout/_site-wrapper.scss
@@ -0,0 +1,9 @@
+@use "../abstract/functions" as fns;
+
+.SiteWrapper {
+  display: grid;
+  grid-template-areas: "nav main";
+  grid-template-rows: auto max(100%, 1fr);
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: fns.rem(20);
+}
diff --git a/styles/main.scss b/styles/main.scss
index 31df0c7..4e8453d 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -1,35 +1,54 @@
-/* purgecss start ignore */
-@forward "./generic/reset";
-
-@forward "./properties";
-
-@forward "./elements/root";
-@forward "./elements/body";
-@forward "./elements/headings";
-@forward "./elements/links";
-@forward "./elements/paragraphs";
-@forward "./elements/lists";
-@forward "./elements/images";
-@forward "./elements/forms";
-@forward "./elements/code";
-/* purgecss end ignore */
+// 1 -- SASS variables/mixins/functions
 
-@forward "./components/skip-to-content";
-@forward "./components/nav";
-@forward "./components/nav-container";
-@forward "./components/main";
+@forward "abstract/variables";
+
+// 2 -- CSS Properties
+
+@forward "abstract/properties";
+
+// 3 -- Base (resets, default element styles, etc.)
+
+@forward "@amloop/aml-css/lib/base";
+
+@forward "./base/root";
+@forward "./base/body";
+@forward "./base/headings";
+@forward "./base/lists";
+@forward "./base/code";
+@forward "./base/pseudo";
+
+// 4 -- Layouts (header, footer, forms, etc.)
+
+@forward "./layout/main";
+@forward "./layout/nav-container";
+@forward "./layout/nav";
+@forward "./layout/site-wrapper";
+
+// 5 -- Pages (page-specific styles)
+
+// 6 -- Objects
+
+@forward "@amloop/aml-css/lib/objects";
+
+@forward "./objects/container";
+
+// 7 -- Components (reusable styles)
+
+@forward "./components/breadcrumbs";
 @forward "./components/content";
+@forward "./components/copy";
+@forward "./components/highlight";
 @forward "./components/last-updated";
-@forward "./components/breadcrumbs";
+@forward "./components/skip-to-content";
 @forward "./components/tags";
-@forward "./components/heading-anchor";
-@forward "./components/highlight";
-@forward "./components/copy";
 @forward "./components/toc";
 
-@forward "./utilities/hidden";
-@forward "./utilities/visually-hidden";
+// 8 -- Utilities (utility classes)
+
+@forward "@amloop/aml-css/lib/utilities";
+
+// 9 -- Vendor (3rd-party css)
+
+// 10 -- Overrides (overrides, mainly intended for 3rd-party css)
 
-/* purgecss start ignore */
 @forward "./overrides/astro-code";
-/* purgecss end ignore */
diff --git a/styles/objects/_container.scss b/styles/objects/_container.scss
new file mode 100644
index 0000000..7625391
--- /dev/null
+++ b/styles/objects/_container.scss
@@ -0,0 +1,9 @@
+@use "../abstract/functions" as fns;
+
+.o-Container {
+  min-width: var(--aml-min-site-width);
+}
+
+.o-Container--fluid {
+  --padding: #{fns.fluid(10, 40)};
+}
diff --git a/styles/overrides/_astro-code.scss b/styles/overrides/_astro-code.scss
index 21e4b47..05d256e 100644
--- a/styles/overrides/_astro-code.scss
+++ b/styles/overrides/_astro-code.scss
@@ -1,13 +1,13 @@
-@use "../functions" as fns;
+@use "../abstract/functions" as fns;
 
 .astro-code {
   grid-area: code;
 
   border-top: 1px solid var(--code-border-color);
-  font-family: var(--font-monospace);
+  font-family: var(--aml-font-mono);
   font-size: em(14);
-  padding: calc(var(--space) / 2);
+  padding: calc(var(--code-padding) / 2);
   overflow: auto;
-  box-shadow: var(--content-box-shadow);
+  box-shadow: var(--shadow-primary);
   background-color: transparent !important;
 }
diff --git a/styles/pages/.gitkeep b/styles/pages/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/styles/utilities/.gitkeep b/styles/utilities/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/styles/utilities/_hidden.scss b/styles/utilities/_hidden.scss
deleted file mode 100644
index 0db0395..0000000
--- a/styles/utilities/_hidden.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.u-hidden {
-  display: none !important;
-}
-
-html.no-js .u-hidden\@no-js {
-  display: none !important;
-}
diff --git a/styles/utilities/_visually-hidden.scss b/styles/utilities/_visually-hidden.scss
deleted file mode 100644
index 67d53fa..0000000
--- a/styles/utilities/_visually-hidden.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.u-visuallyHidden {
-  &:not(.is-focusable),
-  &.is-focusable:not(:active):not(:focus):not(:focus-within) {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    margin: -1px !important;
-    clip: rect(0, 0, 0, 0) !important;
-    clip-path: inset(50%) !important;
-    overflow: hidden !important;
-    white-space: nowrap !important;
-  }
-}
diff --git a/styles/vendor/.gitkeep b/styles/vendor/.gitkeep
new file mode 100644
index 0000000..e69de29