dark mode only

assets/fonts/ftaurebesh/ftaurebesh.css

@@ -14,3 +14,10 @@
   src: url("/fonts/ftaurebesh/ftaurebesh-bold.woff2") format("woff2");
   size-adjust: 125%;
 }
+[data-language="aurebesh"] {
+  font-family: FTAurebesh;
+  line-height: 1.25;
+  ul:not(.collection) > li {
+    list-style-type: square;
+  }
+}

assets/scripts/effects.js

@@ -1,10 +1,6 @@
 "use strict";
 
 const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-const defaultPrefs = {
-  language: "english",
-  theme: "auto",
-};
 
 document.querySelector('script[data-website-id]').addEventListener('load', () => {
   try {
@@ -12,26 +8,6 @@ document.querySelector('script[data-website-id]').addEventListener('load', () =>
   } catch {}
 });
 
-function applyPreference(key, value, shouldSave) {
-  if (umami !== null) {
-    umami.identify({
-      [`pref-${key}`]: value,
-    });
-    if (shouldSave) {
-      umami.track(`Set ${key} to ${value}`);
-    }
-  }
-  document.body.setAttribute(`data-${key}`, value);
-  document.querySelectorAll(`input[name=${key}]`).forEach((input) => {
-    if (input.value === value) {
-      input.checked = true;
-    }
-  });
-  if (shouldSave) {
-    localStorage.setItem(key, value);
-  }
-}
-
 /** @param {Event} evt */
 function removeEffect({ target }) {
   const effectsLayer = document.querySelector("#effects");
@@ -87,15 +63,6 @@ function addEffect({ target }) {
   });
 }
 
-Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
-  const currentPref = localStorage.getItem(key) ?? defaultPref;
-  applyPreference(key, currentPref, false);
-  document.querySelectorAll(`input[name=${key}]`).forEach((input) => {
-    input.addEventListener("change", (e) => {
-      applyPreference(key, e.currentTarget.value, true);
-    });
-  });
-});
 document.addEventListener("mouseenter", addEffect, true);
 document.addEventListener("focus", addEffect, true);
 

site/_includes/-header.njk

@@ -3,17 +3,6 @@
   <nav>
     <div class="nav-row">
       <div class="nav-home"><a href="{{ "/" | url }}">{{ site.title }}</a></div>
-      <div class="nav-settings">
-        <div class="nav-toggles">
-          <label class="nav-toggle-button" title="Light mode">☀️<input type="radio" name="theme" value="light"/></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>
-        </div>
-        <div class="nav-toggles">
-          <label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
-          <label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
-        </div>
-      </div>
     </div>
     <div class="nav-categories">
       <a class="{{ 'nav-active' if '/posts' in page.url }}" href="{{ "/posts/" | url }}">/posts</a>

site/_includes/css/site.css

@@ -12,19 +12,16 @@
 }
 
 body {
-  --c-highlight: oklch(100% 0 0 / 0.875);
+  --c-highlight: oklch(45% 0.135 280 / 0.7);
-  --c-accent: white;
+  --c-accent: oklch(45% 0.135 280 / 0.8);
-  --c-dark: oklch(32.1% 0.022 259.9);
+  --c-body-background: oklch(15% 0.05 262);
-  --c-body-background: oklch(87.5% 0 338);
+  --c-bg1: oklch(15% 0.05 290);
-  --c-bg1: oklch(87.5% 0.04 285);
+  --c-bg2: oklch(15% 0.05 188);
-  --c-bg2: oklch(87.5% 0.04 160);
+  --c-dark: oklch(19.1% 0.005 259.9);
-  --c-text-background-light: oklch(96.2% 0 0 / 0.6);
+  --c-text-background-light: oklch(45% 0.135 280 / 0.3);
-
+  --c-text-light: oklch(94% 0.045 107.2);
-  --c-text-light: var(--c-highlight);
+  --c-text-dark: oklch(94% 0.045 107.2);
-  --c-text-dark: var(--c-dark);
+  --tag-luminance: 0.85;
-  --c-text-dim: color-mix(in lch, var(--c-text-dark), transparent 50%);
-
-  --tag-luminance: 0.4;
 
   --ratio: 1.333;
   --s-5: calc(var(--s-4) / var(--ratio));
@@ -68,40 +65,6 @@ body {
     );
 }
 
-body[data-theme="dark"] {
-  background-color: var(--c-body-background);
-}
-[data-theme="dark"] {
-  --c-highlight: oklch(45% 0.135 280 / 0.7);
-  --c-accent: oklch(45% 0.135 280 / 0.8);
-  --c-body-background: oklch(15% 0.05 262);
-  --c-bg1: oklch(15% 0.05 290);
-  --c-bg2: oklch(15% 0.05 188);
-  --c-dark: oklch(19.1% 0.005 259.9);
-  --c-text-background-light: oklch(45% 0.135 280 / 0.3);
-  --c-text-light: oklch(94% 0.045 107.2);
-  --c-text-dark: oklch(94% 0.045 107.2);
-  --tag-luminance: 0.85;
-}
-
-@media (prefers-color-scheme: dark) {
-  body[data-theme="auto"] {
-    background-color: var(--c-body-background);
-  }
-  [data-theme="auto"] {
-    --c-highlight: oklch(45% 0.135 280 / 0.7);
-    --c-accent: oklch(45% 0.135 280 / 0.8);
-    --c-body-background: oklch(15% 0.05 262);
-    --c-bg1: oklch(15% 0.05 290);
-    --c-bg2: oklch(15% 0.05 188);
-    --c-dark: oklch(19.1% 0.005 259.9);
-    --c-text-background-light: oklch(45% 0.135 280 / 0.3);
-    --c-text-light: oklch(94% 0.045 107.2);
-    --c-text-dark: oklch(94% 0.045 107.2);
-    --tag-luminance: 0.85;
-  }
-}
-
 ::selection {
   background: var(--c-highlight);
   color: var(--c-text-dark);
@@ -486,17 +449,6 @@ footer section {
   }
 }
 
-[data-language="aurebesh"] {
-  font-family: FTAurebesh;
-  line-height: 1.25;
-  ul:not(.collection) > li {
-    list-style-type: square;
-  }
-}
-[data-language="english"] {
-  font-family: Inter;
-}
-
 h1,
 h2,
 h3,

site/css.njk

@@ -3,4 +3,3 @@ permalink: /site.css
 ---
 {%include "css/site.css"%}
 {%include "css/prism.css"%}
-{%include "css/ftaurebesh.css"%}

site/posts/2024-06-05-redesign.md

@@ -4,7 +4,7 @@ description: New look, simpler tech.
 tags:
   - technical
 ---
-
+<style>@import url('/fonts/ftaurebesh/ftaurebesh.css');</style>
 New design! The tools I used before have a lot of unmaintained or outdated dependencies and I wanted something a little simpler. The new site uses [pnpm](https://pnpm.io/), [11ty](https://www.11ty.dev/), and [Nunjucks](https://mozilla.github.io/nunjucks/). Content is still in [markdown](https://daringfireball.net/projects/markdown/).
 
 One thing I'm proud of is a visual ping for footnotes.^[It highlights when you click back, too.] When you click a footnote^[Hi.] it briefly highlights the thing you jumped to.