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

Turn membership "ways to join" grid into Hub-style slider

Browse Source 
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>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-05 12:50:39 +02:00
1 parent 764cf1ee66
commit a7782eb28f
4 files changed
+117 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/pages/_member.css
+24 -7
View File
@@ -76,13 +76,30 @@
.mm-num-label { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,0.85); }
.mm-numbers-section .mm-note { color: rgba(255,255,255,0.6); margin-top: 24px; }
/* ---- ways ---- */
.mm-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mm-way { border: 1px solid #EAECF0; border-radius: 16px; padding: 24px; background: #FFFFFF; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.mm-way:hover { border-color: #F6C9A8; box-shadow: 0 10px 22px rgba(242,118,46,0.10); }
.mm-way-ico { font-size: 22px; color: var(--mm-teal); margin-bottom: 12px; }
.mm-way h3 { font-size: 17px; margin: 0 0 6px; }
.mm-way p { font-size: 14px; line-height: 22px; color: #667085; margin: 0; }
/* ---- 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). */
.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-ico {
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;
}
/* 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; }
/* ---- membership in real life ---- */
.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }