From 5d50604af4e0e5e1fb93e3304c8f2cda5313e2ce Mon Sep 17 00:00:00 2001 From: popovskik Date: Wed, 5 Aug 2026 22:27:04 +0200 Subject: [PATCH] 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) --- css/main.css | 5 +- css/pages/_about.css | 49 ++++++-- css/pages/_filterbar.css | 247 +++++++++++++++++++++++++++++++++++++++ css/pages/_guide.css | 7 +- css/pages/_home.css | 18 +-- css/pages/_news.css | 2 +- en/about-us/index.html | 43 +++---- en/blog/index.html | 1 + en/news/index.html | 1 + en/projects/index.html | 1 + filter-search.js | 180 ++++++++++++++++++++++++++++ main.js | 39 +++++++ mk/about-us/index.html | 43 +++---- mk/blog/index.html | 1 + mk/news/index.html | 1 + mk/projects/index.html | 1 + si/about-us/index.html | 43 +++---- si/blog/index.html | 1 + si/news/index.html | 1 + si/projects/index.html | 1 + 20 files changed, 601 insertions(+), 84 deletions(-) create mode 100644 css/pages/_filterbar.css create mode 100644 filter-search.js diff --git a/css/main.css b/css/main.css index 607ce0b9..949bfff7 100644 --- a/css/main.css +++ b/css/main.css @@ -42,4 +42,7 @@ @import 'pages/_support.css'; @import 'pages/_hub.css'; @import 'pages/_legal.css'; -@import 'pages/_gallery.css'; \ No newline at end of file +@import 'pages/_gallery.css'; + +/* Loaded last so the shared filter bar wins over per-page chip styles. */ +@import 'pages/_filterbar.css'; \ No newline at end of file diff --git a/css/pages/_about.css b/css/pages/_about.css index 1d1843d2..8c1ba6ac 100644 --- a/css/pages/_about.css +++ b/css/pages/_about.css @@ -509,20 +509,51 @@ /* ========================================================================== Appreciation to members & friends (photo carousel + names) ========================================================================== */ -.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; } -.appreciation-section > .page-header-section { margin-bottom: 36px; padding: 0; background: transparent; } -.appreciation-section h2 { font-size: 36px; font-weight: 600; color: #101828; margin: 0 0 12px; } -.appr-lead { font-size: 18px; line-height: 28px; color: #667085; max-width: 720px; margin: 0 auto; } -/* Contained variant of the crossfade hero (overrides the full-bleed .about-hero) */ -.appreciation-hero { - position: relative; left: auto; transform: none; - width: 100%; max-width: 1000px; margin: 0 auto 34px; - height: clamp(220px, 32vw, 380px); border-radius: 18px; overflow: hidden; +.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; overflow: hidden; } +.appreciation-section h2 { font-size: clamp(34px, 5vw, 54px); font-weight: 700; letter-spacing: -0.02em; color: #101828; margin: 0 0 16px; } +.appr-lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: #667085; max-width: 760px; margin: 0 auto; } + +/* Apple-style scrolling photo marquee */ +.appr-marquee { + position: relative; left: 50%; transform: translateX(-50%); + width: 100vw; overflow: hidden; + /* extra vertical room so the enlarged focal card is not clipped */ + margin-bottom: 48px; padding: 40px 0; + -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); + mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); } +.appr-track { + display: flex; align-items: center; width: max-content; + animation: appr-scroll 70s linear infinite; +} +.appr-marquee:hover .appr-track { animation-play-state: paused; } +.appr-card { + flex: 0 0 auto; margin-right: 24px; + width: clamp(240px, 27vw, 380px); + height: clamp(170px, 19vw, 270px); + border-radius: 20px; overflow: hidden; background: #EAF1F4; + box-shadow: 0 12px 30px rgba(16, 24, 40, 0.14); + /* base state before JS focal-scaling kicks in */ + transform: scale(0.82); transform-origin: center center; + will-change: transform, filter; + filter: brightness(0.62); +} +.appr-card img { width: 100%; height: 100%; object-fit: cover; display: block; } +@keyframes appr-scroll { + from { transform: translateX(0); } + to { transform: translateX(-50%); } +} +.appr-intro { margin-bottom: 40px; } + .appreciation-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; max-width: 900px; margin: 0 auto; } +@media (prefers-reduced-motion: reduce) { + .appr-track { animation: none; } + /* no movement => show all cards evenly, no focal zoom/dim */ + .appr-card { transform: scale(0.92); filter: none; } +} .appr-name { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #F2F7F9; border: 1px solid #E1ECF0; color: #2D5F72; diff --git a/css/pages/_filterbar.css b/css/pages/_filterbar.css new file mode 100644 index 00000000..81e20105 --- /dev/null +++ b/css/pages/_filterbar.css @@ -0,0 +1,247 @@ +/* ========================================================================== + Category filter bar (Proxify-style) + search dropdown + Shared by the Events & Projects, Blog and News pages. The existing chip + elements (.filter-pill / .blog-chip / .newshub-chip) are reused as tabs and + progressively enhanced into this bar by filter-search.js — so the existing + filtering + pagination keeps working untouched. + This file is imported LAST in main.css so its rules win over the per-page + chip styles regardless of specificity. + ========================================================================== */ + +.filterbar { + position: relative; + display: flex; + align-items: center; + gap: 6px; + width: fit-content; + max-width: 100%; + margin: 0 auto 40px; + padding: 9px 12px; + background: #F9FAFB; + border-radius: 999px; + box-shadow: 0 8px 30px rgba(16, 24, 40, 0.10); +} +/* Search mode: bar turns solid white and stretches wide */ +.filterbar.is-searching { + width: 100%; + max-width: 880px; + background: #FFFFFF; +} + +/* ---- Tabs (reuse the existing chip row) ---- */ +.filterbar-tabs { + display: flex; + align-items: center; + gap: 2px; + flex: 1 1 auto; + margin: 0; + padding: 0; + border: 0; + overflow-x: auto; + scrollbar-width: none; +} +.filterbar-tabs::-webkit-scrollbar { display: none; } +.filterbar-tabs[hidden] { display: none; } + +.filterbar .filter-pill, +.filterbar .blog-chip, +.filterbar .newshub-chip { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + gap: 7px; + height: 42px; + padding: 0 18px; + font-family: inherit; + font-size: 14px; + font-weight: 600; + line-height: 1.3; + white-space: nowrap; + color: #344054; + background: transparent; + border: 0; + border-radius: 999px; + cursor: pointer; + transition: color .15s ease, background .15s ease, box-shadow .15s ease; +} +.filterbar .filter-pill i, +.filterbar .blog-chip i, +.filterbar .newshub-chip i { font-size: 12px; } + +.filterbar .filter-pill:hover, +.filterbar .blog-chip:hover, +.filterbar .newshub-chip:hover { color: #2D5F72; background: transparent; } + +.filterbar .filter-pill.active, +.filterbar .blog-chip.is-active, +.filterbar .newshub-chip.is-active { + color: #2D5F72; + background: #FFFFFF; + box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06); +} + +/* ---- Search icon button ---- */ +.filterbar-search-btn { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; height: 42px; + border: 0; + border-radius: 999px; + background: transparent; + color: #344054; + font-size: 18px; + cursor: pointer; + transition: color .15s ease; +} +.filterbar-search-btn:hover { color: #2D5F72; } +.filterbar-search-btn[hidden] { display: none; } + +/* ---- Search mode row ---- */ +.filterbar-search { + display: flex; + align-items: center; + gap: 10px; + flex: 1 1 auto; + width: 100%; +} +.filterbar-search[hidden] { display: none; } +.filterbar-search-label { + display: none; + padding: 0 6px 0 12px; + font-size: 14px; + font-weight: 600; + color: #101828; + white-space: nowrap; +} +@media (min-width: 640px) { .filterbar-search-label { display: block; } } + +.filterbar-search-field { + display: flex; + align-items: center; + gap: 10px; + flex: 1 1 auto; + height: 42px; + padding: 0 14px; + background: #FFFFFF; + border: 1.5px solid #2D5F72; + border-radius: 999px; + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 0 0 4px #E1ECF0; +} +.filterbar-search-field i { color: #101828; font-size: 15px; } +.filterbar-search-field input { + flex: 1 1 auto; + height: 100%; + border: 0; + outline: 0; + background: transparent; + font-family: inherit; + font-size: 15px; + color: #101828; +} +.filterbar-search-field input::placeholder { color: #98A2B3; } + +.filterbar-search-close { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + width: 42px; height: 42px; + border: 0; + border-radius: 999px; + background: transparent; + color: #667085; + font-size: 18px; + cursor: pointer; + transition: color .15s ease; +} +.filterbar-search-close:hover { color: #101828; } + +/* ---- Results dropdown ---- */ +.filterbar-results { + position: absolute; + left: 0; right: 0; + top: calc(100% + 8px); + z-index: 20; + padding: 20px 8px 12px; + background: #F9FAFB; + border-radius: 24px; + box-shadow: 0 8px 30px rgba(16, 24, 40, 0.16); +} +.filterbar-results[hidden] { display: none; } +.filterbar-results-count { + margin: 0 0 8px; + padding: 0 18px; + font-size: 13px; + color: #667085; +} +.filterbar-results-list { + list-style: none; + margin: 0; + padding: 0 8px; + max-height: 400px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 2px; +} +.filterbar-result { border-radius: 14px; transition: background .15s ease; } +.filterbar-result:hover { background: #FFFFFF; } +.filterbar-result-link { + display: flex; + align-items: center; + gap: 16px; + padding: 12px; + text-decoration: none; +} +.filterbar-result-thumb { + flex: 0 0 auto; + display: flex; + align-items: center; + justify-content: center; + width: 112px; height: 72px; + border-radius: 12px; + overflow: hidden; + background: #EAF1F4; + color: #2D5F72; + font-size: 24px; +} +.filterbar-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } +.filterbar-result-body { + display: flex; + flex-direction: column; + gap: 6px; + min-width: 0; +} +.filterbar-result-cat { + align-self: flex-start; + padding: 3px 10px; + font-size: 12px; + font-weight: 600; + color: #475467; + background: #FFFFFF; + border: 1px solid #D0D5DD; + border-radius: 999px; +} +.filterbar-result-title { + font-size: 15px; + font-weight: 700; + line-height: 1.35; + color: #101828; +} + +/* ========================================================================== + Projects sub-filter row (event types) — centred pill row under the bar, + styled like the Proxify secondary chips. + ========================================================================== */ +.filter-subnav { + justify-content: center; + gap: 10px; + margin-top: 4px; +} + +@media (max-width: 640px) { + .filterbar { width: 100%; border-radius: 20px; } + .filterbar.is-searching { width: 100%; } +} diff --git a/css/pages/_guide.css b/css/pages/_guide.css index 0c9f4a99..babe16b6 100644 --- a/css/pages/_guide.css +++ b/css/pages/_guide.css @@ -227,7 +227,7 @@ color: #101828; } .guide-landing-hero p { - max-width: 720px; + max-width: 880px; margin: 0 auto 12px; font-size: 17px; line-height: 28px; @@ -613,7 +613,7 @@ /* ---------- Route builder ---------- */ .guide-route { max-width: 920px; - margin: -36px auto 0; + margin: 0 auto; position: relative; background: #FFFFFF; border: 1px solid #EAECF0; @@ -1029,8 +1029,9 @@ /* Informative disclaimer callout shown across the Student Welcome Guide */ .guide-disclaimer { display: flex; gap: 12px; align-items: flex-start; + max-width: 880px; /* keep it to the reading column, not full-bleed */ background: #FFF7ED; border: 1px solid #FED7AA; border-left: 4px solid #FB923C; - border-radius: 12px; padding: 15px 18px; margin: 8px 0 30px; + border-radius: 12px; padding: 15px 18px; margin: 8px auto 48px; } .guide-disclaimer > i { color: #EA7317; font-size: 18px; margin-top: 2px; flex: 0 0 auto; } .guide-disclaimer .gd-body { font-size: 13.5px; line-height: 21px; color: #7C4A21; } diff --git a/css/pages/_home.css b/css/pages/_home.css index 5a51c2f0..2d683985 100644 --- a/css/pages/_home.css +++ b/css/pages/_home.css @@ -47,12 +47,15 @@ left: 0; height: 100%; width: 100%; - /* Radial vignette: lighter blue in the centre (over the CTA) fading to a - deeper blue at the edges, so the eye is drawn to the middle. */ - background: radial-gradient(ellipse 90% 95% at 50% 50%, - rgba(60, 142, 170, 0.46) 0%, - rgba(45, 115, 140, 0.64) 44%, - rgba(16, 50, 70, 0.88) 100%); + /* Radial vignette (Proxify-style): a light, whitish-blue glow in the centre + over the CTA that falls off to a deep, dark blue at the edges — pulling + the eye straight to the middle where the "Become a member" button sits. + Focal point biased slightly downward (58%) to sit on the button. */ + background: radial-gradient(ellipse 70% 78% at 50% 58%, + rgba(178, 218, 238, 0.40) 0%, + rgba(96, 165, 190, 0.46) 28%, + rgba(34, 86, 114, 0.74) 58%, + rgba(9, 34, 52, 0.96) 100%); z-index: 2; } @@ -93,7 +96,8 @@ .hero-content p { font-size: 20px; line-height: 30px; - margin: 0 0 72px 0; + /* tighter gap so the CTA sits a bit higher, closer to the copy */ + margin: 0 0 40px 0; } /* 2. Partners Section */ diff --git a/css/pages/_news.css b/css/pages/_news.css index dac0def5..f5d0a68a 100644 --- a/css/pages/_news.css +++ b/css/pages/_news.css @@ -20,7 +20,7 @@ .newshub-hero h1 { max-width: 760px; margin: 0 auto 16px; font-size: 42px; line-height: 1.12; color: #101828; } .newshub-lead { max-width: 640px; margin: 0 auto; font-size: 18px; line-height: 28px; color: #475467; } -.newshub-list { max-width: 1120px; margin: 40px auto 72px; padding: 0 24px; } +.newshub-list { max-width: 1120px; margin: 0 auto 72px; padding: 0 24px; } .newshub-filters { display: flex; flex-wrap: wrap; diff --git a/en/about-us/index.html b/en/about-us/index.html index d60a34ca..39230321 100644 --- a/en/about-us/index.html +++ b/en/about-us/index.html @@ -358,17 +358,31 @@
-
+

Our members & friends

MSOS is its people. With gratitude to everyone who has been part of our story — and everyone still writing it with us.

-
-
-
-
-
-
-
+ +
+
+
MSOS members at an event
+
MSOS members at an event
+
Macedonian Student Night in Ljubljana
+
MSOS members at an event
+
MSOS members at an event
+
Macedonian Student Night in Ljubljana
+
MSOS members at an event
+
MSOS members at an event
+ + + + + + + + + +
Kristijan P. @@ -379,19 +393,6 @@

Placeholder — the full list of members and friends is being compiled.

- -
-
-
- Avatar of Marija - Avatar of Kristijan - Avatar of Lea -
-

Have any questions?

-

Can't find the answer you're looking for? Please chat to our friendly team.

- See all FAQs -
-
diff --git a/en/blog/index.html b/en/blog/index.html index 3c051f3a..f9d71274 100644 --- a/en/blog/index.html +++ b/en/blog/index.html @@ -436,6 +436,7 @@ + diff --git a/en/news/index.html b/en/news/index.html index 62ff0d10..415f9b9e 100644 --- a/en/news/index.html +++ b/en/news/index.html @@ -489,6 +489,7 @@ + diff --git a/en/projects/index.html b/en/projects/index.html index c27f0550..477fbda4 100644 --- a/en/projects/index.html +++ b/en/projects/index.html @@ -433,6 +433,7 @@ + diff --git a/filter-search.js b/filter-search.js new file mode 100644 index 00000000..f3196315 --- /dev/null +++ b/filter-search.js @@ -0,0 +1,180 @@ +/* Category filter bar enhancement (Proxify-style). + * + * Progressively enhances the existing category chip rows on the Events & + * Projects, Blog and News pages into a single rounded pill bar with a trailing + * search button. Clicking search swaps the tabs for a search input; typing + * opens a results dropdown listing matching cards (thumbnail + category + + * title). The existing chip elements keep their classes and data-attributes, + * so the current filtering + pagination logic (main.js / blog-filter.js / + * news-filter.js) keeps working unchanged. Filtering happens against the cards + * already rendered on the page — no network calls. + */ +(function () { + 'use strict'; + + function qsa(sel, root) { return [].slice.call((root || document).querySelectorAll(sel)); } + function el(tag, cls) { var e = document.createElement(tag); if (cls) e.className = cls; return e; } + function escapeHtml(s) { + return String(s).replace(/[&<>"]/g, function (c) { + return { '&': '&', '<': '<', '>': '>', '"': '"' }[c]; + }); + } + + // --- Localised strings ------------------------------------------------- + var lang = (document.documentElement.getAttribute('lang') || 'en').toLowerCase(); + if (lang === 'sl') lang = 'si'; + if (['en', 'si', 'mk'].indexOf(lang) === -1) lang = 'en'; + var I18N = { + en: { ph: 'Search', none: 'No results found', count: function (n) { return n + ' result' + (n === 1 ? '' : 's') + ' found'; } }, + si: { ph: 'Iskanje', none: 'Ni zadetkov', count: function (n) { return n + ' ' + (n === 1 ? 'zadetek' : 'zadetkov'); } }, + mk: { ph: 'Пребарување', none: 'Нема резултати', count: function (n) { return n + ' ' + (n === 1 ? 'резултат' : 'резултати'); } } + }; + var t = I18N[lang]; + + // --- Per-page adapters ------------------------------------------------- + // Each returns, for a card element, { href, title, img, icon, cat }. + function projectItem(card, labelMap) { + var link = card.querySelector('.post-link'); + var titleEl = card.querySelector('.post-title'); + var img = card.querySelector('.post-image'); + if (!link || !titleEl) return null; + return { + href: link.getAttribute('href'), + title: titleEl.textContent.trim(), + img: img ? img.getAttribute('src') : '', + cat: labelMap ? (labelMap[card.getAttribute('data-category')] || '') : '' + }; + } + function blogItem(card) { + var titleEl = card.querySelector('h3'); + var tag = card.querySelector('.blog-tag'); + var thumb = card.querySelector('.blog-thumb'); + if (!titleEl) return null; + return { + href: card.getAttribute('href'), + title: titleEl.textContent.trim(), + icon: thumb ? thumb.innerHTML : '', + cat: tag ? tag.textContent.trim() : '' + }; + } + function newsItem(card) { + var titleLink = card.querySelector('.newshub-body h3 a') || card.querySelector('h3 a'); + var media = card.querySelector('.newshub-media'); + var img = card.querySelector('.newshub-media img'); + var badge = card.querySelector('.news-badge'); + if (!titleLink) return null; + return { + href: media ? media.getAttribute('href') : titleLink.getAttribute('href'), + title: titleLink.textContent.trim(), + img: img ? img.getAttribute('src') : '', + cat: badge ? badge.textContent.trim() : '' + }; + } + + var CONFIGS = [ + { tabs: '.filter-nav', cards: '.posts-grid .post-card', item: projectItem, labels: true }, + { tabs: '.blog-filters', cards: '.blog-grid .blog-card', item: blogItem }, + { tabs: '.newshub-filters', cards: '.newshub-grid .newshub-card', item: newsItem } + ]; + + CONFIGS.forEach(function (cfg) { + var tabsEl = document.querySelector(cfg.tabs); + if (tabsEl) upgrade(tabsEl, cfg); + }); + + function upgrade(tabsEl, cfg) { + // Map of data-filter -> visible label (projects only; used for result category chips). + var labelMap = null; + if (cfg.labels) { + labelMap = {}; + qsa('button', tabsEl).forEach(function (b) { labelMap[b.getAttribute('data-filter')] = b.textContent.trim(); }); + } + + // Wrap the tabs row inside the new bar. + var bar = el('div', 'filterbar'); + tabsEl.parentNode.insertBefore(bar, tabsEl); + tabsEl.classList.add('filterbar-tabs'); + bar.appendChild(tabsEl); + + // Search icon button. + var searchBtn = el('button', 'filterbar-search-btn'); + searchBtn.type = 'button'; + searchBtn.setAttribute('aria-label', t.ph); + searchBtn.innerHTML = ''; + bar.appendChild(searchBtn); + + // Search row (hidden until activated). + var firstTab = tabsEl.querySelector('button, a'); + var searchRow = el('div', 'filterbar-search'); + searchRow.hidden = true; + searchRow.innerHTML = + '' + + '
' + + '
' + + ''; + searchRow.querySelector('.filterbar-search-label').textContent = firstTab ? firstTab.textContent.trim() : ''; + var input = searchRow.querySelector('input'); + input.placeholder = t.ph; + bar.appendChild(searchRow); + + // Results dropdown. + var results = el('div', 'filterbar-results'); + results.hidden = true; + results.innerHTML = '

'; + bar.appendChild(results); + var countEl = results.querySelector('.filterbar-results-count'); + var listEl = results.querySelector('.filterbar-results-list'); + + function openSearch() { + bar.classList.add('is-searching'); + tabsEl.hidden = true; + searchBtn.hidden = true; + searchRow.hidden = false; + input.value = ''; + render(''); + input.focus(); + } + function closeSearch() { + bar.classList.remove('is-searching'); + searchRow.hidden = true; + results.hidden = true; + tabsEl.hidden = false; + searchBtn.hidden = false; + } + + function render(q) { + q = (q || '').trim().toLowerCase(); + if (!q) { results.hidden = true; listEl.innerHTML = ''; countEl.textContent = ''; return; } + var found = qsa(cfg.cards) + .map(function (c) { return cfg.item(c, labelMap); }) + .filter(function (it) { return it && it.title.toLowerCase().indexOf(q) !== -1; }); + listEl.innerHTML = ''; + countEl.textContent = found.length ? t.count(found.length) : t.none; + found.forEach(function (it) { listEl.appendChild(resultRow(it)); }); + results.hidden = false; + } + + searchBtn.addEventListener('click', openSearch); + searchRow.querySelector('.filterbar-search-close').addEventListener('click', closeSearch); + input.addEventListener('input', function () { render(input.value); }); + document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !searchRow.hidden) closeSearch(); }); + document.addEventListener('click', function (e) { if (!bar.contains(e.target) && !searchRow.hidden) closeSearch(); }); + } + + function resultRow(it) { + var li = el('li', 'filterbar-result'); + var a = el('a', 'filterbar-result-link'); + a.href = it.href; + var thumb = it.img + ? '' + : (it.icon || ''); + a.innerHTML = + '' + thumb + '' + + '' + + (it.cat ? '' + escapeHtml(it.cat) + '' : '') + + '' + escapeHtml(it.title) + '' + + ''; + li.appendChild(a); + return li; + } +})(); diff --git a/main.js b/main.js index bbe49b8d..7f840504 100644 --- a/main.js +++ b/main.js @@ -1120,6 +1120,44 @@ document.addEventListener('DOMContentLoaded', function() { }); } + /** + * =================================================================== + * APPRECIATION MARQUEE (Apple-style focal zoom) + * The strip auto-scrolls via CSS; here we scale + brighten each card + * by its distance from the horizontal centre, so whichever photo is + * in the middle grows and lightens, then shrinks as it moves on. + * =================================================================== + */ + function setupApprMarquee() { + if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; + const marquee = document.querySelector('.appr-marquee'); + if (!marquee) return; + const cards = marquee.querySelectorAll('.appr-card'); + if (!cards.length) return; + + // scale: 1.0 at centre -> MIN_SCALE at the edges; brightness likewise + const MIN_SCALE = 0.72; + const MIN_BRIGHT = 0.5; + + function frame() { + const vpCenter = window.innerWidth / 2; + for (let n = 0; n < cards.length; n++) { + const r = cards[n].getBoundingClientRect(); + const cardCenter = r.left + r.width / 2; + // 0 at centre, ~1 near the edges of the viewport + let d = Math.abs(cardCenter - vpCenter) / vpCenter; + if (d > 1) d = 1; + const e = d * d; // ease so only the very centre is full size + const scale = 1 - (1 - MIN_SCALE) * e; + const bright = 1 - (1 - MIN_BRIGHT) * e; + cards[n].style.transform = 'scale(' + scale.toFixed(3) + ')'; + cards[n].style.filter = 'brightness(' + bright.toFixed(3) + ')'; + } + rafId = requestAnimationFrame(frame); + } + let rafId = requestAnimationFrame(frame); + } + /** * =================================================================== * 8. ZAGON FUNKCIJ PO NALOŽITVI STRANI @@ -1131,6 +1169,7 @@ document.addEventListener('DOMContentLoaded', function() { setupNewsletter(); setupHubCarousel(); setupAboutHero(); + setupApprMarquee(); setupLightbox(); }); \ No newline at end of file diff --git a/mk/about-us/index.html b/mk/about-us/index.html index d4be505a..824ffbfb 100644 --- a/mk/about-us/index.html +++ b/mk/about-us/index.html @@ -358,17 +358,31 @@
-
+

Нашите членови и пријатели

МСОС се неговите луѓе. Со благодарност до сите што биле дел од нашата приказна — и до сите што сè уште ја пишуваат со нас.

-
-
-
-
-
-
-
+ +
+
+
Членови на МСОС на настан
+
Членови на МСОС на настан
+
Македонска студентска вечер во Љубљана
+
Членови на МСОС на настан
+
Членови на МСОС на настан
+
Македонска студентска вечер во Љубљана
+
Членови на МСОС на настан
+
Членови на МСОС на настан
+ + + + + + + + + +
Kristijan P. @@ -379,19 +393,6 @@

Привремено — целосниот список на членови и пријатели е во подготовка.

- -
-
-
- Аватар на Марија - Аватар на Кристијан - Аватар на Леа -
-

Имате какви било прашања?

-

Не можете да го најдете одговорот што го барате? Разговарајте со нашиот пријателски тим.

- Види ги сите ЧПП -
-
diff --git a/mk/blog/index.html b/mk/blog/index.html index 44a78cb0..7e7c6362 100644 --- a/mk/blog/index.html +++ b/mk/blog/index.html @@ -436,6 +436,7 @@ + diff --git a/mk/news/index.html b/mk/news/index.html index 235c202a..b333f235 100644 --- a/mk/news/index.html +++ b/mk/news/index.html @@ -489,6 +489,7 @@ + diff --git a/mk/projects/index.html b/mk/projects/index.html index 57f52164..e8f9f503 100644 --- a/mk/projects/index.html +++ b/mk/projects/index.html @@ -435,6 +435,7 @@ + diff --git a/si/about-us/index.html b/si/about-us/index.html index 237041a3..4a3efb3d 100644 --- a/si/about-us/index.html +++ b/si/about-us/index.html @@ -358,17 +358,31 @@
-
+

Naši člani in prijatelji

MSOS so njegovi ljudje. S hvaležnostjo vsem, ki so bili del naše zgodbe — in vsem, ki jo še pišejo z nami.

-
-
-
-
-
-
-
+ +
+
+
Člani MSOS na dogodku
+
Člani MSOS na dogodku
+
Makedonski študentski večer v Ljubljani
+
Člani MSOS na dogodku
+
Člani MSOS na dogodku
+
Makedonski študentski večer v Ljubljani
+
Člani MSOS na dogodku
+
Člani MSOS na dogodku
+ + + + + + + + + +
Kristijan P. @@ -379,19 +393,6 @@

Začasno — celoten seznam članov in prijateljev je v pripravi.

- -
-
-
- Avatar Marije - Avatar Kristijana - Avatar Lee -
-

Imate kakšno vprašanje?

-

Ne najdete odgovora, ki ga iščete? Poklepetajte z našo prijazno ekipo.

- Ogled vseh pogostih vprašanj -
-
diff --git a/si/blog/index.html b/si/blog/index.html index 6d51a0ff..cf1e694b 100644 --- a/si/blog/index.html +++ b/si/blog/index.html @@ -436,6 +436,7 @@ + diff --git a/si/news/index.html b/si/news/index.html index 813167cb..a05bbeb5 100644 --- a/si/news/index.html +++ b/si/news/index.html @@ -489,6 +489,7 @@ + diff --git a/si/projects/index.html b/si/projects/index.html index 75443d48..f95d42f0 100644 --- a/si/projects/index.html +++ b/si/projects/index.html @@ -435,6 +435,7 @@ +