add analytics

assets/site.css

@@ -17,7 +17,6 @@ body {
   --c-highlight: hsl(0 0% 100% / 87.5%);
   --c-dark: hsl(217 17% 21%);
   --c-accent: white;
-  /* --c-accent: hsl(14 62% 53%); */
   --c-body-background: hsl(0 0% 85%);
   --c-text-background-light: hsl(0 0% 95% / 60%);
 
@@ -107,6 +106,9 @@ a {
 a[href] {
   text-decoration-line: underline;
   box-decoration-break: clone;
+  padding: 0.1em;
+  margin: -0.1em;
+  position: relative;
 }
 a[href]:hover,
 a[href]:focus-visible,
@@ -116,7 +118,7 @@ nav label:has(input:focus-visible),
 .nav-toggle-button:has(input[type="radio"]:checked) {
   background-color: var(--c-accent);
   text-decoration: none;
-  box-shadow: 0 0 0 0.2rem var(--c-accent);
+  border-radius: 0.5rem;
 }
 
 main p img {
@@ -218,25 +220,39 @@ sup {
 
 body > header {
   color: var(--c-text-dark);
-  padding: 0 var(--inset) 0.5rem;
+  padding: 0 var(--inset) 0;
   border-radius: 0.5rem 0.5rem 0 0;
-  margin-bottom: 0.5rem;
 }
 body > header > nav {
   display: flex;
   flex-direction: row;
   align-items: baseline;
   flex-wrap: wrap;
-  gap: 1ch;
+  justify-content: end;
+  gap: 1rem;
+  margin: 0.5rem 0 3rem;
 }
-.nav-categories > a {
+.nav-categories {
-  white-space: nowrap;
+  display: flex;
-  & + a {
+  flex-direction: row;
-    margin-left: 0.5em;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-right: auto;
+  & > a {
+    white-space: nowrap;
+    display: inline-block;
   }
 }
+.nav-settings {
+  display: flex;
+  gap: 0.5em;
+  flex-direction: row;
+  justify-content: end;
+  flex-wrap: wrap;
+}
 .nav-toggles {
-  margin-left: auto;
+  display: flex;
+  flex-direction: row;
   font-size: var(--s-1);
 }
 @media print {
@@ -271,37 +287,37 @@ body > header > nav {
 }
 
 body > footer {
-  text-align: center;
+  text-align: right;
   font-size: var(--s-1);
-  margin: auto var(--inset) 0 auto;
+  margin: auto var(--inset) 0.5rem;
   padding-top: 4rem;
-}
+  & a {
-
+    white-space: nowrap;
-.header-meta {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  font-size: var(--s-1);
-  > * + *::before {
-    content: "-";
-    padding: 0 0.5ch;
   }
 }
 
-nav label {
+.nav-toggle-button {
   cursor: pointer;
   text-decoration-line: underline;
+  display: inline-block;
+  border-radius: 0;
+  padding: 0.1rem 0.25rem;
+  margin: 0;
+  border-radius: 0 !important;
+  background-color: var(--c-text-background-light);
   > input[type="radio"] {
     visibility: hidden;
     position: fixed;
     bottom: 110%;
   }
-}
+  &:first-of-type {
-.nav-toggle-button {
+    border-top-left-radius: 0.5rem !important;
-  margin-left: 0.5ch;
+    border-bottom-left-radius: 0.5rem !important;
-  margin-right: 0.5ch;
+  }
-  position: relative;
+  &:last-of-type {
-  z-index: 0;
+    border-top-right-radius: 0.5rem !important;
+    border-bottom-right-radius: 0.5rem !important;
+  }
 }
 
 [data-language="aurebesh"] {
@@ -322,6 +338,8 @@ h4 {
   position: relative;
   font-weight: 700;
   text-shadow: 0 0 0.5em var(--c-highlight);
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
   &:hover .header-anchor {
     opacity: 1;
   }
@@ -343,6 +361,21 @@ h4 {
     );
   }
 }
+h1 {
+  margin-bottom: 0;
+}
+.header-meta {
+  margin-bottom: calc(0.75 * var(--s3));
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-size: var(--s-1);
+  > * + *::before {
+    content: "-";
+    padding: 0 0.5ch;
+  }
+}
+
 main {
   h1,
   h2,
@@ -362,7 +395,7 @@ h2 {
 h3 {
   font-size: var(--s1);
 }
-.header-anchor {
+a.header-anchor {
   position: absolute;
   transform: translateX(-100%);
   margin-left: -0.2ch;

site/_includes/-header.njk

@@ -8,40 +8,43 @@
       <a href="{{ "/music" | url }}">/music</a>
       <a href="{{ "/books" | url }}">/books</a>
     </div>
-    <div class="nav-toggles">
+    <div class="nav-settings">
-      <label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></label>
+      <div class="nav-toggles">
-      <label class="nav-toggle-button" title="Automatic">🔄<input type="radio" name="theme" value="auto"/></label>
+        <label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></label>
-      <label class="nav-toggle-button" title="Dark mode">🌒<input type="radio" name="theme" value="dark"/></label>
+        <label class="nav-toggle-button" title="Automatic">🔄<input type="radio" name="theme" value="auto"/></label>
-      /
+        <label class="nav-toggle-button" title="Dark mode">🌒<input type="radio" name="theme" value="dark"/></label>
-      <label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
+      </div>
-      <label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
+      <div class="nav-toggles">
-      <script type="text/javascript">
+        <label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
-        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        <label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
-        const defaultPrefs = {
+        <script type="text/javascript">
-          language: 'english',
+          const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-          theme: 'auto'
+          const defaultPrefs = {
-        };
+            language: 'english',
-        Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
+            theme: 'auto'
-          const currentPref = localStorage.getItem(key) ?? defaultPref;
+          };
-          applyPreference(key, currentPref, false)
+          Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
-          document.querySelectorAll(`input[name=${key}]`).forEach(input => {
+            const currentPref = localStorage.getItem(key) ?? defaultPref;
-            input.addEventListener('change', (e) => {
+            applyPreference(key, currentPref, false)
-              applyPreference(key, e.currentTarget.value, true);
+            document.querySelectorAll(`input[name=${key}]`).forEach(input => {
+              input.addEventListener('change', (e) => {
+                applyPreference(key, e.currentTarget.value, true);
+              })
             })
-          })
+          });
-        });
+          function applyPreference(key, value, shouldSave) {
-        function applyPreference(key, value, shouldSave) {
+            document.body.setAttribute(`data-${key}`, value);
-          document.body.setAttribute(`data-${key}`, value);
+            document.querySelectorAll(`input[name=${key}]`).forEach(input => {
-          document.querySelectorAll(`input[name=${key}]`).forEach(input => {
+              if (input.value === value) {
-            if (input.value === value) {
+                input.checked = true;
-              input.checked = true;
+              }
+            })
+            if (shouldSave) {
+              localStorage.setItem(key, value);
             }
-          })
-          if (shouldSave) {
-            localStorage.setItem(key, value);
           }
-        }
+        </script>
-      </script>
+      </div>
     </div>
   </nav>
   <h1>{{ tag | capitalize if tag else title }}</h1>

site/_includes/base.njk

@@ -22,6 +22,7 @@ title: Joshua's Homepage
     {% endif %}
     <meta name="twitter:card" content="summary" />
     <meta name="generator" content="{{ eleventy.generator }}">
+    <script defer src="https://stats.apps.seigler.net/script.js" data-website-id="d44724fa-5fcf-486e-bfb1-5846591cc554"></script>
   </head>
   <body data-font="english" data-path="{{page.url}}">
     {% include "-header.njk" %}
@@ -33,8 +34,6 @@ title: Joshua's Homepage
   <script>
     function setScrollAmount() {
       const body = document.documentElement || document.body;
-      const scrolledFraction =
-        body.scrollTop / (body.scrollHeight - body.clientHeight);
       body.style.setProperty("--scrollLengthPx", body.scrollTop);
     }
     setScrollAmount();