1
Fork 0

Add labels & titles to contact links.

This commit is contained in:
Bauke 2022-03-28 15:25:21 +02:00
parent 2d2778df9d
commit a89419f3b9
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
2 changed files with 13 additions and 2 deletions

View File

@ -20,10 +20,19 @@
background-color: var(--background-1); background-color: var(--background-1);
border: 2px solid var(--foreground-1); border: 2px solid var(--foreground-1);
padding: 1rem; padding: 1rem;
position: relative;
&:hover { &:hover {
background-color: var(--foreground-1); background-color: var(--foreground-1);
} }
&::before {
content: attr(data-label);
font-size: 50%;
position: absolute;
right: 4px;
top: 4px;
}
} }
} }
} }

View File

@ -11,11 +11,13 @@
<main class="page-main"> <main class="page-main">
<div class="contact-links"> <div class="contact-links">
<a target="_blank" href="mailto:me@bauke.xyz"> <a target="_blank" href="mailto:me@bauke.xyz" title="Email"
data-label="email">
me@bauke.xyz me@bauke.xyz
</a> </a>
<a target="_blank" href="https://matrix.to/#/@baukexyz:matrix.org"> <a target="_blank" href="https://matrix.to/#/@baukexyz:matrix.org"
title="Matrix Username" data-label="matrix">
@baukexyz:matrix.org @baukexyz:matrix.org
</a> </a>
</div> </div>