index: mobile-compatible email tooltip

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

2 files changed, 79 insertions, 58 deletions

diff --git a/index.html b/index.html
index 8eeefe7..726b10a 100644
--- a/index.html
+++ b/index.html
@@ -1,61 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <meta name="title" content="robertgzr's site">
-  <meta name="description" content="personal website of robertgzr">
-  <!-- Hints -->
-  <link rel="preload" href="/media/interface/logo.svg" as="image">
-  <link rel="prefetch" href="/site/about.html">
-  <!-- Links -->
-  <link rel="stylesheet" type="text/css" href="/links/main.css">
-  <link rel="stylesheet" type="text/css" href="/links/hero.css">
-  <link rel="shortcut icon" type="image/png" href="/media/services/icon.png">
-  <link rel="author" href="/humans.txt">
-  <link rel="license" href="https://git.sr.ht/~robertgzr/site/blob/master/LICENSE.content">
-  <title>gzr.im</title>
-</head>
-
-<body>
-  <a href="/site/about.html" tabindex="-1" aria-hidden="true"
-    style="position:absolute;top:0;left:0;font-size:5rem;color:transparent;cursor:default;">found<br>me</a>
-  <main class="hero">
-    <img src="/media/interface/logo.svg" alt="my avatar; a penrose-inspired impossible hexagon">
-    <nav>
-      <section class="left">
-        <ul class="nobull">
-          <li><a rel="me" href="/" title="robert [at] gnzler [dot] de">mail</a></li>
-          <li><a rel="me" href="https://toot.berlin/@robertgzr" target="_blank">mastodon</a></li>
-        </ul>
-      </section>
-      <section class="left">
-        <ul class="nobull">
-          <li><a rel="me" href="https://git.sr.ht/~robertgzr" target="_blank">sourcehut</a></li>
-          <li><a rel="me" href="https://github.com/robertgzr" target="_blank">github</a></li>
-          <li><a rel="me" href="https://gitlab.com/robertgzr" target="_blank">gitlab</a></li>
-          <!--<li><a href="https://gitlab.gnome.org/robertgzr" target="_blank">gnome.org</a></li>-->
-          <!--<li><a href="https://gitlab.freedesktop.org/robertgzr" target="_blank">f-d.org</a></li>-->
-        </ul>
-      </section>
-      <section class="right">
-        <ul class="nobull">
-          <!--<li><a href="/links/rss.xml" target="_blank">rss</a></li>-->
-          <li><a href="/links/~pgp" target="_blank">pgp</a></li>
-          <li><a href="/links/~ssh" target="_blank">ssh</a></li>
-          <!--<li><a href="/links/~cv" target="_blank">cv</a></li>-->
-        </ul>
-      </section>
-      <section class="right">
-        <ul class="nobull">
-          <!--<li><a href="/site/about.html">about</a></li>-->
-          <!--<li><a href="/site/index.html">index</a></li>-->
-          <!--<li><a href="/humans.txt">humans.txt</a></li>-->
-        </ul>
-      </section>
-    </nav>
-  </main>
-</body>
-
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="title" content="robertgzr's site">
+    <meta name="description" content="personal website of robertgzr">
+    <!-- Hints -->
+    <link rel="preload" href="/media/interface/logo.svg" as="image">
+    <link rel="prefetch" href="/site/about.html">
+    <!-- Links -->
+    <link rel="stylesheet" type="text/css" href="/links/main.css">
+    <link rel="stylesheet" type="text/css" href="/links/hero.css">
+    <link rel="shortcut icon" type="image/png" href="/media/services/icon.png">
+    <link rel="author" href="/humans.txt">
+    <link rel="license" href="https://git.sr.ht/~robertgzr/site/blob/master/LICENSE.content">
+    <title>gzr.im</title>
+  </head>
+  <body>
+    <a href="/site/about.html" tabindex="-1" aria-hidden="true" style="position:absolute;top:0;left:0;font-size:5rem;color:transparent;cursor:default;">found<br>me</a>
+    <main class="hero">
+      <img src="/media/interface/logo.svg" alt="my avatar; a penrose-inspired impossible hexagon">
+      <nav>
+        <section class="left">
+          <ul class="nobull">
+            <a rel="me" href="#" title="robert [at] gnzler [dot] de" tabindex="0">mail</a>
+            <li><a rel="me" href="https://toot.berlin/@robertgzr" target="_blank">mastodon</a></li>
+          </ul>
+        </section>
+        <section class="left">
+          <ul class="nobull">
+            <li><a rel="me" href="https://git.sr.ht/~robertgzr" target="_blank">sourcehut</a></li>
+            <li><a rel="me" href="https://github.com/robertgzr" target="_blank">github</a></li>
+            <li><a rel="me" href="https://gitlab.com/robertgzr" target="_blank">gitlab</a></li>
+            <!--<li><a href="https://gitlab.gnome.org/robertgzr" target="_blank">gnome.org</a></li>-->
+            <!--<li><a href="https://gitlab.freedesktop.org/robertgzr" target="_blank">f-d.org</a></li>-->
+          </ul>
+        </section>
+        <section class="right">
+          <ul class="nobull">
+            <!--<li><a href="/links/rss.xml" target="_blank">rss</a></li>-->
+            <li><a href="/links/~pgp" target="_blank">pgp</a></li>
+            <li><a href="/links/~ssh" target="_blank">ssh</a></li>
+            <!--<li><a href="/links/~cv" target="_blank">cv</a></li>-->
+          </ul>
+        </section>
+        <section class="right">
+          <ul class="nobull">
+            <!--<li><a href="/site/about.html">about</a></li>-->
+            <!--<li><a href="/site/index.html">index</a></li>-->
+            <!--<li><a href="/humans.txt">humans.txt</a></li>-->
+          </ul>
+        </section>
+      </nav>
+    </main>
+  </body>
 </html>
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;
+    }
+  }
+}