css: replace presentational class selectors with semantic element selectors

Replace 6 CSS class selectors across tfe.css, main.css, and search.css with
semantic element-based selectors, removing the corresponding classes from the
HTML templates entirely.

tfe.css:
- .tfe-meta-list → article dl / article dl > div / article dl dt / article dl dd
- .tfe-media-block → aside figure (+ img, video, embed children)
- .tfe-file-caption → aside figcaption

main.css:
- .card__media → .home-body figure (+ img/video children and hover/motion rules)
- .card__caption → .home-body li > a > p

search.css:
- .repertoire-col > h2 → .repertoire-index section > h2

Template changes:
- tfe.php: removed class= from <dl>, <figure>, and <figcaption>
- index.php: removed class= from <figure> and <p class=card__caption>;
  stripped orphaned card__media from the gradient <div> (only --gradient needed)

No visual change — selectors match the same elements as before since the
semantic HTML was already in place from prior refactoring work.
This commit is contained in:
Pontoporeia
2026-04-01 17:08:12 +02:00
parent 77576e966c
commit cd58bc13e4
6 changed files with 44 additions and 44 deletions

20
TODO.md
View File

@@ -12,12 +12,12 @@
- [ ] **`admin.css`**: Replace `.admin-hint` with `.admin-body form small` — use `<small>` instead of `<p class="admin-hint">`
- [ ] **`admin.css`**: Replace `.admin-table` with `.admin-body table` — only one table per admin page
- [ ] **`admin.css`**: Replace `.admin-fieldset` / `.admin-fieldset-legend` with `.admin-body fieldset` / `.admin-body legend`
- [ ] **`main.css`**: Replace `.card__caption` with `.home-body .cards-container li p` or target `li > a > p` directly
- [ ] **`main.css`**: Replace `.card__media` with `.home-body figure` — already uses `<figure>` elements
- [ ] **`tfe.css`**: Replace `.tfe-meta-list` selectors with `article dl`, `article dt`, `article dd` — already using `<dl>` inside `<article>`
- [ ] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure` — already wrapped in `<figure>` inside `<aside>`
- [ ] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — native `<figcaption>` element
- [ ] **`search.css`**: Replace `.repertoire-col > h2` styling — already targets `section > h2`, can use `.repertoire-index section > h2`
- [x] **`main.css`**: Replace `.card__caption` with `.home-body .cards-container li p` or target `li > a > p` directly
- [x] **`main.css`**: Replace `.card__media` with `.home-body figure` — already uses `<figure>` elements
- [x] **`tfe.css`**: Replace `.tfe-meta-list` selectors with `article dl`, `article dt`, `article dd` — already using `<dl>` inside `<article>`
- [x] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure` — already wrapped in `<figure>` inside `<aside>`
- [x] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption` — native `<figcaption>` element
- [x] **`search.css`**: Replace `.repertoire-col > h2` styling — already targets `section > h2`, can use `.repertoire-index section > h2`
- [x] **`common.css`**: Replace `.site-search__icon` with `header form[role="search"] svg`
- [x] **`common.css`**: Replace `.site-search__input` with `header form[role="search"] input`
- [x] **`common.css`**: Replace `.site-search` with `header form[role="search"]`
@@ -25,10 +25,10 @@
### Template HTML changes to match
- [ ] In all admin templates, replace `<p class="admin-hint">` with `<small>` elements
- [ ] In `tfe.php`, remove `class="tfe-meta-list"` — target via `article dl`
- [ ] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
- [ ] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
- [ ] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
- [x] In `tfe.php`, remove `class="tfe-meta-list"` — target via `article dl`
- [x] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
- [x] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
- [x] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
- [x] In `search-bar.php` and `header.php`, remove `class="site-search"`, `class="site-search__icon"` and `class="site-search__input"`
## PHP Components (Reusable Partials/Includes)