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/get-to-know-macedonia/index.html
+8 -8
View File
@@ -54,7 +54,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>
<!-- Link to the main CSS file -->
<link rel="stylesheet" href="../../css/main.css">
@@ -197,7 +197,7 @@
<h1>Get to know Macedonia</h1>
<p class="page-description">Macedonia is not only a place on the map. It is a table that always has room for one more person, music that brings everyone closer, mountains on the horizon, and conversations that continue long after the coffee is finished. These are the places, traditions, tastes, and stories we carry with us and want to share with you.</p>
<form class="subscribe-form">
<input type="email" placeholder="Enter your email">
<input type="email" placeholder="Enter your email" aria-label="Email address">
<button type="submit" class="btn btn-primary-orange">Subscribe</button>
</form>
<p class="privacy-note">We care about your data in our <a href="../../en/privacy-policy/">privacy policy</a></p>
@@ -222,7 +222,7 @@
<!-- Story: Welcome to Macedonia -->
<article class="post-card" data-category="identity">
<a href="welcome-to-macedonia/" class="post-link">
<img loading="lazy" decoding="async" src="../../images/macedonia-welcome-skopje-square-hero.webp" alt="Macedonia Square in central Skopje" class="post-image">
<img width="810" height="540" loading="lazy" decoding="async" src="../../images/macedonia-welcome-skopje-square-hero.webp" alt="Macedonia Square in central Skopje" class="post-image">
<div class="post-content">
<p class="post-meta">MSOS Team • People &amp; Identity</p>
<h3 class="post-title">Welcome to Macedonia</h3>
@@ -233,7 +233,7 @@
<!-- Story: Ohrid, More Than a Postcard -->
<article class="post-card" data-category="places">
<a href="ohrid-more-than-a-postcard/" class="post-link">
<img loading="lazy" decoding="async" src="../../images/macedonia-ohrid-kaneo-hero.webp" alt="The Church of St. John at Kaneo above Lake Ohrid" class="post-image">
<img width="750" height="500" loading="lazy" decoding="async" src="../../images/macedonia-ohrid-kaneo-hero.webp" alt="The Church of St. John at Kaneo above Lake Ohrid" class="post-image">
<div class="post-content">
<p class="post-meta">MSOS Team • Places &amp; Nature</p>
<h3 class="post-title">Ohrid, More Than a Postcard</h3>
@@ -244,7 +244,7 @@
<!-- Story: Skopje, A City of Many Layers -->
<article class="post-card" data-category="places">
<a href="skopje-a-city-of-many-layers/" class="post-link">
<img loading="lazy" decoding="async" src="../../images/macedonia-skopje-stone-bridge-hero.webp" alt="The Stone Bridge over the Vardar in Skopje" class="post-image">
<img width="810" height="540" loading="lazy" decoding="async" src="../../images/macedonia-skopje-stone-bridge-hero.webp" alt="The Stone Bridge over the Vardar in Skopje" class="post-image">
<div class="post-content">
<p class="post-meta">MSOS Team • Places &amp; Nature</p>
<h3 class="post-title">Skopje, A City of Many Layers</h3>
@@ -255,7 +255,7 @@
<!-- Story: A Table Full of Macedonia -->
<article class="post-card" data-category="food">
<a href="a-table-full-of-macedonia/" class="post-link">
<img loading="lazy" decoding="async" src="../../images/macedonia-food-shared-table-hero.webp" alt="A shared Macedonian table with salads, bread, beans, and other dishes" class="post-image">
<img width="1209" height="806" loading="lazy" decoding="async" src="../../images/macedonia-food-shared-table-hero.webp" alt="A shared Macedonian table with salads, bread, beans, and other dishes" class="post-image">
<div class="post-content">
<p class="post-meta">MSOS Team • Food &amp; Flavours</p>
<h3 class="post-title">A Table Full of Macedonia</h3>
@@ -266,7 +266,7 @@
<!-- Story: Music, Dance and the Moments That Bring Us Together -->
<article class="post-card" data-category="culture">
<a href="music-dance-and-the-moments-that-bring-us-together/" class="post-link">
<img loading="lazy" decoding="async" src="../../images/macedonia-culture-oro-celebration-hero.webp" alt="Several generations joining the same oro at a Macedonian celebration" class="post-image">
<img width="1400" height="933" loading="lazy" decoding="async" src="../../images/macedonia-culture-oro-celebration-hero.webp" alt="Several generations joining the same oro at a Macedonian celebration" class="post-image">
<div class="post-content">
<p class="post-meta">MSOS Team • Culture &amp; Traditions</p>
<h3 class="post-title">Music, Dance and the Moments That Bring Us Together</h3>
@@ -277,7 +277,7 @@
<!-- Story: History You Can Still Walk Through -->
<article class="post-card" data-category="heritage">
<a href="history-you-can-still-walk-through/" class="post-link">
<img loading="lazy" decoding="async" src="../../images/macedonia-heritage-stobi-street-hero.webp" alt="An ancient street and building remains at the archaeological site of Stobi" class="post-image">
<img width="1050" height="700" loading="lazy" decoding="async" src="../../images/macedonia-heritage-stobi-street-hero.webp" alt="An ancient street and building remains at the archaeological site of Stobi" class="post-image">
<div class="post-content">
<p class="post-meta">MSOS Team • History &amp; Heritage</p>
<h3 class="post-title">History You Can Still Walk Through</h3>