styling

scrollbar colour based on theme (firefox only atm), and theme change hover glow

index.ts

@@ -1,10 +1,10 @@
-import * as path from 'path';
-import { readFileSync } from 'fs';
-import { parse_md_to_html } from 'makoto';
-import { Renderer } from './ryuji.js';
-import { Builder } from './saki.js';
-import _posts_metadata from './posts/_metadata.json';
-import _site_info from './site_info.json';
+import * as path from "path";
+import { readFileSync } from "fs";
+import { parse_md_to_html } from "makoto";
+import { Renderer } from "./ryuji.js";
+import { Builder } from "./saki.js";
+import _posts_metadata from "./posts/_metadata.json";
+import _site_info from "./site_info.json";
 
 export interface PostMetadata {
   title: string,

preview.ts

@@ -1,6 +1,6 @@
-import { createServer } from 'http';
-import * as path from 'path';
-import { existsSync, readFileSync } from 'fs';
+import { createServer } from "http";
+import * as path from "path";
+import { existsSync, readFileSync } from "fs";
 
 const port: number = 8042;
 
@@ -50,7 +50,7 @@ createServer((req, res) => {
       content_type = "text/plain";
   }
   res.writeHead(200, {
-    'Content-Type': content_type,
+    "Content-Type": content_type,
   });
   //write file
   if (non_utf8_content_types.includes(content_type)) {

ryuji.ts

@@ -1,4 +1,4 @@
-import { readFileSync } from 'fs';
+import { readFileSync } from "fs";
 
 export const SYNTAX_REGEX = /\[\[ [a-zA-Z0-9.:/\-_!]+ \]\]/g;
 

saki.ts

@@ -1,6 +1,6 @@
-import * as path from 'path';
-import { copyFileSync, existsSync, readdirSync, rmSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
-import type { Renderer } from './ryuji.js';
+import * as path from "path";
+import { copyFileSync, existsSync, readdirSync, rmSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+import type { Renderer } from "./ryuji.js";
 
 export class Builder {
   build_dir: string;

static/styles/global.css

@@ -107,6 +107,14 @@ label[for="dark-mode"]:hover {
   cursor: pointer;
 }
 
+label[for="dark-mode"]:hover::after {
+  text-shadow: #222 0 0 15px;
+}
+
+#dark-mode:checked + label[for="dark-mode"]:hover::after {
+  text-shadow: white 0 0 15px;
+}
+
 #dark-mode + label[for="dark-mode"]::after {
   color: black;
   content: "🌙";
@@ -117,6 +125,10 @@ label[for="dark-mode"]:hover {
   content: "☀️";
 }
 
+html:has(#dark-mode:checked) {
+  scrollbar-color: #747474 #222;
+}
+
 @media (prefers-color-scheme: dark) {
   #dark-mode + label[for="dark-mode"]::after {
     color: white;
@@ -137,4 +149,20 @@ label[for="dark-mode"]:hover {
     background-color: white;
     color: #222;
   }
+
+  label[for="dark-mode"]:hover::after {
+    text-shadow: white 0 0 15px;
+  }
+  
+  #dark-mode:checked + label[for="dark-mode"]:hover::after {
+    text-shadow: #222 0 0 15px;
+  }
+
+  html:has(#dark-mode) {
+    scrollbar-color: #747474 #222;
+  }
+
+  html:has(#dark-mode:checked) {
+    scrollbar-color: auto;
+  }
 }

tests.ts

@@ -1,5 +1,5 @@
-import { Renderer } from './ryuji.js';
-import { test_assert_equal, log_test_results } from './endosulfan.js';
+import { Renderer } from "./ryuji.js";
+import { test_assert_equal, log_test_results } from "./endosulfan.js";
 
 //tests for ryuji