Switch to new color system

This commit is contained in:
Kevin Kandlbinder 2022-02-06 14:42:44 +00:00 committed by GitHub
parent 2b5ce06ca0
commit 41920ccc5b
9 changed files with 159 additions and 181 deletions

View file

@ -78,7 +78,7 @@
border-bottom: thin dotted grey;
.title {
color: $accentColor;
color: var(--color-accent);
font-size: 1.5em;
text-decoration: underline dotted currentColor;
}
@ -92,7 +92,7 @@
margin-left: 10px;
> span {
color: $accentColor;
color: var(--color-accent);
text-decoration: underline dotted currentColor;
}
}

View file

@ -14,7 +14,7 @@
}
.noticeBox {
background-color: $noticeColor;
background-color: var(--color-notice);
padding: $layoutPadding;
border-radius: 10px;
@ -66,11 +66,11 @@
outline: none;
border-radius: 10px;
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.25);
-1px 11px 33px -10px var(--color-accent-shadow-profile);
@media (prefers-color-scheme: light) {
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.25);
-1px 11px 33px -10px var(--color-accent-shadow-profile);
}
}
}

View file

@ -21,12 +21,22 @@
height: 400px;
background: linear-gradient(
to bottom,
rgba($background, 0.95),
rgba($background, 0.25) 20%,
rgba($background, 0.35) 80%,
rgba($background, 1) 100%
black,
var(--color-background-extreme-seethru) 20%,
var(--color-background-seethru) 80%,
var(--color-background) 100%
);
@media (prefers-color-scheme: light) {
background: linear-gradient(
to bottom,
black,
var(--color-background-extreme-seethru) 20%,
var(--color-background-seethru) 60%,
var(--color-background) 100%
);
}
.headerInner {
max-width: $layoutWidth;
width: 100%;
@ -36,16 +46,22 @@
flex-direction: column;
text-shadow: 0 0 10px black, 0 0 20px black;
padding: 10px 20px;
color: var(--color-text);
@media (prefers-color-scheme: light) {
text-shadow: none;
}
* {
margin: 0;
color: white;
font-size: 1.25em;
}
h1 {
font-size: 2.2em;
margin-top: auto;
color: var(--color-accent);
text-shadow: $textShadowAccent;
}
}
}
@ -67,14 +83,9 @@
}
.projectAbout {
background: #060606;
color: white;
background: var(--color-background);
color: var(--color-text);
transition: background-color 0.25s, color 0.25s;
@media (prefers-color-scheme: light) {
background: $lightBackground;
color: $lightTextColor;
}
}
.projectLinks {