kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-01 10:12:03 +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;
}
}
}

4
src/layouts/default.scss
View file

@ -79,9 +79,9 @@ h1 {
color: $accentColor;
text-shadow: 0 0 20px rgba($accentColor, 0.15);
text-shadow: $textShadowAccent;
@media (prefers-color-scheme: light) {
text-shadow: 0 0 20px rgba($accentColor, 0.3);
text-shadow: $textShadowAccentLight;
}
}

4
src/pages/donate.module.scss
View file

@ -4,7 +4,7 @@
display: flex;
width: 150px;
margin: 20px auto;
border: thin solid rgba(0, 0, 0, 0.25);
border: $border;
border-radius: 5px;
overflow: hidden;
line-height: 40px;
@ -14,7 +14,7 @@
border: none;
padding-left: 10px;
width: 1px;
border-right: thin solid rgba(0, 0, 0, 0.25);
border-right: $border;
}
div {

2
src/pages/friends.module.scss
View file

@ -18,7 +18,7 @@
display: flex;
padding: 10px;
flex-direction: column-reverse;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
text-shadow: $textShadow;
color: white;
position: relative;

74
src/pages/index.module.scss
View file

@ -33,21 +33,7 @@
}
.heroSectionBg {
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;
@include homeBg;
}
.heroSectionBgOver {
@ -197,15 +183,15 @@
.profileImage {
z-index: 20;
box-shadow: -1px 11px 33px -10px #e5502b4b;
clip-path: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
box-shadow: $homeProfileShadow;
clip-path: $homeProfileClipFront;
}
.profileImageDummy {
z-index: 10;
background: $accentColor;
opacity: 0.2;
clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
clip-path: $homeProfileClipBack;
}
@media (max-width: 690px) {
@ -289,44 +275,44 @@
margin: 5px;
&.skill_framework {
color: #e52b3e;
color: $skillColor1
}
&.skill_platform {
color: #e5752b;
color: $skillColor2
}
&.skill_program {
color: #18bb20;
color: $skillColor3;
}
&.skill_os {
color: #6d94e9;
color: $skillColor4;
}
&.skill_language {
color: #886af5;
color: $skillColor5;
}
@media (prefers-color-scheme: light) {
&.skill_os {
color: #2b66e5;
}
&.skill_language {
color: #6848da;
}
&.skill_framework {
color: #db1e31;
color: $skillColor1Light;
}
&.skill_platform {
color: #aa4f12;
color: $skillColor2Light;
}
&.skill_program {
color: #17681b;
color: $skillColor3Light;
}
&.skill_os {
color: $skillColor4Light;
}
&.skill_language {
color: $skillColor5Light;
}
}
}
@ -377,7 +363,7 @@
height: calc(100% - 40px);
background-color: $accentColor;
border-radius: 100px;
box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
box-shadow: $aboutCVShadow;
&::before {
content: " ";
@ -388,20 +374,8 @@
height: 5px;
background-color: $accentColor;
border-radius: 100px;
box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
box-shadow: $aboutCVShadow;
}
/*&::after {
content: " ";
position: absolute;
bottom: -10px;
left: 0;
width: 5px;
height: 5px;
background-color: $accentColor;
border-radius: 100px;
box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
}*/
}
.entry {
@ -487,9 +461,9 @@
}
&.entryTypeeducation {
--entry-color: #5070ff;
--entry-color: #{$aboutCVColorEdu};
@media (prefers-color-scheme: light) {
--entry-color: #2347e9;
--entry-color: #{$aboutCVColorEduLight};
}
}
}

25
src/pages/projects.module.scss
View file

@ -14,35 +14,12 @@
flex-shrink: 0;
position: relative;
.projectCardActivityIndicator {
position: absolute;
margin: 12px;
padding: 2px 5px;
border-radius: 3px;
&.activityIndicatorGreen {
background: #26de81;
}
&.activityIndicatorYellow {
background: #f7b731;
}
&.activityIndicatorRed {
background: #fc5c65;
}
&.activityIndicatorBlue {
background: #45aaf2;
}
}
.projectCardImage {
width: 100%;
height: 250px;
background-position: center;
background-size: cover;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
text-shadow: $textShadow;
color: white;
}

2
src/pages/social.module.scss
View file

@ -17,7 +17,7 @@
display: flex;
padding: 10px;
flex-direction: column-reverse;
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
text-shadow: $textShadow;
color: white;
position: relative;