Major refactor, redoing entire layout system with flexbox

2024-06-23 23:01:58 -05:00 · 2024-06-23 23:01:58 -05:00 · fb0719db65
parent 239b9d9a9b
commit fb0719db65
25 changed files with 416 additions and 189 deletions
--- a/README.md
+++ b/README.md
@ -21,14 +21,15 @@

 ## 0.0.2

- Change to layout based on CSS grid
- Switch to [include-media](https://github.com/eduardoboucas/include-media) to simplify media queries
- Add blog/lib sections (empty for now)
- Partial reorganizing of SCSS files
+- Changed to layout based on CSS grid
+- Switched to [include-media](https://github.com/eduardoboucas/include-media) to simplify media queries
+- Added blog/lib sections (empty for now)
+- Partially reorganized of SCSS files

 ## 0.0.3

- Add pagination to blog
- Add `home` layout
+- Added pagination to blog
+- Added `home` layout
 - Refactored base template
- Switch layout back to CSS flex
+- Switched layout back to CSS flex
+- Created `theme-default`, which provides default theming based on browser preference
--- a/src/404.md
+++ b/src/404.md
@ -0,0 +1,10 @@
+---
+title: Not found
+permalink: 404.html
+---
+
+# 404 - Not found
+
+There's nothing here.
+
+<a href="/"><- Home page</a>
--- a/src/_includes/layouts/article.njk
+++ b/src/_includes/layouts/article.njk
@ -0,0 +1,19 @@
+---
+layout: layouts/base.njk
+---
+
+<main>
+  <article>
+    <header>
+      {% if page.date -%}
+      <time datetime="{{ page.date | formatDate }}">
+        {{ page.date | formatDate }}
+      </time>
+      {%- endif %}
+      {% if title -%}
+      <h1>{{ title }}</h1>
+      {%- endif %}
+    </header>
+    {{ content | safe }}
+  </article>
+</main>
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@ -1,12 +1,8 @@
-<!doctype html>
-<html lang="en">
-  {% include "partials/meta.njk" %}
-  <body>
-    <div class="site">
-      {% include "partials/header.njk" %}
-      {% include "partials/navbar.njk" %}
-      {{ content | safe }}
-      {% include "partials/footer.njk" %}
-    </div>
-  </body>
-</html>
+---
+layout: layouts/blank.njk
+---
+
+{% include "partials/header.njk" %}
+{% include "partials/nav.njk" %}
+{{ content | safe }}
+{% include "partials/footer.njk" %}
--- a/src/_includes/layouts/blank.njk
+++ b/src/_includes/layouts/blank.njk
@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+  {% include "partials/meta.njk" %}
+  <body class="theme-default">
+    <div class="site">
+      {{ content | safe }}
+    </div>
+  </body>
+</html>
--- a/src/_includes/layouts/default.njk
+++ b/src/_includes/layouts/default.njk
@ -2,6 +2,8 @@
 layout: layouts/base.njk
 ---

-<main>
-  <article class="markup">{{ content | safe }}</article>
+<main class="site-main">
+  <article class="page-article">
+    {{ content | safe }}
+  </article>
 </main>
--- a/src/_includes/layouts/home.njk
+++ b/src/_includes/layouts/home.njk
@ -1,21 +1,9 @@
 ---
 layout: layouts/base.njk
 ---
-<main>
-  <article class="markup box flex-auto width-2/3">
+
+<main class="site-main">
+  <article class="page-article">
    {{ content | safe }}
  </article>
-  <aside class="markup box flex-initial width-1/6 order-first">
-    <h2>Status</h2>
-    <p>Writing posts</p>
-  </aside>
-  <aside class="markup box flex-initial width-1/6 order-last">
-    <h2>Latest posts</h2>
-    <ul>
-      <li>Post 1</li>
-      <li>Post 2</li>
-      <li>Post 3</li>
-    </ul>
-    <p><a href="/rss.xml">Feed</a></p>
-  </aside>
 </main>
--- a/src/_includes/partials/footer.njk
+++ b/src/_includes/partials/footer.njk
@ -1,6 +1,14 @@
-<footer class="footer">
-  <p>Made with <a href="https://www.11ty.dev/">11ty</a>.
-  {%- if page.date %}<i>
-    Last updated on <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>.
-  </i>{% endif -%}</p>
+<footer class="site-footer">
+  <!-- TODO add social links -->
+  <section>
+    <p>
+      Made with <a href="https://www.11ty.dev/">11ty</a>.
+      {%- if page.date %}
+      <i>
+        Last updated on
+        <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>.
+      </i>
+      {% endif -%}
+    </p>
+  </section>
 </footer>
--- a/src/_includes/partials/header.njk
+++ b/src/_includes/partials/header.njk
@ -1,3 +1,3 @@
-<header class="banner">
+<header class="site-header">
  <a class="logo" href="{{ meta.homepage }}">{{ meta.siteName }}</a>
 </header>
--- a/src/_includes/partials/meta.njk
+++ b/src/_includes/partials/meta.njk
@ -2,7 +2,9 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="generator" content="{{ eleventy.generator }}">
-  <title>{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}</title>
+  <title>
+    {% if title %}{{ title }} | {% endif %}{{ meta.siteName }}
+  </title>
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/global.css">
 </head>
--- a/src/_includes/partials/nav.njk
+++ b/src/_includes/partials/nav.njk
@ -0,0 +1,3 @@
+<nav class="site-navigation">
+  {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
+</nav>
--- a/src/_includes/partials/navbar.njk
+++ b/src/_includes/partials/navbar.njk
@ -1,3 +0,0 @@
-<nav class="navbar">
-    {{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}
-</nav>
--- a/src/about.md
+++ b/src/about.md
@ -23,6 +23,4 @@ Hey. I'm Gil ([he/they](https://en.pronouns.page/@kalanggam)). I'm a software de

 ## Colophon

-I first started building this site in mid 2023, and I've been gradually tweaking it since then.
-
-This site is generated with [Eleventy](https://www.11ty.dev). Most (all) pages are originally written in Markdown and then parsed into plain HTML, using templates I created for Eleventy. I used [Sass](https://sass-lang.com/) to create some stylesheets. The source files for this website are available at [ide.ogra.ph/gil/site](https://ide.ogra.ph/gil/site).
+I first started building this site in mid 2023, and I've been gradually tweaking it since then. This site is generated with [Eleventy](https://www.11ty.dev). Most (all) pages are originally written in Markdown and then parsed into plain HTML, using templates I created for Eleventy. I used [Sass](https://sass-lang.com/) to create some stylesheets. The source files for this website are available at [ide.ogra.ph/gil/site](https://ide.ogra.ph/gil/site).
--- a/src/css/global.css
+++ b/src/css/global.css
@ -47,64 +47,85 @@ Full license texts:
 }
 /* ============================================================================
 COMPONENTS
----------
+-------------------------------------------------------------------------------
 Reusable components for use across my site
 ============================================================================ */
-.markup {
+.markup, .page-article {
  word-wrap: break-word;
  line-height: 1.7;
  padding: 0;
 }
-.markup p,
+.markup > :first-child, .page-article > :first-child {
+  margin-top: 0;
+}
+.markup > :last-child, .page-article > :last-child {
+  margin-bottom: 0;
+}
+.markup p, .page-article p,
 .markup blockquote,
+.page-article blockquote,
 .markup ul,
+.page-article ul,
 .markup ol,
+.page-article ol,
 .markup dl,
+.page-article dl,
 .markup table,
-.markup pre {
+.page-article table,
+.markup pre,
+.page-article pre {
  margin: 1em 0;
 }
-.markup ul,
-.markup ol {
+.markup ul, .page-article ul,
+.markup ol,
+.page-article ol {
  list-style-type: revert;
  padding-left: 30px;
 }
-.markup h1 {
+.markup h1, .page-article h1 {
  font-size: 2.5em;
 }
-.markup h2 {
+.markup h2, .page-article h2 {
  font-size: 2em;
 }
-.markup h3 {
+.markup h3, .page-article h3 {
  font-size: 1.5em;
 }
-.markup h4 {
+.markup h4, .page-article h4 {
  font-size: 1.2em;
 }
-.markup h5 {
+.markup h5, .page-article h5 {
  font-size: 1em;
 }
-.markup h6 {
+.markup h6, .page-article h6 {
  font-size: 1em;
 }
-.markup h1,
+.markup h1, .page-article h1,
 .markup h2,
+.page-article h2,
 .markup h3,
+.page-article h3,
 .markup h4,
+.page-article h4,
 .markup h5,
-.markup h6 {
+.page-article h5,
+.markup h6,
+.page-article h6 {
  margin: 0.5em 0 0.25em 0;
 }
-.markup h1 + p,
+.markup h1 + p, .page-article h1 + p,
 .markup h2 + p,
-.markup h3 + p {
+.page-article h2 + p,
+.markup h3 + p,
+.page-article h3 + p {
  margin-top: 0.5em;
 }
-.markup img {
+.markup img, .page-article img {
  max-width: 100%;
 }
-.markup code,
-.markup pre {
+.markup code, .page-article code,
+.markup pre,
+.page-article pre {
  background-color: #f8f8f8;
  border-radius: 3px;
  border: 1px solid #ddd;
@ -114,84 +135,149 @@ Reusable components for use across my site
  padding: 0 5px;
  white-space: pre;
 }
-.markup pre code {
+.markup pre code, .page-article pre code {
  border: none;
  margin: 0;
  padding: 0;
  white-space: pre;
 }

+/* ============================================================================
+DEFAULT THEME
+-------------------------------------------------------------------------------
+This is the default theme for my website, which uses the prefer-color-scheme
+query to provide the appropriate styles for light mode or dark mode. The other
+themes can be selected with a dropdown which is only shown when JavaScript is
+enabled.
+============================================================================ */
+:root {
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: light) {
+  .theme-default body {
+    background: url("/img/background2.png");
+  }
+  .theme-default .site-header {
+    border: solid black 2px;
+    background: white;
+  }
+  .theme-default .site-main {
+    border: solid black 2px;
+    background: white;
+  }
+  .theme-default .site-navigation {
+    background: white;
+    border: solid black 2px;
+    border-top: none;
+  }
+}
+@media (prefers-color-scheme: light) and (min-width: 641px) {
+  .theme-default .site-navigation {
+    border-top: solid black 2px;
+  }
+}
+@media (prefers-color-scheme: light) {
+  .theme-default .site-footer {
+    border: solid black 2px;
+    background: white;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .theme-default body {
+    background: black;
+  }
+  .theme-default .site-header {
+    border: solid white 2px;
+    background: black;
+  }
+  .theme-default .site-main {
+    border: solid white 2px;
+    background: black;
+  }
+  .theme-default .site-navigation {
+    border: solid white 2px;
+    background: black;
+    border-top: none;
+  }
+}
+@media (prefers-color-scheme: dark) and (min-width: 641px) {
+  .theme-default .site-navigation {
+    border-top: solid white 2px;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .theme-default .site-footer {
+    border: solid white 2px;
+    background: black;
+  }
+}
+
 /* ============================================================================
 GLOBAL VARIABLES
 ============================================================================ */
-/* Media breakpoints ------------------------------------------------------- */
+/* Sizing ------------------------------------------------------------------ */
 /* Spacing ----------------------------------------------------------------- */
 /* Typography -------------------------------------------------------------- */
 /* -- Font ----------------------------------------------------------------- */
 :root {
  font-size: 12pt;
  font-family: "Linux Libertine", "Times New Roman", Times, serif;
-  color-scheme: light dark;
-}
-
-body {
-  background: url("/img/background2.png");
-}
-
-.site > .banner,
-.site > .navbar,
-.site > .footer {
-  text-align: center;
 }

 .site {
  display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  max-width: 60em;
+  margin: 1em auto 1em;
 }
-.site > .navbar {
-  border: solid black 1px;
-}
-.site > .navbar li {
-  display: inline-flex;
+
+.site-header {
+  flex: 0 0 100%;
+  box-sizing: border-box;
+  padding: 1em;
 }
@media (min-width: 641px) {
-  .site > main {
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
+  .site-header {
+    margin-bottom: 1em;
  }
 }

-.box {
-  border: solid black 1px;
-  padding: 0 1em;
+.site-main {
+  flex: 1 0 50%;
+  box-sizing: border-box;
+  padding: 1em;
+  height: min-content;
 }

-@media (min-width: 769px) {
-  .width-1\/6 {
-    width: 16.66666667%;
+.site-navigation {
+  flex: 0 0 100%;
+  box-sizing: border-box;
+  margin-bottom: 1em;
+  padding: 1em;
+  height: min-content;
+}
+@media (min-width: 641px) {
+  .site-navigation {
+    flex: 0 1 10em;
+    margin-right: 1em;
+    margin-bottom: 0;
+  }
+}
+.site-navigation li {
+  display: inline-block;
+}
+@media (min-width: 641px) {
+  .site-navigation li {
+    display: block;
  }
 }

-@media (min-width: 769px) {
-  .width-2\/3 {
-    width: 66.66666667%;
-  }
-}
-
-.flex-auto {
-  flex: 1 1 auto;
-}
-
-.flex-initial {
-  flex: 0 1 auto;
-}
-
-.order-first {
-  order: -999;
-}
-.order-last {
-  order: 999;
+.site-footer {
+  flex: 0 0 100%;
+  box-sizing: border-box;
+  margin-top: 1em;
+  padding: 1em;
 }

 /*# sourceMappingURL=global.css.map */
--- a/src/css/global.css.map
+++ b/src/css/global.css.map
@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/modules/_fonts.scss","../scss/_components.scss","../scss/_vars.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACDA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;AC1DF;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;ACvFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;AHHA;EAEI,WGEa;EHDb,aGEe;EHAjB;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EACE;;;AAGF;EACE;EACA;;AASE;EACE;;AAEA;EACE;;AI0jBJ;EJrjBE;IACE;IACA;IACA,KGzCC;;;;AH+CT;EACE;EACA;;;AI0iBE;EJviBJ;IAEI;;;;AIqiBA;EJjiBJ;IAEI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAEF;EACE","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/modules/_fonts.scss","../scss/_components.scss","../scss/_themes.scss","../scss/modules/_include-media.scss","../scss/_vars.scss"],"names":[],"mappings":"AAEA;ACDA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;AC1DF;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;;AAGE;EACE;;AAEF;EACE;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AChGJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAIA;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;ACikBF;EDpkBA;IAKI;;;AApBN;EAwBE;IACE;IACA;;;AAIJ;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;;ACmiBF;EDtiBA;IAKI;;;AApBN;EAwBE;IACE;IACA;;;;AExEN;AAAA;AAAA;AAIA;AAKA;AAKA;AAGA;ALNA;EAEI,WKKa;ELJb,aKKe;;;ALDnB;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AIukBE;EJ1kBJ;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AIqjBE;EJ1jBJ;IAOI;IACA;IACA;;;AAGF;EACE;;AI6iBA;EJ9iBF;IAGI;;;;AAKN;EACE;EACA;EACA;EACA","file":"global.css"}
--- a/src/css/reset.css
+++ b/src/css/reset.css
@ -252,16 +252,31 @@ More resets/normalizations courtesy of https://mattbrictson.com/blog/css-normali
  line-height: 1.5;
 }

-h1, h2, h3, h4, h5, h6, figure, p, ol, ul {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+figure,
+p,
+ol,
+ul {
  margin: 0;
 }

-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
  font-size: inherit;
  font-weight: inherit;
 }

-ol, ul {
+ol,
+ul {
  list-style: none;
  padding-inline: 0;
 }
@ -273,4 +288,13 @@ img {

 blockquote {
  margin: 0;
-}
+}
+
+section,
+article,
+aside,
+footer,
+header,
+nav {
+  display: block;
+}
--- a/src/css/theme-default.css.map
+++ b/src/css/theme-default.css.map
@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/theme-default.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAMF;IACE","file":"theme-default.css"}
--- a/src/index.md
+++ b/src/index.md
@ -5,4 +5,8 @@ eleventyNavigation:
  key: Home
 ---

-Custom blurb
+# Welcome
+
+Welcome to my website! Gil's Nexus launched on October 12, 2023. Until June 2024, it was mostly just a placeholder and hosted my social media links. With time and effort, I hope to make it into a cute website reminiscent of the late 1990s and 2000s internet, with more recent design considerations like accessibility and responsiveness.
+
+To learn more about me, see my [About page](/about).
--- a/src/poems/hey-girl.md
+++ b/src/poems/hey-girl.md
@ -1,6 +1,7 @@
 ---
 title: Hey Girl
-date: Last Modified
+date: 2023-05-31T12:00:00-5
+excerpt: test
 ---

 Hey girl,  
--- a/src/poems/index.md
+++ b/src/poems/index.md
@ -2,6 +2,11 @@
 title: Poetry
 permalink: /poetry/
 override:tags: []
+pagination:
+  data: collections.poems
+  size: 5
+  reverse: true
+  generatePageOnEmptyData: true
 eleventyNavigation:
  key: Poetry
  order: 2
@ -10,8 +15,8 @@ eleventyNavigation:
 # Poetry

 <ul>
-{%- for poem in collections.poems reversed -%}
-  <li><a href="{{ poem.url }}">{{ poem.data.title }}</a>
-  &mdash; <i>updated <time datetime="{{ poem.date | formatDate }}">{{ poem.date | formatDate }}</time></i></li>
-{%- endfor -%}
+{%- for post in pagination.items %}
+  <li><a href="{{ post.url }}">{{ post.data.title }}</a>
+  &mdash; <i>updated <time datetime="{{ post.date | formatDate }}">{{ post.date | formatDate }}</time></i></li>
+{% endfor -%}
 </ul>
--- a/src/poems/self-effacing.md
+++ b/src/poems/self-effacing.md
@ -1,6 +1,6 @@
 ---
 title: Self-Effacing
-date: Last Modified
+date: 2022-12-01T12:00:00-5
 ---

 i was born beneath the rocks of a single-minded destiny: cutting cords.  
--- a/src/scss/_components.scss
+++ b/src/scss/_components.scss
@ -1,7 +1,7 @@
 // _components.scss
 /* ============================================================================
 COMPONENTS
----------
+-------------------------------------------------------------------------------
 Reusable components for use across my site
 ============================================================================ */

@ -11,6 +11,15 @@ Reusable components for use across my site
  line-height: 1.7;
  padding: 0;

+  > {
+    :first-child {
+      margin-top: 0;
+    }
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+
  p,
  blockquote,
  ul,
--- a/src/scss/_themes.scss
+++ b/src/scss/_themes.scss
@ -0,0 +1,77 @@
+// theme-default.scss
+/* ============================================================================
+DEFAULT THEME
+-------------------------------------------------------------------------------
+This is the default theme for my website, which uses the prefer-color-scheme
+query to provide the appropriate styles for light mode or dark mode. The other
+themes can be selected with a dropdown which is only shown when JavaScript is
+enabled.
+============================================================================ */
+
+@use "modules/include-media" as *;
+
+:root {
+  color-scheme: light dark;
+}
+
+.theme-default {
+  @media (prefers-color-scheme: light) {
+    body {
+      background: url("/img/background2.png");
+    }
+
+    .site-header {
+      border: solid black 2px;
+      background: white;
+    }
+
+    .site-main {
+      border: solid black 2px;
+      background: white;
+    }
+
+    .site-navigation {
+      background: white;
+      border: solid black 2px;
+      border-top: none;
+      @include media(">sm") {
+        border-top: solid black 2px;
+      }
+    }
+
+    .site-footer {
+      border: solid black 2px;
+      background: white;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    body {
+      background: black;
+    }
+
+    .site-header {
+      border: solid white 2px;
+      background: black;
+    }
+
+    .site-main {
+      border: solid white 2px;
+      background: black;
+    }
+
+    .site-navigation {
+      border: solid white 2px;
+      background: black;
+      border-top: none;
+      @include media(">sm") {
+        border-top: solid white 2px;
+      }
+    }
+
+    .site-footer {
+      border: solid white 2px;
+      background: black;
+    }
+  }
+}
--- a/src/scss/_vars.scss
+++ b/src/scss/_vars.scss
@ -3,11 +3,15 @@
 GLOBAL VARIABLES
 ============================================================================ */

-/* Media breakpoints ------------------------------------------------------- */
-
+/* Sizing ------------------------------------------------------------------ */
+$site-width: 60em;
+$site-nav-width: 10em;
+$site-main-min-width: 50%;

 /* Spacing ----------------------------------------------------------------- */
-$gutter: 1em;
+$site-top: 1em;
+$site-bottom: 1em;
+$site-gutter: 1em;

 /* Typography -------------------------------------------------------------- */
 $leading: 1.7;
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@ -7,6 +7,7 @@
@use "modules/include-media" as *;

@use "components";
+@use "themes";
@use "vars" as *;

 :root {
@ -14,76 +15,58 @@
    size: $font-base-size;
    family: $font-stack-serif;
  }
-  color-scheme: light dark;
-}
-
-body {
-  background: url("/img/background2.png");
-}
-
-%text-center {
-  text-align: center;
 }

 .site {
  display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  max-width: #{$site-width};
+  margin: #{$site-top} auto #{$site-bottom};
+}

-  > {
-    .banner,
-    .navbar,
-    .footer {
-      @extend %text-center;
-    }
+.site-header {
+  flex: 0 0 100%;
+  box-sizing: border-box;
+  padding: 1em;
+  @include media(">sm") {
+    margin-bottom: #{$site-gutter};
+  }
+}

-    .navbar {
-      border: solid black 1px;
+.site-main {
+  flex: 1 0 #{$site-main-min-width};
+  box-sizing: border-box;
+  padding: 1em;
+  height: min-content;
+}

-      li {
-        display: inline-flex;
-      }
-    }
+.site-navigation {
+  flex: 0 0 100%;
+  box-sizing: border-box;
+  margin-bottom: #{$site-gutter};
+  padding: 1em;
+  height: min-content;
+  @include media(">sm") {
+    flex: 0 1 #{$site-nav-width};
+    margin-right: #{$site-gutter};
+    margin-bottom: 0;
+  }

+  li {
+    display: inline-block;
    @include media(">sm") {
-      main {
-        display: flex;
-        flex-direction: row;
-        gap: $gutter;
-      }
+      display: block;
    }
  }
 }

-.box {
-  border: solid black 1px;
-  padding: 0 1em;
+.site-footer {
+  flex: 0 0 100%;
+  box-sizing: border-box;
+  margin-top: #{$site-gutter};
+  padding: 1em;
 }

-.width-1\/6 {
-  @include media(">md") {
-    width: 16.66666667%;
-  }
+.page-article {
+  @extend .markup;
 }
-
-.width-2\/3 {
-  @include media(">md") {
-    width: 66.66666667%;
-  }
-}
-
-.flex-auto {
-  flex: 1 1 auto;
-}
-
-.flex-initial {
-  flex: 0 1 auto;
-}
-
-.order- {
-  &first {
-    order: -999;
-  }
-  &last {
-    order: 999;
-  }
-}
				`@ -0,0 +1 @@`
				`{"version":3,"sourceRoot":"","sources":["../scss/theme-default.scss"],"names":[],"mappings":"AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAMF;IACE","file":"theme-default.css"}`