Default to the system UI

site/index.md

@@ -1,13 +1,12 @@
 <eval-ruby>Includable::PAGE_DEFAULTS</eval-ruby>
 
-# 👨‍💻 danott.website
+# Hello!
 
-Hello! 
 I'm Dan Ott. 
 This is my website. 
-That's why I am hosting it at `danott.website`.
+It is hosted at `danott.website`.
 You can subscribe to [Dan Ott's Website RSS Feed](/feed.xml).
-Here's a list of posts I've written in reverse chronological order.
+Here's a list of things I've written in reverse chronological order.
 
 <eval-ruby>
   Includable::Index.new

site/javascripts/script.js

@@ -1,3 +1,23 @@
 /* @format */
 
-console.log("Hello World!");
+var availableFontStacks = [
+  "var(--font-system)",
+  "var(--font-transitional)",
+  "var(--font-old-style)",
+  "var(--font-humanist)",
+  "var(--font-geometric-humanist)",
+  "var(--font-classical-humanist)",
+  "var(--font-neo-grotesque)",
+  "var(--font-monospace-slab-serif)",
+  "var(--font-monospace-code)",
+  "var(--font-industrial)",
+  "var(--font-rounded-sans)",
+  "var(--font-slab-serif)",
+  "var(--font-antique)",
+  "var(--font-didone)",
+  "var(--font-handwritten)",
+];
+
+function applyFontStack(fontStack) {
+  document.body.style.fontFamily = fontStack;
+}

site/stylesheets/style.css

@@ -95,7 +95,8 @@ textarea:not([rows]) {
 /* Begin my styles */
 
 :root {
-  font-size: 100%;
+  --font-size: 112.5%;
+  --text-max-width: 60ch;
 
   /* Modern Font Stacks https://github.com/system-fonts/modern-font-stacks */
   --font-system: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -150,25 +151,27 @@ textarea:not([rows]) {
 }
 
 @media (min-width: 40rem) {
-  :root {
-    font-size: 140%;
+  body {
+    --font-size: 125%;
   }
 }
 
 html {
   color-scheme: light dark;
-  font-family: var(--font-rounded-sans);
-  font-size: var(--font-size);
   scroll-behavior: smooth;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
 }
 
 body {
+  font-family: var(--font-system);
+  font-size: var(--font-size);
   line-height: 1.6;
+
   margin: 0 auto;
-  max-width: 32rem;
+  max-width: var(--text-max-width);
   padding: 4rem 1rem;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 h1 {