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>
This commit is contained in:
popovskik
parent
764cf1ee66
commit
a7782eb28f
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -261,31 +261,37 @@
|
|||
<section class="mm-section">
|
||||
<h2 class="mm-h2">There is more than one way to be part of MSOS</h2>
|
||||
<p class="mm-lead">You do not need to organise events or lead to belong. Join in the way that fits you.</p>
|
||||
<div class="mm-ways">
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
|
||||
<h3>Stay connected</h3><p>Receive updates and know what is happening.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
|
||||
<h3>Join the community</h3><p>Come to events, meet people and take part when it suits you.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
|
||||
<h3>Volunteer sometimes</h3><p>Help with selected activities without a long-term commitment.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
|
||||
<h3>Join projects</h3><p>Contribute to specific initiatives, campaigns, guides or collaborations.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
|
||||
<h3>Organise events</h3><p>Help plan, coordinate, promote and deliver activities.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
|
||||
<h3>Take responsibility</h3><p>Explore leadership, governance, representation or local team roles.</p>
|
||||
</article>
|
||||
<div class="hub-carousel mm-ways-carousel">
|
||||
<div class="hub-uses">
|
||||
<div class="hub-track">
|
||||
<div class="hub-group">
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Stay connected</h3><p>Receive updates and know what is happening.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Join the community</h3><p>Come to events, meet people and take part when it suits you.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Volunteer sometimes</h3><p>Help with selected activities without a long-term commitment.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Join projects</h3><p>Contribute to specific initiatives, campaigns, guides or collaborations.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Organise events</h3><p>Help plan, coordinate, promote and deliver activities.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Take responsibility</h3><p>Explore leadership, governance, representation or local team roles.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -260,31 +260,37 @@
|
|||
<section class="mm-section">
|
||||
<h2 class="mm-h2">Има повеќе начини да бидеш дел од МСОС</h2>
|
||||
<p class="mm-lead">Не мора да организираш настани или да водиш за да припаѓаш. Приклучи се на начин што ти одговара.</p>
|
||||
<div class="mm-ways">
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
|
||||
<h3>Остани поврзан</h3><p>Примај новости и знај што се случува.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
|
||||
<h3>Приклучи се на заедницата</h3><p>Доаѓај на настани, запознавај луѓе и учествувај кога ти одговара.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
|
||||
<h3>Волонтирај повремено</h3><p>Помагај на избрани активности без долгорочна обврска.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
|
||||
<h3>Приклучи се на проекти</h3><p>Придонеси на конкретни иницијативи, кампањи, водичи или соработки.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
|
||||
<h3>Организирај настани</h3><p>Помагај да се планираат, координираат, промовираат и реализираат активности.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
|
||||
<h3>Преземи одговорност</h3><p>Истражи лидерство, управување, застапување или улоги во локален тим.</p>
|
||||
</article>
|
||||
<div class="hub-carousel mm-ways-carousel">
|
||||
<div class="hub-uses">
|
||||
<div class="hub-track">
|
||||
<div class="hub-group">
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Остани поврзан</h3><p>Примај новости и знај што се случува.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Приклучи се на заедницата</h3><p>Доаѓај на настани, запознавај луѓе и учествувај кога ти одговара.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Волонтирај повремено</h3><p>Помагај на избрани активности без долгорочна обврска.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Приклучи се на проекти</h3><p>Придонеси на конкретни иницијативи, кампањи, водичи или соработки.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Организирај настани</h3><p>Помагај да се планираат, координираат, промовираат и реализираат активности.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Преземи одговорност</h3><p>Истражи лидерство, управување, застапување или улоги во локален тим.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -261,31 +261,37 @@
|
|||
<section class="mm-section">
|
||||
<h2 class="mm-h2">Obstaja več načinov, da si del MSOS</h2>
|
||||
<p class="mm-lead">Ni ti treba organizirati dogodkov ali voditi, da pripadaš. Pridruži se na način, ki ti ustreza.</p>
|
||||
<div class="mm-ways">
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
|
||||
<h3>Ostani povezan</h3><p>Prejemaj novice in vedi, kaj se dogaja.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
|
||||
<h3>Pridruži se skupnosti</h3><p>Obišči dogodke, spoznaj ljudi in sodeluj, ko ti ustreza.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
|
||||
<h3>Občasno prostovoljči</h3><p>Pomagaj pri izbranih dejavnostih brez dolgoročne zaveze.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
|
||||
<h3>Pridruži se projektom</h3><p>Prispevaj k pobudam, kampanjam, vodnikom ali sodelovanjem.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
|
||||
<h3>Organiziraj dogodke</h3><p>Pomagaj načrtovati, usklajevati, promovirati in izvesti dejavnosti.</p>
|
||||
</article>
|
||||
<article class="mm-way">
|
||||
<div class="mm-way-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
|
||||
<h3>Prevzemi odgovornost</h3><p>Razišči vodenje, upravljanje, zastopanje ali vloge v lokalni ekipi.</p>
|
||||
</article>
|
||||
<div class="hub-carousel mm-ways-carousel">
|
||||
<div class="hub-uses">
|
||||
<div class="hub-track">
|
||||
<div class="hub-group">
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Ostani povezan</h3><p>Prejemaj novice in vedi, kaj se dogaja.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Pridruži se skupnosti</h3><p>Obišči dogodke, spoznaj ljudi in sodeluj, ko ti ustreza.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Občasno prostovoljči</h3><p>Pomagaj pri izbranih dejavnostih brez dolgoročne zaveze.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Pridruži se projektom</h3><p>Prispevaj k pobudam, kampanjam, vodnikom ali sodelovanjem.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Organiziraj dogodke</h3><p>Pomagaj načrtovati, usklajevati, promovirati in izvesti dejavnosti.</p></div>
|
||||
</article>
|
||||
<article class="hub-use mm-use">
|
||||
<div class="mm-use-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
|
||||
<div class="hub-use-body"><h3>Prevzemi odgovornost</h3><p>Razišči vodenje, upravljanje, zastopanje ali vloge v lokalni ekipi.</p></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue