6 files changed, 50 insertions, 93 deletions

diff --git a/www/assets/res/css/article.css b/www/assets/res/css/article.css
index 9629597..090231b 100644
--- a/www/assets/res/css/article.css
+++ b/www/assets/res/css/article.css
@@ -2,9 +2,6 @@
   font-size: 0.95em;
   padding-inline: 0.5em;
   padding-block: 0.5em;
-  margin-block-end: 0.5em;
-  border-radius: 3px;
-  background-color: hsl(33, 100%, 98%);
 
   & > p {
     font-size: 0.9em;
@@ -20,8 +17,8 @@
 
   & > .date {
     font-size: small;
+    margin-top: 0.25em;
     float: right;
-    margin-inline-end: 1.5em;
     color: hsl(0, 0%, 25%);
   }
 
@@ -40,3 +37,8 @@ html[data-theme="dark"]  {
     }
   }
 }
+
+hr.article-preview-hr {
+  border: none;
+  border-top: 1.5px dashed currentColor;
+}
diff --git a/www/assets/res/css/base.css b/www/assets/res/css/base.css
index c6d9347..77cd804 100644
--- a/www/assets/res/css/base.css
+++ b/www/assets/res/css/base.css
@@ -1,7 +1,12 @@
 html {
   width: 100%;
-  --fg-color: black;
-  --bg-color: white;
+  --body-fg-color: unset;
+  --body-bg-color: unset;
+  --table-border-color: black;
+  --toast-fg-color: white;
+  --toast-bg-color: black;
+  --code-fg-color: var(--body-fg-color);
+  --code-bg-color: #eff1f5;
 }
 
 * {
@@ -11,8 +16,14 @@ html {
 body {
   width: 100%;
   margin: 0;
-  color: var(--fg-color);
-  background-color: var(--bg-color);
+  color: var(--body-fg-color);
+  background-color: var(--body-bg-color);
+}
+
+/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
+h1 {
+  margin-block: 0.67em;
+  font-size: 2em;
 }
 
 .mono {
@@ -31,21 +42,19 @@ div.mono-container {
 }
 
 table  {
-  --border-color: black;
-
   border-collapse: collapse;
 
   &, :is(td,th) {
-    padding: 0.4em;
-    border: 1px solid var(--border-color);
+    padding: 0.2em 0.4em;
+    border: 1px solid var(--table-border-color);
   }
 }
 
 .toast {
   font-size: large;
   font-family: monospace;
-  color: var(--bg-color);
-  background-color: var(--fg-color);
+  color: var(--toast-fg-color);
+  background-color: var(--toast-bg-color);
   padding: 0.5em 0.3em;
   border-radius: 6px;
 
@@ -57,29 +66,16 @@ table  {
 }
 
 .chroma {
-  overflow-x: scroll;
+  overflow-x: auto;
   padding-left: 1px;
   padding-right: 4px;
-  border-radius: 3px;
+  border-radius: 6px;
 }
 
 nav {
   font-size: large;
 }
 
-#slogan {
-  color: white;
-  width: 100%;
-  padding: 0.5em 1em;
-  text-align: center;
-  background-color: dodgerblue;
-  user-select: none;
-
-  & > * {
-    user-select: text;
-  }
-}
-
 #main-article {
   position: relative;
   left: 50%;
@@ -87,6 +83,13 @@ nav {
   max-width: 880px;
   padding: 0 1em;
   margin-top: 1em;
+
+  code:not(.chroma code) {
+    border-radius: 4px;
+    color: var(--code-fg-color);
+    background-color: var(--code-bg-color);
+    padding-inline: 0.4em;
+  }
 }
 
 #license a {
@@ -123,8 +126,12 @@ nav {
 }
 
 html[data-theme="dark"] {
-  --fg-color: white;
-  --bg-color: black;
+  --body-fg-color: white;
+  --body-bg-color: black;
+  --table-border-color: hsl(0, 0%, 25%);
+  --toast-fg-color: var(--body-bg-color);
+  --toast-bg-color: var(--body-fg-color);
+  --code-bg-color: #1e1e2e;
 
   & a:link {
     color:#34ffd9;
@@ -133,21 +140,4 @@ html[data-theme="dark"] {
   & a:visited {
     color:#abcac4;
   }
-
-  & #slogan {
-    color: var(--fg-color);
-    background-color: midnightblue;
-  }
-
-  & :is(.chroma,.chroma *) {
-    background-color: hsl(0, 0%, 1.5%);
-
-    & .n {
-      color: var(--fg-color);
-    }
-  }
-
-  table  {
-    --border-color: hsl(0, 0%, 25%);
-  }
 }
diff --git a/www/assets/res/css/home.css b/www/assets/res/css/home.css
index 1db357e..60c9ac7 100644
--- a/www/assets/res/css/home.css
+++ b/www/assets/res/css/home.css
@@ -1,15 +1,3 @@
-#slogan {
-  position: sticky;
-  z-index: 1;
-  top: 0;
-}
-
-#title-name {
-  font-family: monospace;
-  color: var(--bg-color);
-  background-color: var(--fg-color);
-}
-
 #avatar {
   float: right;
 }
@@ -76,4 +64,4 @@ html[data-theme="dark"] {
   & .friend-github {
     filter: invert(1);
   }
-}
\ No newline at end of file
+}
diff --git a/www/assets/res/css/single.css b/www/assets/res/css/single.css
index 70325d1..3d8ee0f 100644
--- a/www/assets/res/css/single.css
+++ b/www/assets/res/css/single.css
@@ -10,11 +10,3 @@
     margin-inline-end: auto;
   }
 }
-
-.end-hr {
-  border: none;
-  width: 8em;
-  margin-block-start: 1.5em;
-  margin-inline-start: 0;
-  border-top: 1px dashed black;
-}
diff --git a/www/assets/res/css/todos.css b/www/assets/res/css/todos.css
index e9a595d..f9aa23b 100644
--- a/www/assets/res/css/todos.css
+++ b/www/assets/res/css/todos.css
@@ -1,14 +1,17 @@
-.todo {
-
+h3.todo {
   &::before {
-    font-family: monospace;
+    font-size: small;
   }
 
   &.working::before {
-    content: "* ";
+    content: "(working) ";
   }
 
   &.done::before {
-    content: "✓ ";
+    content: "(done) ";
+  }
+
+  &.give-up::before {
+    content: "(give up) ";
   }
-}
\ No newline at end of file
+}
diff --git a/www/assets/res/js/color-scheme.ts b/www/assets/res/js/color-scheme.ts
index db6a3aa..fb4accf 100644
--- a/www/assets/res/js/color-scheme.ts
+++ b/www/assets/res/js/color-scheme.ts
@@ -90,21 +90,3 @@ function next(): Scheme | null {
     }
   }
 }
-
-window.addEventListener("load", () => {
-  const slogon = document.getElementById("slogan")!
-  let clicks: number = 0
-
-  const reset = createResetTimer(() => {
-    clicks = 0
-  })
-
-  slogon.addEventListener("click", () => {
-    reset()
-    clicks += 1
-    if (clicks === 3) {
-      saveScheme(next())
-      clicks = 0
-    }
-  })
-})