From f2a08f6005d70402bb0b23072a6083999ac9157b Mon Sep 17 00:00:00 2001
From: Jim Nielsen <jimniels@gmail.com>
Date: Tue, 12 Apr 2022 20:48:45 -0600
Subject: [PATCH] feat: new theme (#38)

---
 src/client/404.html.tmpl.js                   |  24 +-
 src/client/about/index.html.tmpl.js           | 140 +++--
 src/client/archive/index.html.tmpl.js         |  12 +-
 src/client/index.html.tmpl.js                 |  56 +-
 src/client/tags/index.html.tmpl.js            |  12 +-
 .../tags/readingNotes/index.html.tmpl.js      |   4 +-
 src/server/Layouts.js                         |  45 +-
 src/server/site-nav.js                        | 121 ++--
 src/server/styles/base.css                    | 269 ---------
 src/server/styles/styles.css                  | 556 +++++++++++++-----
 10 files changed, 613 insertions(+), 626 deletions(-)
 delete mode 100644 src/server/styles/base.css

diff --git a/src/client/404.html.tmpl.js b/src/client/404.html.tmpl.js
index 94510e93..6c0cde9f 100644
--- a/src/client/404.html.tmpl.js
+++ b/src/client/404.html.tmpl.js
@@ -3,13 +3,17 @@ import { html } from "../server/utils.js";
 
 export default function Page404(site) {
   const title = "404: Page Not Found";
-  return Page({
-    site,
-    page: {
-      title,
-      path: "/404/",
-      layout: "Page",
-      contents: html`
+  return Page(
+    {
+      site,
+      page: {
+        title,
+        path: "/404/",
+        layout: "Page",
+      },
+    },
+    html`
+      <main class="copy wrapper">
         <h1>${title}</h1>
 
         <p>
@@ -31,7 +35,7 @@ export default function Page404(site) {
               alt="Picture of a pie I made and posted on Instagram"
           /></a>
         </p>
-      `,
-    },
-  });
+      </main>
+    `
+  );
 }
diff --git a/src/client/about/index.html.tmpl.js b/src/client/about/index.html.tmpl.js
index 9480e205..aff48db7 100644
--- a/src/client/about/index.html.tmpl.js
+++ b/src/client/about/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../../server/Layouts.js";
+import { Page } from "../../server/Layouts.js";
 import { html } from "../../server/utils.js";
 
 const page = {
@@ -37,86 +37,84 @@ export default function About(site) {
     (domain) => site.outboundLinksByDomain[domain].length === 1
   );
 
-  return PageCustom(
+  return Page(
     { site, page },
-    // prettier-ignorez
-    html` <div class="copy">
-        <h1>About</h1>
+    html` <h1>About</h1>
 
-        <p>Hello, I’m <a href="https://www.jim-nielsen.com">Jim Nielsen</a>.</p>
+      <p>Hello, I’m <a href="https://www.jim-nielsen.com">Jim Nielsen</a>.</p>
 
-        <p>
-          In the past, I put off writing because I was unable to do my best—“if
-          you can’t do something right, don’t do it at all”.
-        </p>
-        <p>
-          But lately I’ve found myself regretting not writing down at least
-          <em>something</em>.
-        </p>
+      <p>
+        In the past, I put off writing because I was unable to do my best—“if
+        you can’t do something right, don’t do it at all”.
+      </p>
+      <p>
+        But lately I’ve found myself regretting not writing down at least
+        <em>something</em>.
+      </p>
 
-        <p>
-          So my current posture towards blogging is: something is better than
-          nothing.
-        </p>
+      <p>
+        So my current posture towards blogging is: something is better than
+        nothing.
+      </p>
 
-        <p>
-          <img
-            src="https://cdn.jim-nielsen.com/shared/jim-nielsen-portrait.jpg"
-            width="300"
-            height="300"
-            alt="Portrait of Jim Nielsen"
-          />
-        </p>
+      <p>
+        <img
+          src="https://cdn.jim-nielsen.com/shared/jim-nielsen-portrait.jpg"
+          width="300"
+          height="300"
+          alt="Portrait of Jim Nielsen"
+        />
+      </p>
 
-        <h2>Blog Links</h2>
+      <h2>Blog Links</h2>
 
-        <p>
-          I thought it would be interesting to
-          <a href="/2020/indexing-my-blogs-links/"
-            >index all the outbound links on my blog</a
-          >
-          and keep it as a running list.
-        </p>
+      <p>
+        I thought it would be interesting to
+        <a href="/2020/indexing-my-blogs-links/"
+          >index all the outbound links on my blog</a
+        >
+        and keep it as a running list.
+      </p>
 
-        ${domainsOfMoreThanOne.map(
-          (domain) => html`
-            <details>
-              <summary>
-                <img
-                  src="https://www.google.com/s2/favicons?domain=${domain}&sz=32"
-                  width="16"
-                  height="16"
-                  alt="Favicon for ${domain}"
-                />
-                <span class="domain">${domain}</span>
-                <span class="count"
-                  >${site.outboundLinksByDomain[domain].length}</span
+      ${domainsOfMoreThanOne.map(
+        (domain) => html`
+          <details>
+            <summary>
+              <img
+                src="https://www.google.com/s2/favicons?domain=${domain}&sz=32"
+                width="16"
+                height="16"
+                alt="Favicon for ${domain}"
+              />
+              <span class="domain">${domain}</span>
+              <span class="count"
+                >${site.outboundLinksByDomain[domain].length}</span
+              >
+            </summary>
+            <ol>
+              ${site.outboundLinksByDomain[domain].map(
+                (link) => html` <li><a href="${link}">${link}</a></li> `
+              )}
+            </ol>
+          </details>
+        `
+      )}
+
+      <details>
+        <summary>...all others with only one occurence</summary>
+        <ol>
+          ${domainsOfOnlyOne.map(
+            (d) => html`
+              <li>
+                <a href="${site.outboundLinksByDomain[d][0]}"
+                  >${site.outboundLinksByDomain[d][0]}</a
                 >
-              </summary>
-              <ol>
-                ${site.outboundLinksByDomain[domain].map(
-                  (link) => html` <li><a href="${link}">${link}</a></li> `
-                )}
-              </ol>
-            </details>
-          `
-        )}
+              </li>
+            `
+          )}
+        </ol>
+      </details>
 
-        <details>
-          <summary>...all others with only one occurence</summary>
-          <ol>
-            ${domainsOfOnlyOne.map(
-              (d) => html`
-                <li>
-                  <a href="${site.outboundLinksByDomain[d][0]}"
-                    >${site.outboundLinksByDomain[d][0]}</a
-                  >
-                </li>
-              `
-            )}
-          </ol>
-        </details>
-      </div>
       <style>
         details {
           border: 1px solid transparent;
diff --git a/src/client/archive/index.html.tmpl.js b/src/client/archive/index.html.tmpl.js
index 433b1d28..6a8a3d70 100644
--- a/src/client/archive/index.html.tmpl.js
+++ b/src/client/archive/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../../server/Layouts.js";
+import { Page } from "../../server/Layouts.js";
 import { html } from "../../server/utils.js";
 
 const page = {
@@ -9,7 +9,7 @@ const page = {
 export default function Archive(site) {
   const { postsByYear } = site;
 
-  return PageCustom(
+  return Page(
     { site, page },
     html`
       <h1>Archive</h1>
@@ -46,9 +46,11 @@ export default function Archive(site) {
                 (post) => html`
                   <li>
                     <a href="${post.path}"> ${post.title} </a>
-                    <time datetime="${post.date}">
-                      ${post.date.slice(5, 10)}
-                    </time>
+                    <small
+                      ><time datetime="${post.date}">
+                        ${post.date.slice(5, 10)}
+                      </time></small
+                    >
                   </li>
                 `
               )}
diff --git a/src/client/index.html.tmpl.js b/src/client/index.html.tmpl.js
index 5b6373ee..4baf9b75 100644
--- a/src/client/index.html.tmpl.js
+++ b/src/client/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../server/Layouts.js";
+import { Page } from "../server/Layouts.js";
 import { html, toDateUI } from "../server/utils.js";
 
 const page = {
@@ -14,24 +14,41 @@ export default function Index(site) {
     .sort((a, b) => (a.pageviews > b.pageviews ? -1 : 1))
     .slice(0, 5);
 
-  return PageCustom(
+  return Page(
     { site, page },
     html`
-      <h1>Posts</h1>
-
-      <h2>Latest</h2>
+      <h1>Latest Posts</h1>
       ${PostList(recent)}
       ${trending.length > 0 &&
       html`
-        <h2>Popular This Month</h2>
-        ${PostList(trending, true)}
-        <p style="margin-bottom: 2.5rem; font-size: .8rem">
-          <a
+        <h1>
+          Popular Posts This Month (<a
             href="/2020/using-netlify-analytics-to-build-list-of-popular-posts/"
-            >Stats homebrewed from Netlify Analytics</a
-          >
-        </p>
+            >According to the Data</a
+          >)
+        </h1>
+        ${PostList(trending, true)}
       `}
+      ${
+        /*
+      <h1>Praise For My Blog</h1>
+      <div class="copy">
+        <blockquote>
+          <p>
+            <a href="">Jeremy Keith</a>: “damn, do I enjoy reading [Jim’s] blog.
+            Last year alone, I ended up linking to [his] posts ten different
+            times.”
+          </p>
+        </blockquote>
+        <blockquote>
+          <p>
+            <a href="">Sara Soueidan:</a>: “I, for one, love seeing [Jim’s]
+            posts in my RSS reader.”
+          </p>
+        </blockquote>
+      </div>
+      */ ""
+      }
     `
   );
 }
@@ -43,13 +60,14 @@ function PostList(posts, showPageviews = false) {
         ({ path, title, pageviews, date }) => html`
           <li>
             <a href="${path}">${title}</a>
-            <time datetime="${date}">${toDateUI(date)}</time>
-            ${showPageviews &&
-            html`<small
-              >${pageviews > 1000
-                ? Math.round((pageviews / 1000) * 10) / 10 + "k"
-                : pageviews}</small
-            >`}
+            <small>
+              <time datetime="${date}">${toDateUI(date)}</time>
+              ${showPageviews
+                ? pageviews > 1000
+                  ? Math.round((pageviews / 1000) * 10) / 10 + "k"
+                  : pageviews
+                : ""}
+            </small>
           </li>
         `
       )}
diff --git a/src/client/tags/index.html.tmpl.js b/src/client/tags/index.html.tmpl.js
index d586c4ec..ff1ddb36 100644
--- a/src/client/tags/index.html.tmpl.js
+++ b/src/client/tags/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../../server/Layouts.js";
+import { Page } from "../../server/Layouts.js";
 import { html, toDateUI } from "../../server/utils.js";
 
 const page = {
@@ -25,7 +25,7 @@ export default function Tags(site) {
     .filter((tag) => tag !== "rssClub");
 
   // prettier-ignore
-  return PageCustom({ site, page }, html`
+  return Page({ site, page }, html`
     <h1>Tags <small>(${tags.length})</small></h1>
     <ul class="list-2col">
       ${tags.map(
@@ -48,9 +48,11 @@ export default function Tags(site) {
         ${postsByTag[tag].map(post => html`
           <li class="post-wrapper">
             <a href="${post.path}">${post.title}</a>
-            <time class="date post-date" datetime="${post.date}">
-              ${toDateUI(post.date)}
-            </time>
+            <small>
+              <time class="date post-date" datetime="${post.date}">
+                ${toDateUI(post.date)}
+              </time>
+            </small>
           </li>
         `)}
       </ul>
diff --git a/src/client/tags/readingNotes/index.html.tmpl.js b/src/client/tags/readingNotes/index.html.tmpl.js
index 5e3aa10b..51bb5b28 100644
--- a/src/client/tags/readingNotes/index.html.tmpl.js
+++ b/src/client/tags/readingNotes/index.html.tmpl.js
@@ -1,4 +1,4 @@
-import { PageCustom } from "../../../server/Layouts.js";
+import { Page } from "../../../server/Layouts.js";
 import { html } from "../../../server/utils.js";
 
 const page = {
@@ -8,7 +8,7 @@ const page = {
 
 export default function Tags(site) {
   // prettier-ignore
-  return PageCustom({ site, page }, html`
+  return Page({ site, page }, html`
     <h1>Index of All Reading Notes</h1>
 
       <style>
diff --git a/src/server/Layouts.js b/src/server/Layouts.js
index 11872469..8f540c4e 100644
--- a/src/server/Layouts.js
+++ b/src/server/Layouts.js
@@ -44,6 +44,10 @@ const Layout = (props, children) => {
       label: "About",
       path: "/about/",
     },
+    {
+      label: "RSS",
+      path: "/feed.xml",
+    },
   ];
 
   return (
@@ -76,7 +80,6 @@ const Layout = (props, children) => {
           <style>
             ${[
               "./styles/modern-normalize.css",
-              "./styles/base.css",
               "./styles/styles.css",
               "./styles/atom-one-light.css",
             ]
@@ -110,20 +113,19 @@ const Layout = (props, children) => {
           `}
         </head>
         <body>
-          <!-- Icon Sprite -->
-          ${importFile("./svgs/icons.svg")}
+          ${/* icon sprite importFile("./svgs/icons.svg") */ ""}
 
           <site-nav>
-            <a href="/">Jim Nielsen’s Blog</a>
-            ${nav.map(
-              ({ label, path }) => html`<a href="${path}">${label}</a>`
-            )}
-            <a href="/feed.xml" title="RSS Feed"
-              >${importFile("./svgs/feed-rss.svg")}</a
-            >
-            <a href="/feed.json" title="JSON Feed"
-              >${importFile("./svgs/feed-json.svg")}</a
-            >
+            <nav>
+              ${path === "/"
+                ? `<strong>Jim Nielsen’s Blog</strong>`
+                : `<a href="/"><strong>Jim Nielsen’s Blog</strong></a>`}
+              ${nav.map(({ label, path: navItemPath }) =>
+                navItemPath === path
+                  ? html`<span>${label}</span>`
+                  : html`<a href="${navItemPath}">${label}</a>`
+              )}
+            </nav>
           </site-nav>
 
           <script>
@@ -161,7 +163,7 @@ const Post = (props) => {
   // prettier-ignore
   return Layout(props, html`
     <article class="h-entry">
-      <header>
+      <header class="wrapper">
         <h1 class="p-name">
           ${page.title}
         </h1>
@@ -173,21 +175,14 @@ const Post = (props) => {
         ${page?.tags.includes("rssClub") ? RssClub() : ""}
         ${page.contents.toString()}
       </div>
-      <footer>
+      <footer class="wrapper">
         ${ReplyHtml({ postTags: page.tags, postPath: page.path, siteOrigin: site.origin })}
       </footer>
     </article>
   `);
 };
 
-// prettier-ignore
-const PageCustom = (props, children) => Layout(props, children);
-
-// prettier-ignore
-const Page = (props) => Layout(props, html`
-  <div class="copy">
-    ${props.page.contents.toString()}
-  </div>
-`);
+const Page = (props, children) =>
+  Layout(props, html`<main class="wrapper">${children}</main>`);
 
-export { Post, Page, PageCustom };
+export { Post, Page };
diff --git a/src/server/site-nav.js b/src/server/site-nav.js
index 50f288c5..ef20c5c5 100644
--- a/src/server/site-nav.js
+++ b/src/server/site-nav.js
@@ -4,9 +4,10 @@ const colors = [
   "red",
   "green",
   "yellow",
-  "pink",
+  // "pink",
   "purple",
-  "orange",
+  // "none",
+  // "orange",
   // not supported as UI themes—yet
   // "mint",
   // "teal",
@@ -19,82 +20,66 @@ class SiteNav extends HTMLElement {
   constructor() {
     super();
 
-    let initialColor = localStorage.getItem("theme-color") || "blue";
+    let initialColor = localStorage.getItem("theme-color");
+    if (!colors.includes(initialColor)) {
+      initialColor = "blue";
+    }
     this.setColor(initialColor);
 
-    const links = Array.from(this.children);
-    const homeLink = links.filter((el) => el.getAttribute("href") === "/")[0];
-    const otherLinks = links.filter((el) => el.getAttribute("href") !== "/");
-
-    this.setAttribute("has-js", true);
-
-    this.innerHTML = /*html*/ `
-      <div class="sn-top">
-        ${homeLink.outerHTML}
-        <button aria-label="Menu">
-          <svg class="icon">
-            <use xlink:href="#menu"></use>
-          </svg>
-        </button>
-      </div>
-      <div class="sn-bottom">
-        <div class="sn-bottom-section">
-          <h5>Menu</h5>
-          <ul>
-            ${otherLinks
-              .map(($a) => /*html*/ `<li>${$a.outerHTML}</li>`)
-              .join("")}
-          </ul>
-        </div>
-        <div class="sn-bottom-section">
-          <h5>Theme</h5>
-          <form class="sn-color-picker">
-            ${colors
-              .map(
-                (color) => /*html*/ `
-                <input
-                  id="color-${color}"
-                  type="radio"
-                  name="color"
-                  value="${color}"
-                  ${color === initialColor ? "checked" : ""}
-                >
-                <label
-                  for="color-${color}"
-                  style="background-color: hsl(var(--c-${color}-h) var(--c-${color}-s) var(--c-${color}-l))">
-                  ${color}
-                </label>
-            `
-              )
-              .join("")}
-          </form>
-        </div>
-      </div>
+    this.$form = document.createElement("form");
+    this.$form.innerHTML = /*html*/ `
+        ${colors
+          .map(
+            (color) => /*html*/ `
+            <input
+              id="color-${color}"
+              type="radio"
+              name="color"
+              value="${color}"
+              ${color === initialColor ? "checked" : ""}
+            >
+            <label
+              title="${color}"
+              for="color-${color}"
+              style="background-color: hsl(var(--c-${color}-h) var(--c-${color}-s) var(--c-${color}-l))">
+              ${color}
+            </label>
+        `
+          )
+          .join("")}
     `;
+    this.appendChild(this.$form);
   }
 
   connectedCallback() {
-    const $button = this.querySelector('button[aria-label="Menu"]');
-    const $use = $button.querySelector("svg use");
-    $button.addEventListener("click", (e) => {
-      e.preventDefault();
+    // Handle clicking outside the color picker to collapse it
+    document.documentElement.addEventListener("click", (e) => {
+      if (this.$form.classList.contains("is-expanded")) {
+        this.toggleVisibility();
+      }
+    });
+    // Handle expanding/collapsing the color picker through the <form>
+    this.$form.addEventListener("click", (e) => {
       e.stopPropagation();
-
-      if (this.hasAttribute("open")) {
-        this.removeAttribute("open");
-        $use.setAttribute("xlink:href", "#menu");
-      } else {
-        this.setAttribute("open", true);
-        $use.setAttribute("xlink:href", "#menu-close");
+      // If it's an <input>
+      if (e.target.value) {
+        // If we're setting a new value, set it
+        if (e.target.value !== localStorage.getItem("theme-color")) {
+          const color = e.target.value;
+          this.setColor(color);
+        }
+        // Toggle visibility of options
+        this.toggleVisibility();
       }
     });
+  }
 
-    document
-      .querySelector(".sn-color-picker")
-      .addEventListener("change", (e) => {
-        const color = e.target.value;
-        this.setColor(color);
-      });
+  toggleVisibility() {
+    if (this.$form.classList.contains("is-expanded")) {
+      this.$form.classList.remove("is-expanded");
+    } else {
+      this.$form.classList.add("is-expanded");
+    }
   }
 
   setColor(color) {
diff --git a/src/server/styles/base.css b/src/server/styles/base.css
deleted file mode 100644
index 7212aa87..00000000
--- a/src/server/styles/base.css
+++ /dev/null
@@ -1,269 +0,0 @@
-:root {
-  --border-radius: 10px;
-
-  /* Theme color that gets set by default but is configurable by the user */
-  --c-theme-h: var(--c-blue-h);
-  --c-theme-s: var(--c-blue-s);
-  --c-theme-l: var(--c-blue-l);
-  --c-theme: hsl(var(--c-theme-h) var(--c-theme-s) var(--c-theme-l));
-
-  --c-bg: hsl(var(--c-theme-h) var(--c-theme-s) 100%);
-  --c-fg: hsl(var(--c-theme-h) var(--c-theme-s) 97%);
-  --c-text: hsl(var(--c-theme-h) var(--c-theme-s) 5%);
-
-  /* 
-   * https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
-   * accessible
-   */
-  --c-blue-h: 223;
-  --c-blue-s: 100%;
-  --c-blue-l: 43%;
-  --c-red-h: 354;
-  --c-red-s: 100%;
-  --c-red-l: 42%;
-  --c-green-h: 135;
-  --c-green-s: 59%;
-  --c-green-l: 34%;
-  --c-yellow-h: 27;
-  --c-yellow-s: 100%;
-  --c-yellow-l: 35%;
-  --c-purple-h: 280;
-  --c-purple-s: 43%;
-  --c-purple-l: 47%;
-  --c-pink-h: 343;
-  --c-pink-s: 87%;
-  --c-pink-l: 44%;
-  --c-orange-h: 16;
-  --c-orange-s: 100%;
-  --c-orange-l: 39%;
-
-  /* not supported yet */
-  --c-theme-mint: 177 83% 28%;
-  --c-theme-teal: 189 100% 30%;
-  --c-theme-cyan: 199 100% 32%;
-  --c-theme-indigo: 241 52% 42%;
-  --c-theme-brown: 33 30% 38%;
-}
-
-/* background-color: -apple-system-control-background;
-color: text */
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --c-bg: hsl(var(--c-theme-h) calc(var(--c-theme-s) - 20%) 2%);
-    --c-fg: hsl(var(--c-theme-h) calc(var(--c-theme-s) - 20%) 6%);
-    --c-text: hsl(var(--c-theme-h) var(--c-theme-s) 98%);
-
-    --c-blue-h: 211;
-    --c-blue-s: 100%;
-    --c-blue-l: 63%;
-    --c-red-h: 3;
-    --c-red-s: 100%;
-    --c-red-l: 69%;
-    --c-green-h: 135;
-    --c-green-s: 70%;
-    --c-green-l: 52%;
-    --c-yellow-h: 48;
-    --c-yellow-s: 100%;
-    --c-yellow-l: 57%;
-    --c-purple-h: 280;
-    --c-purple-s: 100%;
-    --c-purple-l: 78%;
-    --c-pink-h: 348;
-    --c-pink-s: 100%;
-    --c-pink-l: 70%;
-    --c-orange-h: 36;
-    --c-orange-s: 100%;
-    --c-orange-l: 63%;
-
-    /* not supported yet */
-    --c-theme-mint: 177 56% 62%;
-    --c-theme-teal: 189 100% 68%;
-    --c-theme-cyan: 197 100% 72%;
-    --c-theme-indigo: 241 100% 72%;
-    --c-theme-brown: 34 34% 56%;
-  }
-}
-
-*,
-*:before,
-*:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-html {
-  color-scheme: light dark;
-  font-size: 19px;
-  line-height: 1.5;
-  background: var(--c-bg);
-  color: var(--c-text);
-  /* this comes in normalize
-  font-family: 
-    ui-sans-serif, 
-    system-ui, 
-    -system-ui, 
-    -apple-system,
-    BlinkMacSystemFont,
-    Roboto, Helvetica, Arial, 
-    sans-serif, 
-    "Apple Color Emoji"; */
-}
-
-@media screen and (min-width: 700px) {
-  html {
-    font-size: 22px; /* 24 originally */
-  }
-}
-
-/* ==========================================================================
-   Links
-   ========================================================================== */
-
-a {
-  text-decoration: none;
-  color: var(--c-theme);
-}
-
-a:hover {
-  text-decoration: underline;
-  filter: brightness(115%) saturate(1.15);
-}
-
-a:active {
-  filter: brightness(50%);
-}
-
-.copy a {
-  text-decoration: underline;
-}
-
-/* Styles for footnotes */
-.copy a[href^="#fn"] {
-  text-decoration: none;
-}
-.copy a[href^="#fnref"] {
-  font-family: sans-serif; /* keep the backlink from displaying as an emoji */
-}
-.footnotes {
-  font-size: 0.91rem;
-}
-
-/* ==========================================================================
-   Images & Video
-   ========================================================================== */
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* ==========================================================================
-   Typography
-   ========================================================================== */
-
-h1,
-h2,
-h3,
-h4 {
-  line-height: 1.1;
-  margin-top: 1rem;
-  margin-bottom: 0.66666666em;
-
-  /* Long headlines that are 1 word
-     https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -ms-word-break: break-all;
-}
-
-h1 {
-  font-size: 2.5rem; /* 60px */
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2rem; /* 48px */
-  font-weight: 600;
-}
-
-h3 {
-  font-size: 1.5rem; /* 36px */
-  font-weight: 500;
-}
-
-h4 {
-  font-size: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.01rem;
-  font-weight: 700;
-}
-
-/* ==========================================================================
-   Misc. Elements
-   ========================================================================== */
-
-blockquote {
-  border-left: 1px solid;
-  padding-left: 1em;
-  margin-left: 0;
-  font-style: italic;
-}
-
-blockquote em,
-blockquote code {
-  font-style: normal;
-}
-
-pre {
-  max-width: 100%;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  margin-top: 1.618rem;
-  margin-bottom: 1.618rem;
-  font-size: 0.9rem;
-}
-
-hr {
-  border: 0;
-  border-bottom: 1px solid;
-  width: 80%;
-  max-width: 400px !important;
-  margin: 1.618rem 0;
-}
-
-/* ==========================================================================
-   Tables
-   ========================================================================== */
-table {
-  max-width: none;
-  display: block;
-  overflow: auto;
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  font-size: 0.85em;
-}
-
-table th {
-  text-align: left;
-}
-
-table thead {
-  border-top: 1px solid;
-  border-bottom: 1px solid;
-}
-table tbody {
-  border-bottom: 1px solid;
-}
-
-table tbody tr:nth-child(2n + 1) {
-  background-color: var(--c-bg-sidebar);
-}
-
-table th,
-table td {
-  padding: 0.325em 1em;
-}
diff --git a/src/server/styles/styles.css b/src/server/styles/styles.css
index 5f6278bd..ae1b915c 100644
--- a/src/server/styles/styles.css
+++ b/src/server/styles/styles.css
@@ -1,195 +1,294 @@
-body {
-  margin: 1.618rem calc(1.618 * 2rem);
-}
+/* =============================================================================
+   Variables
+   ========================================================================== */
 
-@media screen and (max-width: 650px) {
-  body {
-    margin: calc(1.618rem / 2);
-    margin-bottom: calc(1.618rem * 3);
+:root {
+  --border-radius: 10px;
+
+  /* Theme color that gets set by default but is configurable by the user */
+  --c-theme-h: var(--c-blue-h);
+  --c-theme-s: var(--c-blue-s);
+  --c-theme-l: var(--c-blue-l);
+  --c-theme: hsl(var(--c-theme-h) var(--c-theme-s) var(--c-theme-l));
+
+  --c-bg: hsl(var(--c-theme-h) var(--c-theme-s) 99%);
+  --c-fg: hsl(var(--c-theme-h) var(--c-theme-s) 97%);
+  --c-text: hsl(var(--c-theme-h) var(--c-theme-s) 8%);
+
+  /* 
+   * https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
+   * accessible
+   */
+  --c-blue-h: 223;
+  --c-blue-s: 100%;
+  --c-blue-l: 43%;
+  --c-red-h: 354;
+  --c-red-s: 100%;
+  --c-red-l: 42%;
+  --c-green-h: 135;
+  --c-green-s: 59%;
+  --c-green-l: 34%;
+  --c-yellow-h: 27;
+  --c-yellow-s: 100%;
+  --c-yellow-l: 35%;
+  --c-purple-h: 280;
+  --c-purple-s: 43%;
+  --c-purple-l: 47%;
+  --c-pink-h: 343;
+  --c-pink-s: 87%;
+  --c-pink-l: 44%;
+
+  /* not supported yet */
+  --c-orange-h: 16;
+  --c-orange-s: 100%;
+  --c-orange-l: 39%;
+  --c-theme-mint: 177 83% 28%;
+  --c-theme-teal: 189 100% 30%;
+  --c-theme-cyan: 199 100% 32%;
+  --c-theme-indigo: 241 52% 42%;
+  --c-theme-brown: 33 30% 38%;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --c-bg: hsl(var(--c-theme-h) calc(var(--c-theme-s) - 20%) 2%);
+    --c-fg: hsl(var(--c-theme-h) calc(var(--c-theme-s) - 20%) 6%);
+    --c-text: hsl(var(--c-theme-h) var(--c-theme-s) 98%);
+
+    --c-blue-h: 211;
+    --c-blue-s: 100%;
+    --c-blue-l: 63%;
+    --c-red-h: 3;
+    --c-red-s: 100%;
+    --c-red-l: 69%;
+    --c-green-h: 135;
+    --c-green-s: 70%;
+    --c-green-l: 52%;
+    --c-yellow-h: 48;
+    --c-yellow-s: 100%;
+    --c-yellow-l: 57%;
+    --c-purple-h: 280;
+    --c-purple-s: 100%;
+    --c-purple-l: 78%;
+    --c-pink-h: 348;
+    --c-pink-s: 100%;
+    --c-pink-l: 70%;
+
+    /* not supported yet */
+    --c-orange-h: 36;
+    --c-orange-s: 100%;
+    --c-orange-l: 63%;
+    --c-theme-mint: 177 56% 62%;
+    --c-theme-teal: 189 100% 68%;
+    --c-theme-cyan: 197 100% 72%;
+    --c-theme-indigo: 241 100% 72%;
+    --c-theme-brown: 34 34% 56%;
   }
 }
 
 /* =============================================================================
-   Primary Site Navigation
+   Base styles
    ========================================================================== */
+*,
+*:before,
+*:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
 
-/* When there's no JS */
-site-nav {
-  display: flex;
-  align-items: center;
-  gap: calc(1.618rem / 4);
+html {
+  color-scheme: light dark;
+  font-size: 18px;
+  line-height: 1.618;
+  background: var(--c-bg);
+  color: var(--c-text);
 }
 
-site-nav a[href="/"] {
-  margin-right: calc(1.618rem / 2);
+/* Links
+   ========================================================================== */
+
+a {
+  text-decoration: none;
+  color: var(--c-theme);
 }
 
-site-nav svg {
-  fill: var(--c-theme);
+a:hover {
+  text-decoration: underline;
+  filter: brightness(115%) saturate(1.15);
 }
 
-site-nav[has-js] {
-  align-items: flex-start;
-  flex-direction: column;
+a:active {
+  filter: brightness(50%);
 }
 
-.sn-top {
-  display: flex;
-  align-items: center;
+/* Images & Video
+   ========================================================================== */
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
 }
 
-@media screen and (max-width: 599px) {
-  .sn-top {
-    width: 100%;
-    justify-content: space-between;
-  }
+/* Typography
+   ========================================================================== */
+
+h1,
+h2,
+h3,
+h4 {
+  line-height: 1.3;
+
+  /* Long headlines that are 1 word
+     https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
 }
 
-.sn-bottom {
-  display: none;
-  padding: calc(1.618rem / 2);
-  background: var(--c-fg);
-  gap: calc(1.618rem / 2);
-  flex-wrap: wrap;
-  margin-left: calc(1.618rem / -2);
-  padding-left: calc(1.618rem / 2);
-  width: calc(100% + calc(1.618rem / 1));
+h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
 }
-site-nav[has-js][open] .sn-bottom {
-  display: flex;
+
+h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
 }
 
-@media screen and (min-width: 600px) {
-  .sn-bottom {
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-    gap: 1.618rem;
-    flex-wrap: nowrap;
-    margin-left: calc(1.618rem * -2);
-    padding-left: calc(1.618rem * 2);
-    padding-right: calc(1.618rem * 2);
-    width: auto;
-  }
+h3 {
+  font-size: 1.125rem;
+  font-weight: 700;
 }
-@media screen and (min-width: 960px) {
-  .sn-bottom-section {
-    display: flex;
-    flex-wrap: wrap;
-  }
+
+h4 {
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.01rem;
+  font-weight: 700;
 }
 
-/* Site Navigation
+/* Misc. Elements
    ========================================================================== */
 
-site-nav[has-js] ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  gap: calc(1.618rem / 2);
+blockquote {
+  padding-left: 1.618rem;
+  margin-left: 0;
+  font-style: italic;
 }
 
-site-nav button {
-  background: transparent;
-  border: none;
-  margin: 0;
-  padding: 0;
-  color: var(--c-theme);
-  border-radius: var(--border-radius);
-  display: flex;
-  align-items: center;
-  padding: calc(1.618rem / 6);
+blockquote em,
+blockquote code {
+  font-style: normal;
 }
 
-site-nav button:hover {
-  background: var(--c-fg);
+pre {
+  font-size: 0.9rem;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  background: rgba(0, 0, 0, 0.0333);
 }
 
-site-nav ul li {
-  display: flex;
-  align-items: center;
+@media screen and (prefers-color-scheme: dark) {
+  pre {
+    background: rgba(255, 255, 255, 0.0333);
+  }
 }
 
-site-nav ul a {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  position: relative;
+hr {
+  border: 0;
+  border-bottom: 1px solid;
+  width: 80%;
+  max-width: 400px !important;
+  margin: 1.618rem 0;
 }
 
-site-nav[has-js] h5 {
-  font-size: 1rem;
-  margin: 0 calc(1.618rem / 4) 0 0;
-}
+/* Tables
+   ========================================================================== */
 
-site-nav[has-js] h5:after {
-  content: ":";
+table {
+  max-width: none;
+  display: block;
+  overflow: auto;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: 0.85em;
 }
 
-.sn-color-picker {
-  display: flex;
-  align-items: center;
-  gap: calc(1.618rem / 2);
-  position: relative;
-  top: 2px;
+table th {
+  text-align: left;
 }
 
-.sn-color-picker input {
-  display: none;
+table thead {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
 }
-
-.sn-color-picker label {
-  width: 24px;
-  height: 24px;
-  border: 3px solid var(--c-fg);
-  display: block;
-  text-indent: -9999px;
-  border-radius: 50%;
+table tbody {
+  border-bottom: 1px solid;
 }
 
-.sn-color-picker input:checked + label {
-  box-shadow: 0 0 0 2px var(--c-theme);
+table tbody tr:nth-child(2n + 1) {
+  background-color: var(--c-bg-sidebar);
 }
 
-@media screen and (min-width: 600px) {
-  .sn-color-picker {
-    gap: calc(1.618rem / 4);
-  }
-  .sn-color-picker label {
-    width: 21px;
-    height: 21px;
-    border-width: 2px;
-  }
+table th,
+table td {
+  padding: 0.325em 1em;
 }
 
 /* =============================================================================
-   Article Header
+   Layout
    ========================================================================== */
 
-article header h1 {
-  max-width: 45rem;
-  margin-bottom: calc(1.618rem / 4);
+.copy > *:not(.image-container):not(pre),
+.wrapper {
+  max-width: 36rem;
+  margin-left: calc(1.618rem / 2);
+  margin-right: calc(1.618rem / 2);
 }
 
-article header time {
-  opacity: 0.625;
-  display: block;
+@media screen and (min-width: 42rem) {
+  .copy > *:not(.image-container):not(pre),
+  .wrapper {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+pre {
+  /* 36rem + 3rem on either side = 42rem */
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
+  padding: calc(1.618rem / 2);
+  border-radius: 0px;
+}
+
+@media screen and (min-width: 42rem) {
+  pre {
+    padding: 2rem 3rem;
+    border-radius: 10px;
+  }
 }
 
 /* =============================================================================
    Copy
    ========================================================================== */
 
-.copy > *:not(table):not(pre) {
-  max-width: 32rem;
-  display: block;
-}
-.copy > p code {
+.copy > p code,
+.copy > ul code {
   word-wrap: break-word;
 }
+
 .copy .image-container {
   max-width: 1200px;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
 }
+
 .copy .image-container span {
   font-size: 0.75rem;
   font-style: italic;
@@ -198,6 +297,160 @@ article header time {
   display: block;
 }
 
+/* Article Header
+   ========================================================================== */
+
+article header {
+  display: flex;
+  flex-direction: column;
+}
+
+article header h1 {
+  order: 2;
+}
+
+article header time {
+  opacity: 0.5;
+  display: block;
+}
+
+/* Links
+   ========================================================================== */
+
+footer a,
+.copy a {
+  text-decoration: underline;
+}
+
+.copy a[href^="#fn"] {
+  text-decoration: none;
+}
+.copy a[href^="#fnref"] {
+  font-family: sans-serif; /* keep the backlink from displaying as an emoji */
+}
+.footnotes {
+  font-size: 0.91rem;
+}
+
+/* =============================================================================
+   Primary Site Navigation
+   ========================================================================== */
+
+site-nav {
+  max-width: 36rem;
+  display: flex;
+  gap: calc(1.618rem / 4);
+  margin-left: calc(1.618rem / 2);
+  margin-right: calc(1.618rem / 2);
+}
+
+site-nav nav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: calc(1.618rem / 2);
+}
+
+@media screen and (max-width: 42rem) {
+  site-nav {
+    flex-direction: column;
+    margin-top: calc(1.618rem * 1);
+    margin-bottom: calc(1.618rem * 2);
+    align-items: flex-end;
+  }
+  site-nav nav {
+    gap: calc(1.618rem / 4) calc(1.618rem / 2);
+  }
+  site-nav nav > :first-child {
+    flex-basis: 100%;
+    text-align: right;
+  }
+}
+
+@media screen and (min-width: 42rem) {
+  site-nav {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: calc(1.618rem * 1.5);
+    margin-bottom: calc(1.618rem * 3);
+    margin-left: auto;
+    margin-right: auto;
+  }
+  site-nav nav {
+    justify-content: flex-end;
+  }
+  site-nav form {
+    justify-content: center;
+  }
+}
+
+/* Form color picker
+   ========================================================================== */
+
+site-nav form {
+  display: flex;
+  align-items: center;
+}
+
+site-nav form input {
+  display: none;
+}
+
+site-nav form label {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--c-bg);
+  display: block;
+  text-indent: -9999px;
+  border-radius: 50%;
+  display: none;
+}
+
+site-nav form input:checked + label {
+  order: 1;
+  box-shadow: 0 0 0 2px var(--c-theme);
+  display: inline;
+}
+
+site-nav form.is-expanded label {
+  display: inline;
+}
+
+@media screen and (max-width: 42rem) {
+  site-nav {
+    position: relative;
+  }
+  site-nav form {
+    position: absolute;
+    left: 0;
+    flex-direction: row;
+    justify-content: space-between;
+    top: 0;
+    padding: 0 calc(1.618rem / 2);
+    background: var(--c-bg);
+    height: 100%;
+  }
+  site-nav form.is-expanded {
+    width: 100%;
+  }
+  site-nav form label {
+    order: 2;
+  }
+}
+
+@media screen and (min-width: 42rem) {
+  site-nav form {
+    gap: calc(1.618rem / 2);
+  }
+  site-nav form label {
+    width: 21px;
+    height: 21px;
+    border-width: 2px;
+  }
+}
+
 /* =============================================================================
    General
    ========================================================================== */
@@ -214,43 +467,47 @@ article header time {
 
 .posts-list li {
   margin-bottom: calc(1.618rem / 2);
+  display: flex;
+  flex-direction: column;
 }
 
-.posts-list li a {
-  display: block;
+.posts-list small {
+  opacity: 0.5;
+  font-size: 0.7rem;
+  display: flex;
+  gap: calc(1.618rem / 2);
 }
 
 .posts-list time {
   font-variant-numeric: tabular-nums;
-  font-size: 0.7rem;
-  opacity: 0.5; /* @TODO change to gray */
   white-space: nowrap;
 }
 
+.posts-list li a {
+  order: 2;
+}
 .posts-list small {
-  padding: 0 0.5em;
-  font-size: 0.6em;
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-  margin-left: 0.5em;
-  order: 3;
-  opacity: 0.5; /* @TODO gray? matches <time> */
-  align-self: center;
-  white-space: nowrap;
+  order: 1;
 }
 
 @media screen and (min-width: 520px) {
   .posts-list li {
     margin-bottom: calc(1.618rem / 4);
     display: flex;
+    justify-content: space-between;
     align-items: baseline;
+    gap: calc(1.618rem / 2);
+    flex-direction: row;
   }
   .posts-list li a {
-    order: 2;
+    order: 1;
+    flex-grow: 1;
   }
   .posts-list time {
-    order: 1;
-    margin-right: calc(1.618rem / 2);
+    order: 3;
+  }
+  .posts-list small {
+    order: 2;
   }
 }
 
@@ -290,15 +547,6 @@ article header time {
   color: var(--color-text-light);
 }
 
-/* =============================================================================
-   SVG Icons
-   ========================================================================== */
-
-.icon {
-  width: 24px;
-  height: 24px;
-}
-
 /* =============================================================================
    Other
    ========================================================================== */
@@ -309,3 +557,7 @@ article header time {
     max-width: 40rem;
   }
 }
+
+footer {
+  margin-bottom: calc(1.618rem * 2);
+}