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

Landing/About/guide polish + Proxify-style category filter bar #15

Merged
popovskik merged 25 commits from kristijan-dev into develop 2026-08-05 20:31:40 +00:00
Conversation 0 Commits 25 Files Changed 293 +14126 -1328
popovskik commented 2026-08-05 20:29:16 +00:00
Collaborator
Copy Link

Summary

A batch of front-end polish across the landing page, About Us, the content filter pages, and the Student Welcome Guide. All work is EN/MK/SI where applicable.

About Us

  • Replaced the static appreciation photo with an Apple-style scrolling marquee that focal-zooms the centred photo (JS in main.js, styles in _about.css).
  • Moved the "Our members & friends" heading above the carousel.
  • Removed the "Have any questions?" FAQ CTA section.

Landing hero

  • Converted the flat blue overlay into a Proxify-style radial vignette (light whitish-blue centre over the CTA, dark blue edges) and raised the "Become a member" button.

Category filter bar (Events & Projects / Blog / News)

  • New shared rounded pill bar with a trailing search icon; clicking search swaps the tabs for a search field and opens a results dropdown (thumbnail + category chip + title), Proxify-style.
  • Implemented as css/pages/_filterbar.css + filter-search.js, layered on top of the existing filter/pagination JS (chip classes reused, so current filtering is untouched). Blog category icons preserved.
  • Balanced the News filter-bar spacing between the header and the cards.

Student Welcome Guide

  • Widened the intro paragraphs, constrained the full-bleed disclaimer to a normal centred width, and added space before the route configurator.

Notes

  • 20 files changed; two new files (_filterbar.css, filter-search.js).
  • Verified in-browser across the three page types and languages.

🤖 Generated with Claude Code

## Summary A batch of front-end polish across the landing page, About Us, the content filter pages, and the Student Welcome Guide. All work is EN/MK/SI where applicable. ### About Us - Replaced the static appreciation photo with an **Apple-style scrolling marquee** that focal-zooms the centred photo (JS in `main.js`, styles in `_about.css`). - Moved the **"Our members & friends" heading above the carousel**. - Removed the **"Have any questions?"** FAQ CTA section. ### Landing hero - Converted the flat blue overlay into a **Proxify-style radial vignette** (light whitish-blue centre over the CTA, dark blue edges) and **raised the "Become a member" button**. ### Category filter bar (Events & Projects / Blog / News) - New shared **rounded pill bar with a trailing search icon**; clicking search swaps the tabs for a search field and opens a **results dropdown** (thumbnail + category chip + title), Proxify-style. - Implemented as `css/pages/_filterbar.css` + `filter-search.js`, layered on top of the existing filter/pagination JS (chip classes reused, so current filtering is untouched). **Blog category icons preserved.** - Balanced the **News** filter-bar spacing between the header and the cards. ### Student Welcome Guide - Widened the intro paragraphs, constrained the **full-bleed disclaimer** to a normal centred width, and added space before the route configurator. ## Notes - 20 files changed; two new files (`_filterbar.css`, `filter-search.js`). - Verified in-browser across the three page types and languages. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
popovskik added 25 commits 2026-08-05 20:29:16 +00:00
764cf1ee66 Add real Hub photos to msos-hub sections 
Replace the temporary placeholder images in the "What you can do here"
and "A glimpse of the space" sections with the final Hub photos
(converted to WebP) across EN/MK/SI, and drop the placeholder notes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
a7782eb28f Turn membership "ways to join" grid into Hub-style slider 
Convert the fixed 6-card grid in the "There is more than one way to be
part of MSOS" section into the Hub's auto-scrolling marquee, reusing the
existing .hub-carousel mechanics with icon-based gradient cards. Applied
across EN/MK/SI.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
4c27ebb105 Carousels: drag + position dots, and real Become-a-member photos 
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>
bec7e26dd4 Add four new blog articles + blog listing/styling updates 
New posts (Ad futura scholarship, learning Slovene, welcome days,
study in North Macedonia) across EN/MK/SI, plus blog index and _blog.css
updates. (Also carries the site-wide nav reorder and the illustrative-image
caption tag on the bank-account post.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
5e18020066 changes.txt Batch 1: nav, hero, gallery, project CTA, discl. groundwork 
- #9.1 Reorder "Who We Are" nav to Our team, Timeline, MSOS Hub (all 225 pages)
- #4  Fix MK "Ask MSOS" label to "Прашај го МСОС"
- #11 Landing hero overlay -> radial blue vignette (lighter centre)
- #3  Gallery cards show the event date under the title (DD.MM.YYYY)
- #1  Membership/support CTA at the end of project pages (memorials excluded)
- #8  "Illustrative image" tag on blog/news photo captions
- #9.3 Mission & Vision: full-width gradient band + more space above title

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
5abda945ed changes.txt #10: informative disclaimers (footer, guide, legal) 
- Footer disclaimer on every page (informative-only, verify with official sources)
- "Good to know" callout across all Student Welcome Guide pages, pointing to
  the "Was this page helpful?" box for reporting errors
- "Website content & liability" disclaimer card on the Official information page
All three languages (EN/MK/SI).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
c14a227ac7 changes.txt #2: AI/crawler discovery files (llms.txt + links-for-bots) 
Add tools/build_botlinks.py which regenerates, from the pages already on disk:
- /llms.txt          llmstxt.org-style Markdown index (English, with descriptions)
- /links-for-bots/   a lightweight fully-linked crawl hub covering EN/MK/SI

Re-run `python tools/build_botlinks.py` after adding or removing pages; it only
reads each page's <title> and meta description, so it stays current automatically.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
195a48205c changes.txt #6: sync homepage "Latest news" from the News hub 
Add tools/build_listings.py: copies the top 3 cards from each language's News
hub into the homepage "Latest news" block (marker-wrapped), so editing the News
page now updates the homepage. The News hub stays the hand-edited source of truth
(it may hold curated teaser cards without a detail page).

Also: fix the Gallery meta description (was a copy of the FAQ text) and add a
durable gallery override to seo_inject.py; refresh llms.txt / links-for-bots.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
0bbc06c6bc changes.txt #9.2 & #9.4: team hero + members/friends appreciation 
#9.2 Full-width auto-rotating team hero (crossfade every 4.5s, transparent blue
overlay) directly under the About Us title — 11 landscape photos supplied by MSOS.

#9.4 "Our members & friends" appreciation section after Mission & Vision: a
contained photo carousel + name chips. Photos and names are PLACEHOLDERS
(names in "First L." format) pending the full members list.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
9d53216b08 Blog: add markdown->page converter + new post "Where to search for accommodation" (EN) 
tools/build_blog.py converts a Markdown source into the site's scrollspy blog
article (title, header, hero, sidebar nav from ## headings, body). First output:
the new EN post "Where to search for student accommodation in Slovenia", added at
the top of the blog index (newest first), dated 2026-08-03, SEO injected.

MK/SI of this post and the rest of the blog batch (refresh 1-5, split trilingual
posts 2-4, personal essay post 7) still to come.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
c7481ca998 Blog: publish trilingual posts 2-4 in EN/MK/SI from source content 
Build full articles for "Learning Slovene", "Study in North Macedonia
(government scholarship)" and "Ad futura scholarship" in all three languages,
split from the trilingual Markdown sources (no machine translation). Dates
registered in ARTICLE_DATES and SEO re-injected per page. Blog index cards for
these already existed and now point to real content instead of stubs.

Hero images are placeholders pending topical photos.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3fed4db226 Blog: post 6 "Accommodation" now trilingual (MK/SI AI-drafted) 
Add Macedonian and Slovenian versions of the accommodation post (AI-drafted,
flagged for native review), rebuild EN with a proper Student Welcome Guide link
and a real Sources section, and add MK/SI blog index cards. Converter now treats
a secondary "# Sources" heading as a section.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
ae3f5e30c9 Blog: publish trilingual post 5 "Welcome Days" (EN/SI/MK) 
Build the Welcome Days article in all three languages from the multilingual
source (# English / # Slovenščina / # Македонски sections + shared sources),
no machine translation. Date registered, SEO injected. Cards already existed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
d75dbc1edd Blog: add personal essay "How I coped with leaving home" (trilingual, prose) 
Publish Vasil Handziski's personal essay in MK (original) with EN/SI AI-drafted
translations. Adds a prose article variant (no scrollspy sidebar, centred column,
custom byline) via .article-page--prose, plus blog index cards in all languages.
Converter now omits the "last checked" line when empty.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
7c52f30e3b Project pages: move membership CTA into the ToC sidebar (Proxify-style) 
Add a compact "Like what we do?" CTA box directly below the table of contents
in the left sidebar. The ToC already scrolls internally when long, so the box
stays pinned in the same visual field. The full-width bottom CTA is hidden on
desktop where a sidebar CTA exists (via :has()) and remains the mobile fallback.

Applied to the 4 project pages that have a ToC sidebar; the others (all MK/SI +
3 EN) have no sidebar and keep the bottom CTA.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
b79ad2d0de 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>
ac052c2b09 Bot pages: expose them in the footer under a "For bots" column 
Previously /llms.txt and /links-for-bots/ existed but were not linked anywhere,
so users/bots couldn't find them. Following Proxify's pattern, add a "For bots"
footer column (all 225 pages, EN/MK/SI) linking to category link lists and an
AI summary page.

build_botlinks.py now also generates:
  /links-for-bots/blog|guide|projects/   per-section link lists (EN/MK/SI)
  /links-for-bots/about-msos/            "Hey AI, learn about us" summary
  /links-for-bots/  hub  +  /llms.txt

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
e12724bbd1 Bot pages: use root-relative links so they work on any host 
The generated /links-for-bots/ pages linked to absolute https://msosorg.com/...
URLs, which 404 when the site is served from another host (e.g. local dev, or
before this branch is deployed). Switch the pages' navigation links to
root-relative (/llms.txt, /en/..., /links-for-bots/...). Canonical tags stay
absolute (SEO) and llms.txt keeps absolute URLs (llmstxt.org convention).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
cf3fce2522 Interconnect News hub + homepage with Blog & Projects (real sync) 
Rewrite tools/build_listings.py to treat the Blog, Projects and News detail
pages as the single source of truth. It now regenerates:
  - the News hub grid (all items, newest first, correct dates from ARTICLE_DATES)
  - the homepage "Latest news" block (top 3)
both marker-wrapped. Previously the News hub was hand-maintained with drifted,
hardcoded dates and only some blog posts; now adding a blog/event and running
the script flows through to News and the homepage automatically.

Card links/images are root-relative so they work on any host.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
3eef7a9314 Add pre-commit hook to auto-sync News/homepage/bot pages 
Versioned hook at tools/git-hooks/pre-commit runs build_listings.py and
build_botlinks.py on every commit and stages their output, so the News hub,
homepage "Latest news", /llms.txt and /links-for-bots/ always reflect the actual
Blog/Projects/News content — no manual step. Non-blocking: warns and proceeds if
Python or a generator fails. Activated with `git config core.hooksPath tools/git-hooks`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
53ae93a813 docs: note the SEO regeneration step for new pages 
Record in PRE-LAUNCH-TODO.md that new pages still need ARTICLE_DATES + a
seo_inject.py --all --sitemap run (the commit hook covers News/homepage/bot
sync but not SEO), so it isn't forgotten.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2d2e422372 About Us: overlay title on the hero images + rename nav item to "About Us" 
- Rework the About Us hero so the eyebrow, title and description are overlaid on
  the auto-rotating team images (centred, white, text-shadowed) exactly like the
  landing hero, instead of sitting in a separate white band above them. Remove the
  old page-header band and move its text into the hero. All three languages.
- Rename the "Who We Are" menu item from "Our team" to "About Us"
  (MK "За нас", SI "O nas") across all pages; footer "About us" link unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
f309a90e1f About Us hero: align overlaid title to the top (off people's faces) 
Switch the hero content from vertical-centre to top-aligned so the title/text sit
in the upper background area of the rotating group photos instead of over faces.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
93af2d8051 Mission & Vision: remove white band behind title; hide box icons on mobile 
- Override the inherited cream .page-header-section background to transparent so
  the "Mission and Vision" title sits directly on the section's blue gradient
  (no white rectangle behind it).
- On mobile, hide the mission/vision box icons (crosshair/eye) — text only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
5d50604af4 Landing/About/guide polish + Proxify-style category filter bar 
About Us:
- Replace the appreciation photo with an Apple-style scrolling marquee that
  focal-zooms the centred photo (main.js + _about.css); heading now sits above
  the carousel; remove the "Have any questions?" FAQ CTA (EN/MK/SI).

Landing hero:
- Turn the flat blue overlay into a Proxify-style radial vignette (light centre
  over the CTA, dark edges) and raise the "Become a member" button.

Filter bar (Events & Projects / Blog / News, EN/MK/SI):
- Add a shared Proxify-style rounded pill bar with a trailing search icon that
  swaps to a search field and opens a results dropdown (thumbnail + category +
  title). New css/pages/_filterbar.css + filter-search.js, layered on top of the
  existing filter/pagination JS. Blog category icons preserved.
- Balance the News filter bar spacing between the header and the cards.

Student Welcome Guide:
- Widen the intro paragraphs, constrain the full-bleed disclaimer to a normal
  centred width, and add space before the route configurator.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
popovskik merged commit 541d155bc3 into develop 2026-08-05 20:31:40 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: mark/msos#15
No description provided.
Delete Branch "kristijan-dev"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?