Convert the Hub / Become-a-member carousels from a pure-CSS marquee to a
JS-driven scroller with click-and-drag, touch swipe, and progress dots
(setupHubCarousel). Turn the "ways to be part of MSOS" cards into hub-style
photo cards and add the final Become-a-member photos (WebP).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The mobile hamburger is a <div class="mobile-menu-icon"> with a click
handler, so it worked on tap but was invisible to keyboard and screen-reader
users. Expose it as a button in main.js: role="button", tabindex="0",
aria-label, aria-expanded toggling, and Enter/Space activation. Verified in
a headless browser (focusable, Enter opens, aria state flips).
Also adds docs/PRE-LAUNCH-CHECKLIST.md (dev-only, excluded from deploy):
inventory of remaining content placeholders for the public launch.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Reusable "Photos from the event" grid (shows 5 thumbnails + "+N more") that
opens a full-screen lightbox (arrows / keyboard / swipe / Esc); added to the
Meet Student Slovenia 2024 post as the pattern
- New css/components/_lightbox.css + setupLightbox() in main.js (injects one
shared overlay, wires any .js-lightbox grid)
- Mobile polish: gallery albums go single-column on phones, two on tablets;
event-gallery grid 3-up on mobile; lightbox sizing/controls tuned for small
screens
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Each album is now a bordered card with a resting shadow and clear separation
- Blue brand tint over the cover photos; fades on hover so images brighten
- Whole card lifts with a stronger shadow on hover (album-level, not per image)
- Clicking anywhere on a card opens the event story page (removed the lightbox)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- New multilingual Gallery page (en/mk/si) with 9 event albums and a
keyboard-accessible lightbox (prev/next scoped per album)
- Reuses existing event photos; links each album to its event post
- New css/pages/_gallery.css + setupGallery() lightbox in main.js
- "Gallery" link added to the "What We Do" nav (desktop + mobile) site-wide
- Gallery URLs added to sitemap.xml with hreflang
- Landing "Every Student Has a Story": removed backdrop blur on the video
thumbnail, kept the bluish gradient tint
Note: images/original/ (458 MB of raw source photos, gitignored + unused by
the site) moved out of the working tree to reclaim disk.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
MSOS Hub page:
- "What you can do here": Porsche-style vertical image cards in a
continuous auto-scrolling marquee with edge fades (real photos placeholders)
- "A glimpse of the space": full-bleed band of 4 connected photos
- "A space we built together": full-bleed image banner with blue gradient overlay
- "Made possible by": partner logo tiles (Cultural Association + Ministry);
processed Ministry + Cultural Association logos from source art
- Copy/spacing polish; removed em-dashes; larger section spacing; deeper
final-CTA gradient so it no longer blends into the footer
Branding / partners:
- Per-language MSOS logos (SVG) in header + footer across all pages
- Partner carousel: added Ministry (wide variant), Cultural Association,
Embassy of North Macedonia, and Spletni Mojster (width-capped); de-duplicated
logos within each marquee group so new logos appear sooner
Footer:
- Build credit line (Spletni Mojster + Kristijan), clean centered text
- Synced MK/SI footers to EN (added missing About us + Timeline links)
Landing page:
- FAQ short CTA already avatar design (FAQ page kept its Email/Viber block)
- Swapped blurry stock video thumbnail for the real team photo
- Removed the intentional hero-background blur
Navigation:
- Mobile menu: use 100dvh so the language selector is reachable with submenus open
- Desktop: dropdown parents no longer navigate to dead "/#" links
Language suggestion banner:
- Dismissible, browser-language based banner suggesting the matching locale;
remembers choice in localStorage and waits for the cookie-consent choice
to avoid overlapping the consent card
Removed stale *.html.bak backup files.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
SEO (all 201 pages, en/mk/si):
- Inject canonical, hreflang (en/mk/sl + x-default), Open Graph, Twitter
cards and Organization JSON-LD via idempotent SEO:START/END block
- Generate multilingual sitemap.xml (xhtml:link alternates) + robots.txt
- Curated meta descriptions for lead-less pages (home, become-a-member,
faq, news hub, my-route); every page now has a description
- Absolute URLs target final domain msosorg.com, not the temp host
- Add reusable tools/seo_inject.py (+ README)
Content fixes:
- Translate about-us and timeline-and-milestones into MK + SI, wire up
their pages, and repair the previously-dead "Who We Are" nav links
across all mk/si pages
- Remove duplicate en/projects/makedonska-studentska-vecer-vo-ljubljana
(unreferenced; already covered by macedonian-student-night-in-ljubljana)
Locale correctness:
- Normalise Slovene pages to <html lang="sl"> (correct ISO 639-1)
- Map sl->si in main.js so the language-switcher highlight and newsletter
i18n keep working on Slovene pages (data-lang="si" still maps to /si/)
MK/SI translations and descriptions are AI-drafted; flag for native review.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Navigation
- Replace "Donate" with a "Support MSOS ❤️" CTA site-wide
- Remove dead nav links (Gallery, Press releases)
- Turn the one-item News dropdown into a direct link
Homepage
- Replace the non-functional "Become part" contact form with a
"Find your people in Slovenia" join CTA (blue/white gradient band,
orange button, photo collage), in all three languages
- Fix the placeholder Activities subtitle
- Redesign Activities into card-style tabs with icons; move per-tab
content into HTML panels and switch by index so the tabs work in
every language (MK/SI tabs were previously dead)
Newsletter (MailerLite)
- Add the subscribe block to the News hub, news articles, and every
events/projects page and hub, in all three languages
- Resize/rebalance the block, shrink the privacy line, add top spacing
- Standardise on honest copy (drop the "2,000+ subscribers" claim)
- Load main.js on the News hub pages (they shipped without it, so the
form and header dropdowns didn't work there)
- Fix a dead privacy-policy link on the makedonska-vecer page
- Document the signup convention in docs/newsletter-signup.md
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Desktop dropdown and mobile modal now show circular country flags (flag-icons) with clean language names and an active-language highlight, driven by the page lang via main.js.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a Proxify-style category filter and real client-side pagination to
the Events & Projects listing across all three languages (EN/SI/MK).
- Filter: a pill nav (All / Events / Student Life / Projects / Webinars)
plus a contextual sub-chip row for Events (Sports / Cultural /
Entertainment / Educational). Buttons carry stable data-filter /
data-subfilter keys and cards carry data-category / data-subcategory,
so a single language-agnostic handler drives all three locales.
- Pagination: replaces the hardcoded dead 1..10 links with real
client-side paging (9 per page). Shows a single page today and grows
automatically as content is added, with windowed page numbers,
enabled/disabled Prev/Next, and smooth scroll-to-top. Integrates with
the filter (resets to page 1, repaginates, hides when no matches).
- Show a localized empty-state message when a filter has no results.
- Nudge the filter block up and add space below it for even spacing.
- Drop the duplicate News pill (News has its own top-nav section) and
retag the placeholder card from announcements to projects so it stays
reachable.
Verified with jsdom across EN/SI/MK: filtering, sub-filtering, empty
state, single/multi-page navigation, and filter/pagination interaction.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
- Pin the site header on scroll (position: absolute -> fixed) so it no
longer disappears when reading.
- Redesign the desktop table-of-contents sidebar: compact spacing and fix
the first-item clipping at 100% zoom (drop fixed-height flex centering in
the scroll container for a flex column with max-height).
- Add the article title above the desktop TOC so readers always know which
article they are in.
- Make the article TOC a site-wide standard: main.js now auto-builds the
sidebar + sticky mobile header from each page's own h1/h2 headings, so all
languages (EN/SI/MK) get it with no per-page HTML. Existing hand-written
EN labels are preserved.
- Update the URL hash to the active section while scrolling (replaceState,
no history spam, no jump).
- Add transliteration for readable anchors in every language: Slovenian
diacritics and Macedonian Cyrillic map to ASCII slugs.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
popovskik
Mark Poljanšek
Mark Poljanšek