On phones the lightbox caption and "Read the story" button were pinned to the
screen bottom, cramped and overlapped by the floating "Ask MSOS" pill
(z-index above the lightbox). Now:
- lightbox becomes a centred column on <=600px: image -> button -> caption
flow directly under the photo instead of being absolutely bottom-pinned;
- image capped at 62vh so tall/portrait photos leave room for the button;
- the Ask-MSOS pill is hidden while the viewer is open (body.lightbox-open),
so it can no longer overlap the controls.
Desktop layout is unchanged.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Gallery flow:
- Album covers now open the photo lightbox directly (full album set), while
the title/"Read the story" link opens the article. Previously the whole card
linked to the article and photos were only at the bottom of it.
- Each album carries its full photo set in a hidden js-lightbox grid; added
main.js support for [data-lightbox-target] cover triggers.
- Added the missing main.js include on the gallery page (its lightbox, mobile
menu and language switcher never ran before).
- Lightbox gained an optional "Read the story ->" button (data-project-url /
data-project-label) shown only for gallery albums.
Watermark:
- Baked a subtle "(c) msosorg.com" watermark (bottom-right, sized per image)
into 114 of our own event/community photos. Stock/partner/logo/icon images
excluded. Clean originals backed up to images/_originals/ (git-ignored); the
script always re-derives from them so re-runs never stack.
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>
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>
- Hero gradient now spans edge to edge (full-viewport ::before band behind the
centred content) and is more colourful/on-brand (warm peach to soft teal).
- Both hero CTAs (Become a member / See what we do) share one size so they align.
- Add hover (lift + shadow + colour shift) and active (press) states to the
reusable .btn classes, so all buttons site-wide get consistent feedback; plus
a focus-visible outline for keyboard users.
- Remove the confusing Community/Events/Support/... tag pills (they duplicated
the hero lead sentence). member.js updated + now emits main.js on the member
pages so regeneration keeps the nav working.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
New /<lang>/news/ hub aggregates real projects (title+image read from their pages), placeholder news announcements, and blog items, newest-first with type badges and a type filter. Homepage Latest news now shows the newest dated items as badged cards with a working See all to the hub; the News menu link points there too. Dates in news.js are placeholders to replace with real publish dates.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
popovskik
Mark Poljanšek