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

+36 -35
View File
@@ -54,10 +54,11 @@
<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 (popravljena pot) -->
<link rel="stylesheet" href="../css/main.css">
<link rel="preload" as="image" href="../images/HeroSection-img1.webp">
</head>
<body>
@@ -216,27 +217,27 @@
<div class="marquee" aria-label="Naši partnerji in podporniki">
<div class="marquee-track">
<div class="marquee-group">
<img src="../images/partners/ambasada-slo.png" alt="Embassy of the Republic of Slovenia in Skopje" loading="lazy">
<img src="../images/partners/nlb.png" alt="NLB Banka" loading="lazy">
<img src="../images/partners/ctk.png" alt="Central Technological Library (CTK), University of Ljubljana" loading="lazy">
<img src="../images/partners/dsmp.png" alt="Association of Slovenian and Macedonian Entrepreneurs (DSMP)" loading="lazy">
<img src="../images/partners/kampus.png" alt="Kampus" loading="lazy">
<img src="../images/partners/povezani.png" alt="Povezani" loading="lazy">
<img src="../images/partners/mzzt-mk-wide.png" alt="Ministrstvo za zunanje zadeve in trgovino Severne Makedonije" loading="lazy">
<img src="../images/partners/kdm-makedonija.png" alt="Makedonsko kulturno društvo Makedonija v Ljubljani" loading="lazy">
<img src="../images/partners/ambasada-mkd.png" alt="Veleposlaništvo Republike Severne Makedonije v Sloveniji" loading="lazy"> <img src="../images/partners/mojster.png" alt="Spletni Mojster" loading="lazy">
<img width="499" height="98" src="../images/partners/ambasada-slo.png" alt="Embassy of the Republic of Slovenia in Skopje" loading="lazy">
<img width="469" height="107" src="../images/partners/nlb.png" alt="NLB Banka" loading="lazy">
<img width="800" height="287" src="../images/partners/ctk.png" alt="Central Technological Library (CTK), University of Ljubljana" loading="lazy">
<img width="411" height="149" src="../images/partners/dsmp.png" alt="Association of Slovenian and Macedonian Entrepreneurs (DSMP)" loading="lazy">
<img width="501" height="156" src="../images/partners/kampus.png" alt="Kampus" loading="lazy">
<img width="327" height="155" src="../images/partners/povezani.png" alt="Povezani" loading="lazy">
<img width="816" height="202" src="../images/partners/mzzt-mk-wide.png" alt="Ministrstvo za zunanje zadeve in trgovino Severne Makedonije" loading="lazy">
<img width="400" height="403" src="../images/partners/kdm-makedonija.png" alt="Makedonsko kulturno društvo Makedonija v Ljubljani" loading="lazy">
<img width="917" height="206" src="../images/partners/ambasada-mkd.png" alt="Veleposlaništvo Republike Severne Makedonije v Sloveniji" loading="lazy"> <img width="534" height="35" src="../images/partners/mojster.png" alt="Spletni Mojster" loading="lazy">
</div>
<div class="marquee-group" aria-hidden="true">
<img src="../images/partners/ambasada-slo.png" alt="" loading="lazy">
<img src="../images/partners/nlb.png" alt="" loading="lazy">
<img src="../images/partners/ctk.png" alt="" loading="lazy">
<img src="../images/partners/dsmp.png" alt="" loading="lazy">
<img src="../images/partners/kampus.png" alt="" loading="lazy">
<img src="../images/partners/povezani.png" alt="" loading="lazy">
<img src="../images/partners/mzzt-mk-wide.png" alt="" loading="lazy">
<img src="../images/partners/kdm-makedonija.png" alt="" loading="lazy">
<img src="../images/partners/ambasada-mkd.png" alt="" loading="lazy"> <img src="../images/partners/mojster.png" alt="" loading="lazy">
<img width="499" height="98" src="../images/partners/ambasada-slo.png" alt="" loading="lazy">
<img width="469" height="107" src="../images/partners/nlb.png" alt="" loading="lazy">
<img width="800" height="287" src="../images/partners/ctk.png" alt="" loading="lazy">
<img width="411" height="149" src="../images/partners/dsmp.png" alt="" loading="lazy">
<img width="501" height="156" src="../images/partners/kampus.png" alt="" loading="lazy">
<img width="327" height="155" src="../images/partners/povezani.png" alt="" loading="lazy">
<img width="816" height="202" src="../images/partners/mzzt-mk-wide.png" alt="" loading="lazy">
<img width="400" height="403" src="../images/partners/kdm-makedonija.png" alt="" loading="lazy">
<img width="917" height="206" src="../images/partners/ambasada-mkd.png" alt="" loading="lazy"> <img width="534" height="35" src="../images/partners/mojster.png" alt="" loading="lazy">
</div>
</div>
@@ -246,7 +247,7 @@
<section class="meet-the-team-section">
<div class="video-container">
<img loading="lazy" decoding="async" src="../images/about_us-timeline-milestones_img0.webp" alt="MSOS team group photo" class="video-thumbnail">
<img width="1920" height="1280" loading="lazy" decoding="async" src="../images/about_us-timeline-milestones_img0.webp" alt="MSOS team group photo" class="video-thumbnail">
<div class="video-overlay"></div>
<button class="play-button" aria-label="Predvajaj video"></button>
</div>
@@ -286,19 +287,19 @@
<div class="activities-panels">
<div class="activity-panel active" role="tabpanel" data-panel="0">
<p>Vemo, da je selitev v novo državo lahko naporna, zato smo tu, da ti jo olajšamo. Od pomoči pri vpisu na fakulteto do znajdenja v študentskem življenju v Sloveniji, vedno se lahko zanešeš na nas. Ponujamo brezplačne konzultacije, odgovarjamo na tvoja vprašanja na Instagramu in Facebooku (ja, tudi pozno zvečer) in prirejamo dogodke, kjer lahko spoznaš druge in iz prve roke slišiš resnične izkušnje. Z mentorstvom, informativnimi srečanji in prijazno skupnostjo ob sebi ti nikoli ne bo treba prehoditi te poti sam.</p>
<div class="activity-panel-media"><img src="../images/img1-08.09.2025.webp" alt="Študenti prejemajo podporo in usmeritve" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img1-08.09.2025.webp" alt="Študenti prejemajo podporo in usmeritve" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="1" hidden>
<p>Študentsko življenje je veliko več kot predavanja in izpiti, gre za trenutke vmes. V MSOS ustvarjamo prav te trenutke: od zabav, koncertov in sproščenih druženj do kino večerov, izletov in team-building potovanj. Prirejamo tudi pogovore in dogodke, kjer lahko deliš ideje, spoznaš nove ljudi in se počutiš del nečesa večjega. Ne glede na to, ali se povezuješ z makedonskimi študenti ali sklepaš prijateljstva s Slovenci in tujci, so naše aktivnosti namenjene gradnji skupnosti, kjer se lahko sprostiš, zabavaš in ustvarjaš spomine, ki trajajo še dolgo po fakulteti.</p>
<div class="activity-panel-media"><img src="../images/img2-08.09.2025.webp" alt="Študenti se družijo in zabavajo na dogodku" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img2-08.09.2025.webp" alt="Študenti se družijo in zabavajo na dogodku" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="2" hidden>
<p>Študij v tujini ni le predavanja in izpiti, je tudi osebna rast. Zato združujemo učenje s kulturo. Organiziramo študijske skupine in manjše delavnice, kjer lahko deliš znanje in pridobiš nove veščine. Hkrati ohranjamo naše tradicije žive s kulturnimi večeri, glasbo, hrano in srečanji, ki nas spominjajo na dom. Gre za ravnovesje: podpora pri študiju in prostor, da ostaneš povezan s tem, kar smo.</p>
<div class="activity-panel-media"><img src="../images/img3-08.09.2025.webp" alt="Izobraževalna delavnica in kulturno srečanje" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img3-08.09.2025.webp" alt="Izobraževalna delavnica in kulturno srečanje" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="3" hidden>
<p>Študij v tujini prinaša izzive in včasih študenti potrebujejo glas, ki se sliši. V MSOS to vlogo jemljemo resno. Organiziramo srečanja s predstavniki oblasti, ministrstvi, veleposlaništvi, univerzami in drugimi ključnimi institucijami, da poskrbimo, da so interesi makedonskih študentov v Sloveniji na mizi. Od vprašanj na kampusu do akademskih politik in integracije si prizadevamo reševati težave, spodbujati pozitivne spremembe in ustvariti boljšo izkušnjo za vse nas.</p>
<div class="activity-panel-media"><img src="../images/img4-08.09.2025.webp" alt="Člani MSOS zastopajo študente na uradnem srečanju" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img4-08.09.2025.webp" alt="Člani MSOS zastopajo študente na uradnem srečanju" loading="lazy"></div>
</div>
</div>
</div>
@@ -312,7 +313,7 @@
<div class="news-articles">
<article class="news-card" data-type="news">
<a class="news-card-media" href="../si/news/proof-of-means-updated-2026/">
<img src="../images/news-proof-of-means.webp" alt="Znesek dokazila o sredstvih posodobljen na 507,43 € na mesec" loading="lazy">
<img width="1600" height="1067" src="../images/news-proof-of-means.webp" alt="Znesek dokazila o sredstvih posodobljen na 507,43 € na mesec" loading="lazy">
<span class="news-badge news-badge--news"><i class="fas fa-bullhorn" aria-hidden="true"></i> Novica</span>
</a>
<div class="card-content">
@@ -355,7 +356,7 @@
<h3>Kako nas sodelovanje izboljša</h3>
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
<div class="author-info">
<img loading="lazy" decoding="async" src="../images/7-graphicdesigner.webp" alt="Aleksandar Popovski">
<img width="640" height="640" loading="lazy" decoding="async" src="../images/7-graphicdesigner.webp" alt="Aleksandar Popovski">
<div>
<h4>Aleksandar Popovski</h4>
<p>Grafični oblikovalec pri MSOS</p>
@@ -366,7 +367,7 @@
<h3>Consectetur vitae ac parturient massa</h3>
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra.</p>
<div class="author-info">
<img loading="lazy" decoding="async" src="../images/11-boy.webp" alt="Drug član ekipe">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/11-boy.webp" alt="Drug član ekipe">
<div>
<h4>Aleksandar Popovski</h4>
<p>Grafični oblikovalec pri MSOS</p>
@@ -379,7 +380,7 @@
<h3>Ponosni partnerji</h3>
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
<div class="author-info">
<img loading="lazy" decoding="async" src="../images/12-girl2.webp" alt="Drug partner">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/12-girl2.webp" alt="Drug partner">
<div>
<h4>Aleksandar Popovski</h4>
<p>Grafični oblikovalec pri MSOS</p>
@@ -390,7 +391,7 @@
<h3>Naša izkušnja sodelovanja</h3>
<p>Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra. Dignissim senectus ut senectus curabitur condimentum gravida cras nibh ac. Lorem scelerisque tortor rhoncus viverra pharetra feugiat.</p>
<div class="author-info">
<img loading="lazy" decoding="async" src="../images/10-girl1.webp" alt="Druga članica ekipe">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/10-girl1.webp" alt="Druga članica ekipe">
<div>
<h4>Aleksandar Popovski</h4>
<p>Grafični oblikovalec pri MSOS</p>
@@ -412,9 +413,9 @@
</div>
</div>
<div class="join-cta-collage">
<div class="join-cta-photo join-cta-photo--1"><img src="../images/event4-img-1.webp" alt="Spoznaj Študentsko Slovenijo 2024" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--2"><img src="../images/msnl-1.webp" alt="Makedonski študentski večer v Ljubljani" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--3"><img src="../images/handball-2025-1.webp" alt="Navijanje za Makedonijo, skupno gledanje rokometa v Sloveniji" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--1"><img width="1920" height="1280" src="../images/event4-img-1.webp" alt="Spoznaj Študentsko Slovenijo 2024" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--2"><img width="1430" height="757" src="../images/msnl-1.webp" alt="Makedonski študentski večer v Ljubljani" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--3"><img width="720" height="480" src="../images/handball-2025-1.webp" alt="Navijanje za Makedonijo, skupno gledanje rokometa v Sloveniji" loading="lazy"></div>
</div>
</section>
@@ -457,9 +458,9 @@
</div>
<div class="faq-footer">
<div class="avatar-group">
<img loading="lazy" decoding="async" src="../images/11-boy.webp" alt="Avatar 1" class="avatar">
<img loading="lazy" decoding="async" src="../images/10-girl1.webp" alt="Avatar 2" class="avatar large">
<img loading="lazy" decoding="async" src="../images/12-girl2.webp" alt="Avatar 3" class="avatar">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/11-boy.webp" alt="Avatar 1" class="avatar">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/10-girl1.webp" alt="Avatar 2" class="avatar large">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/12-girl2.webp" alt="Avatar 3" class="avatar">
</div>
<h3>Imate še vprašanja?</h3>
<p>Ne najdete odgovora, ki ga iščete? Prosimo, poklepetajte z našo prijazno ekipo.</p>