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

Switch to new color system

Browse source
This commit is contained in:
Kevin Kandlbinder 2022-02-06 14:42:44 +00:00 • committed by GitHub
parent 2b5ce06ca0
commit 41920ccc5b
9 changed files with 159 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
src/_globals.scss
View file

@ -27,47 +27,88 @@ $theme-light: (
"purple": #6848da, "purple": #6848da,
); );
$accentColor: map.get($theme, "accent"); $border: thin solid var(--color-border);
$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; $textShadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
$textShadowAccent: 0 0 20px rgba($accentColor, 0.15); $textShadowAccent: 0 0 20px var(--color-accent-shadow);
$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); $cardShadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
$cardHoverShadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2), $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); $cardLightShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
$cardLightHoverShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2), $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%); $homeProfileClipFront: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
$homeProfileClipBack: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%); $homeProfileClipBack: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
$aboutCVShadow: 0 0 15px 0 rgba($accentColor, 0.25); $aboutCVShadow: 0 0 15px 0 var(--color-accent-shadow-profile);
$aboutCVColorEdu: map.get($theme, "blue");
$aboutCVColorEduLight: map.get($theme-light, "blue"); @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 { @mixin homeBg {
background: linear-gradient(45deg, #000850 0%, #000320 100%), background: linear-gradient(45deg, #000850 0%, #000320 100%),
@ -99,10 +140,10 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
box-shadow: $cardShadow; box-shadow: $cardShadow;
transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
color 0.25s; color 0.25s;
color: $textColor; color: var(--color-text);
text-decoration: none; text-decoration: none;
margin: 20px; margin: 20px;
background: $background; background: var(--color-background);
&:hover, &:hover,
&:active, &:active,
@ -114,9 +155,6 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
box-shadow: $cardLightShadow; box-shadow: $cardLightShadow;
background: $lightBackground;
color: $lightTextColor;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
@ -130,17 +168,17 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
display: flex; display: flex;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
background: $accentColorDarker; background: var(--color-accent-darker);
color: white; color: white;
text-decoration: none; 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; transition: box-shadow 0.25s;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-shadow: 0 0 10px black; text-shadow: 0 0 10px black;
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
background-color: $accentColor; background-color: var(--color-accent);
} }
svg { svg {
@ -150,7 +188,7 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
&:hover, &:hover,
&:active, &:active,
&:hover { &: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 { @mixin homeBanner {
background: lighten($background, 1); background: var(--color-background-secondary);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: inherit; color: var(--color-text);
transition: background-color 0.25s, color 0.25s; transition: background-color 0.25s, color 0.25s;
@media (prefers-color-scheme: light) {
background: darken($accentColor, 1);
}
> div { > div {
display: flex; display: flex;
height: 100%; height: 100%;
padding: 20px !important; padding: 20px !important;
line-height: 50px; line-height: 50px;
font-size: 1.7em; font-size: 1.7em;
color: white;
> span { > span {
margin-left: auto; margin-left: auto;

28
src/components/navigation.module.scss
View file

@ -7,9 +7,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1200; z-index: 1200;
background-color: rgba($background, 0.9); background-color: var(--color-background-glass);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
color: white; color: var(--color-text);
overflow: auto; overflow: auto;
opacity: 0; opacity: 0;
transition: opacity 0.25s, left 0.25s; transition: opacity 0.25s, left 0.25s;
@ -22,11 +22,6 @@
pointer-events: auto; pointer-events: auto;
} }
@media (prefers-color-scheme: light) {
background-color: rgba($lightBackground, 0.9);
color: black;
}
.inner { .inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -75,23 +70,14 @@
left: 0; left: 0;
display: flex; display: flex;
width: 100%; width: 100%;
background: rgba($background, 0.95); background: var(--color-background-transparent);
color: $textColor; color: var(--color-text);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
z-index: 999; z-index: 999;
transition: background-color 0.25s, color 0.25s; transition: background-color 0.25s, color 0.25s;
@supports (backdrop-filter: blur(5px)) { @supports (backdrop-filter: blur(5px)) {
background: rgba($background, 0.9); background: var(--color-background-glass);
}
@media (prefers-color-scheme: light) {
background: rgba($lightBackground, 0.95);
color: $lightTextColor;
@supports (backdrop-filter: blur(5px)) {
background: rgba($lightBackground, 0.9);
}
} }
.topBarInner { .topBarInner {
@ -135,7 +121,7 @@
transition: border-color 0.25s; transition: border-color 0.25s;
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
border-color: $accentColor; border-color: var(--color-accent);
} }
} }
@ -150,7 +136,7 @@
.homeBar.homeBarTransparent { .homeBar.homeBarTransparent {
background: transparent; background: transparent;
color: $textColor; color: white;
backdrop-filter: blur(0); backdrop-filter: blur(0);
} }

45
src/components/scambox/Chatbox.module.scss
View file

@ -26,7 +26,7 @@
margin-bottom: 20px; margin-bottom: 20px;
background-image: linear-gradient( background-image: linear-gradient(
to top, to top,
$background, var(--color-background),
transparent 20px transparent 20px
); );
} }
@ -35,8 +35,16 @@
border-radius: 0; border-radius: 0;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
background-image: linear-gradient(to top, $background, transparent 20px), background-image: linear-gradient(
linear-gradient(to bottom, $background, transparent 20px); to top,
var(--color-background),
transparent 20px
),
linear-gradient(
to bottom,
var(--color-background),
transparent 20px
);
} }
&.openTop { &.openTop {
@ -44,37 +52,10 @@
margin-top: 20px; margin-top: 20px;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
$background, var(--color-background),
transparent 20px transparent 20px
); );
} }
@media (prefers-color-scheme: light) {
&.openBottom {
background-image: linear-gradient(
to top,
$lightBackground,
transparent 20px
);
}
&.openBoth {
background-image: linear-gradient(
to top,
$lightBackground,
transparent 20px
),
linear-gradient(to bottom, $lightBackground, transparent 20px);
}
&.openTop {
background-image: linear-gradient(
to bottom,
$lightBackground,
transparent 20px
);
}
}
} }
.chatnotice { .chatnotice {
@ -104,7 +85,7 @@
&.alignRight { &.alignRight {
align-items: flex-end; align-items: flex-end;
--msg-color: #{$accentColor}; --msg-color: #{map.get($theme, "accent")};
} }
.name { .name {

27
src/layouts/default.scss
View file

@ -4,6 +4,10 @@
@include EncodeSans.fontFaceVariable($type: "wghtOnly"); @include EncodeSans.fontFaceVariable($type: "wghtOnly");
:root {
@include vars;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -23,25 +27,22 @@ html,
min-height: 100vh; min-height: 100vh;
font-family: $mainFont; font-family: $mainFont;
scroll-behavior: smooth; scroll-behavior: smooth;
background: var(--color-background);
color: var(--color-text);
} }
#gatsby-focus-wrapper { #gatsby-focus-wrapper {
background: $background; background: var(--color-background);
color: $textColor; color: var(--color-text);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: background-color 0.25s, color 0.25s; transition: background-color 0.25s, color 0.25s;
@media (prefers-color-scheme: light) {
background: $lightBackground;
color: $lightTextColor;
}
} }
footer { footer {
background: darken($background, 1); background: var(--color-background-secondary);
width: 100%; width: 100%;
color: white; color: var(--color-text);
padding: 5px; padding: 5px;
text-align: center; text-align: center;
transition: background-color 0.25s, color 0.25s; transition: background-color 0.25s, color 0.25s;
@ -75,7 +76,7 @@ section > article,
article { article {
a { a {
color: $accentColor; color: var(--color-accent);
text-decoration: underline dotted currentColor; text-decoration: underline dotted currentColor;
text-decoration-skip: none; text-decoration-skip: none;
} }
@ -84,11 +85,7 @@ article {
h1 { h1 {
font-size: 2em; font-size: 2em;
color: $accentColor; color: var(--color-accent);
text-shadow: $textShadowAccent; text-shadow: $textShadowAccent;
@media (prefers-color-scheme: light) {
text-shadow: $textShadowAccentLight;
}
} }

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

@ -61,19 +61,15 @@
transition: text-decoration 0.5s; transition: text-decoration 0.5s;
text-decoration: underline dotted rgba(0, 0, 0, 0); text-decoration: underline dotted rgba(0, 0, 0, 0);
padding: 6px 0 6px 0; padding: 6px 0 6px 0;
color: $textColor; color: var(--color-text);
transition: color 0.25s; transition: color 0.25s;
display: flex; display: flex;
align-items: center; align-items: center;
svg { svg {
color: $accentColor; color: var(--color-accent);
margin-right: 10px; margin-right: 10px;
} }
@media (prefers-color-scheme: light) {
color: $lightTextColor;
}
} }
} }
} }

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

@ -45,7 +45,7 @@
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
background-color: $lightBackground; background-color: var(--color-background);
} }
} }
@ -63,9 +63,9 @@
@include cardGeneric; @include cardGeneric;
display: flex; display: flex;
padding: $layoutPadding; padding: $layoutPadding;
background-color: $background; background-color: var(--color-background);
margin: $layoutPadding; margin: $layoutPadding;
color: $textColor; color: var(--color-text);
font-size: 1.6em; font-size: 1.6em;
text-decoration: none; text-decoration: none;
border-radius: 10px; border-radius: 10px;
@ -88,7 +88,7 @@
flex-shrink: 0; flex-shrink: 0;
.ctaAccent { .ctaAccent {
color: $accentColor; color: var(--color-accent);
font-weight: 700; font-weight: 700;
margin-right: 10px; margin-right: 10px;
} }
@ -131,13 +131,13 @@
transition: text-decoration 0.5s; transition: text-decoration 0.5s;
text-decoration: underline dotted rgba(white, 0); text-decoration: underline dotted rgba(white, 0);
padding: 6px 0 6px 0; padding: 6px 0 6px 0;
color: $textColor; color: inherit;
display: flex; display: flex;
align-items: center; align-items: center;
svg { svg {
margin-right: 10px; margin-right: 10px;
color: $accentColor; color: var(--color-accent);
flex-shrink: 0; flex-shrink: 0;
} }
@ -153,7 +153,7 @@
} }
.contactLink > i { .contactLink > i {
color: $accentColor; color: var(--color-accent);
margin-left: -25px; margin-left: -25px;
margin-right: 5px; margin-right: 5px;
} }
@ -164,7 +164,7 @@
transform: translate(40px, 20px); transform: translate(40px, 20px);
border-radius: 5px; border-radius: 5px;
padding: 20px 20px 20px 230px; padding: 20px 20px 20px 230px;
color: $textColor; color: white;
} }
.profileImage, .profileImage,
@ -189,7 +189,7 @@
.profileImageDummy { .profileImageDummy {
z-index: 10; z-index: 10;
background: $accentColor; background: var(--color-accent);
opacity: 0.2; opacity: 0.2;
clip-path: $homeProfileClipBack; clip-path: $homeProfileClipBack;
} }
@ -225,7 +225,6 @@
padding: 15px !important; padding: 15px !important;
line-height: 15px; line-height: 15px;
font-size: 1.2em; font-size: 1.2em;
color: white;
> span { > span {
display: flex; display: flex;
@ -275,45 +274,23 @@
margin: 5px; margin: 5px;
&.skill_framework { &.skill_framework {
color: $skillColor1; color: var(--color-skill-1);
} }
&.skill_platform { &.skill_platform {
color: $skillColor2; color: var(--color-skill-2);
} }
&.skill_program { &.skill_program {
color: $skillColor3; color: var(--color-skill-3);
} }
&.skill_os { &.skill_os {
color: $skillColor4; color: var(--color-skill-4);
} }
&.skill_language { &.skill_language {
color: $skillColor5; color: var(--color-skill-5);
}
@media (prefers-color-scheme: light) {
&.skill_framework {
color: $skillColor1Light;
}
&.skill_platform {
color: $skillColor2Light;
}
&.skill_program {
color: $skillColor3Light;
}
&.skill_os {
color: $skillColor4Light;
}
&.skill_language {
color: $skillColor5Light;
}
} }
} }
} }
@ -361,7 +338,7 @@
left: 17px; left: 17px;
width: 5px; width: 5px;
height: calc(100% - 40px); height: calc(100% - 40px);
background-color: $accentColor; background-color: var(--color-accent);
border-radius: 100px; border-radius: 100px;
box-shadow: $aboutCVShadow; box-shadow: $aboutCVShadow;
@ -372,7 +349,7 @@
left: 0; left: 0;
width: 5px; width: 5px;
height: 5px; height: 5px;
background-color: $accentColor; background-color: var(--color-accent);
border-radius: 100px; border-radius: 100px;
box-shadow: $aboutCVShadow; box-shadow: $aboutCVShadow;
} }
@ -382,7 +359,7 @@
position: relative; position: relative;
margin: 20px 10px; margin: 20px 10px;
--entry-color: #{$accentColor}; --entry-color: var(--color-accent);
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@ -461,10 +438,7 @@
} }
&.entryTypeeducation { &.entryTypeeducation {
--entry-color: #{$aboutCVColorEdu}; --entry-color: var(--color-cv-edu);
@media (prefers-color-scheme: light) {
--entry-color: #{$aboutCVColorEduLight};
}
} }
} }
} }

4
src/templates/blog/listing.module.scss
View file

@ -78,7 +78,7 @@
border-bottom: thin dotted grey; border-bottom: thin dotted grey;
.title { .title {
color: $accentColor; color: var(--color-accent);
font-size: 1.5em; font-size: 1.5em;
text-decoration: underline dotted currentColor; text-decoration: underline dotted currentColor;
} }
@ -92,7 +92,7 @@
margin-left: 10px; margin-left: 10px;
> span { > span {
color: $accentColor; color: var(--color-accent);
text-decoration: underline dotted currentColor; text-decoration: underline dotted currentColor;
} }
} }

6
src/templates/blog/post.module.scss
View file

@ -14,7 +14,7 @@
} }
.noticeBox { .noticeBox {
background-color: $noticeColor; background-color: var(--color-notice);
padding: $layoutPadding; padding: $layoutPadding;
border-radius: 10px; border-radius: 10px;
@ -66,11 +66,11 @@
outline: none; outline: none;
border-radius: 10px; border-radius: 10px;
box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2), box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.25); -1px 11px 33px -10px var(--color-accent-shadow-profile);
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2), box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
-1px 11px 33px -10px rgba($accentColor, 0.25); -1px 11px 33px -10px var(--color-accent-shadow-profile);
} }
} }
} }

35
src/templates/project.module.scss
View file

@ -21,12 +21,22 @@
height: 400px; height: 400px;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
rgba($background, 0.95), black,
rgba($background, 0.25) 20%, var(--color-background-extreme-seethru) 20%,
rgba($background, 0.35) 80%, var(--color-background-seethru) 80%,
rgba($background, 1) 100% var(--color-background) 100%
); );
@media (prefers-color-scheme: light) {
background: linear-gradient(
to bottom,
black,
var(--color-background-extreme-seethru) 20%,
var(--color-background-seethru) 60%,
var(--color-background) 100%
);
}
.headerInner { .headerInner {
max-width: $layoutWidth; max-width: $layoutWidth;
width: 100%; width: 100%;
@ -36,16 +46,22 @@
flex-direction: column; flex-direction: column;
text-shadow: 0 0 10px black, 0 0 20px black; text-shadow: 0 0 10px black, 0 0 20px black;
padding: 10px 20px; padding: 10px 20px;
color: var(--color-text);
@media (prefers-color-scheme: light) {
text-shadow: none;
}
* { * {
margin: 0; margin: 0;
color: white;
font-size: 1.25em; font-size: 1.25em;
} }
h1 { h1 {
font-size: 2.2em; font-size: 2.2em;
margin-top: auto; margin-top: auto;
color: var(--color-accent);
text-shadow: $textShadowAccent;
} }
} }
} }
@ -67,14 +83,9 @@
} }
.projectAbout { .projectAbout {
background: #060606; background: var(--color-background);
color: white; color: var(--color-text);
transition: background-color 0.25s, color 0.25s; transition: background-color 0.25s, color 0.25s;
@media (prefers-color-scheme: light) {
background: $lightBackground;
color: $lightTextColor;
}
} }
.projectLinks { .projectLinks {