mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user