From a89419f3b9f6b0c14199233e19547600e97da553 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Mon, 28 Mar 2022 15:25:21 +0200
Subject: [PATCH] Add labels & titles to contact links.

---
 source/scss/components/_page-main.scss | 9 +++++++++
 source/templates/index.html            | 6 ++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/source/scss/components/_page-main.scss b/source/scss/components/_page-main.scss
index 71c98a0..09fa5e6 100644
--- a/source/scss/components/_page-main.scss
+++ b/source/scss/components/_page-main.scss
@@ -20,10 +20,19 @@
       background-color: var(--background-1);
       border: 2px solid var(--foreground-1);
       padding: 1rem;
+      position: relative;
 
       &:hover {
         background-color: var(--foreground-1);
       }
+
+      &::before {
+        content: attr(data-label);
+        font-size: 50%;
+        position: absolute;
+        right: 4px;
+        top: 4px;
+      }
     }
   }
 }
diff --git a/source/templates/index.html b/source/templates/index.html
index 1a09ad5..b17196e 100644
--- a/source/templates/index.html
+++ b/source/templates/index.html
@@ -11,11 +11,13 @@
 
 <main class="page-main">
   <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
     </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
     </a>
   </div>