website/assets/sidebar.scss
2022-12-24 14:59:52 +01:00

156 lines
No EOL
2.7 KiB
SCSS

// -----------
// - sidebar -
// -----------
#sidebar {
background: var(--sidebar-background);
border-top: 2px solid var(--vriish-rose);
display: flex;
flex-direction: column;
grid-area: sidebar;
margin-top: -2px;
position: sticky;
top: 0;
z-index: 1;
gap: 1em;
padding: 1em;
@media (min-width: 921px) {
bottom: 0;
height: 100%;
}
header {
text-align: center;
user-select: none;
#avatar {
border-radius: 100%;
width: calc(100% - 2em);
max-width: 200px;
}
#name {
margin: 0;
font-weight: bold;
font-size: 1.8em;
}
#information {
margin: 0;
font-size: .8em;
}
}
#sidebar-menu {
user-select: none;
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
border-radius: .5em;
margin: .5em 0;
position: relative;
letter-spacing: .025em;
a {
display: block;
padding: .25em .5em;
}
::after {
background: var(--vriish-gradient);
border-radius: .5em;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 100%;
top: 0;
transition: opacity .5s, width .5s;
opacity: 0;
width: 0;
z-index: -1;
}
&.active {
background: var(--vriish-gradient);
}
&:hover {
::after {
opacity: 1;
right: 0;
width: 100%;
}
}
}
a {
text-decoration: none;
}
}
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;
}
}
}
}
}
}