Project pages: add ToC sidebar to all remaining articles (EN/MK/SI)

Give the 23 project pages that used a single-column layout the same scrollspy table-of-contents sidebar as the others (built from their <h2> sections, with language-agnostic section-N ids so it works for Cyrillic too), plus the mobile ToC header. The "Like what we do?" sidebar CTA now sits under the ToC on every non-memorial project page; the two memorial stories get the ToC but no CTA. The full-width bottom CTA remains the mobile fallback. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-08-05 18:01:17 +02:00
1 parent 7c52f30e3b
commit b79ad2d0de
@@ -193,7 +193,36 @@
 <!-- END_HEADER -->

    <main class="article-page">
-        <article class="article-container">
+        <!-- Sticky Mobile Header -->
+        <div class="mobile-article-header">
+            <span id="mobile-article-title">Humanitarian Sports Tournament: Playing with Heart, Together for Kočani</span>
+            <i class="fas fa-chevron-down"></i>
+            <div class="progress-bar-container">
+                <div class="progress-bar"></div>
+            </div>
+            <div class="mobile-scrollspy-dropdown">
+                <ul id="mobile-scrollspy-links"></ul>
+            </div>
+        </div>
+
+                <div class="article-layout-container">
+            <aside class="article-sidebar">
+                <nav class="scrollspy-nav">
+                    <ul>
+                        <li><a href="#section-1" class="active">A day full of energy</a></li>
+                        <li><a href="#section-2">More than just a tournament</a></li>
+                        <li><a href="#section-3">The humanitarian impact</a></li>
+                        <li><a href="#section-4">Why it mattered</a></li>
+                        <li><a href="#section-5">Acknowledgments and thanks</a></li>
+                    </ul>
+                </nav>
+                <div class="sidebar-cta">
+                    <p class="sidebar-cta-title">Like what we do?</p>
+                    <a class="sidebar-cta-btn" href="../../../en/become-a-member/">Become a member</a>
+                    <p class="sidebar-cta-note">Or <a href="../../../en/support/">support MSOS</a> so we can create even more moments like this.</p>
+                </div>
+            </aside>
+            <article class="article-container">
            <header class="article-header">
                <p class="article-publish-date">Published on April 5, 2025</p>
                <h1>Humanitarian Sports Tournament: Playing with Heart, Together for Kočani</h1>
@@ -212,7 +241,7 @@
                    <figcaption>A snapshot of the MSOS Maribor team.</figcaption>
                </figure>

-                <h2>A day full of energy</h2>
+                <h2 id="section-1">A day full of energy</h2>

                <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>

@@ -228,7 +257,7 @@
                    <figcaption>Students giving their all on the futsal court, turning competition into energy, laughter, and unforgettable moments.</figcaption>
                </figure>

-                <h2>More than just a tournament</h2>
+                <h2 id="section-2">More than just a tournament</h2>

                <p>The matches lasted over six hours, and the atmosphere never slowed down. Friends came to support their teams, music kept the hall lively, and there was always someone explaining the background to newcomers: "We are doing this for Kočani." That constant reminder turned every point scored into something bigger than sports.</p>

@@ -244,7 +273,7 @@
                    <figcaption>Warming up before the basketball games, both men’s and women’s teams getting ready for action.</figcaption>
                </figure>

-                <h2>The humanitarian impact</h2>
+                <h2 id="section-3">The humanitarian impact</h2>

                <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>

@@ -253,7 +282,7 @@
                    <figcaption>High-fives, trophies, and smiles, celebrating victory on and off the court.</figcaption>
                </figure>

-                <h2>Why it mattered</h2>
+                <h2 id="section-4">Why it mattered</h2>

                <p>For MSOS, this tournament was more than a one-day event. It showed that our community has the strength to respond to challenges with compassion and action. We proved that student life is not only about lectures and exams, or even about parties and fun. It can also be about solidarity, empathy, and humanity.</p>

@@ -264,7 +293,7 @@
                    <figcaption>A memorable moment with the organizing team and the victorious basketball and futsal squads.</figcaption>
                </figure>

-                <h2>Acknowledgments and thanks</h2>
+                <h2 id="section-5">Acknowledgments and thanks</h2>

                <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>

@@ -297,6 +326,7 @@
                    </div>
                </section>
        </article>
+        </div>
        <section class="article-support-cta">
            <div class="asc-card">
                <h3>Like what we do?</h3>
@@ -193,7 +193,28 @@
 <!-- END_HEADER -->

    <main class="article-page">
-        <article class="article-container">
+        <!-- Sticky Mobile Header -->
+        <div class="mobile-article-header">
+            <span id="mobile-article-title">In Memory of Frosina Kulakova</span>
+            <i class="fas fa-chevron-down"></i>
+            <div class="progress-bar-container">
+                <div class="progress-bar"></div>
+            </div>
+            <div class="mobile-scrollspy-dropdown">
+                <ul id="mobile-scrollspy-links"></ul>
+            </div>
+        </div>
+
+                <div class="article-layout-container">
+            <aside class="article-sidebar">
+                <nav class="scrollspy-nav">
+                    <ul>
+                        <li><a href="#section-1" class="active">A message of unity</a></li>
+                        <li><a href="#section-2">Closing thoughts</a></li>
+                    </ul>
+                </nav>
+            </aside>
+            <article class="article-container">
            <header class="article-header">
                <p class="article-publish-date">Published on February 8, 2025</p>
                <h1>In Memory of Frosina Kulakova</h1>
@@ -211,7 +232,7 @@
                    <img width="720" height="480" loading="lazy" decoding="async" src="../../../images/frosina-2.webp" alt="Students lighting candles in memory of Frosina">
                </figure>

-                <h2>A message of unity</h2>
+                <h2 id="section-1">A message of unity</h2>

                <p>This gathering was not about politics or criticism. It was about togetherness, humanity, and shared responsibility. As students abroad, we wanted to show that we care, that we remember, and that we hope for a better tomorrow where such injustices will no longer happen.</p>

@@ -221,7 +242,7 @@
                    <img width="720" height="480" loading="lazy" decoding="async" src="../../../images/frosina-3.webp" alt="Flowers and candles laid in remembrance">
                </figure>

-                <h2>Closing thoughts</h2>
+                <h2 id="section-2">Closing thoughts</h2>

                <p>Frosina’s story reminded us of the fragility of life and the importance of solidarity. We are grateful to all who came, who lit a candle, or who simply stood with us in silence.</p>

@@ -239,6 +260,7 @@
                    </div>
                </section>
        </article>
+        </div>
        <section class="newsletter-cta">
            <div class="container">
                <div class="cta-content">
@@ -193,7 +193,29 @@
 <!-- END_HEADER -->

    <main class="article-page">
-        <article class="article-container">
+        <!-- Sticky Mobile Header -->
+        <div class="mobile-article-header">
+            <span id="mobile-article-title">In Memory of the Victims of the Kochani Tragedy</span>
+            <i class="fas fa-chevron-down"></i>
+            <div class="progress-bar-container">
+                <div class="progress-bar"></div>
+            </div>
+            <div class="mobile-scrollspy-dropdown">
+                <ul id="mobile-scrollspy-links"></ul>
+            </div>
+        </div>
+
+                <div class="article-layout-container">
+            <aside class="article-sidebar">
+                <nav class="scrollspy-nav">
+                    <ul>
+                        <li><a href="#section-1" class="active">The gathering in Ljubljana</a></li>
+                        <li><a href="#section-2">A message beyond borders</a></li>
+                        <li><a href="#section-3">Closing words</a></li>
+                    </ul>
+                </nav>
+            </aside>
+            <article class="article-container">
            <header class="article-header">
                <p class="article-publish-date">Published on March 21, 2025</p>
                <h1>In Memory of the Victims of the Kochani Tragedy</h1>
@@ -213,7 +235,7 @@
                    <img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-2.webp" alt="Candlelight and flowers at the memorial gathering in Ljubljana">
                </figure>

-                <h2>The gathering in Ljubljana</h2>
+                <h2 id="section-1">The gathering in Ljubljana</h2>

                <p>On March 21, the square in Ljubljana was filled with silence and candlelight. What began as an expectation of around 200 attendees grew into a gathering of more than 600 people of all ages. The program opened with a short address by the MSOS president, followed by a 16-minute silence to honor the victims, one minute for each March day leading up to the tragedy.</p>

@@ -223,7 +245,7 @@
                    <img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-3.webp" alt="A sea of candles and flowers left by attendees">
                </figure>

-                <h2>A message beyond borders</h2>
+                <h2 id="section-2">A message beyond borders</h2>

                <p>This gathering was a reminder that even away from home, students carry their roots, their compassion, and their voice for justice. It was not a promotional act but a human one, a sign that the new generation wants to build a future where solidarity and care define who we are.</p>

@@ -233,7 +255,7 @@
                    <img width="720" height="480" loading="lazy" decoding="async" src="../../../images/kochani-4.webp" alt="Attendees standing together during the moment of silence">
                </figure>

-                <h2>Closing words</h2>
+                <h2 id="section-3">Closing words</h2>

                <p>The tragedy in Kochani showed us how fragile life is, but also how strong we can be when we come together. In Ljubljana, the student community stood side by side, sending love and respect back home.</p>

@@ -250,6 +272,7 @@
                    </div>
                </section>
        </article>
+        </div>
        <section class="newsletter-cta">
            <div class="container">
                <div class="cta-content">
@@ -193,7 +193,35 @@
 <!-- END_HEADER -->

    <main class="article-page">
-        <article class="article-container">
+        <!-- Sticky Mobile Header -->
+        <div class="mobile-article-header">
+            <span id="mobile-article-title">Paint &amp; Wine at Sunset, Celebrating Women’s Day with Art &amp; Music</span>
+            <i class="fas fa-chevron-down"></i>
+            <div class="progress-bar-container">
+                <div class="progress-bar"></div>
+            </div>
+            <div class="mobile-scrollspy-dropdown">
+                <ul id="mobile-scrollspy-links"></ul>
+            </div>
+        </div>
+
+                <div class="article-layout-container">
+            <aside class="article-sidebar">
+                <nav class="scrollspy-nav">
+                    <ul>
+                        <li><a href="#section-1" class="active">A first for MSOS Nova Gorica</a></li>
+                        <li><a href="#section-2">Art, music, and togetherness</a></li>
+                        <li><a href="#section-3">Why it mattered</a></li>
+                        <li><a href="#section-4">Looking ahead</a></li>
+                    </ul>
+                </nav>
+                <div class="sidebar-cta">
+                    <p class="sidebar-cta-title">Like what we do?</p>
+                    <a class="sidebar-cta-btn" href="../../../en/become-a-member/">Become a member</a>
+                    <p class="sidebar-cta-note">Or <a href="../../../en/support/">support MSOS</a> so we can create even more moments like this.</p>
+                </div>
+            </aside>
+            <article class="article-container">
            <header class="article-header">
                <p class="article-publish-date">Published on March 8, 2025</p>
                <h1>Paint &amp; Wine at Sunset, Celebrating Women’s Day with Art &amp; Music</h1>
@@ -211,7 +239,7 @@
                    <img width="720" height="480" loading="lazy" decoding="async" src="../../../images/paint-wine-2.webp" alt="Students painting during the Paint &amp; Wine evening">
                </figure>

-                <h2>A first for MSOS Nova Gorica</h2>
+                <h2 id="section-1">A first for MSOS Nova Gorica</h2>

                <p>This was more than just an event. It was the first official activity organized by our new MSOS Nova Gorica team. With support from the Macedonian Cultural Association "Ohridski Biseri", we transformed the cozy venue Etnoteca Mama Angela into a space filled with creativity and laughter.</p>

@@ -219,7 +247,7 @@
                    <img width="1600" height="1067" loading="lazy" decoding="async" src="../../../images/paint-wine-3.webp" alt="The cozy venue Etnoteca Mama Angela">
                </figure>

-                <h2>Art, music, and togetherness</h2>
+                <h2 id="section-2">Art, music, and togetherness</h2>

                <p>The concept was simple but powerful: a Paint &amp; Wine Night where anyone could sit down with a canvas, brushes, and a glass of wine, and let inspiration take over. No prior painting experience was needed. Some chose to create symbolic pieces honoring women, others painted freely from the heart.</p>

@@ -233,7 +261,7 @@
                    <img width="720" height="480" loading="lazy" decoding="async" src="../../../images/paint-wine-5.webp" alt="Students enjoying wine and music together">
                </figure>

-                <h2>Why it mattered</h2>
+                <h2 id="section-3">Why it mattered</h2>

                <p>Held on March 8, International Women’s Day, the event carried a deeper meaning. It was a chance to celebrate and appreciate women, not only through words but through art. The paintings that came out of the night were diverse, personal, and full of color, much like the student community itself.</p>

@@ -251,7 +279,7 @@
                    <img width="720" height="480" loading="lazy" decoding="async" src="../../../images/paint-wine-7.webp" alt="The group enjoying the celebration">
                </figure>

-                <h2>Looking ahead</h2>
+                <h2 id="section-4">Looking ahead</h2>

                <p>Paint &amp; Wine Night showed that MSOS Nova Gorica is ready to bring fresh ideas and energy to our student family. From wine glasses clinking to canvases filling with color, the night left everyone with memories and a few paint-stained fingers, that will not be forgotten.</p>

@@ -279,6 +307,7 @@
                    </div>
                </section>
        </article>
+        </div>
        <section class="article-support-cta">
            <div class="asc-card">
                <h3>Like what we do?</h3>
@@ -193,7 +193,34 @@
 <!-- END_HEADER -->

    <main class="article-page">
-        <article class="article-container">
+        <!-- Sticky Mobile Header -->
+        <div class="mobile-article-header">
+            <span id="mobile-article-title">Cheering for Macedonia, Watching Handball Together in Slovenia</span>
+            <i class="fas fa-chevron-down"></i>
+            <div class="progress-bar-container">
+                <div class="progress-bar"></div>
+            </div>
+            <div class="mobile-scrollspy-dropdown">
+                <ul id="mobile-scrollspy-links"></ul>
+            </div>
+        </div>
+
+                <div class="article-layout-container">
+            <aside class="article-sidebar">
+                <nav class="scrollspy-nav">
+                    <ul>
+                        <li><a href="#section-1" class="active">Two cities, one spirit</a></li>
+                        <li><a href="#section-2">More than just watching the game</a></li>
+                        <li><a href="#section-3">A new tradition in the making</a></li>
+                    </ul>
+                </nav>
+                <div class="sidebar-cta">
+                    <p class="sidebar-cta-title">Like what we do?</p>
+                    <a class="sidebar-cta-btn" href="../../../en/become-a-member/">Become a member</a>
+                    <p class="sidebar-cta-note">Or <a href="../../../en/support/">support MSOS</a> so we can create even more moments like this.</p>
+                </div>
+            </aside>
+            <article class="article-container">
            <header class="article-header">
                <p class="article-publish-date">Published on January 25, 2025</p>
                <h1>Cheering for Macedonia, Watching Handball Together in Slovenia</h1>
@@ -212,7 +239,7 @@
                    <figcaption>A snapshot of the fan atmosphere in Maribor.</figcaption>
                </figure>

-                <h2>Two cities, one spirit</h2>
+                <h2 id="section-1">Two cities, one spirit</h2>

                <p>This winter, the World Handball Championship brought more than just matches on screen. It brought Macedonian students together. In Ljubljana, the initiative came from a student, Ljuben Najdovski, who suggested that MSOS host a group watch of the match against Guinea held on January 19, 2025. With quick organization and support from the local café Lepa Žoga, a space was reserved, sign-ups were collected, and soon enough 25 students filled the place with flags, chants, and laughter.</p>

@@ -228,7 +255,7 @@
                    <figcaption>Fans gathered at the Maribor base to cheer for Macedonia together.</figcaption>
                </figure>

-                <h2>More than just watching the game</h2>
+                <h2 id="section-2">More than just watching the game</h2>

                <p>What made these events special was not only the sport. It was the way students created a piece of home abroad: waving flags, sharing drinks, shouting "Ајде Македонија!" at the screen, and laughing together at missed shots or brilliant saves. For newcomers, it was a chance to instantly feel part of a community. For others, it was a reminder that even hundreds of kilometers from home, they were not cheering alone.</p>

@@ -237,7 +264,7 @@
                    <figcaption>Two of our MSOS Maribor organizers enjoying the evening at the fan event.</figcaption>
                </figure>

-                <h2>A new tradition in the making</h2>
+                <h2 id="section-3">A new tradition in the making</h2>

                <p>From Ljubljana to Maribor, these watch parties showed that supporting the national team can be more than sports. It is a way to build friendships, strengthen community, and carry a piece of Macedonia wherever we go. With each match, the energy grows, and one thing is certain: these gatherings will continue to be part of the MSOS story.</p>

@@ -265,6 +292,7 @@
                    </div>
                </section>
        </article>
+        </div>
        <section class="article-support-cta">
            <div class="asc-card">
                <h3>Like what we do?</h3>