Fine tune of dark mode.

2 files changed, 86 insertions, 24 deletions

diff --git a/assets/scss/dark-mode.scss b/assets/scss/dark-mode.scss
index bd393ac..44ddf8c 100644
--- a/assets/scss/dark-mode.scss
+++ b/assets/scss/dark-mode.scss
@@ -1,11 +1,17 @@
 @import "journal";
 
-$dark-mode-text: #ccc;
+$light-accent: lighten($color-accent, 10%);
+$deep-light-accent: lighten($color-accent, 30%);
+$dark-mode-text: darken(#FFF, 20%);
+
+$dark-mode-back-container-background: #151515;
+$dark-mode-front-container-background: #252525;
 
 body.night {
   background: $dark-mode-back-container-background;
   :root{
     --color_555: #ccc;
+    --color_ededed: #000;
   }
 
   img {
@@ -34,39 +40,79 @@ body.night {
       }
   }
 
-  .nav-link-list {
-    $nav-item-hover-color-lighten: 30%;
+  .side-container {
+    $nav-item-hover-background-alpha: 0.02;
+    $nav-item-hover-indicator-alpha: 0.6;
+    $nav-item-hover-color-darken: 30%;
     $nav-item-active-background-alpha: 0.03;
-    $nav-item-active-color-lighten: 20%;
-    flex-grow: 1;
-    .nav-link-item {
-      color: $dark-mode-text !important;
+    $nav-item-active-color-darken: 20%;
+
+    .nav-head {
+      //border-right: 4px solid $color-accent;
       &:hover {
-        color: lighten($color-accent, $nav-item-hover-color-lighten) !important;
+        border-right: 2px solid
+          rgba($color-accent, $nav-item-hover-indicator-alpha);
+        background: rgba($color-accent, $nav-item-hover-background-alpha);
+        color: lighten($color-accent, $nav-item-hover-color-darken);
       }
       &.active {
-        color: lighten($color-accent, $nav-item-active-color-lighten) !important;
+        border-right: 2px solid $color-accent;
+        background: rgba($color-accent, $nav-item-active-background-alpha);
+        color: lighten($color-accent, $nav-item-active-color-darken);
       }
     }
-  }
 
+    .nav-link-list {
+      $nav-item-hover-indicator-alpha: 0.6;
+      $nav-item-hover-color-lighten: 30%;
+      $nav-item-active-background-alpha: 0.03;
+      $nav-item-active-color-lighten: 20%;
+      flex-grow: 1;
+      .nav-link-item {
+        color: $dark-mode-text !important;
+        //border-right: 4px solid transparent;
+        &:hover {
+          border-right: 2px solid
+            rgba($color-accent, $nav-item-hover-indicator-alpha);
+          color: lighten($color-accent, $nav-item-hover-color-lighten) !important;
+        }
+        &.active {
+          border-right: 2px solid $color-accent;
+          color: lighten($color-accent, $nav-item-active-color-lighten) !important;
+        }
+      }
+    }
+  }
   .stream-container {
     .post{
       background: $dark-mode-front-container-background;
+      @media screen and (max-width: $single-column-max-width) {
+        background: $dark-mode-back-container-background;
+      }
       .post-comment-wrapper *{
-        color: $dark-mode-text !important;
+        color: $dark-mode-text;
       }
     }
     .post-list-container {
-      background: $dark-mode-back-container-background;
+      -webkit-transition: all 0.5s ease;
+      -moz-transition: all 0.5s ease;
+      -o-transition: all 0.5s ease;
+      transition: all 0.5s ease;
+      background: $dark-mode-front-container-background;
+      @media screen and (max-width: $single-column-max-width) {
+        background: $dark-mode-back-container-background;
+      }
       &,
     > * {
       .post-item-wrapper {
+        .post-item-info-wrapper{
           @media screen and (max-width: $single-column-max-width) {
             box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
             background: $dark-mode-front-container-background;
           }
-          .post-item{
+        }
+          @media screen and (max-width: $single-column-max-width) {
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
             background: $dark-mode-front-container-background;
           }
           &:not(.post-item-wrapper-no-hover):hover {
@@ -77,6 +123,7 @@ body.night {
         }
       }
     }
+    
   }
   * {
     color: $dark-mode-text;
@@ -121,7 +168,10 @@ body.night {
   .single-column-drawer-container {
     @media screen and (max-width: $single-column-max-width) {
       .drawer-content {
-        background: $dark-mode-back-container-background;
+        background: $dark-mode-front-container-background;
+        .toc{
+          background-color: lighten($dark-mode-front-container-background,10%);
+        }
         .drawer-menu {
           .drawer-menu-item {
             color: $dark-mode-text;
@@ -136,6 +186,7 @@ body.night {
   }
 
   .toc{
+    background-color: $dark-mode-front-container-background;
     a {
       color: $dark-mode-text;
     }
@@ -143,4 +194,8 @@ body.night {
       color: $light-accent !important;
     }
   }
+  // Hack of Valine
+  .vsys{
+    background: none;
+  }
 }
\ No newline at end of file
diff --git a/assets/scss/journal.scss b/assets/scss/journal.scss
index 5c4f69e..8ab4e02 100644
--- a/assets/scss/journal.scss
+++ b/assets/scss/journal.scss
@@ -1,8 +1,7 @@
 $color-accent: #1976d2;
+//$color-accent: #330000;
 $back-container-background: #fcfcfc;
 $front-container-background: #ffffff;
-$dark-mode-back-container-background: #222222;
-$dark-mode-front-container-background: #333333;
 
 $default-font-list: "Lora", "Noto Serif SC", serif;
 $mono-font-list: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro",
@@ -20,7 +19,7 @@ $nav-subtitle-size: 18px;
 $nav-link-size: 20px;
 $nav-footer-size: 12px;
 $post-title-size: 30px;
-$post-subtitle-size: 12px;
+$post-subtitle-size: 14px;
 $post-summary-size: 16px;
 $post-body-size: 16px;
 $post-meta-size: 16px;
@@ -29,11 +28,9 @@ $toc-size: 16px;
 
 $dark-accent: darken($color-accent, 10%);
 $deep-dark-accent: darken($color-accent, 50%);
-$light-accent: lighten($color-accent, 10%);
-$deep-light-accent: lighten($color-accent, 30%);
 $color-text: $deep-dark-accent;
 
-@if lightness($color-accent) <10% {
+@if lightness($color-accent) <20% {
   $dark-accent: $color-accent;
   $deep-dark-accent: $color-accent;
   $color-text: $deep-dark-accent;
@@ -60,10 +57,10 @@ $h-diff: 3px;
 }
 
 body {
-  //-webkit-transition: all 0.5s ease;
-  //-moz-transition: all 0.5s ease;
-  //-o-transition: all 0.5s ease;
-  //transition: all 0.2s ease;
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
 
   background: $back-container-background;
   padding: 0;
@@ -605,6 +602,11 @@ a {
   }
 
   .post-list-container {
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.2s ease;
+
     width: 100%;
     min-height: 100vh;
     padding: 20px 0 20px 0;
@@ -774,6 +776,11 @@ a {
     padding: 15px;
   }
   .post {
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.2s ease;
+
     padding: 0 0 20px 0;
     .post-head-wrapper {
       margin-top: -20px;