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:
popovskikandClaude Opus 4.8 committed 2026-08-04 00:31:27 +02:00
1 parent 168e4ce378
commit 9ce7450aa1
209 files changed
+1289 -1267

No files matched your search

+9 -9
View File
@@ -54,7 +54,7 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome (for icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" media="print" onload="this.media=&#39;all&#39;" /><noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /></noscript>
<!-- Link to the main CSS file -->
<link rel="stylesheet" href="../../css/main.css">
@@ -292,12 +292,12 @@
<p>Moč MSOS izhaja iz nesebičnega dajanja našega časa in energije. Vsak projekt, dogodek in ideja v MSOS temelji na trdem delu naših čudovitih prostovoljcev. Naš prostovoljski duh je dokaz predanosti, strasti in sodelovalne energije naše skupnosti ter razlog, zakaj skupaj rastemo močnejši.</p>
</div>
<div class="value-image">
<img loading="lazy" decoding="async" src="../../images/about_volunteer_spirit.webp" alt="Skupina prostovoljcev, ki sodeluje s pozitivno energijo.">
<img width="1920" height="1280" loading="lazy" decoding="async" src="../../images/about_volunteer_spirit.webp" alt="Skupina prostovoljcev, ki sodeluje s pozitivno energijo.">
</div>
</div>
<div class="value-row">
<div class="value-image">
<img loading="lazy" decoding="async" src="../../images/about_solidarity_and_care_for_each_other.webp" alt="Študenti, ki se med seboj podpirajo na prijateljski in skrben način.">
<img width="1920" height="1280" loading="lazy" decoding="async" src="../../images/about_solidarity_and_care_for_each_other.webp" alt="Študenti, ki se med seboj podpirajo na prijateljski in skrben način.">
</div>
<div class="value-content">
<h3>Solidarnost in skrb drug za drugega</h3>
@@ -310,7 +310,7 @@
<p>Ponosni smo na to, od kod prihajamo, in s seboj nosimo našo makedonsko dediščino, hkrati pa si prizadevamo za svetlejšo prihodnost. Naše korenine nam dajejo moč, naša ambicija pa nas žene naprej. Naša ambicija nas spodbuja, da smo profesionalni, inovativni in vplivni voditelji ter vzorniki v naši gostiteljski državi.</p>
</div>
<div class="value-image">
<img loading="lazy" decoding="async" src="../../images/about_love_for_our_roots_ambition_for_the_future.webp" alt="Preplet tradicionalne makedonske kulture in sodobnih ambicioznih študentov.">
<img width="1920" height="1281" loading="lazy" decoding="async" src="../../images/about_love_for_our_roots_ambition_for_the_future.webp" alt="Preplet tradicionalne makedonske kulture in sodobnih ambicioznih študentov.">
</div>
</div>
</div>
@@ -328,7 +328,7 @@
<p>Poslanstvo MSOS je zastopati interese, izboljšati življenje in olajšati študij makedonskih študentov v Republiki Sloveniji.</p>
</div>
<div class="box-content mission-icon-content">
<img loading="lazy" decoding="async" src="../../images/about_mission.webp" alt="Ikona poslanstva">
<img width="510" height="200" loading="lazy" decoding="async" src="../../images/about_mission.webp" alt="Ikona poslanstva">
</div>
</div>
<!-- Vision Box -->
@@ -337,7 +337,7 @@
<p>Vizija MSOS je zagotoviti glas, dom in podporo makedonskim študentom v Republiki Sloveniji ter hkrati spodbujati njihovo aktivno vključevanje v projekte skupnega interesa.</p>
</div>
<div class="box-content vision-icon-content">
<img loading="lazy" decoding="async" src="../../images/about_vision.webp" alt="Ikona vizije">
<img width="510" height="200" loading="lazy" decoding="async" src="../../images/about_vision.webp" alt="Ikona vizije">
</div>
</div>
</div>
@@ -347,9 +347,9 @@
<section class="faq-cta-section">
<div class="faq-cta-container">
<div class="avatar-group">
<img loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Avatar Marije" class="avatar">
<img loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Avatar Kristijana" class="avatar large">
<img loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Avatar Lee" class="avatar">
<img width="1197" height="1197" loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Avatar Marije" class="avatar">
<img width="1083" height="1083" loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Avatar Kristijana" class="avatar large">
<img width="1099" height="1099" loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Avatar Lee" class="avatar">
</div>
<h3>Imate kakšno vprašanje?</h3>
<p class="page-description" style="margin: 0;">Ne najdete odgovora, ki ga iščete? Poklepetajte z našo prijazno ekipo.</p>