From 640d37936fd76d0cc2524fbde39ed24fc68a04ee Mon Sep 17 00:00:00 2001 From: Pontoporeia Date: Sat, 28 Mar 2026 16:44:35 +0100 Subject: [PATCH] css: fix nav active state, deduplicate .site-nav__right, add font-display, clean up search pagination MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- TODO.md | 27 +++++++++++--------------- public/assets/common.css | 16 ++++------------ public/assets/search.css | 41 ++++++++++++++++++++++++++++++++++++++++ public/search.php | 12 ++++++++---- templates/nav.php | 2 +- 5 files changed, 65 insertions(+), 33 deletions(-) diff --git a/TODO.md b/TODO.md index ba88d93..5eb30d8 100644 --- 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 ``. -- [ ] **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 `` 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 diff --git a/public/assets/common.css b/public/assets/common.css index 5ce5329..dcf86c3 100644 --- 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; } /* ============================================================ diff --git a/public/assets/search.css b/public/assets/search.css index 3caa90f..975adf6 100644 --- 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); diff --git a/public/search.php b/public/search.php index 67eecf4..18751e6 100644 --- a/public/search.php +++ b/public/search.php @@ -157,12 +157,16 @@ $searchBarValue = $_GET['query'] ?? ''; 1): ?> -
+
‹ - / + class="pagination-btn" + + aria-label="Page précédente">‹ + / › + class="pagination-btn= $totalPages ? ' disabled' : '' ?>" + = $totalPages ? 'aria-disabled="true" tabindex="-1"' : '' ?> + aria-label="Page suivante">›
diff --git a/templates/nav.php b/templates/nav.php index 73c046c..66a873a 100644 --- a/templates/nav.php +++ b/templates/nav.php @@ -12,6 +12,6 @@ $_navCurrent = $currentNav ?? ''; Licence
- À Propos