mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
tfe.php: full semantic HTML overhaul
- Replace <div class="tfe-layout"> with <article>, <div class="tfe-left"> with <header>, <div class="tfe-right"> with <aside> (supplementary media column) - Fix inverted heading hierarchy: <h1> is now the thesis title (primary topic); author demoted to <p class="tfe-author"> (metadata, not a heading) - Replace <div class="tfe-meta-list"> / <div class="tfe-meta-item"> / <span class="label"> / <span class="value"> with <dl> / <dt> / <dd> (WCAG 1.3.1 info & relationships) - Replace <div class="tfe-media-block"> with <figure>; <p class="tfe-file-caption"> with <figcaption>; PDF <embed> gets .tfe-pdf-fallback download link (WCAG 4.1.2) - Move back link to top of left column; extract inline styles to .tfe-back-link, .tfe-note-value, .tfe-restricted CSS classes - Fix image alt text: description column used when populated, fallback to "Title — Author" instead of raw filename (WCAG 1.1.1) - Add sr-only new-tab warning on baiu_link (WCAG 1.3.1 / 2.4.4) - Fix PDF embed height: clamp(300px, 80vh, 700px) prevents horizontal overflow on small screens (WCAG 1.4.10 reflow) - tfe.css: update all selectors to match new structure; remove inline styles; unify .tfe-restricted and .tfe-no-files; add .tfe-pdf-fallback, .tfe-back-link
This commit is contained in:
Pontoporeia
@@ -15,7 +15,7 @@
|
||||
padding: 2rem 1.5rem 3rem;
|
||||
}
|
||||
|
||||
/* Two-column layout */
|
||||
/* Two-column article layout */
|
||||
.tfe-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.4fr;
|
||||
@@ -23,24 +23,22 @@
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Left column */
|
||||
/* Left column — article header */
|
||||
.tfe-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Student name — large */
|
||||
.tfe-author {
|
||||
font-size: 1.9rem;
|
||||
font-weight: 400;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
/* Back link — top of left column */
|
||||
.tfe-back-link {
|
||||
font-size: .88rem;
|
||||
color: #666;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Title — very large, slightly spaced */
|
||||
/* Title (h1) — primary heading, very large */
|
||||
.tfe-title {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 400;
|
||||
@@ -50,55 +48,79 @@
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Metadata list */
|
||||
/* Author (p) — large but secondary */
|
||||
.tfe-author {
|
||||
font-size: 1.9rem;
|
||||
font-weight: 400;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Metadata description list */
|
||||
.tfe-meta-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tfe-meta-item {
|
||||
/* Each dt/dd pair grouped in a <div> inside <dl> */
|
||||
.tfe-meta-list > div {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tfe-meta-item .label {
|
||||
.tfe-meta-list dt {
|
||||
color: var(--black);
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tfe-meta-item .value {
|
||||
.tfe-meta-list dd {
|
||||
color: var(--black);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tfe-meta-item .value a {
|
||||
.tfe-meta-list dd a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Synopsis text */
|
||||
/* Note field: align dt/dd to top, value in italics */
|
||||
.tfe-meta-note {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.tfe-note-value {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Synopsis paragraph */
|
||||
.tfe-synopsis-text {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
color: var(--black);
|
||||
margin-top: 0.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Right column — media */
|
||||
/* Right column — aside (supplementary media) */
|
||||
.tfe-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Each file display unit */
|
||||
.tfe-media-block {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tfe-media-block img {
|
||||
@@ -119,9 +141,10 @@
|
||||
}
|
||||
|
||||
.tfe-media-block embed {
|
||||
height: 700px;
|
||||
height: clamp(300px, 80vh, 700px);
|
||||
}
|
||||
|
||||
/* figcaption under media */
|
||||
.tfe-file-caption {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
@@ -129,10 +152,26 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* PDF fallback download link */
|
||||
.tfe-pdf-fallback {
|
||||
font-size: 0.85rem;
|
||||
margin: 0.4rem 0 0;
|
||||
}
|
||||
|
||||
.tfe-pdf-fallback a {
|
||||
color: var(--black);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
/* "Not available" and "no files" notices */
|
||||
.tfe-restricted,
|
||||
.tfe-no-files {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
padding: 1rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@@ -142,13 +181,13 @@
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.tfe-author {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.tfe-title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
.tfe-author {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@@ -156,11 +195,11 @@
|
||||
padding: 1.5rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.tfe-author {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.tfe-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.tfe-author {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user