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>
2026-08-04 00:31:27 +02:00
1 parent 168e4ce378
commit 9ce7450aa1
@@ -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>

    <!-- Link to the main CSS file -->
    <link rel="stylesheet" href="../../../css/main.css">
@@ -201,7 +201,7 @@
            </header>

            <figure class="article-main-image">
-                <img fetchpriority="high" src="../../../images/event4-image1.webp" alt="Студенти уживаат во кафе и бурек пред ЦТК.">
+                <img width="1920" height="1280" fetchpriority="high" src="../../../images/event4-image1.webp" alt="Студенти уживаат во кафе и бурек пред ЦТК.">
            </figure>

            <div class="article-body">
@@ -211,19 +211,19 @@
                <p>Испитната сесија секогаш носи стрес, часови и часови учење, разговори што се вртат само околу испити, први и втори рокови, положени или не, некои за прв пат, а некои и по петти пат. Затоа решивме да направиме мала пауза за воздишка: да се опуштиме, да се насмееме и да се потсетиме дека сме тука заедно во овој студиски стрес.</p>

                <figure class="article-inline-image">
-                    <img loading="lazy" decoding="async" src="../../../images/event4-image2.webp" alt="Студенти чекаат во ред пред библиотеката ЦТК.">
+                    <img width="1425" height="950" loading="lazy" decoding="async" src="../../../images/event4-image2.webp" alt="Студенти чекаат во ред пред библиотеката ЦТК.">
                    <figcaption>Стотина студенти во ред пред ЦТК, чекаат уште пред отворање за да фатат место во библиотеката.</figcaption>
                </figure>
                
                <p>Со шолја топло кафе во рака, а благодарение на <strong>Бурек Олимпија</strong> уживавме во вкусен бурек со месо и сирење. Се потрудивме и да внесеме малку забава, ги поканивме студентите да донесат свои чашки, а за најкреативните имаше награда.</p>
                
                <figure class="article-inline-image">
-                    <img loading="lazy" decoding="async" src="../../../images/event4-image3.webp" alt="Студент се смее додека јаде бурек.">
+                    <img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event4-image3.webp" alt="Студент се смее додека јаде бурек.">
                    <figcaption>Бесплатен топол бурек, тајната формула за решавање и на најтешките математички проблеми 😉</figcaption>
                </figure>

                <figure class="article-inline-image">
-                    <img loading="lazy" decoding="async" src="../../../images/event4-image4.webp" alt="Група студенти со топло кафе позираат пред ЦТК.">
+                    <img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event4-image4.webp" alt="Група студенти со топло кафе позираат пред ЦТК.">
                    <figcaption>Група студенти со топло кафе, насмеани пред ЦТК.</figcaption>
                </figure>

@@ -232,7 +232,7 @@
                <p>Реакциите беа моментални, студентите се нафрлија да пишуваат, а одговорите беа сè, само не досадни: од „хаотично“ и „Сакаме да спиеме! (не во ЦТК)!" до „лагано“, „под стрес“, „исцрпено“, „среќно“ и „заспано“. Со други зборови, цел спектар на студентски емоции, искрено преточени во неколку зборови.</p>
                
                <figure class="article-inline-image">
-                    <img loading="lazy" decoding="async" src="../../../images/event4-image5.webp" alt="Табла со рачно напишани одговори од студенти за нивните чувства за време на испитниот рок.">
+                    <img width="1317" height="877" loading="lazy" decoding="async" src="../../../images/event4-image5.webp" alt="Табла со рачно напишани одговори од студенти за нивните чувства за време на испитниот рок.">
                    <figcaption>Духовити и искрени одговори на големите табли со прашања пред ЦТК.</figcaption>
                </figure>

@@ -243,14 +243,14 @@
                <p>Околу 150 луѓе го посетија заедничкиот штанд на МСОС, Повезани и ЦТК за да се подружат, да се напијат кафе, да грицнат нешто и да си разменат приказни меѓу книгите и роковите. Настанот помина во одлична атмосфера, многу насмевки, нови познанства и еден мал потсетник дека и во најстресните периоди, секогаш има време за кафе и добро друштво.</p>
                
                <figure class="article-inline-image">
-                    <img loading="lazy" decoding="async" src="../../../images/event4-image6.webp" alt="Студенти собрани на заедничкиот штанд за време на настанот.">
+                    <img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event4-image6.webp" alt="Студенти собрани на заедничкиот штанд за време на настанот.">
                    <figcaption>Дел од атмосферата на заедничкиот штанд</figcaption>
                </figure>
                
                <p>Се гледаме повторно и следната година, уште поопуштени и со уште повеќе кафе!</p>
                
                <figure class="article-inline-image">
-                    <img loading="lazy" decoding="async" src="../../../images/event4-image7.webp" alt="Колаж од фотографии на кои се прикажани студенти, шолји за кафе и бурек.">
+                    <img width="1920" height="1080" loading="lazy" decoding="async" src="../../../images/event4-image7.webp" alt="Колаж од фотографии на кои се прикажани студенти, шолји за кафе и бурек.">
                    <figcaption>Убава дружба, многу спомени и заеднички пребродени испитни стресови.</figcaption>
                </figure>
            </div>
@@ -259,20 +259,20 @@
                <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/event4-image1.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../../images/event4-image1.webp" alt="Утринско кафе пред ЦТК, photo 1"></button>
-                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image2.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../../images/event4-image2.webp" alt="Утринско кафе пред ЦТК, photo 2"></button>
-                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image3.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../../images/event4-image3.webp" alt="Утринско кафе пред ЦТК, photo 3"></button>
-                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image4.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../../images/event4-image4.webp" alt="Утринско кафе пред ЦТК, photo 4"></button>
-                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image5.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../../images/event4-image5.webp" alt="Утринско кафе пред ЦТК, photo 5"><span class="eg-more">+2</span></button>
-                        <button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-image6.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../../images/event4-image6.webp" alt="Утринско кафе пред ЦТК, photo 6"></button>
-                        <button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-image7.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../../images/event4-image7.webp" alt="Утринско кафе пред ЦТК, photo 7"></button>
+                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image1.webp" data-caption="Утринско кафе пред ЦТК"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event4-image1.webp" alt="Утринско кафе пред ЦТК, photo 1"></button>
+                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image2.webp" data-caption="Утринско кафе пред ЦТК"><img width="1425" height="950" loading="lazy" decoding="async" src="../../../images/event4-image2.webp" alt="Утринско кафе пред ЦТК, photo 2"></button>
+                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image3.webp" data-caption="Утринско кафе пред ЦТК"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event4-image3.webp" alt="Утринско кафе пред ЦТК, photo 3"></button>
+                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image4.webp" data-caption="Утринско кафе пред ЦТК"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event4-image4.webp" alt="Утринско кафе пред ЦТК, photo 4"></button>
+                        <button type="button" class="eg-thumb" data-full="../../../images/event4-image5.webp" data-caption="Утринско кафе пред ЦТК"><img width="1317" height="877" loading="lazy" decoding="async" src="../../../images/event4-image5.webp" alt="Утринско кафе пред ЦТК, photo 5"><span class="eg-more">+2</span></button>
+                        <button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-image6.webp" data-caption="Утринско кафе пред ЦТК"><img width="1920" height="1280" loading="lazy" decoding="async" src="../../../images/event4-image6.webp" alt="Утринско кафе пред ЦТК, photo 6"></button>
+                        <button type="button" class="eg-thumb is-hidden" data-full="../../../images/event4-image7.webp" data-caption="Утринско кафе пред ЦТК"><img width="1920" height="1080" loading="lazy" decoding="async" src="../../../images/event4-image7.webp" alt="Утринско кафе пред ЦТК, photo 7"></button>
                    </div>
                </section>
            <footer class="article-footer">
                <hr>
                <div class="author-share-section">
                    <div class="author-details">
-                        <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 class="author-text">
                            <p class="author-name">Кристијан Поповски</p>
                            <p class="author-title">Претседател и основач</p>
@@ -294,7 +294,7 @@
                    <h2>Не пропуштајте ниту една новост од МСОС</h2>
                    <p>Вести, соопштенија и отворени повици, директно во вашето сандаче.</p>
                    <form class="subscribe-form-bottom">
-                        <input type="email" placeholder="Внесете ја вашата е-пошта">
+                        <input type="email" placeholder="Внесете ја вашата е-пошта" aria-label="Е-пошта">
                        <button type="submit" class="btn btn-primary-orange">Претплати се</button>
                    </form>
                    <p class="privacy-note">Ние се грижиме за вашите податоци во нашата <a href="../../../mk/privacy-policy/">политика за приватност</a></p>