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 {
background: var(--sidebar-background);
background: var(--sidebar-background-10);
display: flex;
flex-direction: column;
gap: 1em;
height: calc(100vh - 2rem);
padding: 0.5em;
height: calc(100vh - 1rem);
padding: 0.25rem;
position: fixed;
top: 0;
width: 5rem;
z-index: 2;
margin: 1rem;
border-radius: 100rem;
box-shadow: 0 0 20px 20px var(--sidebar-background-accent);
border: 1px solid var(--sidebar-background-accent);
margin: 0.5rem 0;
border-radius: 0 2rem 2rem 0;
border: 1px solid var(--sidebar-background-05);
border-left: 0;
header {
text-align: center;
user-select: none;
padding: inherit;
#avatar {
border-radius: 500% 300% / 300% 500%;
border-radius: 300% 500% / 500% 300%;
max-width: 64px;
transition: .4s border-radius ease-in-out;
&:hover {
border-radius: 300% 500% / 500% 300%;
border-radius: 500% 300% / 300% 500%;
}
}
}
@ -37,36 +39,50 @@
margin: 0;
}
li {
border-radius: .5em;
margin: .5em 0;
border-radius: 0.5em;
margin: 0.5em 0;
position: relative;
letter-spacing: .025em;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s linear;
a {
display: block;
padding: .25em .5em;
line-height: 4rem;
}
::after {
background: var(--vriish-gradient);
border-radius: .5em;
&::after {
background-color: var(--sidebar-background-20);
bottom: 0;
content: "";
left: 0;
height: 100%;
position: absolute;
right: 100%;
left: -100%;
top: 0;
transition: opacity .5s, width .5s;
opacity: 0;
width: 0;
width: 100%;
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 {
background: var(--vriish-gradient);
background-color: var(--sidebar-background-20);
&:hover {
background-color: var(--sidebar-background-30);
}
}
&:hover {
::after {
&::after {
left: 0;
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-secondary: hsl(210, 21%, 40%);
--sidebar-background: hsla(210, 21%, 10%, 20%);
--sidebar-background-accent: hsla(210, 21%, 10%, 10%);
--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%);
--vriish-rose: hsl(0, 100%, 75%);
--orange: hsl(25, 100%, 75%);
@ -29,7 +31,9 @@
--text-2: hsl(0, 20%, 30%);
--text-secondary: hsl(0, 20%, 70%);
--sidebar-background: hsla(0, 100%, 98%, 20%);
--sidebar-background-accent: hsla(0, 100%, 98%, 10%);
--sidebar-background-05: hsla(0, 50%, 95%);
--sidebar-background-10: hsla(0, 50%, 90%);
--sidebar-background-20: hsla(0, 50%, 80%);
--sidebar-background-30: hsla(0, 50%, 70%);
}
}