style(navbar): logo crossfade, match-head end, full-screen mobile menu, brand slash template

site/includes/navbar.php

@@ -9,19 +9,21 @@ else
 }
 $logo      = base_url($logo_rel);
 $logo_dims = svg_img_dims_attr(dirname(__DIR__, 2) . '/' . $logo_rel);
-// Home page: the logo starts big and centred over the hero (.is-top) and docks
-// back to the left of the bar once the page scrolls (script below).
+$logo_alt  = 'Logo ' . (current_gym()['name'] ?? 'FitMe 3070');
+$logo_html = img_fallback_rel($logo_rel) !== ''
+    ? img_tag($logo_rel, ['loading' => 'eager', 'decoding' => 'async', 'alt' => $logo_alt])
+    : '<img loading="eager" decoding="async" alt="' . htmlspecialchars($logo_alt) . '" src="' . htmlspecialchars($logo) . '" ' . $logo_dims . '>';
+// Home page: a second, big copy of the logo shows centred over the hero
+// (.is-top); on scroll it fades out and the normal left logo fades in
+// (script below toggles .is-top, style.css "Bar layout").
 $center_logo = !empty($nav_center_logo);
 ?>
 <header class="header-section lazy<?= $center_logo ? ' has-center-logo is-top' : '' ?>">
   <nav class="navbar navbar-expand-lg navbar-light">
-      <a class="navbar-brand" href="<?= htmlspecialchars(gym_url(current_gym())) ?>">
-      <?php if (img_fallback_rel($logo_rel) !== ''): ?>
-      <?= img_tag($logo_rel, ['loading' => 'eager', 'decoding' => 'async', 'alt' => 'Logo ' . (current_gym()['name'] ?? 'FitMe 3070')]) ?>
-      <?php else: ?>
-      <img loading="eager" decoding="async" alt="Logo <?= htmlspecialchars(current_gym()['name'] ?? 'FitMe 3070') ?>" src="<?= htmlspecialchars($logo) ?>" <?= $logo_dims ?>>
-      <?php endif; ?>
-    </a>
+    <a class="navbar-brand" href="<?= htmlspecialchars(gym_url(current_gym())) ?>"><?= $logo_html ?></a>
+    <?php if ($center_logo): ?>
+    <a class="navbar-brand-hero" href="<?= htmlspecialchars(gym_url(current_gym())) ?>" aria-hidden="true" tabindex="-1"><?= $logo_html ?></a>
+    <?php endif; ?>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mx-auto ">
@@ -40,7 +42,7 @@ $center_logo = !empty($nav_center_logo);
         ?>
         <li class="nav-item <?= $is_active ? 'active' : '' ?> main-menu-li" >
           <?php if ($is_crossfit): ?>
-            <a class="nav-link crossfit-nav-link" href="<?= htmlspecialchars($n) ?>"<?= $is_active ? ' aria-current="page"' : '' ?>>
+            <a class="nav-link crossfit-nav-link fx-slash" href="<?= htmlspecialchars($n) ?>"<?= $is_active ? ' aria-current="page"' : '' ?>>
               <?= $key ?>
             </a>
           <?php elseif ($is_anchor): ?>