diff --git a/blog-filter.js b/blog-filter.js new file mode 100644 index 00000000..7aafb2aa --- /dev/null +++ b/blog-filter.js @@ -0,0 +1,22 @@ +/* Blog topic filter: chips toggle which cards are shown. No dependencies. */ +(function () { + var list = document.querySelector('.blog-list'); + if (!list) return; + var chips = list.querySelectorAll('.blog-chip'); + var cards = list.querySelectorAll('.blog-card'); + + function apply(topic) { + cards.forEach(function (card) { + var show = topic === 'all' || card.getAttribute('data-topic') === topic; + card.hidden = !show; + }); + } + + chips.forEach(function (chip) { + chip.addEventListener('click', function () { + chips.forEach(function (c) { c.classList.remove('is-active'); }); + chip.classList.add('is-active'); + apply(chip.getAttribute('data-topic')); + }); + }); +})(); diff --git a/css/main.css b/css/main.css index a34bc49b..d197bb20 100644 --- a/css/main.css +++ b/css/main.css @@ -33,4 +33,5 @@ @import 'pages/_about.css'; @import 'pages/_timeline.css'; @import 'pages/_guide.css'; -@import 'pages/_faq.css'; \ No newline at end of file +@import 'pages/_faq.css'; +@import 'pages/_blog.css'; \ No newline at end of file diff --git a/css/pages/_blog.css b/css/pages/_blog.css new file mode 100644 index 00000000..68670c29 --- /dev/null +++ b/css/pages/_blog.css @@ -0,0 +1,178 @@ +/* ========================================================================== + Blog page — featured strip, topic filters, masonry card wall + ========================================================================== */ +.blog-page { font-family: 'Inter', sans-serif; } + +/* Topic colours */ +.blog-page { + --t-student-life: #2D738C; + --t-study-tips: #E8833A; + --t-slovenia: #3B82C4; + --t-community: #7C5CBF; + --t-guides: #2E9E6B; +} + +/* Hero */ +.blog-hero { + background: linear-gradient(180deg, #FFF7F2 0%, #FFFFFF 100%); + padding: 112px 24px 40px; /* clears the fixed 80px header */ + text-align: center; +} +.blog-eyebrow { + display: inline-block; + color: #E8833A; + font-weight: 700; + font-size: 14px; + letter-spacing: 0.06em; + text-transform: uppercase; + margin-bottom: 12px; +} +.blog-hero h1 { max-width: 760px; margin: 0 auto 16px; font-size: 42px; line-height: 1.12; color: #101828; } +.blog-lead { max-width: 640px; margin: 0 auto; font-size: 18px; line-height: 28px; color: #475467; } + +/* Shared tag pill */ +.blog-tag { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 600; + letter-spacing: 0.02em; + padding: 4px 10px; + border-radius: 999px; + color: #fff; + background: #667085; + width: max-content; +} +.blog-tag i { font-size: 11px; } +.blog-tag--student-life { background: var(--t-student-life); } +.blog-tag--study-tips { background: var(--t-study-tips); } +.blog-tag--slovenia { background: var(--t-slovenia); } +.blog-tag--community { background: var(--t-community); } +.blog-tag--guides { background: var(--t-guides); } + +.blog-soon { + display: inline-block; + font-size: 12px; + font-weight: 600; + color: #98A2B3; + border: 1px dashed #D0D5DD; + border-radius: 999px; + padding: 3px 10px; +} + +.blog-section-label { + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: #98A2B3; + margin: 0 0 16px; +} + +/* Featured strip: one large + two stacked */ +.blog-featured { max-width: 1120px; margin: 8px auto 8px; padding: 0 24px; } +.blog-featured-grid { + display: grid; + grid-template-columns: 1.4fr 1fr; + gap: 20px; +} +.blog-feat-side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; } + +.blog-feat { + display: flex; + flex-direction: column; + border-radius: 18px; + overflow: hidden; + background: #FFFFFF; + border: 1px solid #EAECF0; + box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05); + text-decoration: none; + transition: transform 0.18s ease, box-shadow 0.18s ease; +} +.blog-feat:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(16, 24, 40, 0.10); } +.blog-feat-thumb { + background: linear-gradient(135deg, #F2F4F7 0%, #E4E7EC 100%); + display: flex; + align-items: center; + justify-content: center; + color: #B7BDC7; + font-size: 40px; + min-height: 120px; +} +.blog-feat--lg .blog-feat-thumb { min-height: 280px; font-size: 64px; } +.blog-feat-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } +.blog-feat--lg .blog-feat-body { padding: 28px; gap: 16px; } +.blog-feat h3 { margin: 0; font-size: 18px; line-height: 1.3; color: #101828; } +.blog-feat--lg h3 { font-size: 26px; } + +/* Filters */ +.blog-list { max-width: 1120px; margin: 48px auto 72px; padding: 0 24px; } +.blog-filters { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 28px; + padding-bottom: 24px; + border-bottom: 1px solid #EAECF0; +} +.blog-chip { + display: inline-flex; + align-items: center; + gap: 7px; + font-family: inherit; + font-size: 14px; + font-weight: 600; + color: #475467; + background: #F2F4F7; + border: 1px solid transparent; + border-radius: 999px; + padding: 9px 16px; + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; +} +.blog-chip i { font-size: 12px; } +.blog-chip:hover { background: #E4E7EC; } +.blog-chip.is-active { background: #101828; color: #FFFFFF; } + +/* Masonry card wall (CSS columns) */ +.blog-grid { columns: 3 300px; column-gap: 20px; } +.blog-card { + break-inside: avoid; + display: inline-block; + width: 100%; + margin: 0 0 20px; + background: #FFFFFF; + border: 1px solid #EAECF0; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(16, 24, 40, 0.04); + transition: transform 0.18s ease, box-shadow 0.18s ease; +} +.blog-card[hidden] { display: none; } +.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16, 24, 40, 0.10); } +.blog-thumb { + background: linear-gradient(135deg, #F2F4F7 0%, #E4E7EC 100%); + display: flex; + align-items: center; + justify-content: center; + color: #B7BDC7; + font-size: 34px; + min-height: 140px; +} +/* Vary the placeholder heights so the wall feels playful, not uniform */ +.blog-card:nth-child(3n+1) .blog-thumb { min-height: 180px; } +.blog-card:nth-child(4n+2) .blog-thumb { min-height: 120px; } +.blog-card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } +.blog-card h3 { margin: 0; font-size: 18px; line-height: 1.3; color: #101828; } +.blog-card p { margin: 0; font-size: 14px; line-height: 22px; color: #667085; } + +@media (max-width: 860px) { + .blog-featured-grid { grid-template-columns: 1fr; } + .blog-feat--lg .blog-feat-thumb { min-height: 200px; } +} +@media (max-width: 768px) { + .blog-hero { padding: 92px 20px 32px; } + .blog-hero h1 { font-size: 30px; } + .blog-grid { columns: 1; } +} diff --git a/en/about-us/index.html b/en/about-us/index.html index a76c30a1..1c1f47d3 100644 --- a/en/about-us/index.html +++ b/en/about-us/index.html @@ -41,7 +41,7 @@ What We Do @@ -56,7 +56,6 @@ For Students