website

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

Update styles to gruvbox

Diffstat:
M
assets/sass/layouts/common.scss
 | 
38
+++++++++++++++++++++-----------------
M
assets/sass/layouts/content.scss
 | 
28
++++++++++++++--------------
M
assets/sass/layouts/index.scss
 | 
14
+++++++-------
M
assets/sass/layouts/list.scss
 | 
12
++++++------
M
assets/sass/layouts/single.scss
 | 
10
+++++-----

5 files changed, 53 insertions(+), 49 deletions(-)
diff --git a/assets/sass/layouts/common.scss b/assets/sass/layouts/common.scss
@@ -11,20 +11,20 @@
 }
 
 body {
-  background-color: var(--background);
-  color: var(--text);
+  background-color: var(--bg);
+  color: var(--fg);
 }
 
 a {
   text-decoration: none;
 
   &:link {
-    color: var(--blue);
+    color: var(--blue-dim);
   }
 
   &:hover,
   &:visited {
-    color: var(--violet);
+    color: var(--blue);
   }
 }
 
@@ -34,13 +34,13 @@ a {
 }
 
 time {
-  color: var(--text-secondary);
+  color: var(--fg4);
   margin-left: 1rem;
   min-width: 5rem;
 }
 
 hr {
-  background-color: var(--text-secondary);
+  background-color: var(--fg4);
   margin-top: $margin;
   margin-bottom: $margin;
   border: 0;
@@ -48,7 +48,7 @@ hr {
 }
 
 #wrapper {
-  background-color: var(--background);
+  background-color: var(--bg);
   display: flex;
   flex-direction: column;
   font-family: "Latin Modern Roman", "Times New Roman", serif;
@@ -71,16 +71,16 @@ hr {
 }
 
 ::-webkit-scrollbar {
-  background-color: var(--background);
+  background-color: var(--bg);
   height: 8px;
   width: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--text-secondary);
+  background-color: var(--fg4);
 
   &:hover {
-    background-color: var(--text-emphasized);
+    background-color: var(--fg1);
   }
 }
 
@@ -109,13 +109,13 @@ hr {
 
     & > span > a {
       font-size: 1.2rem;
-      color: var(--text-emphasized);
+      color: var(--fg1);
       text-decoration: none;
       display: inline-block;
       position: relative;
 
       &:after {
-        background-color: var(--text-emphasized);
+        background-color: var(--fg1);
         content: "";
         position: absolute;
         width: 100%;
@@ -137,7 +137,7 @@ hr {
   a,
   a:hover,
   a:visited {
-    color: var(--text-emphasized);
+    color: var(--fg1);
   }
 }
 
@@ -158,7 +158,7 @@ main {
 
 // footer
 #footer {
-  color: var(--text-secondary);
+  color: var(--fg4);
   align-items: center;
   display: flex;
   font-size: 0.9rem;
@@ -181,8 +181,8 @@ main {
 }
 
 .dark-mode-toggle {
-  background-color: var(--background);
-  color: var(--text);
+  background-color: var(--bg);
+  color: var(--fg);
   position: absolute;
   top: calc(((4px + $margin) / 2) + 12.55px);
   right: $padding;
@@ -193,7 +193,7 @@ main {
   transition: opacity 0.3s;
 
   &:hover {
-    color: var(--text-emphasized);
+    color: var(--fg1);
   }
 
   @media screen {
@@ -206,6 +206,10 @@ main {
 .icon {
   padding-right: 0.1em;
   padding-left: 0.1em;
+
+  svg {
+    fill: var(--fg);
+  }
 }
 
 .taxonomy-svg {
diff --git a/assets/sass/layouts/content.scss b/assets/sass/layouts/content.scss
@@ -33,23 +33,23 @@
   }
 
   blockquote {
-    background: var(--background-secondary);
-    border-left: var(--text) $border solid;
+    background: var(--bg_s);
+    border-left: var(--fg) $border solid;
     border-radius: $radius;
     font-style: italic;
     padding: 1rem 2rem;
   }
 
   code {
-    background-color: var(--background-secondary);
+    background-color: var(--bg_s);
     border-radius: $radius;
-    color: var(--text);
+    color: var(--fg);
     font-family: "Latin Modern Mono", Courier, monospace;
     padding: 0 0.2rem;
   }
 
   pre {
-    background-color: var(--background-secondary) !important;
+    background-color: var(--bg_s) !important;
     border-radius: $radius;
     font-family: "Latin Modern Mono", Courier, monospace;
     position: relative;
@@ -62,15 +62,15 @@
   }
 
   mark {
-    background-color: var(--background-secondary);
-    color: var(--text-emphasized);
+    background-color: var(--bg_s);
+    color: var(--fg1);
     border-radius: $radius;
     padding: 0 0.2rem;
   }
 
   kbd {
-    background-color: var(--background-secondary);
-    color: var(--text-emphasized);
+    background-color: var(--bg_s);
+    color: var(--fg1);
     border-radius: $radius;
   }
 
@@ -78,19 +78,19 @@
     display: block;
     overflow-x: auto;
     margin: auto;
-    background-color: var(--background);
+    background-color: var(--bg);
     border-collapse: collapse;
     border: none;
 
     td,
     th {
-      border: var(--text-secondary) $border solid;
+      border: var(--fg4) $border solid;
       padding: 0.1rem 0.5rem;
     }
 
     th {
-      background-color: var(--background-secondary);
-      color: var(--text-emphasized);
+      background-color: var(--bg_s);
+      color: var(--fg4);
     }
   }
 
@@ -102,7 +102,7 @@
 
 button.copy-button {
   background-color: var(--background);
-  color: var(--text-emphasized);
+  color: var(--fg1);
   position: absolute;
   top: calc((4px + $margin) / 2);
   right: calc((4px + $margin) / 2);
diff --git a/assets/sass/layouts/index.scss b/assets/sass/layouts/index.scss
@@ -19,21 +19,21 @@
     }
 
     h3.taxonomy > a {
-      color: var(--text);
+      color: var(--fg);
 
       &:visited {
-        color: var(--text);
+        color: var(--fg);
       }
 
       &:hover {
-        color: var(--text-emphasized);
+        color: var(--fg1);
       }
     }
 
     ul {
       list-style: none;
       padding: 0;
-      border-color: var(--text-secondary);
+      border-color: var(--fg4);
       display: block;
       padding: math.div($margin, 2);
       margin-top: math.div($margin, 2);
@@ -45,12 +45,12 @@
         text-decoration: none;
         display: block;
         padding: 2px 12px;
-        color: var(--text);
+        color: var(--fg);
         transition: color 0.3s, background-color 0.3s;
 
         &:hover {
-          color: var(--text-emphasized);
-          background-color: var(--background-secondary);
+          color: var(--fg1);
+          background-color: var(--bg_s);
           border-radius: $radius;
         }
       }
diff --git a/assets/sass/layouts/list.scss b/assets/sass/layouts/list.scss
@@ -3,7 +3,7 @@
 #main {
   & > .post-group {
     & > ul {
-      border-left: var(--text-secondary) solid $border;
+      border-left: var(--fg4) solid $border;
       list-style-type: none;
       margin-left: 0.5rem;
       padding-left: $margin;
@@ -50,17 +50,17 @@
     display: inline-block;
 
     input {
-      color: var(--text-emphasized);
-      background-color: var(--background-secondary);
+      color: var(--fg1);
+      background-color: var(--bg_s);
       font-family: sans-serif;
       padding-left: 10px;
       width: 200px;
       height: 1.7rem;
-      border: $border solid var(--text-secondary);
+      border: $border solid var(--fg4);
       border-radius: $radius;
 
       &:focus {
-        outline: 1px solid var(--text-emphasized);
+        outline: 1px solid var(--fg1);
       }
     }
 
@@ -74,7 +74,7 @@
       cursor: pointer;
 
       svg {
-        fill: var(--text-emphasized);
+        fill: var(--fg1);
       }
     }
   }
diff --git a/assets/sass/layouts/single.scss b/assets/sass/layouts/single.scss
@@ -16,21 +16,21 @@
   }
 
   .tag {
-    background-color: var(--background-secondary);
+    background-color: var(--bg_s);
     border-radius: $radius;
     padding: 0.2em 0.3em;
   }
 
   .toc {
-    background-color: var(--background-secondary);
-    border: var(--text-secondary) 1px dashed;
+    background-color: var(--bg_s);
+    border: var(--fg4) 1px dashed;
     border-radius: $radius;
     display: inline-block;
     margin: 1rem;
     padding: 0.5rem 1rem;
 
     a {
-      color: var(--text);
+      color: var(--fg);
 
       &:hover {
         text-decoration: underline;
@@ -46,7 +46,7 @@
     }
 
     &:target {
-      background-color: var(--background-secondary);
+      background-color: var(--bg_s);
     }
   }