Pagination fixes, blog page chooser, Events & Projects redesign

Pagination
- Fix the broken mobile layout on News & Projects: page numbers on top,
  Previous / Next side-by-side below (shared .pagination component)
- Add a page chooser to the Blog: rewrite blog-filter.js to combine the
  topic filter with client-side pagination (page size 6), add the pager
  markup (all 3 languages) and .blog-pagination styles; it auto-hides
  when a topic has one page

Events & Projects — match the Blog/News design
- Hero: uppercase letter-spaced eyebrow, sentence-case bold title, lead
  subtitle, soft gradient; drop the redundant hero subscribe form and the
  placeholder copy (signup still available in the bottom newsletter CTA);
  align MK/SI titles to "Events & projects"
- Filters: News-style pills (dark active), left-aligned, with the thin
  separator line below; .filter-inner wrapper aligns pills/separator with
  the grid
- Spacing: reduce the gap under the header, add space below the filter so
  the separator / Events sub-filter no longer collide with "All our
  projects" (these hero/spacing tweaks also tidy the shared About/Get-to-know/
  Timeline heroes)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-01 20:30:47 +02:00
1 parent 9e8cbc5876
commit e1d596751a
9 files changed
+213 -126

No files matched your search

+17 -20
View File
@@ -148,31 +148,28 @@
<section class="page-header-section">
<div class="container text-center">
<span class="page-subtitle">Naši projekti</span>
<h1>Projekti</h1>
<p class="page-description">Naročite se in bodite na tekočem z novimi funkcijami, najnovejšimi tehnologijami, rešitvami in posodobitvami.</p>
<form class="subscribe-form">
<input type="email" placeholder="Vnesite svoj e-mail">
<button type="submit" class="btn btn-primary-orange">Naroči se</button>
</form>
<p class="privacy-note">Skrbimo za vaše podatke v naši <a href="../../si/privacy-policy/">politiki zasebnosti</a>.</p>
<h1>Dogodki in projekti</h1>
<p class="page-description">Dogodki, projekti in trenutki, ki povezujejo makedonsko študentsko skupnost v Sloveniji.</p>
</div>
</section>
<!-- Filter kategorij -->
<section class="filter-section">
<nav class="filter-nav" aria-label="Kategorije projektov">
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">Vse</button>
<button type="button" class="filter-pill" data-filter="events" aria-pressed="false">Dogodki</button>
<button type="button" class="filter-pill" data-filter="student-life" aria-pressed="false">Študentsko življenje</button>
<button type="button" class="filter-pill" data-filter="projects" aria-pressed="false">Projekti</button>
<button type="button" class="filter-pill" data-filter="webinars" aria-pressed="false">Webinarji</button>
</nav>
<div class="filter-subnav" data-parent="events" hidden>
<button type="button" class="filter-chip active" data-subfilter="all">Vsi dogodki</button>
<button type="button" class="filter-chip" data-subfilter="sports">Šport</button>
<button type="button" class="filter-chip" data-subfilter="cultural">Kulturni</button>
<button type="button" class="filter-chip" data-subfilter="entertainment">Zabava</button>
<button type="button" class="filter-chip" data-subfilter="educational">Izobraževalni</button>
<div class="filter-inner">
<nav class="filter-nav" aria-label="Kategorije projektov">
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">Vse</button>
<button type="button" class="filter-pill" data-filter="events" aria-pressed="false">Dogodki</button>
<button type="button" class="filter-pill" data-filter="student-life" aria-pressed="false">Študentsko življenje</button>
<button type="button" class="filter-pill" data-filter="projects" aria-pressed="false">Projekti</button>
<button type="button" class="filter-pill" data-filter="webinars" aria-pressed="false">Webinarji</button>
</nav>
<div class="filter-subnav" data-parent="events" hidden>
<button type="button" class="filter-chip active" data-subfilter="all">Vsi dogodki</button>
<button type="button" class="filter-chip" data-subfilter="sports">Šport</button>
<button type="button" class="filter-chip" data-subfilter="cultural">Kulturni</button>
<button type="button" class="filter-chip" data-subfilter="entertainment">Zabava</button>
<button type="button" class="filter-chip" data-subfilter="educational">Izobraževalni</button>
</div>
</div>
</section>