health: fix broken pages, add image dimensions, a11y & SEO wins
Site-wide health pass (excludes in-progress blog work). Verified with a
local server + headless browser: Timeline, homepage and gallery pages load
with zero console errors and no layout distortion.
Render bugs
- Timeline page (en/mk/si): fix ../../../ paths that overshot the site root,
so the main stylesheet and hero image load again.
- Meet Student Slovenia 2023 (en/mk/si): remove a <figure> referencing
event3-photo-11.png, an image that was never uploaded (broken image).
Performance
- Add intrinsic width/height to 1039 raster <img> tags to prevent layout
shift (CLS); 450 SVGs correctly skipped. Add a global
`img { max-width:100%; height:auto }` safety net so aspect ratio is
preserved and images never overflow.
- Preload the homepage hero (LCP) image on en/mk/si.
- Load Font Awesome non-blocking (media=print/onload swap) with a <noscript>
fallback, on 225 pages.
Accessibility
- Add aria-label to 57 unlabeled newsletter email inputs.
- Add an sr-only <h1> to the three "My Route" pages (had no h1).
- Add an .sr-only utility class.
SEO
- Add meta descriptions to legal/msos-hub/support pages (en/mk/si).
Note: MK/SI meta descriptions are machine-drafted and should be proofread
by a native speaker before considering them final.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
168e4ce378
commit
9ce7450aa1
209 files changed
+1289
-1267
No files matched your search
@@ -2,6 +2,28 @@
|
||||
Base Styles
|
||||
========================================================================== */
|
||||
|
||||
/* Screen-reader-only utility: visually hidden but announced by assistive tech.
|
||||
Used for accessible headings that don't need to be shown visually. */
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Responsive-image safety net. Pairs with the width/height attributes now on
|
||||
every <img>: keeps images from overflowing their container and preserves
|
||||
aspect ratio (prevents distortion) for any image without a specific size
|
||||
rule. Component rules with their own height (.news-card img, .eg-thumb img,
|
||||
object-fit covers, logos, etc.) are more specific and still win. */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Temeljni stili za celotno stran (box-sizing, osnovna pisava, barve).
|
||||
* 2. Definicija glavnega `.container` razreda za omejitev širine vsebine.
|
||||
|
||||
Reference in new issue
Block a user