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

Pagination fixes, blog page chooser, Events & Projects redesign

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

en/projects/index.html
+17 -20
View File
@@ -148,31 +148,28 @@
<section class="page-header-section">
<div class="container text-center">
<span class="page-subtitle">Our projects</span>
<h1>Events & Projects</h1>
<p class="page-description">Subscribe to learn about new product features, the latest in technology, solutions, and updates.</p>
<form class="subscribe-form">
<input type="email" placeholder="Enter your email">
<button type="submit" class="btn btn-primary-orange">Subscribe</button>
</form>
<p class="privacy-note">We care about your data in our <a href="../../en/privacy-policy/">privacy policy</a></p>
<h1>Events &amp; projects</h1>
<p class="page-description">The events, projects and moments that bring the Macedonian student community in Slovenia together.</p>
</div>
</section>
<!-- Category Filter -->
<section class="filter-section">
<nav class="filter-nav" aria-label="Project categories">
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">All</button>
<button type="button" class="filter-pill" data-filter="events" aria-pressed="false">Events</button>
<button type="button" class="filter-pill" data-filter="student-life" aria-pressed="false">Student Life</button>
<button type="button" class="filter-pill" data-filter="projects" aria-pressed="false">Projects</button>
<button type="button" class="filter-pill" data-filter="webinars" aria-pressed="false">Webinars</button>
</nav>
<div class="filter-subnav" data-parent="events" hidden>
<button type="button" class="filter-chip active" data-subfilter="all">All events</button>
<button type="button" class="filter-chip" data-subfilter="sports">Sports</button>
<button type="button" class="filter-chip" data-subfilter="cultural">Cultural</button>
<button type="button" class="filter-chip" data-subfilter="entertainment">Entertainment</button>
<button type="button" class="filter-chip" data-subfilter="educational">Educational</button>
<div class="filter-inner">
<nav class="filter-nav" aria-label="Project categories">
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">All</button>
<button type="button" class="filter-pill" data-filter="events" aria-pressed="false">Events</button>
<button type="button" class="filter-pill" data-filter="student-life" aria-pressed="false">Student life</button>
<button type="button" class="filter-pill" data-filter="projects" aria-pressed="false">Projects</button>
<button type="button" class="filter-pill" data-filter="webinars" aria-pressed="false">Webinars</button>
</nav>
<div class="filter-subnav" data-parent="events" hidden>
<button type="button" class="filter-chip active" data-subfilter="all">All events</button>
<button type="button" class="filter-chip" data-subfilter="sports">Sports</button>
<button type="button" class="filter-chip" data-subfilter="cultural">Cultural</button>
<button type="button" class="filter-chip" data-subfilter="entertainment">Entertainment</button>
<button type="button" class="filter-chip" data-subfilter="educational">Educational</button>
</div>
</div>
</section>