website

commit ba953a273c55d8fd877f7d6a001f9e433e9d8259
parent 16c44398fff128f1f16c13702c3dc90dd03ca4a4
Author: Michael Neuper <michael@michaelneuper.com>
Date:   Tue,  7 Nov 2023 10:23:39 +0200

Add gruvbox theme

Diffstat:
A
assets/sass/gruvbox.scss
 | 
67
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A
assets/sass/solarized.scss
 | 
26
++++++++++++++++++++++++++
M
assets/sass/vars.scss
 | 
29
++---------------------------

3 files changed, 95 insertions(+), 27 deletions(-)
diff --git a/assets/sass/gruvbox.scss b/assets/sass/gruvbox.scss
@@ -0,0 +1,67 @@
+:root {
+  --bg_h: #f9f5d7;
+  --bg: #fbf1c7;
+  --bg_s: #f2e5bc;
+  --bg1: #ebdbb2;
+  --bg2: #d5c4a1;
+  --bg3: #bdae93;
+  --bg4: #a89984;
+
+  --fg: #282828;
+  --fg1: #3c3836;
+  --fg2: #504945;
+  --fg3: #665c54;
+  --fg4: #7c6f64;
+
+  --red: #9d0006;
+  --green: #79740e;
+  --yellow: #b57614;
+  --blue: #076678;
+  --purple: #8f3f71;
+  --aqua: #427b58;
+  --orange: #af3a03;
+  --gray: #928374;
+
+  --red-dim: #cc2412;
+  --green-dim: #98971a;
+  --yellow-dim: #d79921;
+  --blue-dim: #458598;
+  --purple-dim: #b16286;
+  --aqua-dim: #689d6a;
+  --orange-dim: #d65d0e;
+  --gray-dim: #7c6f64;
+}
+
+.darkmode {
+  --bg_h: #1d2021;
+  --bg: #282828;
+  --bg_s: #32302f;
+  --bg1: #3c3836;
+  --bg2: #504945;
+  --bg3: #665c54;
+  --bg4: #7c6f64;
+
+  --fg: #fbf1c7;
+  --fg1: #ebdbb2;
+  --fg2: #d5c4a1;
+  --fg3: #bdae93;
+  --fg4: #a89984;
+
+  --red: #fb4934;
+  --green: #b8bb26;
+  --yellow: #fabd2f;
+  --blue: #83a598;
+  --purple: #d3869b;
+  --aqua: #8ec07c;
+  --gray: #928374;
+  --orange: #fe8019;
+
+  --red-dim: #cc2412;
+  --green-dim: #98971a;
+  --yellow-dim: #d79921;
+  --blue-dim: #458588;
+  --purple-dim: #b16286;
+  --aqua-dim: #689d6a;
+  --gray-dim: #a89984;
+  --orange-dim: #d65d0e;
+}
diff --git a/assets/sass/solarized.scss b/assets/sass/solarized.scss
@@ -0,0 +1,26 @@
+:root {
+  --bg: #fdf6e3;
+  --bg_s: #eee8d5;
+  --fg: #657b83;
+  --fg4: #93a1a1;
+  --fg1: #586e75;
+}
+
+.darkmode {
+  --bg: #002b36;
+  --bg_s: #073642;
+  --fg: #839496;
+  --fg4: #586e75;
+  --fg1: #93a1a1;
+}
+
+:root {
+  --yellow: #b58900;
+  --orange: #cb4b16;
+  --red: #dc322f;
+  --magenta: #d33682;
+  --violet: #6c71c4;
+  --blue: #268bd2;
+  --cyan: #2aa198;
+  --green: #859900;
+}
diff --git a/assets/sass/vars.scss b/assets/sass/vars.scss
@@ -1,5 +1,7 @@
 @use "sass:math";
 
+@use "gruvbox.scss";
+
 // https://grtcalculator.com/math/
 
 $phi: math.div(1 + math.sqrt(5), 2);
@@ -13,30 +15,3 @@ $max-width: 70vw;
 $padding: math.div(100vw - $max-width, 2);
 $border: 2px;
 $mobile-breakpoint: 768px;
-
-:root {
-  --background: #fdf6e3;
-  --background-secondary: #eee8d5;
-  --text: #657b83;
-  --text-secondary: #93a1a1;
-  --text-emphasized: #586e75;
-}
-
-.darkmode {
-  --background: #002b36;
-  --background-secondary: #073642;
-  --text: #839496;
-  --text-secondary: #586e75;
-  --text-emphasized: #93a1a1;
-}
-
-:root {
-  --yellow: #b58900;
-  --orange: #cb4b16;
-  --red: #dc322f;
-  --magenta: #d33682;
-  --violet: #6c71c4;
-  --blue: #268bd2;
-  --cyan: #2aa198;
-  --green: #859900;
-}