chore: simplify css and improve design

not-matthias · Jul 9, 2024 · f20ab87 · f20ab87
1 parent 1b15822
commit f20ab87
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 53 deletions.
diff --git a/config.toml b/config.toml
@@ -9,7 +9,7 @@ taxonomies = [{ name = "tags" }]
 
 [markdown]
 highlight_code = true
-highlight_theme = "ayu-dark"
+highlight_theme = "ayu-light"
 
 [extra]
 toc = true
@@ -19,8 +19,8 @@ theme = "toggle"              # light, dark, auto, toggle
 comment = false
 fancy_code = true
 dynamic_note = true           # a note that can be toggled
-# mathjax = true
-# mathjax_dollar_inline_enable = true
+mathjax = true
+mathjax_dollar_inline_enable = true
 
 menu = [
     { name = "/posts", url = "/posts", weight = 1 },

diff --git a/sass/main.scss b/sass/main.scss
@@ -10,7 +10,7 @@
 
 :root {
   /* Used for: block comment, hr, ... */
-  --border-color: var(--bg-1);
+  --border-color: var(--border-color);
 
   /* Fonts */
   --text-font: 'Jetbrains Mono';
@@ -48,4 +48,4 @@ html {
   html {
     font-size: 18px;
   }
-}
+}
diff --git a/sass/parts/_cards.scss b/sass/parts/_cards.scss
@@ -19,7 +19,7 @@
 
 .card {
     min-height: 100px;
-    background: var(--bg-2);
+    background: var(--bg-1);
     border: 2px solid var(--border-color);
     border-radius: 10px;
     overflow: hidden;

diff --git a/sass/parts/_code.scss b/sass/parts/_code.scss
@@ -1,23 +1,14 @@
 // Define base colors and fonts for light and dark themes
 :root {
-    --bg-primary: #DCEBFF; // Updated light theme background color
-    --border-color: #ccc; // Light theme border color
-    --code-font: 'Courier New', monospace; // Code font
-
-    // Define light theme specifics
-    --text-color: #333;
-    --label-color: #f0f0f0;
-    --label-background: white;
-    --hightlight-color: #DCEBFF;
+    --code-font: 'Courier New', monospace;
+    --bg-primary: var(--bg-1);
+    --text-color: var(--text-0); // Color of the code text
+    --label-color: #f0f0f0; // Text color of the label
+
+    --hightlight-color: #f0f0f0;
 }
 
 :root.dark {
-    --bg-primary: rgb(15, 20, 25); // Dark theme background color
-    --border-color: #333; // Dark theme border color
-
-    // Define dark theme specifics
-    --text-color: #f0f0f0;
-    --label-background: black;
     --hightlight-color: #204e8a;
 }
 

diff --git a/sass/parts/_note.scss b/sass/parts/_note.scss
@@ -1,31 +1,23 @@
 :root {
-  --bg-primary: #f0f0f0; // Updated light theme background color
-  --note-color: #ebdbb2;
-  --note-bg: #ef534f;
-  --header-color: rgb(15, 20, 25);
+  --note-header-bg: var(--bg-2);
+  --note-header-color: var(--text-0);
+  --note-content-bg: var(--bg-1);
 }
 
-:root.dark {
-  --bg-primary: rgb(15, 20, 25); // Dark theme background color
-  --note-color: #00b8d5;
-  --note-bg: #243b4e;
-  --header-color: #f0f0f0;
-}
 
 .note-container {
   border-radius: 4px;
   overflow: hidden;
   margin: 1em 0;
   position: relative;
-  padding-left: 4px;
-  background-color: var(--note-color);
+  border-left: 3px solid var(--primary-color);
   font-family: var(--paragraph-font);
 }
 
 .note-toggle,
 .note-header {
-  color: var(--header-color);
-  background-color: var(--note-bg);
+  color: var(--note-header-color);
+  background-color: var(--note-header-bg);
   padding: 10px 25px;
   text-align: left;
   border: none;
@@ -68,19 +60,19 @@
 
 .note-toggle:hover,
 .note-toggle:focus {
-  color: var(--note-color);
-  background-color: var(--note-bg);
+  color: var(--note-header-color);
+  background-color: var(--note-header-bg);
   outline: none;
 }
 
 .note-content {
   padding: 10px 20px;
-  background-color: var(--bg-primary);
+  background-color: var(--note-content-bg);
 }
 
 .note-icon::before {
   content: '✎';
-  color: var(--note-color);
+  color: var(--primary-color);
   position: absolute;
   left: 20px;
   top: 50%;
@@ -89,8 +81,8 @@
 
 summary:hover,
 summary:focus {
-  color: var(--note-color);
-  background-color: var(--note-bg);
+  color: var(--primary-color);
+  background-color: var(--note-header-bg);
   outline: none;
   padding: 10px;
-}
+}
diff --git a/sass/theme/dark.scss b/sass/theme/dark.scss
@@ -1,15 +1,24 @@
+$bg-0: #121212;
+$bg-1: lighten($bg-0, 2%);
+$bg-2: lighten($bg-1, 5%);
+
+$text-0: lighten($bg-0, 87%);
+$text-1: lighten($bg-0, 60%);
+
 :root.dark {
-  --text-0: rgba(255, 255, 255, 87%);
-  --text-1: rgba(255, 255, 255, 60%);
+  --text-0: #{$text-0};
+  --text-1: #{$text-1};
+
+  --bg-0: #{$bg-0};
+  --bg-1: #{$bg-1};
+  --bg-2: #{$bg-2};
 
-  --bg-0: #121212;
-  --bg-1: rgba(255, 255, 255, 5%);
-  --bg-2: rgba(23, 23, 23, 100%);
+  --border-color: var(--bg-2);
 
   --primary-color: #ef5350;
   --hover-color: white;
 
   .social>img {
     filter: invert(1);
   }
-}
+}
diff --git a/sass/theme/light.scss b/sass/theme/light.scss
@@ -1,10 +1,19 @@
+$bg-0: #fff;
+$bg-1: darken($bg-0, 2%);
+$bg-2: darken($bg-1, 5%);
+
+$text-0: darken($bg-0, 87%);
+$text-1: darken($bg-0, 60%);
+
 :root.light {
-  --text-0: rgba(0, 0, 0, 87%);
-  --text-1: rgba(0, 0, 0, 66%);
+  --text-0: #{$text-0};
+  --text-1: #{$text-1};
+
+  --bg-0: #{$bg-0};
+  --bg-1: #{$bg-1};
+  --bg-2: #{$bg-2};
 
-  --bg-0: #fff;
-  --bg-1: #f2f2f2;
-  --bg-2: #fefefe;
+  --border-color: var(--bg-2);
 
   --primary-color: #ef5350;
   --hover-color: white;