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

@@ -56,7 +56,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>
<!-- Povezava na glavno CSS datoteko -->
<link rel="stylesheet" href="../../../css/main.css">
@@ -201,7 +201,7 @@
</header>
<figure class="article-main-image">
<img fetchpriority="high" src="../../../images/kochani-1.webp" alt="Sveče in cvetje na Kongresnem trgu v spomin na žrtve tragedije v Kočanih">
<img width="720" height="480" fetchpriority="high" src="../../../images/kochani-1.webp" alt="Sveče in cvetje na Kongresnem trgu v spomin na žrtve tragedije v Kočanih">
</figure>
<div class="article-body">
@@ -210,7 +210,7 @@
<p>Skupnost MŠOS se je odločila ustvariti trenutek solidarnosti v Sloveniji, ne kot dejanje protesta ali politike, ampak kot način izražanja človečnosti, žalosti in enotnosti ob tragediji.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/kochani-2.webp" alt="Svetloba sveč in cvetje na žalni slovesnosti v Ljubljani">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-2.webp" alt="Svetloba sveč in cvetje na žalni slovesnosti v Ljubljani">
</figure>
<h2>Zbor v Ljubljani</h2>
@@ -220,7 +220,7 @@
<p>Študenti, družine in člani širše skupnosti so polagali cvetje in prižigali sveče ter ustvarili morje svetlobe in barv, ki je ostalo nedotaknjeno še tedne po dogodku, saj si nihče ni upal skruniti spomenika. Vzdušje je bilo slovesno, spoštljivo in globoko čustveno.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/kochani-3.webp" alt="Morje sveč in cvetja, ki so ga pustili udeleženci">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-3.webp" alt="Morje sveč in cvetja, ki so ga pustili udeleženci">
</figure>
<h2>Sporočilo onkraj meja</h2>
@@ -230,7 +230,7 @@
<p>Dogodek je bil odmeven tudi v Sloveniji, kjer je predsednik MŠOS podal kratek intervju za RTV Slovenija in razmišljal o pomenu enotnosti v težkih časih.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/kochani-4.webp" alt="Udeleženci stojijo skupaj med trenutkom tišine">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-4.webp" alt="Udeleženci stojijo skupaj med trenutkom tišine">
</figure>
<h2>Sklepne besede</h2>
@@ -243,10 +243,10 @@
<section class="event-gallery">
<h2 class="event-gallery-title">Fotografije z dogodka</h2>
<div class="event-gallery-grid js-lightbox">
<button type="button" class="eg-thumb" data-full="../../../images/kochani-1.webp" data-caption="V spomin na žrtve v Kočanih"><img loading="lazy" decoding="async" src="../../../images/kochani-1.webp" alt="V spomin na žrtve v Kočanih, photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/kochani-2.webp" data-caption="V spomin na žrtve v Kočanih"><img loading="lazy" decoding="async" src="../../../images/kochani-2.webp" alt="V spomin na žrtve v Kočanih, photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/kochani-3.webp" data-caption="V spomin na žrtve v Kočanih"><img loading="lazy" decoding="async" src="../../../images/kochani-3.webp" alt="V spomin na žrtve v Kočanih, photo 3"></button>
<button type="button" class="eg-thumb" data-full="../../../images/kochani-4.webp" data-caption="V spomin na žrtve v Kočanih"><img loading="lazy" decoding="async" src="../../../images/kochani-4.webp" alt="V spomin na žrtve v Kočanih, photo 4"></button>
<button type="button" class="eg-thumb" data-full="../../../images/kochani-1.webp" data-caption="V spomin na žrtve v Kočanih"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-1.webp" alt="V spomin na žrtve v Kočanih, photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/kochani-2.webp" data-caption="V spomin na žrtve v Kočanih"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-2.webp" alt="V spomin na žrtve v Kočanih, photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/kochani-3.webp" data-caption="V spomin na žrtve v Kočanih"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-3.webp" alt="V spomin na žrtve v Kočanih, photo 3"></button>
<button type="button" class="eg-thumb" data-full="../../../images/kochani-4.webp" data-caption="V spomin na žrtve v Kočanih"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-4.webp" alt="V spomin na žrtve v Kočanih, photo 4"></button>
</div>
</section>
</article>
@@ -257,7 +257,7 @@
<p>Novice, obvestila in razpisi, naravnost v vaš e-poštni predal.</p>
<form class="subscribe-form-bottom">
<div class="input-wrapper">
<input type="email" placeholder="Vnesite svoj e-mail">
<input type="email" placeholder="Vnesite svoj e-mail" aria-label="E-poštni naslov">
</div>
<button type="submit" class="btn btn-primary-orange">Naroči se</button>
</form>