update style

Author: benev0

content/assets/startup.js

@@ -1,9 +1,9 @@
-let storageResult = localStorage.getItem('DarkModePreferred');
-var preferDark  = JSON.parse(storageResult ? storageResult : 'null');
-if (preferDark === null) {
-  preferDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+let colorTheme = localStorage.getItem('color-theme');
+
+if (colorTheme === null) {
+  document.documentElement.dataset.appliedMode = "default"
 }
-if (preferDark === null) {
-  preferDark = false;
+else {
+  document.documentElement.dataset.appliedMode = "set"
+  document.documentElement.dataset.theme = preferDark;
 }
-document.documentElement.dataset.appliedMode = preferDark ? 'dark' : 'light';

content/assets/styles.css

@@ -1,21 +1,52 @@
-:root[data-applied-mode="light"] {
-    color-scheme: light;
-    --base-color: var(--ctp-latte-base);
-    --text-color: var(--ctp-latte-base);
+:root {
+    --content-width: 56em
+}
 
+:root[data-applied-mode="system"], :root[data-applied-mode="default"], :root {
+    color-scheme: light dark;
+    --base-color: var(--ctp-latte-base);
+    --text-color: var(--ctp-latte-text);
     --mantle-color: var(--ctp-latte-mantle);
     --crust-color: var(--ctp-latte-crust);
-
+}
+@media (prefers-color-scheme: dark) {
+    :root[data-applied-mode="system"], :root[data-applied-mode="default"], :root {
+        --base-color: var(--ctp-mocha-base);
+        --text-color: var(--ctp-mocha-text);
+        --mantle-color: var(--ctp-mocha-mantle);
+        --crust-color: var(--ctp-mocha-crust);
+    }
 }
 
-:root[data-applied-mode="dark"] {
+:root[data-applied-mode="set"][data-theme="mocha"] {
     color-scheme: dark;
     --base-color: var(--ctp-mocha-base);
     --text-color: var(--ctp-mocha-text);
-
     --mantle-color: var(--ctp-mocha-mantle);
     --crust-color: var(--ctp-mocha-crust);
 }
+:root[data-applied-mode="set"][data-theme="macchiato"] {
+    color-scheme: dark;
+    --base-color: var(--ctp-macchiato-base);
+    --text-color: var(--ctp-macchiato-text);
+    --mantle-color: var(--ctp-macchiato-mantle);
+    --crust-color: var(--ctp-macchiato-crust);
+}
+:root[data-applied-mode="set"][data-theme="frappe"] {
+    color-scheme: dark;
+    --base-color: var(--ctp-frappe-base);
+    --text-color: var(--ctp-frappe-text);
+    --mantle-color: var(--ctp-frappe-mantle);
+    --crust-color: var(--ctp-frappe-crust);
+}
+:root[data-applied-mode="set"][data-theme="latte"] {
+    color-scheme: light;
+    --base-color: var(--ctp-latte-base);
+    --text-color: var(--ctp-latte-text);
+    --mantle-color: var(--ctp-latte-mantle);
+    --crust-color: var(--ctp-latte-crust);
+}
+
 
 html, body {
     font-family: "Courier New", monospace;
@@ -27,41 +58,37 @@ html, body {
 .blog-link {
     border-color: var(--mantle-color);
     background-color: var(--crust-color);
-
-    color: inherit;
-    border-radius: 2px;
-    border-width: 2px;
-    border-style: solid;
-    margin-top: 2px;
-    padding-left: 10px;
+    margin-top: 0.25em;
+    padding: 0.25em 1.25em;
 }
 
-@media only screen and (max-width: 920px) {
+/* sync media query with content-width */
+@media only screen and (max-width: 56em) {
     .grid-container {
         display: grid;
         grid-auto-flow: row;
         overflow: clip;
-        background-color: var(--ctp-mocha-mantle);
+        background-color: var(--mantle-color);
     }
 }
 
-@media only screen and (min-width: 920px) {
+/* sync media query with content-width */
+@media only screen and (min-width: 56em) {
     .grid-container {
         display: grid;
         grid-auto-flow: row;
-        width: 920px;
+        width: var(--content-width);
         margin-left: auto;
         margin-right: auto;
         padding-left: 2vw;
         padding-right: 2vw;
         height: 100vh;
-        background-color: var(--ctp-mocha-mantle);
+        background-color: var(--mantle-color);
     }
 }
 
 
 .gridCell {
-
     padding-left: 2vh;
     padding-right: 2vh;
     height: 100vh;