Implement dark mode

page-authors.hbs

@@ -38,7 +38,9 @@ into the {body} of the default.hbs template --}}
                 </div>
                 <div class="m-article-card__info">
                   <a href="{{url}}" class="m-article-card__info-link">
+                    {{#if bio}}
                     <p class="m-article-card__excerpt">{{bio}}</p>
+                    {{/if}}
                   </a>
                   <div class="m-article-card__author-stats">
                     <span>

post.hbs

@@ -49,7 +49,7 @@ into the {body} of the default.hbs template --}}
                   <button class="m-icon-button filled in-share progress js-scrolltop" aria-label="Scroll to top">
                     <span class="icon-arrow-top"></span>
                     <svg>
-                      <circle class="progress-ring__circle js-progress" stroke="#04aeee" fill="transparent" r="0" />
+                      <circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
                     </svg>
                   </button>
                 </div>

src/sass/app.scss

@@ -2,8 +2,8 @@
 
 @import "common/reset";
 @import "common/mixins";
-@import "common/colors";
 @import "common/variables";
+@import "common/themes";
 @import "common/helpers";
 @import "common/global";
 @import "common/icons";

src/sass/common/_themes.scss

@@ -8,9 +8,13 @@
   --link-color: #293951;
   --primary-border-color: #9b9b9b;
   --secondary-border-color: aliceblue;
-  --article-shadow: 0 4px 60px 0 rgba(0,0,0,.2);
+  --article-shadow-normal: 0 10px 10px rgba(0,0,0,0.08);
+  --article-shadow-hover: 0 4px 60px 0 rgba(0,0,0,0.2);
   --transparent-background-color: rgba(255,255,255,0.99);
   --foter-background-color: #293951;
+  --submenu-shadow-color-opacity: 0.25;
+  --button-shadow-color-normal: rgba(108, 108, 108, 0.2);
+  --button-shadow-color-hover: rgba(108, 108, 108, 0.3);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -24,8 +28,12 @@
     --link-color: #2c2fe6;
     --primary-border-color: #1d1d1d;
     --secondary-border-color: #0f0f0f;
-    --article-shadow: 0 4px 0px 10px rgba(0,0,0,.2);
+    --article-shadow-normal: 0 4px 5px 5px rgba(0,0,0,0.1);
+    --article-shadow-hover: 0 4px 5px 10px rgba(0,0,0,0.1);
     --transparent-background-color: rgba(0,0,0,0.99);
     --foter-background-color: #080808;
+    --submenu-shadow-color-opacity: 0.55;
+    --button-shadow-color-normal: rgba(10, 10, 10, 0.5);
+    --button-shadow-color-hover: rgba(10, 10, 10, 0.5);
   }
 }

src/sass/common/_variables.scss

@@ -2,11 +2,7 @@
 
 $white: #fff;
 $black: #000;
-$main-color: #04aeee;
 $titles: #333;
-$body: #4a4a4a;
-$light-blue: #f4f8fd;
-$dark-blue: #293951;
 $gray: #9b9b9b;
 
 /** Config  */

src/sass/components/articles/_article-card.scss

@@ -14,7 +14,7 @@
     @include transform(translateY(-5px));
 
     &:before {
-      @include bs(var(--article-shadow));
+      @include bs(var(--article-shadow-hover));
     }
 
     .m-article-card__author {
@@ -85,7 +85,7 @@
     bottom: 0;
     left: 10px;
     border-radius: 10px;
-    @include bs(0 10px 10px rgba(0,0,0,0.08));
+    @include bs(var(--article-shadow-normal));
     @include transition(all .25s cubic-bezier(.02,.01,.47,1));
   }
 }
@@ -261,15 +261,6 @@
   letter-spacing: 0.3px;
   line-height: 1.5;
   font-size: 1rem;
-  &:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 20px;
-    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
-  }
 }
 
 .m-article-card__timestamp,

src/sass/components/articles/_featured-slider.scss

@@ -11,7 +11,7 @@
     }
 
     &:before {
-      @include bs(0 4px 60px 0 rgba(0,0,0,.2));
+      @include bs(var(--article-shadow-hover));
     }
   }
 
@@ -36,7 +36,7 @@
     bottom: 0;
     left: 10px;
     border-radius: 10px;
-    @include bs(0 10px 10px rgba(0,0,0,0.08));
+    @include bs(var(--article-shadow-normal));
     @include transition(all .25s cubic-bezier(.02,.01,.47,1));
   }
 }

src/sass/components/header/_submenu.scss

@@ -11,7 +11,7 @@
     background-color: var(--background-color);
     border-top: 1px solid var(--secondary-border-color);
     z-index: 5;
-    @include bs(0 60px 60px rgba(0,0,0,0.25));
+    @include bs(0 60px 60px rgba(0,0,0,var(--submenu-shadow-color-opacity)));
   }
 
   @include respond-to('extra-large') {

src/sass/components/ui/_button.scss

@@ -16,16 +16,17 @@
   @include transition(all .25s cubic-bezier(.02,.01,.47,1));
 
   &.outlined {
+    color: var(--titles-color);
     border: 1px solid var(--primary-foreground-color);
   }
 
   &.filled,
   &.primary {
-    @include bs(0 2px 4px rgba(108, 108, 108, 0.2));
+    @include bs(0 2px 4px var(--button-shadow-color-normal));
 
     &:hover {
       @include transform(translateY(-2px));
-      @include bs(0 4px 8px rgba(108, 108, 108, 0.3));
+      @include bs(0 4px 8px var(--button-shadow-color-hover));
     }
   }
 

src/sass/components/ui/_icon-button.scss

@@ -17,11 +17,11 @@
   &.filled {
     background-color: var(--background-color);
     border-radius: 50%;
-    @include bs(0 2px 4px rgba(108, 108, 108, 0.2));
+    @include bs(0 2px 4px var(--button-shadow-color-normal));
     @include transition(all .25s cubic-bezier(.02,.01,.47,1));
 
     &:hover {
-      @include bs(0 4px 8px rgba(108, 108, 108, 0.3));
+      @include bs(0 4px 8px var(--button-shadow-color-hover));
     }
   }
 
@@ -207,6 +207,7 @@
       opacity: 0;
 
       circle {
+        stroke: var(--primary-subtle-color);
         transform-origin: 50% 50%;
         @include transform(rotate(-90deg));
         @include transition(stroke-dashoffset 0.2s);