mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-20 19:37:22 +02:00
Switch to new color system
This commit is contained in:
GitHub
parent
2b5ce06ca0
commit
41920ccc5b
9 changed files with 159 additions and 181 deletions
|
|
@ -27,47 +27,88 @@ $theme-light: (
|
|||
"purple": #6848da,
|
||||
);
|
||||
|
||||
$accentColor: map.get($theme, "accent");
|
||||
$background: map.get($theme, "background");
|
||||
$lightBackground: map.get($theme-light, "background");
|
||||
$textColor: map.get($theme, "text");
|
||||
$lightTextColor: map.get($theme-light, "text");
|
||||
$accentColorDarker: darken($accentColor, 5);
|
||||
$borderColor: rgba(0, 0, 0, 0.25);
|
||||
$border: thin solid $borderColor;
|
||||
$border: thin solid var(--color-border);
|
||||
$textShadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
$textShadowAccent: 0 0 20px rgba($accentColor, 0.15);
|
||||
$textShadowAccentLight: 0 0 20px rgba($accentColor, 0.3);
|
||||
|
||||
$skillColor1: map.get($theme, "red");
|
||||
$skillColor2: map.get($theme, "orange");
|
||||
$skillColor3: map.get($theme, "green");
|
||||
$skillColor4: map.get($theme, "blue");
|
||||
$skillColor5: map.get($theme, "purple");
|
||||
|
||||
$skillColor1Light: map.get($theme-light, "red");
|
||||
$skillColor2Light: map.get($theme-light, "orange");
|
||||
$skillColor3Light: map.get($theme-light, "green");
|
||||
$skillColor4Light: map.get($theme-light, "blue");
|
||||
$skillColor5Light: map.get($theme-light, "purple");
|
||||
|
||||
$noticeColor: rgba($accentColor, 0.15);
|
||||
$textShadowAccent: 0 0 20px var(--color-accent-shadow);
|
||||
|
||||
$cardShadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
|
||||
$cardHoverShadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
|
||||
-1px 11px 33px -10px rgba($accentColor, 0.75);
|
||||
-1px 11px 33px -10px var(--color-accent-shadow-hover);
|
||||
|
||||
$cardLightShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
|
||||
$cardLightHoverShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
|
||||
-1px 11px 33px -10px rgba($accentColor, 0.75);
|
||||
-1px 11px 33px -10px var(--color-accent-shadow-hover);
|
||||
|
||||
$homeProfileShadow: -1px 11px 33px -10px rgba($accentColor, 0.25);
|
||||
$homeProfileShadow: -1px 11px 33px -10px var(--color-accent-shadow-profile);
|
||||
$homeProfileClipFront: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
|
||||
$homeProfileClipBack: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
|
||||
|
||||
$aboutCVShadow: 0 0 15px 0 rgba($accentColor, 0.25);
|
||||
$aboutCVColorEdu: map.get($theme, "blue");
|
||||
$aboutCVColorEduLight: map.get($theme-light, "blue");
|
||||
$aboutCVShadow: 0 0 15px 0 var(--color-accent-shadow-profile);
|
||||
|
||||
@mixin vars {
|
||||
--color-accent: #{map.get($theme, "accent")};
|
||||
--color-accent-darker: #{darken(map.get($theme, "accent"), 5)};
|
||||
--color-accent-shadow: #{rgba(map.get($theme, "accent"), 0.15)};
|
||||
--color-accent-shadow-button: #{rgba(map.get($theme, "accent"), 0.5)};
|
||||
--color-accent-shadow-button-hover: #{rgba(map.get($theme, "accent"), 0.9)};
|
||||
--color-accent-shadow-hover: #{rgba(map.get($theme, "accent"), 0.75)};
|
||||
--color-accent-shadow-profile: #{rgba(map.get($theme, "accent"), 0.25)};
|
||||
--color-background: #{map.get($theme, "background")};
|
||||
--color-background-secondary: #{lighten(map.get($theme, "background"), 1)};
|
||||
--color-background-glass: #{rgba(map.get($theme, "background"), 0.9)};
|
||||
--color-background-transparent: #{rgba(map.get($theme, "background"), 0.95)};
|
||||
--color-background-seethru: #{rgba(map.get($theme, "background"), 0.35)};
|
||||
--color-background-extreme-seethru: #{rgba(
|
||||
map.get($theme, "background"),
|
||||
0.25
|
||||
)};
|
||||
--color-text: #{map.get($theme, "text")};
|
||||
--color-border: rgba(0, 0, 0, 0.25);
|
||||
|
||||
--color-skill-1: #{map.get($theme, "red")};
|
||||
--color-skill-2: #{map.get($theme, "orange")};
|
||||
--color-skill-3: #{map.get($theme, "green")};
|
||||
--color-skill-4: #{map.get($theme, "blue")};
|
||||
--color-skill-5: #{map.get($theme, "purple")};
|
||||
|
||||
--color-notice: #{rgba(map.get($theme, "accent"), 0.15)};
|
||||
|
||||
--color-cv-edu: #{map.get($theme, "blue")};
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
--color-background: #{map.get($theme-light, "background")};
|
||||
--color-background-secondary: #{darken(
|
||||
map.get($theme-light, "background"),
|
||||
1
|
||||
)};
|
||||
--color-background-glass: #{rgba(
|
||||
map.get($theme-light, "background"),
|
||||
0.9
|
||||
)};
|
||||
--color-background-transparent: #{rgba(
|
||||
map.get($theme-light, "background"),
|
||||
0.95
|
||||
)};
|
||||
--color-background-seethru: #{rgba(
|
||||
map.get($theme-light, "background"),
|
||||
0.35
|
||||
)};
|
||||
--color-background-extreme-seethru: #{rgba(
|
||||
map.get($theme-light, "background"),
|
||||
0.25
|
||||
)};
|
||||
--color-text: #{map.get($theme-light, "text")};
|
||||
--color-accent-shadow: #{rgba(map.get($theme, "accent"), 0.3)};
|
||||
|
||||
--color-skill-1: #{map.get($theme-light, "red")};
|
||||
--color-skill-2: #{map.get($theme-light, "orange")};
|
||||
--color-skill-3: #{map.get($theme-light, "green")};
|
||||
--color-skill-4: #{map.get($theme-light, "blue")};
|
||||
--color-skill-5: #{map.get($theme-light, "purple")};
|
||||
|
||||
--color-cv-edu: #{map.get($theme-light, "blue")};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin homeBg {
|
||||
background: linear-gradient(45deg, #000850 0%, #000320 100%),
|
||||
|
|
@ -99,10 +140,10 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
|
|||
box-shadow: $cardShadow;
|
||||
transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
|
||||
color 0.25s;
|
||||
color: $textColor;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
margin: 20px;
|
||||
background: $background;
|
||||
background: var(--color-background);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
|
|
@ -114,9 +155,6 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
|
|||
@media (prefers-color-scheme: light) {
|
||||
box-shadow: $cardLightShadow;
|
||||
|
||||
background: $lightBackground;
|
||||
color: $lightTextColor;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
|
|
@ -130,17 +168,17 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
|
|||
display: flex;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
background: $accentColorDarker;
|
||||
background: var(--color-accent-darker);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
|
||||
box-shadow: 0 0 33px -10px var(--color-accent-shadow-button);
|
||||
transition: box-shadow 0.25s;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-shadow: 0 0 10px black;
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $accentColor;
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
@ -150,7 +188,7 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
|
|||
&:hover,
|
||||
&:active,
|
||||
&:hover {
|
||||
box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
|
||||
box-shadow: 0 0 33px -10px var(--color-accent-shadow-button-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -160,23 +198,18 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
|
|||
}
|
||||
|
||||
@mixin homeBanner {
|
||||
background: lighten($background, 1);
|
||||
background: var(--color-background-secondary);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
color: var(--color-text);
|
||||
transition: background-color 0.25s, color 0.25s;
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: darken($accentColor, 1);
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 20px !important;
|
||||
line-height: 50px;
|
||||
font-size: 1.7em;
|
||||
color: white;
|
||||
|
||||
> span {
|
||||
margin-left: auto;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue