From c7db9c6aaf48586c4df9e4649ea751b40dfed564 Mon Sep 17 00:00:00 2001
From: jetstream0 <49297268+jetstream0@users.noreply.github.com>
Date: Wed, 27 Dec 2023 05:30:14 +0530
Subject: [PATCH] styling

scrollbar colour based on theme (firefox only atm), and theme change hover glow
---
 index.ts                 | 14 +++++++-------
 preview.ts               |  8 ++++----
 ryuji.ts                 |  2 +-
 saki.ts                  |  6 +++---
 static/styles/global.css | 28 ++++++++++++++++++++++++++++
 tests.ts                 |  4 ++--
 6 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/index.ts b/index.ts
index e74913c..d76b226 100644
--- a/index.ts
+++ b/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,
diff --git a/preview.ts b/preview.ts
index f7d414a..cb620e1 100644
--- a/preview.ts
+++ b/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)) {
diff --git a/ryuji.ts b/ryuji.ts
index 63df44d..221e8ca 100644
--- a/ryuji.ts
+++ b/ryuji.ts
@@ -1,4 +1,4 @@
-import { readFileSync } from 'fs';
+import { readFileSync } from "fs";
 
 export const SYNTAX_REGEX = /\[\[ [a-zA-Z0-9.:/\-_!]+ \]\]/g;
 
diff --git a/saki.ts b/saki.ts
index c323b5a..2039458 100644
--- a/saki.ts
+++ b/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;
diff --git a/static/styles/global.css b/static/styles/global.css
index e35ebc2..d5ffe03 100644
--- a/static/styles/global.css
+++ b/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;
+  }
 }
diff --git a/tests.ts b/tests.ts
index ff84399..c72977c 100644
--- a/tests.ts
+++ b/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