From 458b1559451cabd2a4f6650f7d9839bc71f7ae95 Mon Sep 17 00:00:00 2001 From: Kevin Kandlbinder Date: Mon, 13 Dec 2021 18:04:35 +0000 Subject: [PATCH] Relocate all colors to _globals.scss --- src/_globals.scss | 104 ++++++++++++++++++++++++++++----- src/layouts/default.scss | 4 +- src/pages/donate.module.scss | 4 +- src/pages/friends.module.scss | 2 +- src/pages/index.module.scss | 74 ++++++++--------------- src/pages/projects.module.scss | 25 +------- src/pages/social.module.scss | 2 +- 7 files changed, 121 insertions(+), 94 deletions(-) diff --git a/src/_globals.scss b/src/_globals.scss index 9e89ba9..1f22fe6 100644 --- a/src/_globals.scss +++ b/src/_globals.scss @@ -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; } } } diff --git a/src/layouts/default.scss b/src/layouts/default.scss index 27bf061..173ba09 100644 --- a/src/layouts/default.scss +++ b/src/layouts/default.scss @@ -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; } } diff --git a/src/pages/donate.module.scss b/src/pages/donate.module.scss index 1fafaa7..0e746ed 100644 --- a/src/pages/donate.module.scss +++ b/src/pages/donate.module.scss @@ -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 { diff --git a/src/pages/friends.module.scss b/src/pages/friends.module.scss index 797a945..a5a38a8 100644 --- a/src/pages/friends.module.scss +++ b/src/pages/friends.module.scss @@ -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; diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index 11803d3..178afc9 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -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}; } } } diff --git a/src/pages/projects.module.scss b/src/pages/projects.module.scss index 3ea489f..e7d1d45 100644 --- a/src/pages/projects.module.scss +++ b/src/pages/projects.module.scss @@ -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; } diff --git a/src/pages/social.module.scss b/src/pages/social.module.scss index 0173b73..805511c 100644 --- a/src/pages/social.module.scss +++ b/src/pages/social.module.scss @@ -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;