kevin/Unkn0wnCat.net
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/Unkn0wnCat.net.git synced 2025-04-28 09:46:48 +02:00
Code Issues Projects Releases Wiki Activity

Add dark mode

Browse source
This commit is contained in:
Kevin Kandlbinder 2022-11-26 14:47:13 +01:00
parent a96ba40ebd
commit 98653c4b4a
5 changed files with 40 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/_global.scss
View file

@ -7,6 +7,10 @@
--layout-slant: -30deg;
--layout-radius: 20px;
@media (prefers-color-scheme: dark) {
--color-base: #190b22;
--color-splash: red;
}
/*
--color-base: #190b22;
--color-splash: red;
@ -18,3 +22,21 @@
width: 100%;
margin: 0 auto;
}
@mixin animate {
transition: all 0.25s;
@include respectReducedMotion;
}
@mixin respectReducedMotion {
@media (prefers-reduced-motion: reduce) {
transition: none !important;
animation: none !important;
* {
transition: none !important;
animation: none !important;
}
}
}

1
src/index.scss
View file

@ -28,6 +28,7 @@ body {
"Roboto", sans-serif;
color: var(--color-splash);
background-color: var(--color-base);
@include animate;
}
a {

2
src/layout/Layout.module.scss
View file

@ -12,6 +12,7 @@
width: 100%;
z-index: 900;
background-color: var(--color-base);
@include animate;
> .navigationBorder {
max-width: var(--layout-width);
@ -25,6 +26,7 @@
var(--color-splash) 0.5px 3px,
var(--color-base) 3.5px 12px
);
@include animate;
}
> nav {

1
src/pages/index.module.scss
View file

@ -68,6 +68,7 @@
margin: 7px 0;
height: 3px;
background-color: var(--color-splash);
@include animate;
}
.impactBox {

16
src/pages/videos.module.scss
View file

@ -38,7 +38,9 @@
height: 100%;
border: 3px solid var(--color-splash);
border-radius: var(--layout-radius);
transition: top 0.25s, left 0.25s;
transition: top 0.25s, left 0.25s, border 0.25s;
@include respectReducedMotion;
}
[data-gatsby-image-wrapper=""] {
@ -51,7 +53,13 @@
border-radius: var(--layout-radius);
border: 3px solid var(--color-base);
z-index: 20;
transition: top 0.25s, left 0.25s;
transition: top 0.25s, left 0.25s, border 0.25s,
filter 0.25s;
@media (prefers-color-scheme: dark) {
filter: sepia(90%) saturate(200%) brightness(70%)
hue-rotate(-40deg);
}
}
}
@ -82,6 +90,10 @@
[data-gatsby-image-wrapper=""] {
top: -5px;
left: 5px;
@media (prefers-color-scheme: dark) {
filter: none;
}
}
.borderBox {