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

improve sidebar

Browse source
This commit is contained in:
Vri 🌈 2023-03-09 14:19:43 +01:00
parent 850c24f373
commit 99574824f3
Signed by: vrifox
GPG key ID: D40098E5B60B2197
2 changed files with 47 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,28 +3,30 @@
// ----------- // -----------
#sidebar { #sidebar {
background: var(--sidebar-background); background: var(--sidebar-background-10);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
height: calc(100vh - 2rem); height: calc(100vh - 1rem);
padding: 0.5em; padding: 0.25rem;
position: fixed; position: fixed;
top: 0; top: 0;
width: 5rem;
z-index: 2; z-index: 2;
margin: 1rem; margin: 0.5rem 0;
border-radius: 100rem; border-radius: 0 2rem 2rem 0;
box-shadow: 0 0 20px 20px var(--sidebar-background-accent); border: 1px solid var(--sidebar-background-05);
border: 1px solid var(--sidebar-background-accent); border-left: 0;
header { header {
text-align: center; text-align: center;
user-select: none; user-select: none;
padding: inherit;
#avatar { #avatar {
border-radius: 500% 300% / 300% 500%; border-radius: 300% 500% / 500% 300%;
max-width: 64px; max-width: 64px;
transition: .4s border-radius ease-in-out; transition: .4s border-radius ease-in-out;
&:hover { &:hover {
border-radius: 300% 500% / 500% 300%; border-radius: 500% 300% / 300% 500%;
} }
} }
} }
@ -37,36 +39,50 @@
margin: 0; margin: 0;
} }
li { li {
border-radius: .5em; border-radius: 0.5em;
margin: .5em 0; margin: 0.5em 0;
position: relative; position: relative;
letter-spacing: .025em; letter-spacing: .025em;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s linear;
a { a {
display: block; display: block;
padding: .25em .5em; padding: .25em .5em;
line-height: 4rem;
} }
::after { &::after {
background: var(--vriish-gradient); background-color: var(--sidebar-background-20);
border-radius: .5em;
bottom: 0; bottom: 0;
content: ""; content: "";
left: 0; height: 100%;
position: absolute; position: absolute;
right: 100%; left: -100%;
top: 0; top: 0;
transition: opacity .5s, width .5s; width: 100%;
opacity: 0;
width: 0;
z-index: -1; z-index: -1;
opacity: 1;
opacity: 0.5;
transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear;
} }
&.active { &.active {
background: var(--vriish-gradient); background-color: var(--sidebar-background-20);
&:hover {
background-color: var(--sidebar-background-30);
}
} }
&:hover { &:hover {
::after { &::after {
left: 0;
opacity: 1; opacity: 1;
right: 0; }
width: 100%; }
&:active {
&::after {
background-color: var(--sidebar-background-30);
} }
} }
} }

12
assets/scss/variables.scss
View file

@ -6,8 +6,10 @@
--text-2: hsl(210, 21%, 80%); --text-2: hsl(210, 21%, 80%);
--text-secondary: hsl(210, 21%, 40%); --text-secondary: hsl(210, 21%, 40%);
--sidebar-background: hsla(210, 21%, 10%, 20%); --sidebar-background-05: hsl(210, 21%, 5%);
--sidebar-background-accent: hsla(210, 21%, 10%, 10%); --sidebar-background-10: hsl(210, 21%, 10%);
--sidebar-background-20: hsl(210, 21%, 20%);
--sidebar-background-30: hsl(210, 21%, 30%);
--vriish-rose: hsl(0, 100%, 75%); --vriish-rose: hsl(0, 100%, 75%);
--orange: hsl(25, 100%, 75%); --orange: hsl(25, 100%, 75%);
@ -29,7 +31,9 @@
--text-2: hsl(0, 20%, 30%); --text-2: hsl(0, 20%, 30%);
--text-secondary: hsl(0, 20%, 70%); --text-secondary: hsl(0, 20%, 70%);
--sidebar-background: hsla(0, 100%, 98%, 20%); --sidebar-background-05: hsla(0, 50%, 95%);
--sidebar-background-accent: hsla(0, 100%, 98%, 10%); --sidebar-background-10: hsla(0, 50%, 90%);
--sidebar-background-20: hsla(0, 50%, 80%);
--sidebar-background-30: hsla(0, 50%, 70%);
} }
} }