sophuwu.site > manhttpd 
forgot
sophuwu sophie@skisiel.com
Mon, 10 Feb 2025 06:48:53 +0100
commit

228c2f55eb7eef443979d60a5e045c0db205ea47

parent

d340c1852a89c27c4dc93a49754250669c52c56c

3 files changed, 45 insertions(+), 12 deletions(-)

jump to
M dark_theme.css → dark_theme.css 
@@ -2,6 +2,7 @@ 
 
 
 
+
 			@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
 :root{

@@ -66,6 +67,7 @@ color: var(--fg-color);
     font-family: var(--font-family), monospace;
     line-height: 1em;
     padding: 0;
+    transition: all 150ms ease-in-out;
 }
 body, html {
     margin: 0;

@@ -73,8 +75,16 @@ padding: 0;
     height: 100%;
     width: 100%;
     background-color: var(--bg-color);
+}
+article.hidden {
+    display: none!important;
+    height: 0!important;
+}
+togii {
+    background-color: color-mix(in srgb, var(--hl-color), var(--bg-color) 50%);
 }
 .settings {
+    display: contents;
     input {
         &[type=range] {
             margin: 0;

@@ -96,6 +106,7 @@ color-mix(in srgb,  color-mix(in srgb,  white, yellow calc( 10% * (var(--grad5) + 2) * (min(1,var(--grad5))))), var(--dark-bg) calc(0% + (100% * (max(0,calc(var(--grad5) - 3)))))) calc(var(--grad5) * var(--graddy)))!important;
           }
             &[id="contrast"] {
                 width: 2rem;
+                background: var(--lessdimmer);
             }
 
         }

@@ -117,7 +128,7 @@ min-width: 1rem;
         background: var(--hl-color);
         height: calc(1rem - 0.1em);
     }
-    height: 100%;
+    height: 100%!important;
     tr > th {
         width: 100%;
         margin: 0;

@@ -131,6 +142,9 @@ display: contents;
     }
     input#font {
        width: 100%;
+    }
+    table {
+        margin: 0 auto 0 auto;
     }
 }
 table.head, table.foot {

@@ -263,5 +277,6 @@ margin: 0 auto 0 auto;
     overflow: auto;
     padding: 0;
 }
+
M index.html → index.html 
@@ -3,7 +3,6 @@ <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>{{ title }}@{{ hostname }}</title>
-		<!--link rel="stylesheet" type="text/css" href="style.css"-->
 		<style id="styleCss">
 			{{ cssContent }}
 		</style>

@@ -30,29 +29,26 @@ </div>
 	</header>
 
 	<main>
-		<article class="settings">
+		<article class="settings hidden">
 			<table>
 				<tr>
 					<td>Theme</td>
-					<td>		  <input type="range" min="0" max="5" value="4" id="theme" class="slider"></td>
+					<td><input type="range" min="0" max="5" value="4" id="theme" class="slider"></td>
 				</tr>
 				<tr class="yeet">
 					<td>
 						<label>High Contrast</label>
-						<input type="range" min="0" max="1" value="0" id="contrast" class="slider"></td>
+						<input readonly type="range" min="0" max="1" value="0" id="contrast" class="slider"></td>
 					<td>
 						<label>Font Size</label>
-						<input type="text" id="fontsize" placeholder="18px"></td>
+						<input type="text" id="fontsize" placeholder="e.g. 18px"></td>
 				</tr>
 				<tr>
 					<td>Custom Font</td>
-					<td><input type="text" id="font"></td>
-				</tr>
-				<tr>
-
+					<td><input type="text" id="font" placeholder="e.g. Helvetica"></td>
 				</tr>
 			</table>
-
+			<hr>
 	</article>
 		{{ content }}
 	</main>
M scripts.js → scripts.js 
@@ -61,4 +61,26 @@ if (value) tmp += `${key}:${value};` + "\n";
     }
     tmp += "}";
     style.innerText = tmp + styleCss;
-}+}
+
+document.addEventListener("DOMContentLoaded", setStyle);
+document.addEventListener("DOMContentLoaded", function () {
+    document.getElementById("SetButt").addEventListener("click", function () {
+        let ar = ["--theme", "--contrast", "--font", "--font-size"];
+        for (let key of ar) {
+            let value = localStorage.getItem(key);
+            if (value) document.getElementById(key.replaceAll("-", "")).value = value;
+        }
+        document.querySelector("article.settings").classList.toggle("hidden");
+    });
+    document.getElementById("contrast").addEventListener("mousedown", function () {
+            let elem = document.getElementById("contrast");
+            if (elem.value == 1) elem.value = 0;
+            else elem.value = 1;
+            elem.classList.toggle("togii");
+            if (SaveValue("--contrast", elem.value))setStyle();
+    });
+    document.getElementById("theme").addEventListener("input", function () {
+        if (SaveValue("--theme", document.getElementById("theme").value))setStyle();
+    });
+});