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
1 parent
9e8cbc5876
commit
e1d596751a
9 files changed
+213
-126
No files matched your search
@@ -176,3 +176,13 @@
|
||||
.blog-hero h1 { font-size: 30px; }
|
||||
.blog-grid { columns: 1; }
|
||||
}
|
||||
|
||||
/* Pagination — reuses the shared .pagination look; reset button chrome.
|
||||
Topic filter + client-side paging are handled by blog-filter.js. */
|
||||
.blog-pagination { margin-top: 40px; }
|
||||
.blog-pagination .pagination-arrow,
|
||||
.blog-pagination .page-number {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
+60
-58
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user