mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-10 06:32:06 +02:00
Switch to new color system
This commit is contained in:
parent
2b5ce06ca0
commit
41920ccc5b
9 changed files with 159 additions and 181 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue