vrifox/website
vrifox/website
1
0
Fork 0
Code Issues 3 Pull requests Activity

new color scheme

Browse source
This commit is contained in:
Vri 🌈 2023-03-09 15:41:41 +01:00
parent 99574824f3
commit 287077d9a9
Signed by: vrifox
GPG key ID: D40098E5B60B2197
3 changed files with 51 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scss/home.scss
View file

@ -19,7 +19,7 @@
font-family: "playfair"; font-family: "playfair";
font-size: 2rem; font-size: 2rem;
height: 100vh; height: 100vh;
color: var(--text-2); color: var(--text-accent);
h1 { h1 {
letter-spacing: 0.5rem; letter-spacing: 0.5rem;
font-size: 7rem; font-size: 7rem;

24
assets/scss/partials/sidebar.scss
View file

@ -3,7 +3,7 @@
// ----------- // -----------
#sidebar { #sidebar {
background: var(--sidebar-background-10); background: var(--sidebar-background);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
@ -15,7 +15,7 @@
z-index: 2; z-index: 2;
margin: 0.5rem 0; margin: 0.5rem 0;
border-radius: 0 2rem 2rem 0; border-radius: 0 2rem 2rem 0;
border: 1px solid var(--sidebar-background-05); border: 1px solid var(--sidebar-border);
border-left: 0; border-left: 0;
header { header {
text-align: center; text-align: center;
@ -55,7 +55,7 @@
line-height: 4rem; line-height: 4rem;
} }
&::after { &::after {
background-color: var(--sidebar-background-20); background-color: var(--sidebar-accent);
bottom: 0; bottom: 0;
content: ""; content: "";
height: 100%; height: 100%;
@ -69,9 +69,12 @@
transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear; transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear;
} }
&.active { &.active {
background-color: var(--sidebar-background-20); background-color: var(--sidebar-accent);
&:hover { &:hover {
background-color: var(--sidebar-background-30); background-color: var(--sidebar-accented);
}
&:active {
background-color: var(--sidebar-accentest);
} }
} }
&:hover { &:hover {
@ -82,7 +85,7 @@
} }
&:active { &:active {
&::after { &::after {
background-color: var(--sidebar-background-30); background-color: var(--sidebar-accented);
} }
} }
} }
@ -134,15 +137,6 @@
padding: 1em; padding: 1em;
margin: -1em; margin: -1em;
pointer-events: all; pointer-events: all;
/*&::after {
content: attr(data-page-lang);
position: absolute;
left: -4px;
font-size: 0.6em;
line-height: 1.5em;
bottom: 0;
text-transform: uppercase;
}*/
} }
#languages { #languages {
background-color: var(--background); background-color: var(--background);

62
assets/scss/variables.scss
View file

@ -1,16 +1,32 @@
:root { :root {
--background: hsl(210, 21%, 15%); @for $i from 1 to 20 {
--border: hsl(210, 21%, 20%); $counter: $i * 50;
$saturation: 20% + $i * 2.5%;
--text: hsl(210, 21%, 95%); $lightness: $i * 5%;
--text-2: hsl(210, 21%, 80%); --primary-dark-#{$counter}: hsl(275, #{$saturation}, #{$lightness});
--text-secondary: hsl(210, 21%, 40%); }
--sidebar-background-05: hsl(210, 21%, 5%);
--sidebar-background-10: hsl(210, 21%, 10%);
--sidebar-background-20: hsl(210, 21%, 20%);
--sidebar-background-30: hsl(210, 21%, 30%);
@for $i from 1 to 20 {
$counter: $i * 50;
$saturation: 20% + $i * 2.5%;
$lightness: $i * 5%;
--primary-light-#{$counter}: hsl(25, #{$saturation}, #{$lightness});
}
--background: var(--primary-dark-150);
--border: var(--primary-dark-200);
--text: var(--primary-light-950);
--text-accent: var(--primary-light-900);
--text-accented: var(--primary-light-850);
--text-accentest: var(--primary-light-800);
--sidebar-background: var(--primary-dark-100);
--sidebar-border: var(--primary-dark-150);
--sidebar-accent: var(--primary-dark-150);
--sidebar-accented: var(--primary-dark-200);
--sidebar-accentest: var(--primary-dark-350);
--vriish-rose: hsl(0, 100%, 75%); --vriish-rose: hsl(0, 100%, 75%);
--orange: hsl(25, 100%, 75%); --orange: hsl(25, 100%, 75%);
--gold: hsl(50, 100%, 75%); --gold: hsl(50, 100%, 75%);
@ -19,21 +35,25 @@
--purpur: hsl(275, 100%, 75%); --purpur: hsl(275, 100%, 75%);
--white: hsl(360, 100%, 100%); --white: hsl(360, 100%, 100%);
--vriish-gradient: linear-gradient(30deg, var(--orange) -100%, var(--vriish-rose) 100%); --vriish-gradient: linear-gradient(55deg, var(--primary-light-300) -50%, var(--primary-dark-300) 150%);
--vriish-gradient-shadow: 2px 2px 10px var(--background); --vriish-gradient-shadow: 2px 2px 10px var(--background);
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--background: hsl(0, 100%, 95%); --background: var(--primary-light-850);
--border: hsl(0, 100%, 90%); --border: var(--primary-dark-800);
--text: hsl(0, 20%, 20%); --text: var(--primary-dark-50);
--text-2: hsl(0, 20%, 30%); --text-accent: var(--primary-dark-100);
--text-secondary: hsl(0, 20%, 70%); --text-accented: var(--primary-dark-150);
--text-accentest: var(--primary-dark-200);
--sidebar-background-05: hsla(0, 50%, 95%); --sidebar-background: var(--primary-light-900);
--sidebar-background-10: hsla(0, 50%, 90%); --sidebar-border: var(--primary-light-850);
--sidebar-background-20: hsla(0, 50%, 80%); --sidebar-accent: var(--primary-light-850);
--sidebar-background-30: hsla(0, 50%, 70%); --sidebar-accented: var(--primary-light-800);
--sidebar-accentest: var(--primary-light-750);
--vriish-gradient: linear-gradient(55deg, var(--primary-light-700) -50%, var(--primary-dark-700) 150%);
} }
} }