Basic dark theme
This commit is contained in:
parent
e6028884af
commit
22d5216520
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user