yann/liebling
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Implement dark mode

Browse source
This commit is contained in:
Eduardo 2019-10-05 22:45:34 +02:00
parent 747302604a
commit c73678c4f0
10 changed files with 25 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
page-authors.hbs
View file

@ -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>

2
post.hbs
View file

@ -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>

2
src/sass/app.scss
View file

@ -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";

12
src/sass/common/_colors.scss → src/sass/common/_themes.scss
View file

@ -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);
}
}

4
src/sass/common/_variables.scss
View file

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

13
src/sass/components/articles/_article-card.scss
View file

@ -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,

4
src/sass/components/articles/_featured-slider.scss
View file

@ -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));
}
}

2
src/sass/components/header/_submenu.scss
View file

@ -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') {

5
src/sass/components/ui/_button.scss
View file

@ -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));
}
}

5
src/sass/components/ui/_icon-button.scss
View file

@ -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);