zhao/heti
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: update darkmode support

Browse source
This commit is contained in:
Sivan 2020-05-18 00:49:59 +08:00
parent 150d657a8e
commit a0367d5a66
14 changed files with 1456 additions and 504 deletions
Download patch file Download diff file Expand all files Collapse all files

45
_site/scss/components/_grid-container.scss
View file

@ -1,6 +1,5 @@
// Author: Sivan [sun.sivan@gmail.com]
// Description: grid container.
$grid-sizes: (
"12": 12px,
"24": 24px
@ -20,6 +19,26 @@ $padding-desktop: 48px;
background-image: linear-gradient(to left, transparent ($grid-width - 1px), $grid-color 1px);
}
@mixin darkmode-mobile {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@include grid-image-horizontal($width, $padding-mobile, hsl(0, 0%, 20%));
.heti--vertical {
@include grid-image-vertical($width, hsl(0, 0%, 20%));
}
}
}
}
@mixin darkmode-desktop {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@include grid-image-horizontal($width, $padding-desktop, hsl(0, 0%, 20%), hsla(360, 100%, 65%, 0.4));
}
}
}
.container {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@ -35,15 +54,13 @@ $padding-desktop: 48px;
}
}
@media (prefers-color-scheme: dark) {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@include grid-image-horizontal($width, $padding-mobile, hsl(0, 0%, 20%));
[data-darkmode="dark"] & {
@include darkmode-mobile;
}
.heti--vertical {
@include grid-image-vertical($width, hsl(0, 0%, 20%));
}
}
@media (prefers-color-scheme: dark) {
[data-darkmode="auto"] & {
@include darkmode-mobile;
}
}
@ -55,11 +72,13 @@ $padding-desktop: 48px;
}
}
[data-darkmode="dark"] & {
@include darkmode-desktop;
}
@media (prefers-color-scheme: dark) {
@each $size, $width in $grid-sizes {
&[data-bg-grid="grid-#{$size}"] {
@include grid-image-horizontal($width, $padding-desktop, hsl(0, 0%, 20%), hsla(360, 100%, 65%, 0.4));
}
[data-darkmode="auto"] & {
@include darkmode-desktop;
}
}
}