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

Refactor SCSS

Browse source
This commit is contained in:
Vri 🌈 2023-01-13 23:05:34 +01:00
parent a1767c52ea
commit 8d154d444e
Signed by: vrifox
GPG key ID: D40098E5B60B2197
3 changed files with 4 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

25
assets/partials/footer.scss Normal file
View file

@ -0,0 +1,25 @@
footer {
color: var(--text-secondary);
grid-area: footer;
margin: 1em auto;
text-align: center;
p{
margin: .25em;
span {
&:not(:last-child) {
&::after {
content: '·';
padding: .25em;
}
}
a {
color: var(--text-secondary);
text-decoration-color: transparent;
&:hover {
text-decoration: underline;
text-decoration-color: var(--text-secondary);
}
}
}
}
}

169
assets/partials/sidebar.scss Normal file
View file

@ -0,0 +1,169 @@
// -----------
// - 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: 500% 300% / 300% 500%;
width: calc(100% - 2em);
max-width: 200px;
transition: .4s border-radius ease-in-out;
&:hover {
border-radius: 300% 500% / 500% 300%;
}
}
#name {
margin: 0;
font-weight: bold;
font-size: 1.8em;
}
#information {
margin: 0;
font-size: .8em;
#social-links {
list-style: none;
margin: 0;
padding: 0;
img {
height: 2em;
fill: var(--vriish-rose);
}
}
}
}
#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;
}
}
}
}
}
}