website/assets/scss/partials/sidebar.scss

170 lines
2.9 KiB
SCSS
Raw Normal View History

2022-11-28 18:33:52 +01:00
// -----------
// - sidebar -
// -----------
#sidebar {
background: var(--sidebar-background);
border-top: 2px solid var(--vriish-rose);
display: flex;
flex-direction: column;
2023-01-19 17:30:13 +01:00
gap: 1em;
2022-11-28 18:33:52 +01:00
grid-area: sidebar;
margin-top: -2px;
2023-01-19 17:30:13 +01:00
max-height: 100vh;
padding: 1em;
2022-11-28 18:33:52 +01:00
position: sticky;
top: 0;
z-index: 1;
2022-12-24 14:59:52 +01:00
@media (min-width: 921px) {
bottom: 0;
height: 100%;
}
2022-11-28 18:33:52 +01:00
header {
text-align: center;
2022-12-24 14:59:52 +01:00
user-select: none;
#avatar {
2023-01-11 15:46:29 +01:00
border-radius: 500% 300% / 300% 500%;
2022-12-24 14:59:52 +01:00
width: calc(100% - 2em);
max-width: 200px;
2023-01-12 23:22:05 +01:00
transition: .4s border-radius ease-in-out;
&:hover {
border-radius: 300% 500% / 500% 300%;
}
2022-12-24 14:59:52 +01:00
}
2022-11-28 18:33:52 +01:00
#name {
margin: 0;
font-weight: bold;
font-size: 1.8em;
}
#information {
margin: 0;
font-size: .8em;
2023-01-12 23:08:47 +01:00
#social-links {
list-style: none;
margin: 0;
padding: 0;
img {
height: 2em;
fill: var(--vriish-rose);
}
}
2022-11-28 18:33:52 +01:00
}
}
#sidebar-menu {
2022-12-24 14:59:52 +01:00
user-select: none;
2022-11-28 18:33:52 +01:00
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
border-radius: .5em;
2022-12-24 14:59:52 +01:00
margin: .5em 0;
2022-11-28 18:33:52 +01:00
position: relative;
letter-spacing: .025em;
a {
2022-12-24 14:59:52 +01:00
display: block;
padding: .25em .5em;
2022-11-28 18:33:52 +01:00
}
::after {
background: var(--vriish-gradient);
border-radius: .5em;
bottom: 0;
content: "";
left: 0;
position: absolute;
2022-12-24 14:59:52 +01:00
right: 100%;
2022-11-28 18:33:52 +01:00
top: 0;
2022-12-24 14:59:52 +01:00
transition: opacity .5s, width .5s;
2022-11-28 18:33:52 +01:00
opacity: 0;
2022-12-24 14:59:52 +01:00
width: 0;
2022-11-28 18:33:52 +01:00
z-index: -1;
}
&.active {
background: var(--vriish-gradient);
}
&:hover {
::after {
opacity: 1;
2022-12-24 14:59:52 +01:00
right: 0;
width: 100%;
2022-11-28 18:33:52 +01:00
}
}
}
a {
text-decoration: none;
}
}
2022-12-24 14:59:52 +01:00
aside {
bottom: 1em;
position: absolute;
left: 1em;
right: 1em;
@media (max-width: 920px) {
position: initial;
}
#language-select {
position: relative;
pointer-events: none;
&:hover {
#languages {
//display: block;
bottom: 2em;
opacity: 100%;
pointer-events: all;
* {
pointer-events: all;
}
}
}
#language-icon {
text-decoration: none;
padding-top: 1em;
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 {
background-color: var(--background);
border-radius: .5em;
margin: 0;
padding: 0;
user-select: none;
position: absolute;
//display: none;
bottom: 1em;
opacity: 0%;
transition: bottom .5s, opacity .5s;
li {
list-style: none;
overflow: hidden;
padding: .25em .5em;
position: relative;
transition: background .5s;
border-radius: .5em;
margin: .2em;
&:not(:last-of-type) {
margin-bottom: .5em;
}
&.active {
background: var(--vriish-gradient);
}
&:hover {
background: var(--vriish-gradient);
}
a {
text-decoration: none;
display: block;
}
}
}
}
}
2022-11-28 18:33:52 +01:00
}