fix: revise the color scheme

Lednerb · Nov 12, 2023 · 2f604ca · 2f604ca
1 parent 96d2780
commit 2f604ca
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 39 deletions.
diff --git a/v4/assets/sass/_articles.scss b/v4/assets/sass/_articles.scss
@@ -11,7 +11,7 @@ article {
         content: "";
         display: block;
         border: 11px solid transparent;
-        border-right-color: #ddd;
+        border-right-color: $con-line-colorB;
         position: absolute;
         top: 49px;
         left: -22px;
@@ -21,7 +21,7 @@ article {
         content: "";
         display: block;
         border: 10px solid transparent;
-        border-right-color: #fff;
+        border-right-color: #con-line-colorA;
         position: absolute;
         top: 50px;
         left: -20px;
@@ -151,7 +151,7 @@ article {
                 margin-top: 1.25em;
 
                 li {
-                    border-bottom: 1px solid #eee;
+                    border-bottom: 1px solid $footer-border-color;
                     padding-right: 10px;
                 }
 
@@ -170,19 +170,23 @@ article {
 
                     &:hover {
                         left: 10px;
-                        color: $base-color;
+                        color: $text-color;
                         text-decoration: none;
                     }
                 }
             }
         }
+        code {
+            background-color: rgba(150,150,160,0.2);
+            border: none;
+        }
 
         blockquote {
-            background-color: #f6f6f6;
+            background-color: $blockquote-background-color;
             font-family: $headline-font;
             margin: 1.5em 0;
             padding: 2em;
-            border-left: 0.5em solid #ededed;
+            border-left: 0.5em solid rgba(invert($blockquote-background-color),0.2);
             font-size: 1.05em;
 
             cite {
@@ -226,15 +230,15 @@ article {
 
             li {
                 display: inherit;
-                color: $text-color;
+                color: $highlight-color;
 
                 a {
                     color: inherit;
                     text-align: left;
                     padding: 0;
 
                     &:hover {
-                        color: $highlight-color;
+                        color: $text-color;
                         background-color: transparent;
                     }
                 }
@@ -478,4 +482,5 @@ article {
 #comments-container {
     margin-left: 100px;
     padding-bottom: 1.2em;
+    color: #fff;
 }
diff --git a/v4/assets/sass/_footer.scss b/v4/assets/sass/_footer.scss
@@ -24,6 +24,15 @@ footer {
             text-transform: uppercase;
             color: $footer-headline-color;
             padding-bottom: 0.75em;
+            display: block;
+        }
+
+        a {
+            strong{
+                &:hover {
+                    color: $highlight-color;
+                }
+            }
         }
 
         ul {
@@ -45,7 +54,7 @@ footer {
 
                 &:hover {
                     left: 10px;
-                    color: $base-color;
+                    color: $text-color;
                 }
             }
         }
@@ -113,10 +122,6 @@ footer {
                 width: 100%;
                 margin-left: 0;
             }
-
-            strong {
-                display: block;
-            }
         }
     }
 }

diff --git a/v4/assets/sass/_header.scss b/v4/assets/sass/_header.scss
@@ -95,15 +95,18 @@ header {
           display: flex;
           border-top-right-radius: 4px;
           border-top-left-radius: 4px;
-            button {
-              margin-top: 0;
-              margin-bottom: 0;
-              padding: 0.375em 0.75em;
-              font-size: 1.125em;
-              min-width: 2em;
-              border: transparent;
-              color: $header-text-color;
-            }
+              button {
+                  margin-top: 0;
+                  margin-bottom: 0;
+                  padding: 0.375em 0.75em;
+                  font-size: 1.125em;
+                  min-width: 2em;
+                  border: transparent;
+                  color: $header-text-color;
+                  &:hover {
+                      color: $highlight-color;
+                  }
+              }
         }
         .languages {
           background-color: $special-color;
@@ -126,6 +129,9 @@ header {
                 content: " | ";
                 color: inherit;
             }
+            &:hover {
+                color: $highlight-color;
+            }
           }
         }
       }
@@ -144,5 +150,8 @@ header {
         &.permanentTopNav {
             display: none;
         }
+        &:hover {
+            color: $highlight-color;
+        }
     }
 }
diff --git a/v4/assets/sass/_main.scss b/v4/assets/sass/_main.scss
@@ -10,7 +10,7 @@
         bottom: 50px;
         width: 2px;
         height: 100%;
-        background: rgba($logo-color, 0.1);
+        background: $con-line-colorA;
         z-index: 1;
     }
 
@@ -22,7 +22,7 @@
         bottom: 32px;
         height: 20px;
         width: 20px;
-        background: darken($bubble-color,1);
+        background: $con-line-colorB;
         border-radius: 999px;
         z-index: 10;
     }

diff --git a/v4/assets/sass/_topnav.scss b/v4/assets/sass/_topnav.scss
@@ -119,12 +119,17 @@ nav {
                     font-size: 0.75em;
                     text-align: right;
                     padding: 0.5em 1em;
-                    background-color: $page-background-color;
+                    border-radius: 0.5em;
+                    background-color: rgba($page-background-color,0.6);
 
                     img {
                         width: 3.5em;
                         position: relative;
-                        top: 0.1em;
+                        // top: 0.1em;
+                        display: inline-block;
+                        vertical-align: middle;
+                        padding: 0.5em;
+                        background: rgba(#fff,0.5);
                     }
                 }
             }
@@ -138,7 +143,7 @@ nav {
 
                     &:hover,
                     &:focus {
-                        background-color: darken($algolia-search-box-background-color, 2);
+                        background-color: darken($algolia-search-box-background-color, 5);
                     }
 
                     .title {
@@ -197,8 +202,8 @@ nav {
         }
 
         .aa-dropdown-menu {
-            background-color: #fff;
-            border: 1px solid rgba($algolia-border-color, 0.6);
+            background-color: $algolia-search-box-background-color;
+            border: 1px solid rgba($algolia-border-color, 0.2);
             min-width: 300px;
             margin-top: 10px;
             box-sizing: border-box;
@@ -210,12 +215,12 @@ nav {
         }
 
         .aa-suggestion + .aa-suggestion {
-            border-top: 1px solid rgba($algolia-border-color, 0.6);
+            border-top: 1px solid rgba($algolia-border-color, 0.2);
         }
 
         .aa-suggestions-category {
-            border-bottom: 1px solid rgba($algolia-border-color, 0.6);
-            border-top: 1px solid rgba($algolia-border-color, 0.6);
+            border-bottom: 1px solid rgba($algolia-border-color, 0.2);
+            border-top: 1px solid rgba($algolia-border-color, 0.2);
             padding: 6px 12px;
         }
     }

diff --git a/v4/assets/sass/dark-theme.scss b/v4/assets/sass/dark-theme.scss
@@ -14,27 +14,30 @@ $base-color: {{ .Param "baseColor" | default "#1d1f38" }};
 $special-color: {{ .Param "specialColor" | default "#2D3642" }};
 $highlight-color: {{ .Param "highlightColor" | default "saturate(#5c8b59,20)" }};
 $text-color: {{ .Param "textColor" | default "darken(invert(#222), 20)" }};
+$blockquote-background-color: {{ .Param "blockquoteBackgroundColor" | default "rgba(99,110,110,0.2)" }};
 
 $nav-background-color: {{ .Param "navBackgroundColor" | default "$special-color" }};
 $nav-text-color: {{ .Param "navTextColor" | default "darken(#f1f1f1,20)" }};
-$algolia-search-box-color: {{ .Param "algoliaSearchBoxColor" | default "#444" }};
+$algolia-search-box-color: {{ .Param "algoliaSearchBoxColor" | default "$nav-text-color" }};
 $algolia-search-box-icon-color: {{ .Param "algoliaSearchBoxIconColor" | default "#888" }};
-$algolia-search-box-background-color: {{ .Param "algoliaSearchBoxBackgroundColor" | default "#fafafa" }};
+$algolia-search-box-background-color: {{ .Param "algoliaSearchBoxBackgroundColor" | default "#222" }};
 $algolia-border-color: {{ .Param "algoliaBorderColor" | default "#e4e4e4" }};
 
 $header-text-color: {{ .Param "headerTextColor" | default "$nav-text-color" }};
 $logo-color: {{ .Param "logoColor" | default "darken(#f1f1f1, 60)" }};
 $bubble-color: {{ .Param "bubbleColor" | default "$logo-color" }};
 $bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#373737" }};
 $bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }};
+$con-line-colorA: {{ .Param "conLineColorA" | default "rgba(invert(#000),0.05)" }};
+$con-line-colorB: {{ .Param "conLineColorB" | default "#444" }};
 
-$article-background-color: {{ .Param "articleBackgroundColor" | default "#252525" }};
-$meta-text-color: {{ .Param "metaTextColor" | default "invert(#999)" }};
+$article-background-color: {{ .Param "articleBackgroundColor" | default "#222" }};
+$meta-text-color: {{ .Param "metaTextColor" | default "darken(#f1f1f1,40)" }};
 $meta-border-color: {{ .Param "metaBorderColor" | default "#545454" }};
 $continue-reading-hover-color: {{ .Param "continueReadingHoverColor" | default "$meta-text-color" }};
 
-$footer-border-color: {{ .Param "footerBorderColor" | default "#222" }};
-$footer-background-color: {{ .Param "footerBackgroundColor" | default "invert(rgba(#ffffff, 80))" }};
+$footer-border-color: {{ .Param "footerBorderColor" | default "#444" }};
+$footer-background-color: {{ .Param "footerBackgroundColor" | default "#222" }};
 $footer-headline-color: {{ .Param "footerHeadlineColor" | default "darken(invert(#444),5)" }};
 
 @mixin featuredImage() {

diff --git a/v4/assets/sass/theme.scss b/v4/assets/sass/theme.scss
@@ -14,6 +14,7 @@ $base-color: {{ .Param "baseColor" | default "#1d1f38" }};
 $special-color: {{ .Param "specialColor" | default "#2D3642" }};
 $highlight-color: {{ .Param "highlightColor" | default "#5c8b59" }};
 $text-color: {{ .Param "textColor" | default "#222" }};
+$blockquote-background-color: {{ .Param "blockquoteBackgroundColor" | default "#f6f6f6" }};
 
 $nav-background-color: {{ .Param "navBackgroundColor" | default "$special-color" }};
 $nav-text-color: {{ .Param "navTextColor" | default "$page-background-color" }};
@@ -27,6 +28,8 @@ $logo-color: {{ .Param "logoColor" | default "darken($page-background-color, 1)"
 $bubble-color: {{ .Param "bubbleColor" | default "#fff" }};
 $bubble-background-color: {{ .Param "bubbleBackgroundColor" | default "#ccc" }};
 $bubble-hover-color: {{ .Param "bubbleHoverColor" | default "$highlight-color" }};
+$con-line-colorA: {{ .Param "conLineColorA" | default "rgba(#000,0.05)" }};
+$con-line-colorB: {{ .Param "conLineColorB" | default "#ddd" }};
 
 $article-background-color: {{ .Param "articleBackgroundColor" | default "#fff" }};
 $meta-text-color: {{ .Param "metaTextColor" | default "#999" }};

diff --git a/v4/layouts/partials/header.html b/v4/layouts/partials/header.html
@@ -39,7 +39,7 @@ <h3 class="title">
         <div class="selectors">
           {{ if .Site.Params.enableLightDarkMode | default 1 }}
           <div class="light-dark-mode">
-            <button id="light-dark-toggle" class="fa-solid fa-hourglass"></button>
+            <button id="light-dark-toggle" class="fa-solid fa-sun"></button>
           </div>
           {{ end }}
           {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }}