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>
<!-- Правилна патека до главната CSS-датотека -->
<link rel="stylesheet" href="../../../css/main.css">
@@ -201,14 +201,14 @@
</header>
<figure class="article-main-image">
<img fetchpriority="high" src="../../../images/frosina-1.webp" alt="Свеќи и цвеќе во спомен на Фросина Кулакова">
<img width="720" height="480" fetchpriority="high" src="../../../images/frosina-1.webp" alt="Свеќи и цвеќе во спомен на Фросина Кулакова">
</figure>
<div class="article-body">
<p>Веста за трагичната смрт на Фросина на 29 јануари 2025 година длабоко ги потресе студентите низ Словенија. И покрај тоа што сме далеку од дома, болката беше споделена, а потребата да се собереме заедно беше јасна. Од ова чувство се роди иницијативата да се организира мирен јавен собир во Љубљана, каде младите можеа да се обединат, да запалат свеќи, да остават цвеќе и да посветат момент на тишина во нејзин спомен.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/frosina-2.webp" alt="Студенти палат свеќи во спомен на Фросина">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/frosina-2.webp" alt="Студенти палат свеќи во спомен на Фросина">
</figure>
<h2>Порака на единство</h2>
@@ -218,7 +218,7 @@
<p>Стоејќи рамо до рамо во моменти како овие, учиме дека нашата сила не лежи само во нашите студии и амбиции, туку и во нашата способност да се поддржуваме еден со друг кога тоа најмногу значи.</p>
<figure class="article-inline-image">
<img loading="lazy" decoding="async" src="../../../images/frosina-3.webp" alt="Цвеќе и свеќи оставени во спомен">
<img width="720" height="480" loading="lazy" decoding="async" src="../../../images/frosina-3.webp" alt="Цвеќе и свеќи оставени во спомен">
</figure>
<h2>Завршни мисли</h2>
@@ -233,9 +233,9 @@
<section class="event-gallery">
<h2 class="event-gallery-title">Фотографии од настанот</h2>
<div class="event-gallery-grid js-lightbox">
<button type="button" class="eg-thumb" data-full="../../../images/frosina-1.webp" data-caption="Во спомен на Фросина Кулакова"><img loading="lazy" decoding="async" src="../../../images/frosina-1.webp" alt="Во спомен на Фросина Кулакова, photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/frosina-2.webp" data-caption="Во спомен на Фросина Кулакова"><img loading="lazy" decoding="async" src="../../../images/frosina-2.webp" alt="Во спомен на Фросина Кулакова, photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/frosina-3.webp" data-caption="Во спомен на Фросина Кулакова"><img loading="lazy" decoding="async" src="../../../images/frosina-3.webp" alt="Во спомен на Фросина Кулакова, photo 3"></button>
<button type="button" class="eg-thumb" data-full="../../../images/frosina-1.webp" data-caption="Во спомен на Фросина Кулакова"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/frosina-1.webp" alt="Во спомен на Фросина Кулакова, photo 1"></button>
<button type="button" class="eg-thumb" data-full="../../../images/frosina-2.webp" data-caption="Во спомен на Фросина Кулакова"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/frosina-2.webp" alt="Во спомен на Фросина Кулакова, photo 2"></button>
<button type="button" class="eg-thumb" data-full="../../../images/frosina-3.webp" data-caption="Во спомен на Фросина Кулакова"><img width="720" height="480" loading="lazy" decoding="async" src="../../../images/frosina-3.webp" alt="Во спомен на Фросина Кулакова, photo 3"></button>
</div>
</section>
</article>
@@ -246,7 +246,7 @@
<p>Вести, соопштенија и отворени повици, директно во вашето сандаче.</p>
<form class="subscribe-form-bottom">
<div class="input-wrapper">
<input type="email" placeholder="Внесете ја вашата е-пошта">
<input type="email" placeholder="Внесете ја вашата е-пошта" aria-label="Е-пошта">
</div>
<button type="submit" class="btn btn-primary-orange">Претплати се</button>
</form>