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>
<!-- Поврзување до главната CSS-датотека (поправена патека) -->
<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="Наши партнери и поддржувачи">
<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="Министерство за надворешни работи и трговија на Северна Македонија" 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="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="Министерство за надворешни работи и трговија на Северна Македонија" 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="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="Пушти видео"></button>
</div>
@@ -286,19 +287,19 @@
<div class="activities-panels">
<div class="activity-panel active" role="tabpanel" data-panel="0">
<p>Знаеме дека преселбата во нова земја може да делува преоптоварувачки, затоа сме тука да ти ја олесниме. Од помош при уписите на факултет до снаоѓање во студентскиот живот во Словенија, секогаш можеш да сметаш на нас. Нудиме бесплатни консултации, одговараме на твоите прашања на Инстаграм и Фејсбук (да, дури и доцна навечер) и организираме настани каде што можеш да запознаеш други и да чуеш вистински искуства од прва рака. Со менторство, инфо-сесии и пријателска заедница покрај тебе, никогаш нема да мораш да го поминеш патот сам.</p>
<div class="activity-panel-media"><img src="../images/img1-08.09.2025.webp" alt="Студенти добиваат поддршка и насоки" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img1-08.09.2025.webp" alt="Студенти добиваат поддршка и насоки" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="1" hidden>
<p>Студентскиот живот е многу повеќе од предавања и испити, станува збор за моментите помеѓу. Во МСОС ги создаваме тие моменти: од забави, концерти и опуштени дружби, до киновечери, излети и тимбилдинг патувања. Организираме и разговори и настани каде што можеш да споделиш идеи, да запознаеш нови луѓе и да се почувствуваш дел од нешто поголемо. Без разлика дали се поврзуваш со македонски студенти или стекнуваш пријатели меѓу Словенците и странците, нашите активности се насочени кон градење заедница каде што можеш да се опуштиш, да се забавуваш и да создаваш спомени што траат долго по факултетот.</p>
<div class="activity-panel-media"><img src="../images/img2-08.09.2025.webp" alt="Студенти се дружат и забавуваат на настан" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img2-08.09.2025.webp" alt="Студенти се дружат и забавуваат на настан" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="2" hidden>
<p>Студирањето во странство не е само предавања и испити, тоа е и растење како личност. Затоа го спојуваме учењето со културата. Организираме студиски групи и мали работилници каде што можеш да споделиш знаење и да усвоиш нови вештини. Во исто време, ги негуваме нашите традиции преку културни вечери, музика, храна и собири што не потсетуваат на дома. Тоа е рамнотежа: поддршка за твоите студии и простор да останеш поврзан со тоа што сме.</p>
<div class="activity-panel-media"><img src="../images/img3-08.09.2025.webp" alt="Образовна работилница и културен собир" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img3-08.09.2025.webp" alt="Образовна работилница и културен собир" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="3" hidden>
<p>Студирањето во странство носи предизвици, а понекогаш на студентите им треба глас што се слуша. Во МСОС сериозно ја сфаќаме таа улога. Организираме состаноци со претставници на власта, министерства, амбасади, универзитети и други клучни институции за да се осигураме дека интересите на македонските студенти во Словенија се на маса. Од прашања на кампусот до академски политики и интеграција, работиме на решавање проблеми, залагање за позитивни промени и создавање подобро искуство за сите нас.</p>
<div class="activity-panel-media"><img src="../images/img4-08.09.2025.webp" alt="Членови на МСОС ги претставуваат студентите на состанок" loading="lazy"></div>
<div class="activity-panel-media"><img width="820" height="400" src="../images/img4-08.09.2025.webp" alt="Членови на МСОС ги претставуваат студентите на состанок" 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="../mk/news/proof-of-means-updated-2026/">
<img src="../images/news-proof-of-means.webp" alt="Износот за доказ за средства ажуриран на 507,43 € месечно" loading="lazy">
<img width="1600" height="1067" src="../images/news-proof-of-means.webp" alt="Износот за доказ за средства ажуриран на 507,43 € месечно" loading="lazy">
<span class="news-badge news-badge--news"><i class="fas fa-bullhorn" aria-hidden="true"></i> Вест</span>
</a>
<div class="card-content">
@@ -355,7 +356,7 @@
<h3>Како соработката нè прави подобри</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="Александар Поповски">
<img width="640" height="640" loading="lazy" decoding="async" src="../images/7-graphicdesigner.webp" alt="Александар Поповски">
<div>
<h4>Александар Поповски</h4>
<p>Графички дизајнер во МСОС</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="Друг член на тимот">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/11-boy.webp" alt="Друг член на тимот">
<div>
<h4>Александар Поповски</h4>
<p>Графички дизајнер во МСОС</p>
@@ -379,7 +380,7 @@
<h3>Горди партнери</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="Друг партнер">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/12-girl2.webp" alt="Друг партнер">
<div>
<h4>Александра Поповска</h4>
<p>Графички дизајнер во МСОС</p>
@@ -390,7 +391,7 @@
<h3>Нашето искуство со соработката</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="Друг член на тимот">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/10-girl1.webp" alt="Друг член на тимот">
<div>
<h4>Ана Поповска</h4>
<p>Графички дизајнер во МСОС</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="Запознај Студентска Словенија 2024" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--2"><img src="../images/msnl-1.webp" alt="Македонска студентска вечер во Љубљана" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--3"><img src="../images/handball-2025-1.webp" alt="Навивање за Македонија, гледање ракомет заедно во Словенија" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--1"><img width="1920" height="1280" src="../images/event4-img-1.webp" alt="Запознај Студентска Словенија 2024" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--2"><img width="1430" height="757" src="../images/msnl-1.webp" alt="Македонска студентска вечер во Љубљана" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--3"><img width="720" height="480" src="../images/handball-2025-1.webp" alt="Навивање за Македонија, гледање ракомет заедно во Словенија" 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="Аватар 1" class="avatar">
<img loading="lazy" decoding="async" src="../images/10-girl1.webp" alt="Аватар 2" class="avatar large">
<img loading="lazy" decoding="async" src="../images/12-girl2.webp" alt="Аватар 3" class="avatar">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/11-boy.webp" alt="Аватар 1" class="avatar">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/10-girl1.webp" alt="Аватар 2" class="avatar large">
<img width="1280" height="1920" loading="lazy" decoding="async" src="../images/12-girl2.webp" alt="Аватар 3" class="avatar">
</div>
<h3>Сè уште имате прашања?</h3>
<p>Не можете да го најдете одговорот што го барате? Ве молиме разговарајте со нашиот пријателски тим.</p>