✨ Add CSS customiser experiment

querkmachine · querkmachine · commit e441951bd544 · 2025-10-12T20:59:25.000+01:00
diff --git a/src/_data/site.js b/src/_data/site.js
@@ -78,10 +78,6 @@ export default function () {
       },
     ],
     legalLinks: [
-      { href: "/brand/", text: "beeps' brand" },
-      { href: "/colophon/", text: "Colophon" },
-      { href: "/accessibility/", text: "Accessibility statement" },
-      { href: "/privacy/", text: "Cookies and privacy" },
       {
         href: "/feed.xml",
         text: "RSS feed",
@@ -91,6 +87,11 @@ export default function () {
           type: "application/atom+xml",
         },
       },
+      { href: "/brand/", text: "beeps' brand" },
+      { href: "/colophon/", text: "Colophon" },
+      { href: "/accessibility/", text: "Accessibility statement" },
+      { href: "/privacy/", text: "Cookies and privacy" },
+      { href: "/customise/", text: "Customise CSS" },
     ],
   };
 }
diff --git a/src/_layouts/layout.njk b/src/_layouts/layout.njk
@@ -50,6 +50,21 @@
 </head>
 <body class="kimPage_body">
 
+  {# Custom CSS element #}
+  <script>
+    let $cssElement = document.getElementById("customCSS");
+    if (!$cssElement) {
+      $cssElement = document.createElement("style");
+      $cssElement.id = "customCSS";
+      document.head.insertAdjacentElement("beforeend", $cssElement);
+    }
+    window.$cssElement = $cssElement;
+  
+  if (localStorage.getItem("customCSS")) {
+    window.$cssElement.innerText = localStorage.getItem("customCSS");
+  }
+  </script>
+
   {% include "src/_includes/development-tag.njk" %}
   
   {% block beforeMasthead %}
@@ -134,7 +149,7 @@
                 {{- link.html | safe if link.html else link.text -}}
               </a>
             </li>
-          {%- endfor%}
+          {%- endfor %}
         </ul>
       </div>
       
diff --git a/src/customise.njk b/src/customise.njk
@@ -0,0 +1,71 @@
+---
+title: Customise this site
+metadata:
+  description: Write your own CSS to customise how this site looks.
+---
+
+{% extends 'src/_layouts/layout.njk' %}
+
+{% block main %}
+  <div class="kim-!-margin-block-8-9">
+    <div class="kimWrapper">
+      <h1 class="kimHeading-xl">
+        {{ title }}
+      </h1>
+      <div class="kimGrid">
+        <div class="kimGrid_column kimGrid_column-full defiant:kimGrid_column-oneThird">
+          <p class="kimBody-l">Write your own CSS to customise how this site looks.</p>
+          <p class="kimBody">This code is stored on your device and is never sent to the server. JavaScript must be available for it to work.</p>
+          <p class="kimBody">This is here as an experiment. I might get rid of it again at some point. 🤷</p>
+        </div>
+        <div class="kimGrid_column kimGrid_column-full defiant:kimGrid_column-twoThirds">
+          <label for="css" class="kim-!-visually-hidden">Write some CSS</label>
+          <textarea class="pageCodeEditor" id="css" rows="30" cols="80" disabled>
+.kimPage {
+  /** Force light or dark mode by uncommenting one of these. */
+  /* color-scheme: light; */
+  /* color-scheme: dark; */
+  
+  /** Change body font by uncommenting and editing this. */
+  /* --font-body: system-ui, sans-serif; */
+}</textarea>
+        </div>
+    </div>
+  </div>
+{% endblock %}
+
+{% css %}
+.pageCodeEditor {
+  inline-size: 100%;
+  margin-block-end: var(--space-5);
+  padding: var(--space-3);
+  border: var(--border-regular) solid var(--color-furniture);
+  color: var(--color-text);
+  background-color: var(--color-surface);
+  font-family: var(--font-code);
+  font-size: var(--size--1);
+  resize: vertical;
+  tab-size: 4;
+}
+.pageCodeEditor:focus-visible {
+  outline: 3px solid var(--color-focus-text);
+  box-shadow: 0 0 0 5px var(--color-focus-background);
+}
+{% endcss %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+    const $cssEditor = document.getElementById("css");
+    $cssEditor.disabled = false;
+    
+    $cssEditor.addEventListener("input", function() {
+      localStorage.setItem("customCSS", $cssEditor.value);
+      window.$cssElement.innerText = $cssEditor.value;
+    })
+    
+    if(localStorage.getItem("customCSS")) {
+      $cssEditor.value = localStorage.getItem("customCSS");
+    }
+  </script>
+{% endblock %}
