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/event3-photo-1.webp" alt="Panelna razprava na dogodku 'Spoznaj študentsko Slovenijo 2023'">
<img width="1920" height="1280" fetchpriority="high" src="../../../images/event3-photo-1.webp" alt="Panelna razprava na dogodku 'Spoznaj študentsko Slovenijo 2023'">
</figure>
<div class="article-body">
@@ -211,7 +211,7 @@
<p>Namesto suhih informacij so študenti imeli priložnost slišati resnične zgodbe, od tistih, ki že hodijo po isti poti. Študenti iz Ljubljane, Maribora in Kopra so govorili o svojih izzivih, prvih vtisih, smešnih situacijah in trenutkih, ko je bila podpora skupnosti ključna. In občinstvo? Z ogromno pozornostjo so vpijali vse, saj so prav na ta vprašanja, ki jih nikoli ne piše na brošurah, tukaj dobili iskrene odgovore.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-2.webp" alt="Udeleženci panelne razprave">
<img width="1920" height="1317" loading="lazy" decoding="async" src="../../../images/event3-photo-2.webp" alt="Udeleženci panelne razprave">
<figcaption>Igor Arsov z Univerze na Primorskem pripoveduje o svoji študentski izkušnji na Fakulteti za management.</figcaption>
</figure>
@@ -219,12 +219,12 @@
<p>Na odru so se pojavili naši člani Kiara Lazić, Angel Naumov, Klimentina Čapovska in Igor Arsov, vsak s svojo zgodbo, svojo fakulteto, svojim mestom. Skupaj z moderatorjem Leonom Šumanskim in voditeljem Vasilom Hanџiskim so panel spremenili v pravi pogovor, ki je bolj spominjal na prijateljsko druženje kot na formalno diskusijo. Govorili so o izpitih, novih prijateljstvih, življenju v študentskih domovih in o tem, kako pomembno je, da ne obupaš, tudi ko se ti zdi najtežje.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-3.webp" alt="Vasil Hanџiski ob otvoritvi dogodka">
<img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event3-photo-3.webp" alt="Vasil Hanџiski ob otvoritvi dogodka">
<figcaption>Fotografija z otvoritve dogodka z voditeljem Vasilom Hanџiskim.</figcaption>
</figure>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-4.webp" alt="Občinstvo na dogodku">
<img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event3-photo-4.webp" alt="Občinstvo na dogodku">
<figcaption>Fotografija udeležencev dogodka. Zanimanje nas je malo presenetilo, a nekako smo se vsi stlačili!♡</figcaption>
</figure>
@@ -233,15 +233,15 @@
<p>Na dogodku smo dobili pomembno podporo in pomoč tudi od Melite Sekulovske pri organizaciji prostora in Aleksandra Popovskega pri oblikovanju spletne strani organizacije. Iskreno smo se jim zahvalili za njihovo predano delo, kot tudi koordinatorki dogodka, Lei Janačkovski, ki je ta dogodek naredila izjemen.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-5.webp" alt="Gospod Branko Greganović in N.E. Gregor Presker">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-6.webp" alt="Kristijan Popovski, Melita Sekulovska, Lea Janačkovska, Marija Koštrevska in Aleksandar Popovski s priznanji">
<img width="1920" height="1337" loading="lazy" decoding="async" src="../../../images/event3-photo-5.webp" alt="Gospod Branko Greganović in N.E. Gregor Presker">
<img width="1920" height="1239" loading="lazy" decoding="async" src="../../../images/event3-photo-6.webp" alt="Kristijan Popovski, Melita Sekulovska, Lea Janačkovska, Marija Koštrevska in Aleksandar Popovski s priznanji">
<figcaption>Na zgornjih dveh slikah sta gospod Branko Greganović, predsednik Uprave NLB Banke Skopje, na desni pa N.E. veleposlanik Republike Slovenije v Severni Makedoniji, gospod Gregor Presker. Na spodnjih slikah so predsednik Kristijan Popovski, Melita Sekulovska, Lea Janačkovska, Marija Koštrevska in Aleksandar Popovski.</figcaption>
</figure>
<p>Veleposlaništvu in NLB Banki smo s pomočjo podjetja Dijag doo izdelali tudi dve plaketi v znak hvaležnosti za vso pomoč in podporo, ki sta nam jo nudila.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-7.webp" alt="Plaketi za NLB Banko Skopje in Veleposlaništvo Republike Slovenije">
<img width="1920" height="1337" loading="lazy" decoding="async" src="../../../images/event3-photo-7.webp" alt="Plaketi za NLB Banko Skopje in Veleposlaništvo Republike Slovenije">
<figcaption>Fotografija plaket, ki smo jih podarili NLB Banki Skopje in Veleposlaništvu Republike Slovenije v Severni Makedoniji.</figcaption>
</figure>
@@ -249,7 +249,7 @@
<p>Zato ker ta dogodek ni bil le še ena predstavitev. Bil je iztegnjena roka bodočim študentom, sporočilo, da niso sami, da jih skupnost že čaka. Nekateri so odšli z novimi prijatelji, drugi s konkretnimi odgovori na vprašanja, ki so jih mučila mesece. Vsi pa so odšli z enakim občutkom: da Slovenija ni več neznan kraj, ampak nov dom, v katerem bodo del nečesa večjega.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-8.webp" alt="Udeleženci dogodka">
<img width="1920" height="1341" loading="lazy" decoding="async" src="../../../images/event3-photo-8.webp" alt="Udeleženci dogodka">
<figcaption>Fotografije prisotnih na dogodku!</figcaption>
</figure>
@@ -262,7 +262,7 @@
<p>Poseben trenutek dogodka je bil nagovor konzula Veleposlaništva Republike Slovenije v Severni Makedoniji, gospoda Martina Glazarja. Na kratko je predstavil najpomembnejše korake postopka za pridobitev začasnega dovoljenja za prebivanje, eno največjih skrbi in izzivov za vse tuje študente v Sloveniji. Na ta način so bodoči študenti dobili jasnejšo sliko o tem, kaj jih čaka in kako se lažje spopasti z administrativnimi postopki.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-9.webp" alt="Konzul seznanja študente s postopkom pridobitve začasnega dovoljenja za prebivanje">
<img width="960" height="540" loading="lazy" decoding="async" src="../../../images/event3-photo-9.webp" alt="Konzul seznanja študente s postopkom pridobitve začasnega dovoljenja za prebivanje">
<figcaption>Fotografija konzula, ki na zanimiv način seznanja študente s postopkom pridobitve začasnega dovoljenja za prebivanje!</figcaption>
</figure>
@@ -270,7 +270,7 @@
<p>Ni vsem uspelo biti prisotnim v dvorani, zato smo se potrudili, da nihče ne bi ostal brez te izkušnje. Dogodek smo prenašali v živo preko naše Facebook strani, posnetek pa je še vedno na voljo. Če želite doživeti vzdušje in slišati zgodbe iz prve roke, si lahko celoten dogodek ogledate na tej povezavi tukaj.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-10.webp" alt="Plakat za dogodek 'Spoznaj študentsko Slovenijo'">
<img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event3-photo-10.webp" alt="Plakat za dogodek 'Spoznaj študentsko Slovenijo'">
<figcaption>Fotografija plakata za dogodek!</figcaption>
</figure>
@@ -285,34 +285,29 @@
<li>Radio MOF (medijski partner)</li>
</ol>
<p>Hvala vsem, ki ste bili del tega dogodka, in bodočim študentom sporočamo: vaša zgodba v Sloveniji se šele začenja in mi smo tukaj, da smo del nje.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/event3-photo-11.png" alt="Majhen del ekipe MŠOS">
<figcaption>Fotografija majhnega dela ekipe, ker smo pozabili, da se vsi skupaj slikamo!&#129322;</figcaption>
</figure>
</div>
<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/event3-photo-1.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-1.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-2.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-2.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-3.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-3.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 3"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-4.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-4.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 4"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-5.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-5.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 5"><span class="eg-more">+5</span></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-6.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-6.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 6"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-7.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-7.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 7"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-8.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-8.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 8"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-9.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-9.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 9"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-10.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img loading="lazy" decoding="async" src="../../../images/event3-photo-10.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 10"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-1.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event3-photo-1.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-2.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1317" loading="lazy" decoding="async" src="../../../images/event3-photo-2.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-3.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event3-photo-3.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 3"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-4.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event3-photo-4.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 4"></button>
<button type="button" class="eg-thumb" data-full="../../../images/event3-photo-5.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1337" loading="lazy" decoding="async" src="../../../images/event3-photo-5.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 5"><span class="eg-more">+5</span></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-6.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1239" loading="lazy" decoding="async" src="../../../images/event3-photo-6.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 6"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-7.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1337" loading="lazy" decoding="async" src="../../../images/event3-photo-7.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 7"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-8.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1341" loading="lazy" decoding="async" src="../../../images/event3-photo-8.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 8"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-9.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="960" height="540" loading="lazy" decoding="async" src="../../../images/event3-photo-9.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 9"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/event3-photo-10.webp" data-caption="Spoznaj študentsko Slovenijo 2023"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event3-photo-10.webp" alt="Spoznaj študentsko Slovenijo 2023, photo 10"></button>
</div>
</section>
<footer class="article-footer">
<hr>
<div class="author-share-section">
<div class="author-details">
<img loading="lazy" decoding="async" src="../../../images/11-boy.webp" alt="Avatar Kristijana Popovskega">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../../../images/11-boy.webp" alt="Avatar Kristijana Popovskega">
<div class="author-text">
<p class="author-name">Kristijan Popovski</p>
<p class="author-title">Predsednik in ustanovitelj</p>
@@ -335,7 +330,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>