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

css/pages/_projects.css
+60 -58
View File
@@ -19,8 +19,10 @@
}
.page-header-section {
padding: 96px 0;
background: #FFFFFF;
background: linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 100%);
/* .page-content already offsets the fixed 80px header, so this top value
is the actual visible gap under the menu — keep it small. */
padding: 40px 24px 44px;
text-align: center;
}
@@ -28,30 +30,34 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
max-width: 960px;
gap: 14px;
max-width: 760px;
}
/* Eyebrow — uppercase, letter-spaced, like the News/Blog hero */
.page-subtitle {
font-weight: 600;
font-size: 16px;
color: #FA7850;
display: inline-block;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #E8833A;
}
.page-header-section h1 {
font-weight: 600;
font-size: 48px;
line-height: 60px;
letter-spacing: -0.02em;
font-weight: 700;
font-size: 42px;
line-height: 1.12;
color: #101828;
margin: 0;
max-width: 760px;
}
.page-description {
font-size: 20px;
line-height: 30px;
color: #667085;
max-width: 768px;
font-size: 18px;
line-height: 28px;
color: #475467;
max-width: 640px;
margin: 0;
}
@@ -107,67 +113,60 @@
/* 1b. Filter kategorij (pill navigacija + podfiltri) */
/* Filter bar — left-aligned pills with a thin separator, like the News hub.
.filter-inner mirrors the posts container so the pills/separator line up
with the grid below. */
.filter-section {
padding: 0 24px 44px;
margin-top: -40px;
padding: 8px 80px 40px; /* bottom gap so the separator/sub-filter clears "All our projects" */
}
.filter-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
gap: 16px;
}
/* Zunanja "pill" navigacija (glavne kategorije) */
.filter-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 6px;
background: #F9FAFB;
border-radius: 999px;
box-shadow: 0px 8px 30px rgba(16, 24, 40, 0.06);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
gap: 10px;
padding-bottom: 24px;
border-bottom: 1px solid #EAECF0; /* thin, near-transparent separator */
}
.filter-nav::-webkit-scrollbar { display: none; }
.filter-pill {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 20px;
border: none;
background: transparent;
border-radius: 999px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
color: #344054;
color: #475467;
background: #F2F4F7;
border: 1px solid transparent;
border-radius: 999px;
padding: 9px 16px;
white-space: nowrap;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
transition: background 0.15s ease, color 0.15s ease;
}
.filter-pill:hover {
color: #2D738C;
background: #E4E7EC;
}
.filter-pill.active {
color: #2D738C;
background: #FFFFFF;
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
background: #101828;
color: #FFFFFF;
}
/* Notranja vrstica s podfiltri (npr. vrste dogodkov) */
/* Sub-filter row (e.g. event types) — sits under the pills, left aligned */
.filter-subnav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
justify-content: flex-start;
gap: 12px;
}
.filter-subnav[hidden] { display: none; }
@@ -321,12 +320,12 @@
}
.page-header-section {
padding: 64px 24px;
padding: 32px 20px 28px;
}
.page-header-section h1 {
font-size: 32px;
line-height: 40px;
font-size: 30px;
line-height: 1.15;
}
.page-description {
@@ -344,16 +343,16 @@
}
.filter-section {
padding: 0 16px 28px;
margin-top: -24px;
align-items: stretch;
gap: 16px;
padding: 8px 20px 32px;
}
.filter-inner {
padding: 0;
gap: 14px;
}
/* Na mobilnem se glavna navigacija vodoravno pomika */
.filter-nav {
justify-content: flex-start;
border-radius: 12px;
padding-bottom: 20px;
}
.filter-subnav {
@@ -381,11 +380,14 @@
}
.pagination {
flex-direction: column;
gap: 24px;
flex-wrap: wrap;
gap: 20px;
}
/* Numbers on their own row on top; Previous / Next share the row below */
.pagination-numbers {
order: -1;
flex-basis: 100%;
justify-content: center;
}
}