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

Add hint text; closes #5

Browse source
This commit is contained in:
Vri 🌈 2023-03-16 16:41:50 +01:00
parent c411f30581
commit fbf285a076
Signed by: vrifox
GPG key ID: D40098E5B60B2197
2 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,6 @@
border-radius: 0 2rem 2rem 0;
border: 1px solid var(--sidebar-border);
border-left: 0;
overflow: hidden;
@media (max-width: 1140px) {
overflow: unset;
border: 0;
@ -28,6 +27,43 @@
margin: 0;
background-color: transparent;
}
a.hint-text {
&::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%;
}
}
}
header {
text-align: center;
user-select: none;
@ -146,6 +182,7 @@
display: flex;
padding: 1rem;
place-content: center;
&:hover {
.mastodon-icon {
color: hsl(251.5, 58.9%, 51.4%);
@ -154,6 +191,7 @@
.mastodon-icon {
color: hsl(239.6, 100%, 69.4%);
}
.icon {
height: 1.25rem;
width: 1.25rem;

4
layouts/partials/sidebar.html
View file

@ -21,7 +21,7 @@
</section>
<aside>
<section id="social-links">
<a rel="me" href="https://social.anoxinon.de/@vri">{{ partial "helpers/icons" "mastodon" }}</a>
<a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" data-title="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
</section>
<section id="languages">
{{- if .Site.IsMultiLingual }}
@ -33,7 +33,7 @@
{{ range $siteLanguages }}
{{ if eq $translation.Lang .Lang }}
{{ if ne $pageLanguage .Lang }}
<a id="language" href="{{ $translation.Permalink }}">{{ .Params.languageFlag }}</a>
<a class="hint-text" id="language" href="{{ $translation.Permalink }}" data-title="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
{{ end }}
{{ end }}
{{ end }}