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>
<!-- Correct path to the main CSS file -->
<link rel="stylesheet" href="../../../css/main.css">
@@ -201,14 +201,14 @@
</header>
<figure class="article-main-image">
<img fetchpriority="high" src="../../../images/maribor-tournament-1.webp" alt="The MSOS Maribor team at the humanitarian sports tournament">
<img width="720" height="480" fetchpriority="high" src="../../../images/maribor-tournament-1.webp" alt="The MSOS Maribor team at the humanitarian sports tournament">
</figure>
<div class="article-body">
<p>On April 5, 2025, MSOS Maribor organized the first humanitarian sports tournament in the history of our organization. The idea came naturally. After the tragic events in Kočani, many of us felt powerless, but we also knew we had to do something. As students, maybe we could not solve everything, but we could do what we do best: bring people together. Sports became the perfect way to channel our emotions and energy into solidarity.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-2.webp" alt="A snapshot of the MSOS Maribor team.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-2.webp" alt="A snapshot of the MSOS Maribor team.">
<figcaption>A snapshot of the MSOS Maribor team.</figcaption>
</figure>
@@ -217,14 +217,14 @@
<p>The event took place at the Leon Štukelj Sports Hall, which came alive with cheering, laughter, and the sound of basketballs and futsal balls bouncing across the courts. From the very beginning, you could feel that this was not just about competition. It was about community.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-3.webp" alt="Teams lined up and ready for the start of the tournament.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-3.webp" alt="Teams lined up and ready for the start of the tournament.">
<figcaption>Teams lined up and ready for the start of the tournament.</figcaption>
</figure>
<p>We welcomed 12 basketball teams and 4 futsal teams, made up not only of Macedonian students but also of friends from Serbia, Bosnia and Herzegovina, and Spain. That mix of cultures and languages created a special vibe, proof that solidarity does not stop at national borders. Teams supported each other, rivalries ended in handshakes, and every goal or basket felt like a small victory for the cause we were all there for.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-4.webp" alt="Students giving their all on the futsal court, turning competition into energy, laughter, and unforgettable moments.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-4.webp" alt="Students giving their all on the futsal court, turning competition into energy, laughter, and unforgettable moments.">
<figcaption>Students giving their all on the futsal court, turning competition into energy, laughter, and unforgettable moments.</figcaption>
</figure>
@@ -235,12 +235,12 @@
<p>At the end of the tournament, symbolic prizes were awarded to the winners. They were not just trophies. They were a way to honor everyone who gave their time and energy to be part of the event.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-5.webp" alt="When victory means more than a game, lifted high by the team.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-5.webp" alt="When victory means more than a game, lifted high by the team.">
<figcaption>When victory means more than a game, lifted high by the team.</figcaption>
</figure>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-6.webp" alt="Warming up before the basketball games, both men’s and women’s teams getting ready for action.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-6.webp" alt="Warming up before the basketball games, both men’s and women’s teams getting ready for action.">
<figcaption>Warming up before the basketball games, both men’s and women’s teams getting ready for action.</figcaption>
</figure>
@@ -249,7 +249,7 @@
<p>The most important result was not on the scoreboard but in the donations box. Together, we raised €1.010, which was split between two Macedonian families whose children were undergoing treatment in Slovenia. It was not just money. It was a message that they were not alone, that the student community stood with them during the hardest of times.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-7.webp" alt="High-fives, trophies, and smiles, celebrating victory on and off the court.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-7.webp" alt="High-fives, trophies, and smiles, celebrating victory on and off the court.">
<figcaption>High-fives, trophies, and smiles, celebrating victory on and off the court.</figcaption>
</figure>
@@ -260,7 +260,7 @@
<p>And maybe most importantly, this was just the beginning. With "Playing with Heart, Together for Kočani", we did not only create a successful humanitarian action. We set the foundation for a tradition that will continue to remind us that together, we can make a difference.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-8.webp" alt="A memorable moment with the organizing team and the victorious basketball and futsal squads.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-8.webp" alt="A memorable moment with the organizing team and the victorious basketball and futsal squads.">
<figcaption>A memorable moment with the organizing team and the victorious basketball and futsal squads.</figcaption>
</figure>
@@ -269,14 +269,14 @@
<p>The tournament would not have been possible without the support of our partners and community. We are grateful to the University of Maribor for providing the entire Leon Štukelj Sports Hall free of charge, to Macedonia Trade for taking care of the refreshments and gifts for the winning teams, and to Radenska for supplying water for all participants.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-9.webp" alt="Thanks to Macedonia Trade and Radenska for supporting the tournament with drinks and refreshments for the players.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-9.webp" alt="Thanks to Macedonia Trade and Radenska for supporting the tournament with drinks and refreshments for the players.">
<figcaption>Thanks to Macedonia Trade and Radenska for supporting the tournament with drinks and refreshments for the players.</figcaption>
</figure>
<p>A huge thank you also goes to our MSOS Maribor team and volunteers, who worked tirelessly to make this event a reality. And of course, to all the students who showed up not only as players but also as fans, supporters, and friends. Their cheering, laughter, and energy filled the hall and transformed the tournament into more than a competition. It became a moment of unity, solidarity, and joy that none of us will forget.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/maribor-tournament-10.webp" alt="The MSOS Maribor team celebrating together after a successful tournament.">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-10.webp" alt="The MSOS Maribor team celebrating together after a successful tournament.">
<figcaption>The MSOS Maribor team celebrating together after a successful tournament.</figcaption>
</figure>
</div>
@@ -284,16 +284,16 @@
<section class="event-gallery">
<h2 class="event-gallery-title">Photos from the event</h2>
<div class="event-gallery-grid js-lightbox">
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-1.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-1.webp" alt="Humanitarian Tournament in Maribor, photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-2.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-2.webp" alt="Humanitarian Tournament in Maribor, photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-3.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-3.webp" alt="Humanitarian Tournament in Maribor, photo 3"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-4.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-4.webp" alt="Humanitarian Tournament in Maribor, photo 4"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-5.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-5.webp" alt="Humanitarian Tournament in Maribor, photo 5"><span class="eg-more">+5</span></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-6.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-6.webp" alt="Humanitarian Tournament in Maribor, photo 6"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-7.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-7.webp" alt="Humanitarian Tournament in Maribor, photo 7"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-8.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-8.webp" alt="Humanitarian Tournament in Maribor, photo 8"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-9.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-9.webp" alt="Humanitarian Tournament in Maribor, photo 9"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-10.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../../images/maribor-tournament-10.webp" alt="Humanitarian Tournament in Maribor, photo 10"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-1.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-1.webp" alt="Humanitarian Tournament in Maribor, photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-2.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-2.webp" alt="Humanitarian Tournament in Maribor, photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-3.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-3.webp" alt="Humanitarian Tournament in Maribor, photo 3"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-4.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-4.webp" alt="Humanitarian Tournament in Maribor, photo 4"></button>
<button type="button" class="eg-thumb" data-full="../../../images/maribor-tournament-5.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-5.webp" alt="Humanitarian Tournament in Maribor, photo 5"><span class="eg-more">+5</span></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-6.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-6.webp" alt="Humanitarian Tournament in Maribor, photo 6"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-7.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-7.webp" alt="Humanitarian Tournament in Maribor, photo 7"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-8.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-8.webp" alt="Humanitarian Tournament in Maribor, photo 8"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-9.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-9.webp" alt="Humanitarian Tournament in Maribor, photo 9"></button>
<button type="button" class="eg-thumb is-hidden" data-full="../../../images/maribor-tournament-10.webp" data-caption="Humanitarian Tournament in Maribor"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/maribor-tournament-10.webp" alt="Humanitarian Tournament in Maribor, photo 10"></button>
</div>
</section>
</article>
@@ -304,7 +304,7 @@
<p>News, announcements and open calls, straight to your inbox.</p>
<form class="subscribe-form-bottom">
<div class="input-wrapper">
<input type="email" placeholder="Enter your email">
<input type="email" placeholder="Enter your email" aria-label="Email address">
</div>
<button type="submit" class="btn btn-primary-orange">Subscribe</button>
</form>