From c73678c4f02c681944dfdf438752b15abd9a25fa Mon Sep 17 00:00:00 2001 From: Eduardo Date: Sat, 5 Oct 2019 22:45:34 +0200 Subject: [PATCH] Implement dark mode --- page-authors.hbs | 2 ++ post.hbs | 2 +- src/sass/app.scss | 2 +- src/sass/common/{_colors.scss => _themes.scss} | 12 ++++++++++-- src/sass/common/_variables.scss | 4 ---- src/sass/components/articles/_article-card.scss | 13 ++----------- src/sass/components/articles/_featured-slider.scss | 4 ++-- src/sass/components/header/_submenu.scss | 2 +- src/sass/components/ui/_button.scss | 5 +++-- src/sass/components/ui/_icon-button.scss | 5 +++-- 10 files changed, 25 insertions(+), 26 deletions(-) rename src/sass/common/{_colors.scss => _themes.scss} (61%) diff --git a/page-authors.hbs b/page-authors.hbs index 0f70eb6..5118849 100644 --- a/page-authors.hbs +++ b/page-authors.hbs @@ -38,7 +38,9 @@ into the {body} of the default.hbs template --}}
+ {{#if bio}}

{{bio}}

+ {{/if}}
diff --git a/post.hbs b/post.hbs index cb5dedb..f92feae 100644 --- a/post.hbs +++ b/post.hbs @@ -49,7 +49,7 @@ into the {body} of the default.hbs template --}}
diff --git a/src/sass/app.scss b/src/sass/app.scss index af7d46e..d599060 100644 --- a/src/sass/app.scss +++ b/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"; diff --git a/src/sass/common/_colors.scss b/src/sass/common/_themes.scss similarity index 61% rename from src/sass/common/_colors.scss rename to src/sass/common/_themes.scss index 39eea83..f6d599d 100644 --- a/src/sass/common/_colors.scss +++ b/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); } } diff --git a/src/sass/common/_variables.scss b/src/sass/common/_variables.scss index cc4ae60..821f273 100644 --- a/src/sass/common/_variables.scss +++ b/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 */ diff --git a/src/sass/components/articles/_article-card.scss b/src/sass/components/articles/_article-card.scss index 5a2fca0..5259989 100644 --- a/src/sass/components/articles/_article-card.scss +++ b/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, diff --git a/src/sass/components/articles/_featured-slider.scss b/src/sass/components/articles/_featured-slider.scss index feeaa84..80cb2c3 100644 --- a/src/sass/components/articles/_featured-slider.scss +++ b/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)); } } diff --git a/src/sass/components/header/_submenu.scss b/src/sass/components/header/_submenu.scss index cdd9e8b..172f340 100644 --- a/src/sass/components/header/_submenu.scss +++ b/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') { diff --git a/src/sass/components/ui/_button.scss b/src/sass/components/ui/_button.scss index dd6c3ed..bfba950 100644 --- a/src/sass/components/ui/_button.scss +++ b/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)); } } diff --git a/src/sass/components/ui/_icon-button.scss b/src/sass/components/ui/_icon-button.scss index 2314e62..02a792a 100644 --- a/src/sass/components/ui/_icon-button.scss +++ b/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);