mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hub redesign, Gallery, per-language logos, footer/menu fixes + mobile polish #9

Merged
popovskik merged 6 commits from kristijan-dev into develop 2026-08-03 13:38:56 +00:00
Conversation 0 Commits 6 Files Changed 255
+4483 -7321
popovskik commented 2026-08-03 13:18:27 +00:00
Collaborator
Copy link
Copy source

Summary

A broad round of design and UX work across the site, plus fixes and mobile polish.

MSOS Hub page

  • "What you can do here": Porsche-style vertical image cards in a continuous auto-scrolling marquee with faded edges
  • "A glimpse of the space": full-bleed band of 4 connected photos
  • "A space we built together": full-bleed image banner with a blue gradient overlay
  • "Made possible by": partner logo tiles (Cultural Association + Ministry, processed from source art)
  • Copy/spacing polish, em-dashes removed, deeper final-CTA gradient so it no longer blends into the footer

Branding & partners

  • Per-language MSOS logos (SVG) in header + footer on every page
  • Partner carousel: added Ministry (wide lockup), Cultural Association, Embassy of North Macedonia, and Spletni Mojster (width-capped); de-duplicated logos within each marquee group so new ones appear sooner

Footer

  • Website build credit line (Spletni Mojster + Kristijan), clean centered text
  • Synced MK/SI footers to EN (added the missing About us + Timeline links)

Landing page

  • Swapped the blurry stock video thumbnail for the real team photo; removed the intentional hero-background blur and the video-overlay blur (kept the blue tint)

Navigation

  • Mobile menu uses 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 the choice and waits for the cookie-consent choice so it never overlaps the consent card

Gallery (new)

  • New multilingual Gallery page (/en|mk|si/gallery/) as Pinterest-style album collage cards; each card links to its event story. Blue tint over covers, hover lift.
  • Reusable in-post "Photos from the event" block + full-screen lightbox (arrows / keyboard / swipe), shown on the Meet Student Slovenia 2024 post as the pattern
  • Gallery URLs added to sitemap with hreflang; "Gallery" added to the What We Do nav

Housekeeping

  • Removed stale *.html.bak files
  • Moved images/original/ (458 MB of raw, unused, gitignored source photos) out of the working tree to reclaim disk

Follow-ups (not in this PR)

  • Roll the in-post "Photos from the event" block out to the remaining event posts (their article structures vary, so it needs a careful per-post pass) and decide whether to trim inline photos
  • MK/SI album titles on the Gallery page are draft translations — worth a proofread

🤖 Generated with Claude Code

## Summary A broad round of design and UX work across the site, plus fixes and mobile polish. ### MSOS Hub page - "What you can do here": Porsche-style vertical image cards in a continuous auto-scrolling marquee with faded edges - "A glimpse of the space": full-bleed band of 4 connected photos - "A space we built together": full-bleed image banner with a blue gradient overlay - "Made possible by": partner logo tiles (Cultural Association + Ministry, processed from source art) - Copy/spacing polish, em-dashes removed, deeper final-CTA gradient so it no longer blends into the footer ### Branding & partners - Per-language MSOS logos (SVG) in header + footer on every page - Partner carousel: added Ministry (wide lockup), Cultural Association, Embassy of North Macedonia, and Spletni Mojster (width-capped); de-duplicated logos within each marquee group so new ones appear sooner ### Footer - Website build credit line (Spletni Mojster + Kristijan), clean centered text - Synced MK/SI footers to EN (added the missing About us + Timeline links) ### Landing page - Swapped the blurry stock video thumbnail for the real team photo; removed the intentional hero-background blur and the video-overlay blur (kept the blue tint) ### Navigation - Mobile menu uses 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 the choice and waits for the cookie-consent choice so it never overlaps the consent card ### Gallery (new) - New multilingual Gallery page (`/en|mk|si/gallery/`) as Pinterest-style album collage cards; each card links to its event story. Blue tint over covers, hover lift. - Reusable in-post "Photos from the event" block + full-screen lightbox (arrows / keyboard / swipe), shown on the Meet Student Slovenia 2024 post as the pattern - Gallery URLs added to sitemap with hreflang; "Gallery" added to the What We Do nav ### Housekeeping - Removed stale `*.html.bak` files - Moved `images/original/` (458 MB of raw, unused, gitignored source photos) out of the working tree to reclaim disk ## Follow-ups (not in this PR) - Roll the in-post "Photos from the event" block out to the remaining event posts (their article structures vary, so it needs a careful per-post pass) and decide whether to trim inline photos - MK/SI album titles on the Gallery page are draft translations — worth a proofread 🤖 Generated with [Claude Code](https://claude.com/claude-code)
popovskik added 5 commits 2026-08-03 13:18:27 +00:00
Hub redesign, per-language logos, partner carousel, footer + menu fixes f5dfd8830e 
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>
Add Gallery page (per-event albums + lightbox); remove video-thumbnail blur d085e3376a 
- 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>
Redesign gallery as Pinterest-style album collage cards d048226daf 
- Each album is now a compact collage card (1 large + 2 small photos) with a
  "+N" overlay on the last tile; multiple cards per row (responsive grid)
- Title + photo count + "Read the story" link under each card
- All album photos remain in the DOM (hidden) so the lightbox still browses
  the full set; clicking any tile opens the lightbox at that photo

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Gallery: distinct album cards, blue tint, hover lift, whole card links to story 24c77e6171 
- 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>
In-post event gallery block + lightbox; mobile polish 1f5e031be9 
- 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>
popovskik added 1 commit 2026-08-03 13:24:42 +00:00
Roll out "Photos from the event" gallery to all event posts (EN/MK/SI) 9edd6daa52 
- Added the reusable lightbox gallery block to all 9 event posts in every
  language (27 pages): shows 5 thumbnails + "+N more", opens the full-screen
  viewer with the whole photo set
- Inserted inside <article> (before the author footer where present) so it
  never breaks the sidebar/article flex layout
- Handled 3 SI posts that were missing their </article> tag by anchoring on
  the newsletter section instead

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
popovskik merged commit ea1afcd6ae into develop 2026-08-03 13:38:56 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
marija.koshtrevska (Marija Koshtrevska) popovskik mark
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mark/msos#9