index: mobile-compatible email tooltip

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 25 insertions, 0 deletions

diff --git a/links/hero.css b/links/hero.css
index 311835e..8b053dc 100644
--- a/links/hero.css
+++ b/links/hero.css
@@ -61,3 +61,28 @@ main.hero>nav ul {
 main.hero>nav li+li {
   margin-top: 5px;
 }
+
+@media (pointer: coarse),
+(hover: none) {
+  main.hero {
+    [title] {
+      position: relative;
+      display: inline-flex;
+    }
+
+    [title]:focus::after {
+      content: attr(title);
+      position: absolute;
+      top: 3rem;
+      left: 1rem;
+      color: color-mix(in srgb, var(--fg) 90%, transparent);
+      background-color: color-mix(in srgb, var(--bg) 90%, transparent);
+      border: 1px solid;
+      text-wrap: nowrap;
+      width: min-content;
+      max-width: 100vw;
+      padding: 1px 5px;
+      z-index: 9999;
+    }
+  }
+}