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

use icons instead of text; closes #6

Browse source
This commit is contained in:
Vri 🌈 2023-03-16 18:59:31 +01:00
parent a7f4906c1e
commit b601113ed2
Signed by: vrifox
GPG key ID: D40098E5B60B2197
4 changed files with 61 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -28,40 +28,42 @@
background-color: transparent;
}
a.hint-text {
position: relative;
a {
&.hint-text {
position: relative;
&::before {
content: attr(data-title);
left: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: var(--sidebar-accent-2);
color: var(--text-accent-900);
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
pointer-events: none;
opacity: 0%;
transition: opacity 0.3s ease-in-out;
}
&::after {
content: "";
transform: translate(-100%, -50%);
border-left: 0.5rem solid transparent;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.7rem solid var(--sidebar-accent-2);
top: 50%;
position: absolute;
left: 100%;
pointer-events: none;
opacity: 0%;
transition: opacity 0.3s ease-in-out;
}
&:hover {
&::before, &::after {
opacity: 100%;
&::before {
content: attr(data-title);
left: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: var(--sidebar-accent-2);
color: var(--text-accent-900);
padding: 0.2rem 0.5rem;
border-radius: 0.5rem;
pointer-events: none;
opacity: 0%;
transition: opacity 0.3s ease-in-out;
}
&::after {
content: "";
transform: translate(-100%, -50%);
border-left: 0.5rem solid transparent;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.7rem solid var(--sidebar-accent-2);
top: 50%;
position: absolute;
left: 100%;
pointer-events: none;
opacity: 0%;
transition: opacity 0.3s ease-in-out;
}
&:hover {
&::before, &::after {
opacity: 100%;
}
}
}
}
@ -172,6 +174,16 @@
}
a {
text-decoration: none;
display: flex;
place-content: center;
svg {
height: 3rem;
width: 3rem;
fill: transparent;
stroke: var(--text-accent-300);
stroke-width: 20px;
}
}
}
aside {