mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-13 16:12:05 +02:00
Relocate all colors to _globals.scss
This commit is contained in:
GitHub
parent
f704547b25
commit
458b155945
7 changed files with 121 additions and 94 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue