css: fix nav active state, deduplicate .site-nav__right, add font-display, clean up search pagination

- common.css: add font-display: swap to Combinedd.otf @font-face (eliminates FOIT) - common.css: remove duplicate .site-nav__right block (identical to .site-nav__link); update nav.php to use .site-nav__link on the À Propos link - common.css: add .site-nav__link--active rule (opacity:1 + white underline); the class was already applied in nav.php but had no CSS definition, making it invisible - search.php: replace fully inline-styled pagination with .pagination-wrap / .pagination-btn / .pagination-info classes; add aria-disabled + tabindex=-1 on disabled links; add aria-label on prev/next links - search.css: add pagination rule block to match, keeping styles co-located with the page
2026-05-06 11:09:18 +02:00 · 2026-03-28 16:44:35 +01:00
parent 764edf9121
commit 640d37936f
5 changed files with 65 additions and 33 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -484,15 +484,13 @@ Goal: rename the tables and column to the canonical M2M pattern (`tags`, `thesis
      shell (`display:flex; flex-direction:column; background:var(--white)`) which only differs in
      the BEM class name applied to `<body>`.

- [ ] **No `font-display` on the `Combinedd.otf` custom font** — `common.css` declares `@font-face`
-      with no `font-display` property; the browser blocks text rendering until the font loads (FOIT).
-      Add `font-display: swap`. Also add a `<link rel="preload">` for the font file in the shared
-      head partial once it exists.
+- [x] **No `font-display` on the `Combinedd.otf` custom font** — added `font-display: swap`
+      to `@font-face` in `common.css`; eliminates FOIT on first load.

- [ ] **Search results pagination is fully inline-styled** — `search.php` lines 159–164 apply
-      `style="padding:.25rem .7rem;border:1px solid #ddd;…"` and hardcoded `#ddd`/`#666`. The home
-      page (`index.php`) already has `.pagination-btn` / `.pagination-info` in `main.css`. Reuse
-      those classes in `search.php` and remove the inline styles.
+- [x] **Search results pagination is fully inline-styled** — replaced inline styles in `search.php`
+      with `.pagination-wrap` / `.pagination-btn` / `.pagination-info` classes; added matching rules
+      to `search.css`; added `aria-disabled` + `tabindex="-1"` on disabled links; added `aria-label`
+      on prev/next links.

 - [ ] **Scattered inline styles in templates** — notable instances that should become named classes:
      - `tfe.php` line 146: `style="align-items:start;"` → `.tfe-meta-item--top` in `tfe.css`
@@ -503,15 +501,12 @@ Goal: rename the tables and column to the canonical M2M pattern (`tags`, `thesis
        classes in `admin.css`
      - `index.php` line 146: `style="padding:2rem;color:#666;"` → `.cards-empty` in `main.css`

- [ ] **`.site-nav__right` is a duplicate of `.site-nav__link`** — `common.css` defines both with
-      identical declarations (font-size, letter-spacing, text-transform, color, opacity, transition).
-      The only difference is DOM position. Merge `.site-nav__right` into `.site-nav__link`; let the
-      flex layout position it via `margin-left:auto` or DOM order.
+- [x] **`.site-nav__right` is a duplicate of `.site-nav__link`** — removed `.site-nav__right` block
+      from `common.css`; updated `nav.php` to use `.site-nav__link` on the À Propos link.

- [ ] **`.site-nav__link--active` is applied in `nav.php` but never defined in CSS** — the class
-      is set conditionally but has no corresponding rule in `common.css`, so the active state is
-      invisible. Add a visible style (e.g. `opacity:1; border-bottom:1px solid rgba(255,255,255,.6)`)
-      or remove the conditional.
+- [x] **`.site-nav__link--active` is applied in `nav.php` but never defined in CSS** — added
+      `opacity:1; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:1px` rule to
+      `common.css`; active nav link is now visually distinct.

 ### F — Template logic / PHP in templates

--- a/public/assets/common.css
+++ b/public/assets/common.css
@@ -1,6 +1,7 @@
@font-face {
  font-family: "police1";
  src: url("./fonts/Combinedd.otf");
+  font-display: swap;
 }

 /* ============================================================
@@ -84,19 +85,10 @@ a:hover {
  opacity: 1;
 }

-.site-nav__right {
-  font-size: 0.85rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--white);
-  text-decoration: none;
-  font-weight: 400;
-  opacity: 0.92;
-  transition: opacity 0.15s;
-}
-
-.site-nav__right:hover {
+.site-nav__link--active {
  opacity: 1;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  padding-bottom: 1px;
 }

 /* ============================================================
--- a/public/assets/search.css
+++ b/public/assets/search.css
@@ -269,6 +269,47 @@ html, body {
  cursor: pointer;
 }

+/* Search results pagination — reuses same token names as main.css */
+.pagination-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.5rem 0;
+}
+
+.pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 3px;
+  color: var(--black);
+  font-size: 0.9rem;
+  text-decoration: none;
+  transition: all 0.15s;
+}
+
+.pagination-btn:hover:not(.disabled) {
+  border-color: var(--purple);
+  color: var(--purple);
+}
+
+.pagination-btn.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.pagination-info {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  padding: 0 0.5rem;
+}
+
 .search-empty {
  padding: 3rem 1.5rem;
  color: var(--text-muted);
--- a/public/search.php
+++ b/public/search.php
@@ -157,12 +157,16 @@ $searchBarValue = $_GET['query'] ?? '';
            </div>

            <?php if ($totalPages > 1): ?>
-            <div style="display:flex;gap:.5rem;justify-content:center;align-items:center;padding:1.5rem 0;">
+            <div class="pagination-wrap">
                <a href="?<?= http_build_query(array_merge($_GET, ['page' => max(1, $page - 1)])) ?>"
-                   style="padding:.25rem .7rem;border:1px solid #ddd;border-radius:3px;color:#111;text-decoration:none;<?= $page <= 1 ? 'opacity:.3;pointer-events:none;' : '' ?>">‹</a>
-                <span style="font-size:.9rem;color:#666;"><?= $page ?> / <?= $totalPages ?></span>
+                   class="pagination-btn<?= $page <= 1 ? ' disabled' : '' ?>"
+                   <?= $page <= 1 ? 'aria-disabled="true" tabindex="-1"' : '' ?>
+                   aria-label="Page précédente">‹</a>
+                <span class="pagination-info"><?= $page ?> / <?= $totalPages ?></span>
                <a href="?<?= http_build_query(array_merge($_GET, ['page' => min($totalPages, $page + 1)])) ?>"
-                   style="padding:.25rem .7rem;border:1px solid #ddd;border-radius:3px;color:#111;text-decoration:none;<?= $page >= $totalPages ? 'opacity:.3;pointer-events:none;' : '' ?>">›</a>
+                   class="pagination-btn<?= $page >= $totalPages ? ' disabled' : '' ?>"
+                   <?= $page >= $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?>
+                   aria-label="Page suivante">›</a>
            </div>
            <?php endif; ?>

--- a/templates/nav.php
+++ b/templates/nav.php
@@ -12,6 +12,6 @@ $_navCurrent = $currentNav ?? '';
        <a class="site-nav__link <?= ($_navCurrent === 'licence') ? 'site-nav__link--active' : '' ?>"
           href="/licence.php">Licence</a>
    </div>
-    <a class="site-nav__right <?= ($_navCurrent === 'apropos') ? 'site-nav__link--active' : '' ?>"
+    <a class="site-nav__link <?= ($_navCurrent === 'apropos') ? 'site-nav__link--active' : '' ?>"
       href="/apropos.php">À Propos</a>
 </nav>