fix: space tile, stat and file row labels

Tiles read "BizHawkWindows, Linux", stats "168/168Coverage" and a
file row "SVI603.ROMbios/Machines/...OK": the stylesheet lays them
out as boxes, the markup had no space between them. A setup without a
logo draws its initials from the stylesheet, so its name is read once.

scripts/generate_site.py

@@ -417,8 +417,8 @@ def _date_line() -> str:
 def _stat(value: str, label: str) -> list[str]:
     return [
         markup.block_open("div", 'class="rb-stat"'),
-        f'<span class="rb-stat-value">{value}</span>',
-        f'<span class="rb-stat-label">{label}</span>',
+        # One line, a space between: the page text read "168/168Coverage".
+        f'<span class="rb-stat-value">{value}</span> <span class="rb-stat-label">{label}</span>',
         "</div>",
         "",
     ]
@@ -3803,8 +3803,10 @@ def _platform_file_row(f: dict, cfg_entry: dict, hash_type: str = "",
         facts.append(_inline_html(_category_evidence_md(f["category_evidence"], launched)))
 
     path = _row_path(fname, cfg_entry)
-    summary = (_text_html(fname) + (f"<code>{_text_html(path)}</code>" if path else "")
-               + _status_chip(f))
+    # Spaces between name, path and status: the summary lays them out as
+    # columns, and the page text read "SVI603.ROMbios/Machines/...OK".
+    summary = " ".join([_text_html(fname), *([f"<code>{_text_html(path)}</code>"] if path else []),
+                        _status_chip(f)])
     copy = _copy_hash(shown, hashes[shown]) if shown else ""
     return (f'<details class="rb-file"><summary>{summary}</summary>'
             f'{"<br>".join(facts)}</details>{copy}')

scripts/sitemarkup.py

@@ -225,10 +225,11 @@ def _tile_mark(name: str, logo: str, lazy: bool = False) -> str:
         loading = ' loading="lazy"' if lazy else ""
         return (f'<img class="rb-card-logo" src="{html.escape(logo)}" alt="" '
                 f'width="40" height="40"{loading}>')
-    # The same square as a logo, drawn on white like the logos are.
-    return ('<svg class="rb-card-logo" viewBox="0 0 40 40" width="40" height="40" aria-hidden="true">'
-            '<text x="20" y="25" text-anchor="middle" font-size="14" font-weight="700" '
-            f'fill="#2b2e5c">{html.escape(initials(name))}</text></svg>')
+    # The same square as a logo, drawn on white like the logos are. The
+    # letters are the stylesheet's (::before), not text of the page: the
+    # tile's name follows, and a copy or a text dump read "MMMyMinUI".
+    return (f'<span class="rb-card-logo rb-card-initials" data-initials="{html.escape(initials(name))}" '
+            'aria-hidden="true"></span>')
 
 
 # Tiles in the first row of a grid at its widest, two columns of 15rem in
@@ -246,8 +247,8 @@ def platform_tiles(tiles: list[tuple[str, str, str, str]], eager: int = 0) -> li
     links = "".join(
         f'<a class="rb-card rb-tile" href="{html.escape(target)}">'
         f"{_tile_mark(name, logo, lazy=index >= eager)}"
-        f'<strong class="rb-tile-name">{html.escape(name)}</strong>'
-        f'<span class="rb-tile-runs">{inline_html(runs_on)}</span></a>'
+        f'<strong class="rb-tile-name">{html.escape(name)}</strong> '
+        f'<span class="rb-tile-runs">{inline_html(runs_on)}</span></a> '
         for index, (name, target, logo, runs_on) in enumerate(tiles)
     )
     return [f'<div class="rb-cards rb-tiles">{links}</div>', ""]