kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-07-23 11:27:18 +02:00
Code Issues Projects Releases Wiki Activity

Relocate all colors to _globals.scss

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-12-13 18:04:35 +00:00 • committed by GitHub
parent f704547b25
commit 458b155945
7 changed files with 121 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

104
src/_globals.scss
View file

@ -1,16 +1,94 @@
@use "sass:map";
$layoutWidth: 1200px;
$accentColor: #e52b3e;
$accentColorDarker: darken($accentColor, 5);
$background: #070707;
$lightBackground: #fff;
$textColor: white;
$lightTextColor: black;
$layoutPadding: 20px;
$noticeColor: rgba(#e52b3e, 0.15);
$mainFont: "Fira Code", monospace;
$theme: (
"accent": #e52b3e,
"background": #070707,
"text": white,
"red": #e52b3e,
"orange": #e5752b,
"green": #18bb20,
"blue": #6d94e9,
"purple": #886af5
);
$theme-light: (
"accent": #e52b3e,
"background": white,
"text": black,
"red": #db1e31,
"orange": #aa4f12,
"green": #17681b,
"blue": #2b66e5,
"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;
$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);
$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);
$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);
$homeProfileShadow: -1px 11px 33px -10px rgba($accentColor, 0.25);
$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");
@mixin homeBg {
background: linear-gradient(45deg, #000850 0%, #000320 100%),
radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
linear-gradient(225deg, #ff7a00 0%, #000000 100%),
linear-gradient(
135deg,
#cdffeb 10%,
#cdffeb 35%,
#009f9d 35%,
#009f9d 60%,
#07456f 60%,
#07456f 67%,
#0f0a3c 67%,
#0f0a3c 100%
);
background-blend-mode: screen, overlay, hard-light, normal;
}
@mixin flexList {
display: flex;
flex-wrap: wrap;
@ -20,7 +98,7 @@ $mainFont: "Fira Code", monospace;
@mixin cardGeneric {
border-radius: 5px;
overflow: hidden;
box-shadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
box-shadow: $cardShadow;
transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
color 0.25s;
color: $textColor;
@ -32,12 +110,11 @@ $mainFont: "Fira Code", monospace;
&:active,
&:focus {
transform: scale(1.05);
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.75);
box-shadow: $cardHoverShadow;
}
@media (prefers-color-scheme: light) {
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
box-shadow: $cardLightShadow;
background: $lightBackground;
color: $lightTextColor;
@ -46,8 +123,7 @@ $mainFont: "Fira Code", monospace;
&:active,
&:focus {
transform: scale(1.05);
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.75);
box-shadow: $cardLightHoverShadow;
}
}
}