mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

health: fix broken pages, add image dimensions, a11y & SEO wins

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

en/index.html
+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>
<!-- Link to the main CSS file (corrected path) -->
<link rel="stylesheet" href="../css/main.css">
<link rel="preload" as="image" href="../images/HeroSection-img1.webp">
</head>
<body>
@@ -213,27 +214,27 @@
<div class="marquee" aria-label="Our partners and supporters">
<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="Ministry of Foreign Affairs and Trade of North Macedonia" loading="lazy">
<img src="../images/partners/kdm-makedonija.png" alt="Macedonian Cultural Association Macedonia in Ljubljana" loading="lazy">
<img src="../images/partners/ambasada-mkd.png" alt="Embassy of the Republic of North Macedonia in Slovenia" 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="Ministry of Foreign Affairs and Trade of North Macedonia" loading="lazy">
<img width="400" height="403" src="../images/partners/kdm-makedonija.png" alt="Macedonian Cultural Association Macedonia in Ljubljana" loading="lazy">
<img width="917" height="206" src="../images/partners/ambasada-mkd.png" alt="Embassy of the Republic of North Macedonia in Slovenia" 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>
@@ -243,7 +244,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="Play video"></button>
</div>
@@ -283,19 +284,19 @@
<div class="activities-panels">
<div class="activity-panel active" role="tabpanel" data-panel="0">
<p>We know moving to a new country can feel overwhelming, so we’re here to make it easier. From helping you with university applications to finding your way around student life in Slovenia, you can always count on us. We offer free consultations, answer your questions on Instagram and Facebook (yes, even late at night), and host events where you can meet others and hear real experiences first-hand. With mentorship, info sessions, and a friendly community by your side, you’ll never have to go through the journey alone.</p>
<div class="activity-panel-media"><img src="../images/img1-08.09.2025.webp" alt="Students receiving support and guidance" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img1-08.09.2025.webp" alt="Students receiving support and guidance" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="1" hidden>
<p>Student life is so much more than lectures and exams, it’s about the moments in between. At MSOS, we create those moments: from parties, concerts, and casual hangouts, to cinema nights, excursions, and team-building trips. We also host talks and events where you can share ideas, meet new people, and feel part of something bigger. Whether you’re connecting with Macedonian students or making friends with Slovenians and internationals, our activities are all about building a community where you can relax, have fun, and create memories that last long after university.</p>
<div class="activity-panel-media"><img src="../images/img2-08.09.2025.webp" alt="Students socialising and having fun at an event" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img2-08.09.2025.webp" alt="Students socialising and having fun at an event" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="2" hidden>
<p>Studying abroad isn’t only about lectures and exams, it’s also about growing as a person. That’s why we mix learning with culture. We run study groups and small workshops where you can share knowledge and pick up new skills. At the same time, we keep our traditions alive with cultural evenings, music, food, and gatherings that remind us of home. It’s a balance: support for your studies, and a space to stay connected to who we are.</p>
<div class="activity-panel-media"><img src="../images/img3-08.09.2025.webp" alt="An educational workshop and cultural gathering" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img3-08.09.2025.webp" alt="An educational workshop and cultural gathering" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="3" hidden>
<p>Studying abroad comes with challenges, and sometimes students need a voice that’s heard. At MSOS, we take that role seriously. We organise meetings with government representatives, ministries, embassies, universities, and other key institutions to make sure the interests of Macedonian students in Slovenia are on the table. From campus issues to academic policies and integration, we work to solve problems, push for positive changes, and create a better experience for all of us.</p>
<div class="activity-panel-media"><img src="../images/img4-08.09.2025.webp" alt="MSOS members representing students at a formal meeting" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img4-08.09.2025.webp" alt="MSOS members representing students at a formal meeting" loading="lazy"></div>
</div>
</div>
</div>
@@ -309,7 +310,7 @@
<div class="news-articles">
<article class="news-card" data-type="news">
<a class="news-card-media" href="../en/news/proof-of-means-updated-2026/">
<img src="../images/news-proof-of-means.webp" alt="Proof-of-means amount updated to €507,43 per month" loading="lazy">
<img width="1600" height="1067" src="../images/news-proof-of-means.webp" alt="Proof-of-means amount updated to €507,43 per month" loading="lazy">
<span class="news-badge news-badge--news"><i class="fas fa-bullhorn" aria-hidden="true"></i> News</span>
</a>
<div class="card-content">
@@ -352,7 +353,7 @@
<h3>How collaboration makes us better</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>Graphic designer at MSOS</p>
@@ -363,7 +364,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="Another team member">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/11-boy.webp" alt="Another team member">
<div>
<h4>Aleksandar Popovski</h4>
<p>Graphic designer at MSOS</p>
@@ -376,7 +377,7 @@
<h3>Proud partners</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="Another partner">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/12-girl2.webp" alt="Another partner">
<div>
<h4>Aleksandar Popovski</h4>
<p>Graphic designer at MSOS</p>
@@ -387,7 +388,7 @@
<h3>Our collaboration experience</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="Another team member">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/10-girl1.webp" alt="Another team member">
<div>
<h4>Aleksandar Popovski</h4>
<p>Graphic designer at MSOS</p>
@@ -409,9 +410,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="Meet Student Slovenia 2024" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--2"><img src="../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--3"><img src="../images/handball-2025-1.webp" alt="Cheering for Macedonia, watching handball together in Slovenia" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--1"><img width="1920" height="1280" src="../images/event4-img-1.webp" alt="Meet Student Slovenia 2024" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--2"><img width="1430" height="757" src="../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--3"><img width="720" height="480" src="../images/handball-2025-1.webp" alt="Cheering for Macedonia, watching handball together in Slovenia" loading="lazy"></div>
</div>
</section>
@@ -454,9 +455,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>Still have questions?</h3>
<p>Can’t find the answer you’re looking for? Please chat to our friendly team.</p>