Implement dark mode
This commit is contained in:
parent
747302604a
commit
c73678c4f0
|
@ -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
2
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>
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -2,11 +2,7 @@
|
|||
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
$main-color: #04aeee;
|
||||
$titles: #333;
|
||||
$body: #4a4a4a;
|
||||
$light-blue: #f4f8fd;
|
||||
$dark-blue: #293951;
|
||||
$gray: #9b9b9b;
|
||||
|
||||
/** Config */
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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') {
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue