From 3390f4975206c82ab7c7e272385335de7dcaf227 Mon Sep 17 00:00:00 2001 From: Robert Günzler Date: Thu, 23 Oct 2025 16:29:21 +0200 Subject: index: mobile-compatible email tooltip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Robert Günzler --- index.html | 112 ++++++++++++++++++++++++++++----------------------------- links/hero.css | 25 +++++++++++++ 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 @@ - - - - - - - - - - - - - - - - gzr.im - - - - -
- my avatar; a penrose-inspired impossible hexagon - -
- - + + + + + + + + + + + + + + + gzr.im + + + +
+ my avatar; a penrose-inspired impossible hexagon + +
+ 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; + } + } +} -- cgit 1.4.1