em/kocandaci
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Basic dark theme

Browse Source
This commit is contained in:
Emil Miler 2024-01-10 11:48:46 +01:00
parent e6028884af
commit 22d5216520
1 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
sass/style.scss
View File

@ -22,6 +22,11 @@ body {
&>* { &>* {
width: 100%; width: 100%;
} }
@media (prefers-color-scheme: dark) {
color: #ddd;
background-color: #222;
}
} }
.wrap { .wrap {
@ -48,6 +53,10 @@ nav {
.logo { .logo {
height: 4em; height: 4em;
display: block; display: block;
@media (prefers-color-scheme: dark) {
filter: contrast(80%) saturate(80%) brightness(180%);
}
} }
ul { ul {
@ -91,12 +100,12 @@ img {
} }
header { header {
position: relative;
min-height: 35em; min-height: 35em;
background-color: #fff; background-image: url('img/panorama.jpg');
background-image: url('img/forest.svg'), url('img/panorama.jpg'); background-size: cover;
background-size: contain, cover; background-position: center center;
background-position: center bottom -4px, center center; // -4px fixes a visible line on some resolutions background-repeat: no-repeat;
background-repeat: no-repeat, no-repeat;
color: #fff; color: #fff;
.wrap { .wrap {
@ -107,6 +116,23 @@ header {
font-size: 2.5em; font-size: 2.5em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('img/forest.svg');
background-size: contain;
background-position: center bottom -4px; // -4px fixes a visible line on some resolutions
background-repeat: no-repeat;
@media (prefers-color-scheme: dark) {
filter: invert(100%) contrast(73%);
}
}
} }
section { section {