Basic dark theme

This commit is contained in:
Emil Miler 2024-01-10 11:48:46 +01:00
parent e6028884af
commit 22d5216520

View File

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