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

update

Browse source
This commit is contained in:
Vri 🌈 2023-03-09 17:02:06 +01:00
parent 287077d9a9
commit 4c2cc9f3b4
Signed by: vrifox
GPG key ID: D40098E5B60B2197
4 changed files with 48 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/scss/home.scss
View file

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

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

@ -17,6 +17,18 @@
border-radius: 0 2rem 2rem 0; border-radius: 0 2rem 2rem 0;
border: 1px solid var(--sidebar-border); border: 1px solid var(--sidebar-border);
border-left: 0; border-left: 0;
overflow: hidden;
@media (max-width: 1040px) {
top: auto;
bottom: 0;
border-radius: 2rem 2rem 0 0;
flex-direction: row;
width: calc(100vw - 1rem);
height: 5rem;
margin: 0 0.5rem;
overflow-y: hidden;
overflow-x: scroll;
}
header { header {
text-align: center; text-align: center;
user-select: none; user-select: none;
@ -37,6 +49,11 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@media (max-width: 1040px) {
display: flex;
flex-direction: row;
height: 100%;
}
} }
li { li {
border-radius: 0.5em; border-radius: 0.5em;
@ -49,13 +66,16 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background-color 0.2s linear; transition: background-color 0.2s linear;
@media (max-width: 1040px) {
margin: 0 0.5rem;
}
a { a {
display: block; display: block;
padding: .25em .5em; padding: .25em .5em;
line-height: 4rem; line-height: 4rem;
} }
&::after { &::after {
background-color: var(--sidebar-accent); background-color: var(--sidebar-accent-1);
bottom: 0; bottom: 0;
content: ""; content: "";
height: 100%; height: 100%;
@ -69,12 +89,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-accent); background-color: var(--sidebar-accent-1);
&:hover { &:hover {
background-color: var(--sidebar-accented); background-color: var(--sidebar-accent-2);
} }
&:active { &:active {
background-color: var(--sidebar-accentest); background-color: var(--sidebar-accent-3);
} }
} }
&:hover { &:hover {
@ -85,7 +105,7 @@
} }
&:active { &:active {
&::after { &::after {
background-color: var(--sidebar-accented); background-color: var(--sidebar-accent-2);
} }
} }
} }
@ -123,7 +143,6 @@
pointer-events: none; pointer-events: none;
&:hover { &:hover {
#languages { #languages {
//display: block;
bottom: 2em; bottom: 2em;
opacity: 100%; opacity: 100%;
pointer-events: all; pointer-events: all;
@ -145,7 +164,6 @@
padding: 0; padding: 0;
user-select: none; user-select: none;
position: absolute; position: absolute;
//display: none;
bottom: 1em; bottom: 1em;
opacity: 0%; opacity: 0%;
transition: bottom .5s, opacity .5s; transition: bottom .5s, opacity .5s;

1
assets/scss/shortcodes/verticalposts.scss
View file

@ -9,6 +9,7 @@
overflow-x: scroll; overflow-x: scroll;
scroll-snap-type: x proximity; scroll-snap-type: x proximity;
.post-group { .post-group {
color: var(--vriish-gradient-text);
background: var(--vriish-gradient); background: var(--vriish-gradient);
border-radius: .5em; border-radius: .5em;
display: flex; display: flex;

35
assets/scss/variables.scss
View file

@ -3,7 +3,7 @@
$counter: $i * 50; $counter: $i * 50;
$saturation: 20% + $i * 2.5%; $saturation: 20% + $i * 2.5%;
$lightness: $i * 5%; $lightness: $i * 5%;
--primary-dark-#{$counter}: hsl(275, #{$saturation}, #{$lightness}); --primary-dark-#{$counter}: hsl(320, #{$saturation}, #{$lightness});
} }
@for $i from 1 to 20 { @for $i from 1 to 20 {
@ -17,15 +17,15 @@
--border: var(--primary-dark-200); --border: var(--primary-dark-200);
--text: var(--primary-light-950); --text: var(--primary-light-950);
--text-accent: var(--primary-light-900); --text-accent-1: var(--primary-light-900);
--text-accented: var(--primary-light-850); --text-accent-2: var(--primary-light-850);
--text-accentest: var(--primary-light-800); --text-accent-3: var(--primary-light-800);
--sidebar-background: var(--primary-dark-100); --sidebar-background: var(--primary-dark-100);
--sidebar-border: var(--primary-dark-150); --sidebar-border: var(--primary-dark-150);
--sidebar-accent: var(--primary-dark-150); --sidebar-accent-1: var(--primary-dark-150);
--sidebar-accented: var(--primary-dark-200); --sidebar-accent-2: var(--primary-dark-200);
--sidebar-accentest: var(--primary-dark-350); --sidebar-accent-3: 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%);
@ -35,8 +35,13 @@
--purpur: hsl(275, 100%, 75%); --purpur: hsl(275, 100%, 75%);
--white: hsl(360, 100%, 100%); --white: hsl(360, 100%, 100%);
--vriish-gradient: linear-gradient(55deg, var(--primary-light-300) -50%, var(--primary-dark-300) 150%); --vriish-gradient: linear-gradient(-35deg, 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);
--vriish-gradient-text: var(--primary-light-950);
--vriish-waves:
radial-gradient(2.64rem at 50% calc(100% - 3.67rem),#000 99%,#0000 101%) calc(50% - 3rem) 0/6rem 100%,
radial-gradient(2.64rem at 50% calc(100% + 2.17rem),#0000 99%,#000 101%) 50% calc(100% - 1.5rem)/6rem 100% repeat-x;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
@ -44,16 +49,16 @@
--border: var(--primary-dark-800); --border: var(--primary-dark-800);
--text: var(--primary-dark-50); --text: var(--primary-dark-50);
--text-accent: var(--primary-dark-100); --text-accent-1: var(--primary-dark-100);
--text-accented: var(--primary-dark-150); --text-accent-2: var(--primary-dark-150);
--text-accentest: var(--primary-dark-200); --text-accent-3: var(--primary-dark-200);
--sidebar-background: var(--primary-light-900); --sidebar-background: var(--primary-light-900);
--sidebar-border: var(--primary-light-850); --sidebar-border: var(--primary-light-850);
--sidebar-accent: var(--primary-light-850); --sidebar-accent-1: var(--primary-light-850);
--sidebar-accented: var(--primary-light-800); --sidebar-accent-2: var(--primary-light-800);
--sidebar-accentest: var(--primary-light-750); --sidebar-accent-3: var(--primary-light-750);
--vriish-gradient: linear-gradient(55deg, var(--primary-light-700) -50%, var(--primary-dark-700) 150%); --vriish-gradient: linear-gradient(-35deg, var(--primary-light-700) -50%, var(--primary-dark-700) 150%);
} }
} }