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

View File

@@ -57,8 +57,8 @@
flex: 1;
}
/* card__media is a <figure> (with image) or <div> (gradient placeholder) */
.card__media {
/* Media wrapper: <figure> for real images/video, <div class="card__media--gradient"> for placeholders */
.home-body figure {
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
@@ -67,8 +67,8 @@
margin: 0; /* reset <figure> default margin */
}
.card__media img,
.card__media video {
.home-body figure img,
.home-body figure video {
width: 100%;
height: 100%;
object-fit: cover;
@@ -76,8 +76,8 @@
transition: transform 0.3s ease;
}
.card:hover .card__media img,
.card:hover .card__media video {
.card:hover figure img,
.card:hover figure video {
transform: scale(1.02);
}
@@ -127,8 +127,8 @@
font-style: italic;
}
/* Card caption — <p> directly inside the <a>, below the media */
.card__caption {
/* Card caption — <p> directly inside the card <a> link, below the media */
.home-body li > a > p {
padding: 0.55rem 0.5rem 0.65rem;
font-size: 0.88rem;
line-height: 1.35;
@@ -226,12 +226,12 @@
/* Suppress card hover scale for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.card__media img,
.card__media video {
.home-body figure img,
.home-body figure video {
transition: none;
}
.card:hover .card__media img,
.card:hover .card__media video {
.card:hover figure img,
.card:hover figure video {
transform: none;
}
.card__media--gradient {