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

Carousels: drag + position dots, and real Become-a-member photos

Browse Source 
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>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-05 15:54:06 +02:00
1 parent a7782eb28f
commit 4c27ebb105
14 files changed
+238 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/pages/_member.css
+12 -17
View File
@@ -77,27 +77,22 @@
.mm-numbers-section .mm-note { color: rgba(255,255,255,0.6); margin-top: 24px; }
/* ---- ways (hub-style auto-scrolling slider) ---- */
/* Mechanics (.hub-carousel/.hub-uses/.hub-track/.hub-group) and the marquee
animation are reused from _hub.css; the JS clone step (setupHubCarousel) runs
on every page and picks up the .hub-track here. These rules only restyle the
card body for icon-based cards (no photo). */
/* Mechanics (.hub-carousel/.hub-uses/.hub-track/.hub-group), the marquee
animation, the photo (.hub-use-img), the legibility gradient (::after) and
the bottom-anchored body are all reused from _hub.css; the JS clone step
(setupHubCarousel) runs on every page and picks up the .hub-track here.
These rules only tweak card size and add a small icon badge over the photo. */
.mm-ways-carousel { margin-top: 4px; }
.mm-use {
display: flex; flex-direction: column; justify-content: space-between;
gap: 18px; padding: 24px 22px;
width: clamp(240px, 24vw, 300px);
aspect-ratio: 5 / 6;
}
/* No photo here, so drop the hub image-legibility overlay. */
.mm-use::after { display: none; }
.mm-use { width: clamp(240px, 24vw, 300px); aspect-ratio: 5 / 6; }
/* Brand icon as a subtle glass badge floating over the photo. */
.mm-use-ico {
position: absolute; top: 14px; left: 14px; z-index: 3;
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 14px;
background: rgba(255, 255, 255, 0.18);
color: #fff; font-size: 23px; flex: 0 0 auto;
width: 44px; height: 44px; border-radius: 12px;
background: rgba(10, 18, 26, 0.42);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
color: #fff; font-size: 19px;
}
/* Body is absolute-positioned for photo cards in _hub.css; here it flows normally. */
.mm-use .hub-use-body { position: static; padding: 0; gap: 6px; }
.mm-use .hub-use-body h3 { font-size: 19px; line-height: 1.25; }
.mm-use .hub-use-body p { font-size: 14px; line-height: 21px; }