kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-05 21:26:24 +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,
);
$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;
$border: thin solid var(--color-border);
$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);
$textShadowAccent: 0 0 20px var(--color-accent-shadow);
$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);
-1px 11px 33px -10px var(--color-accent-shadow-hover);
$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);
-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%);
$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");
$aboutCVShadow: 0 0 15px 0 var(--color-accent-shadow-profile);
@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 {
background: linear-gradient(45deg, #000850 0%, #000320 100%),
@ -99,10 +140,10 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
box-shadow: $cardShadow;
transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
color 0.25s;
color: $textColor;
color: var(--color-text);
text-decoration: none;
margin: 20px;
background: $background;
background: var(--color-background);
&:hover,
&:active,
@ -114,9 +155,6 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
@media (prefers-color-scheme: light) {
box-shadow: $cardLightShadow;
background: $lightBackground;
color: $lightTextColor;
&:hover,
&:active,
&:focus {
@ -130,17 +168,17 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
display: flex;
padding: 10px;
text-align: center;
background: $accentColorDarker;
background: var(--color-accent-darker);
color: white;
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;
align-items: center;
justify-content: center;
text-shadow: 0 0 10px black;
@media (prefers-color-scheme: light) {
background-color: $accentColor;
background-color: var(--color-accent);
}
svg {
@ -150,7 +188,7 @@ $aboutCVColorEduLight: map.get($theme-light, "blue");
&:hover,
&:active,
&: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 {
background: lighten($background, 1);
background: var(--color-background-secondary);
cursor: pointer;
text-decoration: none;
color: inherit;
color: var(--color-text);
transition: background-color 0.25s, color 0.25s;
@media (prefers-color-scheme: light) {
background: darken($accentColor, 1);
}
> div {
display: flex;
height: 100%;
padding: 20px !important;
line-height: 50px;
font-size: 1.7em;
color: white;
> span {
margin-left: auto;

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

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

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

@ -26,7 +26,7 @@
margin-bottom: 20px;
background-image: linear-gradient(
to top,
$background,
var(--color-background),
transparent 20px
);
}
@ -35,8 +35,16 @@
border-radius: 0;
margin-top: 20px;
margin-bottom: 20px;
background-image: linear-gradient(to top, $background, transparent 20px),
linear-gradient(to bottom, $background, transparent 20px);
background-image: linear-gradient(
to top,
var(--color-background),
transparent 20px
),
linear-gradient(
to bottom,
var(--color-background),
transparent 20px
);
}
&.openTop {
@ -44,37 +52,10 @@
margin-top: 20px;
background-image: linear-gradient(
to bottom,
$background,
var(--color-background),
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 {
@ -104,7 +85,7 @@
&.alignRight {
align-items: flex-end;
--msg-color: #{$accentColor};
--msg-color: #{map.get($theme, "accent")};
}
.name {

27
src/layouts/default.scss
View file

@ -4,6 +4,10 @@
@include EncodeSans.fontFaceVariable($type: "wghtOnly");
:root {
@include vars;
}
* {
box-sizing: border-box;
@ -23,25 +27,22 @@ html,
min-height: 100vh;
font-family: $mainFont;
scroll-behavior: smooth;
background: var(--color-background);
color: var(--color-text);
}
#gatsby-focus-wrapper {
background: $background;
color: $textColor;
background: var(--color-background);
color: var(--color-text);
display: flex;
flex-direction: column;
transition: background-color 0.25s, color 0.25s;
@media (prefers-color-scheme: light) {
background: $lightBackground;
color: $lightTextColor;
}
}
footer {
background: darken($background, 1);
background: var(--color-background-secondary);
width: 100%;
color: white;
color: var(--color-text);
padding: 5px;
text-align: center;
transition: background-color 0.25s, color 0.25s;
@ -75,7 +76,7 @@ section > article,
article {
a {
color: $accentColor;
color: var(--color-accent);
text-decoration: underline dotted currentColor;
text-decoration-skip: none;
}
@ -84,11 +85,7 @@ article {
h1 {
font-size: 2em;
color: $accentColor;
color: var(--color-accent);
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;
text-decoration: underline dotted rgba(0, 0, 0, 0);
padding: 6px 0 6px 0;
color: $textColor;
color: var(--color-text);
transition: color 0.25s;
display: flex;
align-items: center;
svg {
color: $accentColor;
color: var(--color-accent);
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) {
background-color: $lightBackground;
background-color: var(--color-background);
}
}
@ -63,9 +63,9 @@
@include cardGeneric;
display: flex;
padding: $layoutPadding;
background-color: $background;
background-color: var(--color-background);
margin: $layoutPadding;
color: $textColor;
color: var(--color-text);
font-size: 1.6em;
text-decoration: none;
border-radius: 10px;
@ -88,7 +88,7 @@
flex-shrink: 0;
.ctaAccent {
color: $accentColor;
color: var(--color-accent);
font-weight: 700;
margin-right: 10px;
}
@ -131,13 +131,13 @@
transition: text-decoration 0.5s;
text-decoration: underline dotted rgba(white, 0);
padding: 6px 0 6px 0;
color: $textColor;
color: inherit;
display: flex;
align-items: center;
svg {
margin-right: 10px;
color: $accentColor;
color: var(--color-accent);
flex-shrink: 0;
}
@ -153,7 +153,7 @@
}
.contactLink > i {
color: $accentColor;
color: var(--color-accent);
margin-left: -25px;
margin-right: 5px;
}
@ -164,7 +164,7 @@
transform: translate(40px, 20px);
border-radius: 5px;
padding: 20px 20px 20px 230px;
color: $textColor;
color: white;
}
.profileImage,
@ -189,7 +189,7 @@
.profileImageDummy {
z-index: 10;
background: $accentColor;
background: var(--color-accent);
opacity: 0.2;
clip-path: $homeProfileClipBack;
}
@ -225,7 +225,6 @@
padding: 15px !important;
line-height: 15px;
font-size: 1.2em;
color: white;
> span {
display: flex;
@ -275,45 +274,23 @@
margin: 5px;
&.skill_framework {
color: $skillColor1;
color: var(--color-skill-1);
}
&.skill_platform {
color: $skillColor2;
color: var(--color-skill-2);
}
&.skill_program {
color: $skillColor3;
color: var(--color-skill-3);
}
&.skill_os {
color: $skillColor4;
color: var(--color-skill-4);
}
&.skill_language {
color: $skillColor5;
}
@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;
}
color: var(--color-skill-5);
}
}
}
@ -361,7 +338,7 @@
left: 17px;
width: 5px;
height: calc(100% - 40px);
background-color: $accentColor;
background-color: var(--color-accent);
border-radius: 100px;
box-shadow: $aboutCVShadow;
@ -372,7 +349,7 @@
left: 0;
width: 5px;
height: 5px;
background-color: $accentColor;
background-color: var(--color-accent);
border-radius: 100px;
box-shadow: $aboutCVShadow;
}
@ -382,7 +359,7 @@
position: relative;
margin: 20px 10px;
--entry-color: #{$accentColor};
--entry-color: var(--color-accent);
&:first-child {
margin-top: 0;
@ -461,10 +438,7 @@
}
&.entryTypeeducation {
--entry-color: #{$aboutCVColorEdu};
@media (prefers-color-scheme: light) {
--entry-color: #{$aboutCVColorEduLight};
}
--entry-color: var(--color-cv-edu);
}
}
}

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

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

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

@ -14,7 +14,7 @@
}
.noticeBox {
background-color: $noticeColor;
background-color: var(--color-notice);
padding: $layoutPadding;
border-radius: 10px;
@ -66,11 +66,11 @@
outline: none;
border-radius: 10px;
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) {
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;
background: linear-gradient(
to bottom,
rgba($background, 0.95),
rgba($background, 0.25) 20%,
rgba($background, 0.35) 80%,
rgba($background, 1) 100%
black,
var(--color-background-extreme-seethru) 20%,
var(--color-background-seethru) 80%,
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 {
max-width: $layoutWidth;
width: 100%;
@ -36,16 +46,22 @@
flex-direction: column;
text-shadow: 0 0 10px black, 0 0 20px black;
padding: 10px 20px;
color: var(--color-text);
@media (prefers-color-scheme: light) {
text-shadow: none;
}
* {
margin: 0;
color: white;
font-size: 1.25em;
}
h1 {
font-size: 2.2em;
margin-top: auto;
color: var(--color-accent);
text-shadow: $textShadowAccent;
}
}
}
@ -67,14 +83,9 @@
}
.projectAbout {
background: #060606;
color: white;
background: var(--color-background);
color: var(--color-text);
transition: background-color 0.25s, color 0.25s;
@media (prefers-color-scheme: light) {
background: $lightBackground;
color: $lightTextColor;
}
}
.projectLinks {