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 

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>
This commit is contained in:
popovskik 2026-08-05 22:27:04 +02:00
parent 93af2d8051
commit 5d50604af4
20 changed files with 601 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/main.css
View File

@ -43,3 +43,6 @@
@import 'pages/_hub.css';
@import 'pages/_legal.css';
@import 'pages/_gallery.css';
/* Loaded last so the shared filter bar wins over per-page chip styles. */
@import 'pages/_filterbar.css';

49
css/pages/_about.css
View File

@ -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;

247
css/pages/_filterbar.css Normal file
View File

@ -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%; }
}

7
css/pages/_guide.css
View File

@ -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; }

18
css/pages/_home.css
View File

@ -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 */

2
css/pages/_news.css
View File

@ -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;

43
en/about-us/index.html
View File

@ -358,17 +358,31 @@
<!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
<section class="appreciation-section">
<div class="page-header-section">
<div class="appr-intro">
<h2>Our members & friends</h2>
<p class="appr-lead">MSOS is its people. With gratitude to everyone who has been part of our story — and everyone still writing it with us.</p>
</div>
<div class="about-hero appreciation-hero" aria-label="MSOS members and friends">
<div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
<div class="about-hero-overlay"></div>
<!-- Scrolling photo carousel (Apple-style focal zoom) -->
<div class="appr-marquee" aria-label="MSOS members and friends">
<div class="appr-track">
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="MSOS members at an event"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="MSOS members at an event"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="MSOS members at an event"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="MSOS members at an event"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Macedonian Student Night in Ljubljana"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="MSOS members at an event"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="MSOS members at an event"></div>
<!-- duplicate set for a seamless infinite loop (aria-hidden) -->
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt=""></div>
</div>
</div>
<div class="appreciation-names">
<span class="appr-name">Kristijan P.</span>
@ -379,19 +393,6 @@
</div>
<p class="appreciation-note">Placeholder — the full list of members and friends is being compiled.</p>
</section>
<section class="faq-cta-section">
<div class="faq-cta-container">
<div class="avatar-group">
<img width="1197" height="1197" loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Avatar of Marija" class="avatar">
<img width="1083" height="1083" loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Avatar of Kristijan" class="avatar large">
<img width="1099" height="1099" loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Avatar of Lea" class="avatar">
</div>
<h3>Have any questions?</h3>
<p class="page-description" style="margin: 0;">Can't find the answer you're looking for? Please chat to our friendly team.</p>
<a href="#" class="btn btn-primary-orange">See all FAQs</a>
</div>
</section>
</main>
<!-- START_FOOTER -->

1
en/blog/index.html
View File

@ -436,6 +436,7 @@
<script src="../../blog-filter.js"></script>
<script src="../../main.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>
</body>

1
en/news/index.html
View File

@ -489,6 +489,7 @@
<!-- END_FOOTER -->
<script src="../../main.js"></script>
<script src="../../news-filter.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>

1
en/projects/index.html
View File

@ -433,6 +433,7 @@
<!-- END_FOOTER -->
<script src="../../main.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>
</body>

180
filter-search.js Normal file
View File

@ -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 { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[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 = '<i class="fas fa-search" aria-hidden="true"></i>';
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 =
'<span class="filterbar-search-label"></span>' +
'<div class="filterbar-search-field"><i class="fas fa-search" aria-hidden="true"></i>' +
'<input type="text" aria-label="' + escapeHtml(t.ph) + '"></div>' +
'<button type="button" class="filterbar-search-close" aria-label="Close"><i class="fas fa-times" aria-hidden="true"></i></button>';
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 = '<p class="filterbar-results-count"></p><ul class="filterbar-results-list"></ul>';
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
? '<img src="' + escapeHtml(it.img) + '" alt="" loading="lazy">'
: (it.icon || '');
a.innerHTML =
'<span class="filterbar-result-thumb">' + thumb + '</span>' +
'<span class="filterbar-result-body">' +
(it.cat ? '<span class="filterbar-result-cat">' + escapeHtml(it.cat) + '</span>' : '') +
'<span class="filterbar-result-title">' + escapeHtml(it.title) + '</span>' +
'</span>';
li.appendChild(a);
return li;
}
})();

39
main.js
View File

@ -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();
});

43
mk/about-us/index.html
View File

@ -358,17 +358,31 @@
<!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
<section class="appreciation-section">
<div class="page-header-section">
<div class="appr-intro">
<h2>Нашите членови и пријатели</h2>
<p class="appr-lead">МСОС се неговите луѓе. Со благодарност до сите што биле дел од нашата приказна — и до сите што сè уште ја пишуваат со нас.</p>
</div>
<div class="about-hero appreciation-hero" aria-label="Членови и пријатели на МСОС">
<div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
<div class="about-hero-overlay"></div>
<!-- Scrolling photo carousel (Apple-style focal zoom) -->
<div class="appr-marquee" aria-label="Членови и пријатели на МСОС">
<div class="appr-track">
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Македонска студентска вечер во Љубљана"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Македонска студентска вечер во Љубљана"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="Членови на МСОС на настан"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Членови на МСОС на настан"></div>
<!-- duplicate set for a seamless infinite loop (aria-hidden) -->
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt=""></div>
</div>
</div>
<div class="appreciation-names">
<span class="appr-name">Kristijan P.</span>
@ -379,19 +393,6 @@
</div>
<p class="appreciation-note">Привремено — целосниот список на членови и пријатели е во подготовка.</p>
</section>
<section class="faq-section">
<div class="faq-footer">
<div class="avatar-group">
<img width="1197" height="1197" loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Аватар на Марија" class="avatar">
<img width="1083" height="1083" loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Аватар на Кристијан" class="avatar large">
<img width="1099" height="1099" loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Аватар на Леа" class="avatar">
</div>
<h3>Имате какви било прашања?</h3>
<p>Не можете да го најдете одговорот што го барате? Разговарајте со нашиот пријателски тим.</p>
<a href="#" class="btn btn-primary-orange">Види ги сите ЧПП</a>
</div>
</section>
</main>
<!-- START_FOOTER -->

1
mk/blog/index.html
View File

@ -436,6 +436,7 @@
<script src="../../blog-filter.js"></script>
<script src="../../main.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>
</body>

1
mk/news/index.html
View File

@ -489,6 +489,7 @@
<!-- END_FOOTER -->
<script src="../../main.js"></script>
<script src="../../news-filter.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>

1
mk/projects/index.html
View File

@ -435,6 +435,7 @@
<!-- Поврзување до главната JS-датотека -->
<script src="../../main.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>
</body>

43
si/about-us/index.html
View File

@ -358,17 +358,31 @@
<!-- FAQ Call to Action Section -->
<!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
<section class="appreciation-section">
<div class="page-header-section">
<div class="appr-intro">
<h2>Naši člani in prijatelji</h2>
<p class="appr-lead">MSOS so njegovi ljudje. S hvaležnostjo vsem, ki so bili del naše zgodbe — in vsem, ki jo še pišejo z nami.</p>
</div>
<div class="about-hero appreciation-hero" aria-label="Člani in prijatelji MSOS">
<div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
<div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
<div class="about-hero-overlay"></div>
<!-- Scrolling photo carousel (Apple-style focal zoom) -->
<div class="appr-marquee" aria-label="Člani in prijatelji MSOS">
<div class="appr-track">
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="Člani MSOS na dogodku"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Člani MSOS na dogodku"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Makedonski študentski večer v Ljubljani"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Člani MSOS na dogodku"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Člani MSOS na dogodku"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Makedonski študentski večer v Ljubljani"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="Člani MSOS na dogodku"></div>
<div class="appr-card"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Člani MSOS na dogodku"></div>
<!-- duplicate set for a seamless infinite loop (aria-hidden) -->
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt=""></div>
<div class="appr-card" aria-hidden="true"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt=""></div>
</div>
</div>
<div class="appreciation-names">
<span class="appr-name">Kristijan P.</span>
@ -379,19 +393,6 @@
</div>
<p class="appreciation-note">Začasno — celoten seznam članov in prijateljev je v pripravi.</p>
</section>
<section class="faq-cta-section">
<div class="faq-cta-container">
<div class="avatar-group">
<img width="1197" height="1197" loading="lazy" decoding="async" src="../../images/about_marija_min.webp" alt="Avatar Marije" class="avatar">
<img width="1083" height="1083" loading="lazy" decoding="async" src="../../images/about_kristijan_min.webp" alt="Avatar Kristijana" class="avatar large">
<img width="1099" height="1099" loading="lazy" decoding="async" src="../../images/about_lea_min.webp" alt="Avatar Lee" class="avatar">
</div>
<h3>Imate kakšno vprašanje?</h3>
<p class="page-description" style="margin: 0;">Ne najdete odgovora, ki ga iščete? Poklepetajte z našo prijazno ekipo.</p>
<a href="#" class="btn btn-primary-orange">Ogled vseh pogostih vprašanj</a>
</div>
</section>
</main>
<!-- START_FOOTER -->

1
si/blog/index.html
View File

@ -436,6 +436,7 @@
<script src="../../blog-filter.js"></script>
<script src="../../main.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>
</body>

1
si/news/index.html
View File

@ -489,6 +489,7 @@
<!-- END_FOOTER -->
<script src="../../main.js"></script>
<script src="../../news-filter.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>

1
si/projects/index.html
View File

@ -435,6 +435,7 @@
<!-- Povezava do glavne JS datoteke -->
<script src="../../main.js"></script>
<script src="../../filter-search.js"></script>
<link rel="stylesheet" href="/assistant.css">
<script src="/assistant.js" defer></script>
</body>