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 18:16:35 +01:00
parent 4c2cc9f3b4
commit 804159352f
Signed by: vrifox
GPG key ID: D40098E5B60B2197
4 changed files with 77 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@
background: var(--sidebar-background);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1em;
height: calc(100vh - 1rem);
padding: 0.25rem;
@ -23,11 +24,13 @@
bottom: 0;
border-radius: 2rem 2rem 0 0;
flex-direction: row;
width: calc(100vw - 1rem);
width: 100vw;
height: 5rem;
margin: 0 0.5rem;
margin: 0;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid var(--sidebar-border);
border-bottom: 0;
}
header {
text-align: center;
@ -56,10 +59,10 @@
}
}
li {
border-radius: 0.5em;
border-radius: 0.5rem;
margin: 0.5em 0;
position: relative;
letter-spacing: .025em;
letter-spacing: .025rem;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
@ -71,8 +74,7 @@
}
a {
display: block;
padding: .25em .5em;
line-height: 4rem;
padding: 0.25em 0.5em;
}
&::after {
background-color: var(--sidebar-accent-1);
@ -86,7 +88,11 @@
z-index: -1;
opacity: 1;
opacity: 0.5;
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, top 0.5s ease-out;
@media (max-width: 1040px) {
left: 0;
top: 100%;
}
}
&.active {
background-color: var(--sidebar-accent-1);
@ -101,6 +107,9 @@
&::after {
left: 0;
opacity: 1;
@media (max-width: 1040px) {
top: 0;
}
}
}
&:active {
@ -113,83 +122,51 @@
text-decoration: none;
}
}
#social-links {
text-align: center;
margin-top: auto;
ul {
list-style: none;
margin: 0;
padding: 0;
aside {
@media (max-width: 1040px) {
display: flex;
flex-direction: row;
align-items: center;
}
.icon {
height: 2em;
transition: color 0.2s linear;
&.mastodon-icon {
color: hsl(239.6, 100%, 69.4%);
&:hover {
color: hsl(251.5, 58.9%, 51.4%);
}
}
}
}
#localization {
bottom: 0.5em;
text-align: center;
@media (max-width: 920px) {
position: initial;
}
#language-select {
position: relative;
pointer-events: none;
&:hover {
#languages {
bottom: 2em;
opacity: 100%;
pointer-events: all;
* {
pointer-events: all;
}
}
}
#language-icon {
text-decoration: none;
padding: 1em;
margin: -1em;
pointer-events: all;
}
#languages {
background-color: var(--background);
border-radius: .5em;
#social-links {
text-align: center;
align-items: center;
display: flex;
justify-content: center;
ul {
list-style: none;
margin: 0;
padding: 0;
user-select: none;
position: absolute;
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);
}
}
.icon {
height: 2em;
transition: color 0.2s ease-in-out;
&.mastodon-icon {
color: hsl(239.6, 100%, 69.4%);
&:hover {
background: var(--vriish-gradient);
}
a {
text-decoration: none;
display: block;
color: hsl(251.5, 58.9%, 51.4%);
}
}
}
}
#languages {
text-align: center;
transition: background-color 0.2s ease-in-out;
border-radius: 0.5rem 0.5rem 1.85rem 0.5rem;
&:hover {
background-color: var(--sidebar-accent-1);
}
&:active {
background-color: var(--sidebar-accent-2);
}
#language {
display: block;
text-decoration: none;
width: 100%;
height: 100%;
padding: 0.5rem 1rem;
pointer-events: all;
}
}
}
}