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
This commit is contained in:
Pontoporeia
2026-03-28 16:44:35 +01:00
parent 764edf9121
commit 640d37936f
5 changed files with 65 additions and 33 deletions

27
TODO.md
View File

@@ -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 159164 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