web: close the logo's pinstripe gaps, undress its hover

Block glyphs' ink can round a hair narrower than the monospace advance,
so the ascii logos showed hairline gaps between characters that should
read as solid ink; -0.05em of letter-spacing tucks each glyph into the
last, on the floating logo and the hero's alike.

The floating logo also stops dressing as a link on hover: the global
a:hover underline through seven rows of block glyphs was a mess, and
the colour flash no better. It still is one -- the pointer says so.

1 files changed, 8 insertions, 1 deletions

diff --git a/web/site.css b/web/site.css
index 70d7d7c..a5b28c4 100644
--- a/web/site.css
+++ b/web/site.css
@@ -73,12 +73,18 @@ kbd {
   pointer-events: none;
 }
 .logo-float.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
-.logo-float:hover { color: var(--fg); }
+/* A link, but not dressed as one: underlining seven rows of block glyphs
+ * (the global a:hover) is a mess, and a colour flash is not much better.
+ * The pointer cursor alone says clickable. */
+.logo-float:hover { text-decoration: none; }
 .logo-float pre {
   margin: 0;
   font-family: var(--mono);
   font-size: 12px;
   line-height: 1em;
+  /* Block glyphs' ink can round a hair narrower than the advance width,
+   * leaving pinstripe gaps between ██; tuck each glyph into the last. */
+  letter-spacing: -0.05em;
 }
 
 @media (max-width: 54rem) {
@@ -101,6 +107,7 @@ main {
 .hero .logo {
     color: var(--pink);
     line-height: 1em;
+    letter-spacing: -0.05em; /* see .logo-float pre */
 }
 
 .hero h1 {