Blinking element is still a stupid idea in 2025.HEADmaster

Let's try something better.
(Of course I didn't came up with that css myself, what were you thinking?!)

3 files changed, 16 insertions, 10 deletions

diff --git a/about_l.html b/about_l.html
index 7986025..ceb9ca9 100644
--- a/about_l.html
+++ b/about_l.html
@@ -236,13 +236,13 @@ document.addEventListener("DOMContentLoaded", ubxLocalTimeInit);
 <h3 id="contact"><ruby>conexiones<rp>(</rp><rt>contact</rt><rp>)</rp></ruby></h3>
 <div class="ubx-container">
 <div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f4ec.svg" width="32" alt="Open mailbox with raised flag emoji"></div>
-<div class="ubx-lr">Send your complaints to <code style="font-weight:bold;text-decoration:underline dotted;font-size:14px;" class="TText blink" title="Do not use this address if your e-mail provider does not use a reliable DNS.">chris&#64;pineapple.cat</code></div></div>
+<div class="ubx-lr">Send your complaints to <code style="font-weight:bold;font-size:14px;" class="TText anim-dashed-underline" title="Do not use this address if your e-mail provider does not use a reliable DNS.">chris&#64;pineapple.cat</code></div></div>
 
 <div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f4ed.svg" width="32" alt="Open mailbox with lowered flag emoji"></div>
-<div class="ubx-lr">Or to this alternative address if you can decipher it: <code style="font-weight:bold;text-decoration:underline dotted;word-break:break-all;" class="TText" title="Paste this into a POSIX-compliant shell. Sorry Windows users.">echo '49:CDac`_hfo8>2:=]4@>' | tr '\!-~' 'P-~\!-O'</code></div></div>
+<div class="ubx-lr">Or to this alternative address if you can decipher it: <code style="font-weight:bold;word-break:break-all;" class="TText anim-dashed-underline" title="Paste this into a POSIX-compliant shell. Sorry Windows users.">echo '49:CDac`_hfo8>2:=]4@>' | tr '\!-~' 'P-~\!-O'</code></div></div>
 
 <div class="ubx"><div class="ubx-ll">[ m ]</div>
-<div class="ubx-lr">This user is on Matrix <br> @chirs241097:matrix.org</div></div>
+<div class="ubx-lr">This user is on Matrix <br> <code class="TText anim-dashed-underline">@chirs241097:matrix.org</code></div></div>
 
 <div class="ubx"><div class="ubx-ll"><img src="/ubx-rsc/emoji_u1f511.svg" width="24" alt="Key emoji"></div>
 <div class="ubx-lr"><a href="/pubkey.txt">My PGP public key</a>, if you want to use it.</div></div>
diff --git a/common.css b/common.css
index 32644fd..6a75b20 100644
--- a/common.css
+++ b/common.css
@@ -10,11 +10,6 @@
 	font-family: 'Soon';
 	src: url('https://filestorage.chrisoft.org/soon.woff');
 }
-@keyframes blink-82 {
-	20% {
-		opacity: 0;
-	}
-}
 .CTitle{
 	font-family: 'CMU Typewriter Text w', 'CMU Typewriter Text', 'TeX Gyre Cursor', 'FreeMono', 'Courier New', Courier, monospace;
 	font-variant-ligatures: none;
@@ -168,4 +163,3 @@ button:disabled{
 .widgetbg{background-color: var(--widget-area-bg);}
 .sliderb1{background-color: var(--slider-empty-bg);}
 .sliderb2{background-color: var(--slider-filled-bg);}
-.blink{animation: blink-82 2s step-start infinite;}
diff --git a/index.shtml b/index.shtml
index 5eb9734..fa540eb 100644
--- a/index.shtml
+++ b/index.shtml
@@ -158,6 +158,18 @@
 		padding: 1em;
 		margin: 0.5em 0;
 	}
+	@keyframes underline-anim {
+		100% {
+			background-position: 6px 100%;
+		}
+	}
+	.anim-dashed-underline {
+		background: linear-gradient(90deg, var(--principal-fg) 33.33%, transparent 0) repeat-x;
+		background-size: 6px 1.5px;
+		background-position: 0 100%;
+		padding-bottom: 1px;
+		animation: underline-anim 0.5s infinite steps(3, jump-start);
+	}
 	td{border:1px solid var(--secondary-fg);}
 </style>
 </head>
@@ -495,7 +507,7 @@ window.addEventListener("load", hashchange);
 				nuts.
 			</p>
 			<p>
-				Does not appear to contain a significant amount of cerebral
+				Does not appear to contain any significant amount of cerebral
 				activity.
 			</p>
 			<h3><a href="/notekins">Notekins</a></h3>