Loading…
Loading…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Editorial Notes | Modern Blog Landing Page</title>
<meta name="description" content="A responsive Bootstrap 5 blog landing page with hero search, featured article, article grid, sidebar widgets, newsletter CTA, comments, and filtering.">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.2/css/all.min.css">
</head>
<body>
<div class="blog-landing-page">
<a class="skip-link" href="#mainContent">Skip to content</a>
<header class="site-header">
<nav class="navbar navbar-expand-lg blog-navbar" aria-label="Primary navigation">
<div class="container">
<a class="navbar-brand brand" href="#home" aria-label="Editorial Notes home">
<span class="brand-mark" aria-hidden="true"><i class="fa-solid fa-feather-pointed"></i></span>
<span>Editorial Notes</span>
</a>
<button class="navbar-toggler menu-toggle" type="button" aria-controls="primaryMenu" aria-expanded="false" aria-label="Open navigation menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="primaryMenu">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#featured">Featured</a></li>
<li class="nav-item"><a class="nav-link" href="#articles">Articles</a></li>
<li class="nav-item"><a class="nav-link" href="#comments">Comments</a></li>
<li class="nav-item ms-lg-2"><a class="btn btn-primary-custom btn-sm px-3" href="#newsletter">Subscribe</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main id="mainContent">
<section class="hero-section" id="home" aria-labelledby="heroTitle">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-7">
<p class="kicker"><i class="fa-solid fa-bolt" aria-hidden="true"></i> Weekly insights for creators and teams</p>
<h1 id="heroTitle">Build a smarter blog readers want to revisit.</h1>
<p class="hero-copy">A clean landing page for publishing tutorials, marketing insights, product updates, guides, and long-form stories with style.</p>
<div class="hero-search" role="search">
<label for="blogSearch" class="form-label">Search articles</label>
<div class="input-group input-group-lg">
<span class="input-group-text" aria-hidden="true"><i class="fa-solid fa-magnifying-glass"></i></span>
<input id="blogSearch" type="search" class="form-control" placeholder="Try SEO, email, analytics, or content">
</div>
</div>
<div class="topic-filter-group" role="group" aria-label="Filter articles by topic">
<button class="topic-filter active" type="button" data-filter="all" aria-pressed="true">All</button>
<button class="topic-filter" type="button" data-filter="seo" aria-pressed="false">SEO</button>
<button class="topic-filter" type="button" data-filter="content" aria-pressed="false">Content</button>
<button class="topic-filter" type="button" data-filter="email" aria-pressed="false">Email</button>
<button class="topic-filter" type="button" data-filter="analytics" aria-pressed="false">Analytics</button>
</div>
</div>
<div class="col-lg-5">
<aside class="hero-card" aria-label="Publication highlights">
<div class="hero-card-header">
<span class="hero-card-icon" aria-hidden="true"><i class="fa-solid fa-newspaper"></i></span>
<div>
<h2>Fresh Editorial Kit</h2>
<p>Ready for creators, startups, and content teams.</p>
</div>
</div>
<dl class="stats-grid">
<div><dt>120+</dt><dd>Articles</dd></div>
<div><dt>28k</dt><dd>Readers</dd></div>
<div><dt>4.9</dt><dd>Rating</dd></div>
</dl>
<div class="mini-feature">
<i class="fa-solid fa-circle-check" aria-hidden="true"></i>
<span>Search, filters, sidebar widgets, and comments included.</span>
</div>
</aside>
</div>
</div>
</div>
</section>
<section class="featured-section" id="featured" aria-labelledby="featuredTitle">
<div class="container">
<div class="section-heading text-center">
<p class="eyebrow">Featured Story</p>
<h2 id="featuredTitle">Start with your strongest article</h2>
<p>Use the large featured card to promote a guide, announcement, case study, or high-value resource.</p>
</div>
<article class="featured-card blog-post-item" data-category="content" data-search="content strategy featured guide growth planning editorial calendar">
<div class="row g-0 align-items-stretch">
<div class="col-lg-5">
<div class="featured-visual" role="img" aria-label="Abstract editorial illustration">
<i class="fa-solid fa-pen-nib" aria-hidden="true"></i>
<span>Featured Guide</span>
</div>
</div>
<div class="col-lg-7">
<div class="featured-content">
<span class="category-pill">Content Strategy</span>
<h3>How to Plan a Content Strategy That Converts</h3>
<p>Map reader intent, publish consistently, repurpose smartly, and connect every article to a measurable business goal.</p>
<div class="post-meta">
<span><i class="fa-regular fa-calendar me-1" aria-hidden="true"></i>May 18, 2026</span>
<span><i class="fa-regular fa-user me-1" aria-hidden="true"></i>Jane Carter</span>
<span><i class="fa-regular fa-clock me-1" aria-hidden="true"></i>8 min read</span>
</div>
<a href="#articles" class="btn btn-primary-custom mt-3">Explore Articles <i class="fa-solid fa-arrow-right ms-2" aria-hidden="true"></i></a>
</div>
</div>
</div>
</article>
</div>
</section>
<section class="content-section" id="articles" aria-labelledby="articlesTitle">
<div class="container">
<div class="row g-4 align-items-start">
<div class="col-lg-8">
<div class="d-flex flex-column flex-md-row justify-content-between gap-3 mb-4">
<div>
<p class="eyebrow">Latest Articles</p>
<h2 id="articlesTitle">Fresh from the blog</h2>
</div>
<p class="results-text" aria-live="polite">Showing all articles.</p>
</div>
<div class="row g-4 article-grid">
<div class="col-md-6 blog-post-item" data-category="seo" data-search="seo checklist keywords ranking headings metadata search optimization">
<article class="blog-card h-100">
<div class="blog-card-media media-seo" role="img" aria-label="SEO article illustration"><i class="fa-solid fa-chart-line" aria-hidden="true"></i></div>
<div class="blog-card-body">
<span class="category-pill">SEO</span>
<h3>SEO Checklist Before Publishing</h3>
<p>Review search intent, headings, metadata, internal links, and readability before every post goes live.</p>
<div class="post-meta"><span>5 min read</span><span>Beginner</span></div>
<a href="#" class="text-link">Read more <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
</div>
</article>
</div>
<div class="col-md-6 blog-post-item" data-category="email" data-search="email newsletter subscribers engagement open rate content blocks">
<article class="blog-card h-100">
<div class="blog-card-media media-email" role="img" aria-label="Email article illustration"><i class="fa-solid fa-envelope-open-text" aria-hidden="true"></i></div>
<div class="blog-card-body">
<span class="category-pill">Email</span>
<h3>Newsletter Blocks Readers Love</h3>
<p>Use short lessons, curated links, examples, and useful prompts to keep subscribers engaged.</p>
<div class="post-meta"><span>6 min read</span><span>Growth</span></div>
<a href="#" class="text-link">Read more <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
</div>
</article>
</div>
<div class="col-md-6 blog-post-item" data-category="analytics" data-search="analytics metrics reporting conversions traffic engagement measurement">
<article class="blog-card h-100">
<div class="blog-card-media media-analytics" role="img" aria-label="Analytics article illustration"><i class="fa-solid fa-chart-pie" aria-hidden="true"></i></div>
<div class="blog-card-body">
<span class="category-pill">Analytics</span>
<h3>Blog Metrics Worth Reviewing</h3>
<p>Track traffic quality, engagement depth, conversions, and subscriber growth instead of vanity metrics.</p>
<div class="post-meta"><span>4 min read</span><span>Reporting</span></div>
<a href="#" class="text-link">Read more <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
</div>
</article>
</div>
<div class="col-md-6 blog-post-item" data-category="content" data-search="content repurposing workflow social media blog assets editorial planning">
<article class="blog-card h-100">
<div class="blog-card-media media-content" role="img" aria-label="Content workflow article illustration"><i class="fa-solid fa-layer-group" aria-hidden="true"></i></div>
<div class="blog-card-body">
<span class="category-pill">Content</span>
<h3>Repurpose One Article into Assets</h3>
<p>Turn one useful article into social posts, email sections, short scripts, and lead magnets.</p>
<div class="post-meta"><span>7 min read</span><span>Workflow</span></div>
<a href="#" class="text-link">Read more <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
</div>
</article>
</div>
</div>
<div class="empty-state" hidden>
<i class="fa-regular fa-folder-open" aria-hidden="true"></i>
<h3>No articles found</h3>
<p>Try a different keyword or topic filter.</p>
</div>
<nav class="blog-pagination mt-4" aria-label="Blog pagination">
<ul class="pagination justify-content-center mb-0">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a></li>
<li class="page-item active" aria-current="page"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
<aside class="col-lg-4" aria-label="Blog sidebar">
<div class="sidebar-stack">
<section class="sidebar-widget author-widget">
<div class="author-avatar" aria-hidden="true"><i class="fa-solid fa-user-pen"></i></div>
<h2>About the Editor</h2>
<p>Jane Carter writes practical guides about content strategy, search, analytics, and sustainable audience growth.</p>
<a href="#newsletter" class="btn btn-outline-primary-custom btn-sm">Follow Updates</a>
</section>
<section class="sidebar-widget">
<h2><i class="fa-solid fa-clock me-2" aria-hidden="true"></i>Recent Posts</h2>
<ul class="link-list">
<li><a href="#">SEO trends worth testing this quarter</a></li>
<li><a href="#">Building a stronger brand voice</a></li>
<li><a href="#">Email newsletter ideas for creators</a></li>
</ul>
</section>
<section class="sidebar-widget">
<h2><i class="fa-solid fa-tags me-2" aria-hidden="true"></i>Popular Tags</h2>
<div class="tag-cloud" aria-label="Popular blog tags">
<a href="#">Marketing</a>
<a href="#">SEO</a>
<a href="#">Content</a>
<a href="#">Email</a>
<a href="#">Analytics</a>
<a href="#">Growth</a>
</div>
</section>
<section class="sidebar-widget newsletter-widget" id="newsletter">
<h2><i class="fa-solid fa-paper-plane me-2" aria-hidden="true"></i>Join the Newsletter</h2>
<p>Get weekly publishing tips and content growth ideas.</p>
<label for="newsletterEmail" class="form-label">Email address</label>
<input id="newsletterEmail" class="form-control" type="email" placeholder="you@example.com">
<button class="btn btn-primary-custom w-100 mt-3" type="button">Subscribe</button>
</section>
</div>
</aside>
</div>
</div>
</section>
<section class="comments-section" id="comments" aria-labelledby="commentsTitle">
<div class="container">
<div class="comments-card">
<div class="section-heading text-center">
<p class="eyebrow">Community</p>
<h2 id="commentsTitle">Reader comments</h2>
<p>Use this section to preview discussion or adapt it for an article detail page.</p>
</div>
<ul class="comment-list">
<li class="comment-item">
<div class="comment-header"><strong>Alex Smith</strong><small>April 23, 2026</small></div>
<p>Great insights. I especially like the tip about repurposing long-form content.</p>
<button class="btn btn-sm btn-outline-secondary reply-toggle" type="button" aria-expanded="false" aria-controls="replyBox1" data-target="replyBox1"><i class="fa-solid fa-reply me-1" aria-hidden="true"></i>Reply</button>
<div class="reply-box" id="replyBox1" hidden>
<label for="replyText1" class="form-label">Write a reply</label>
<textarea id="replyText1" class="form-control mb-2" rows="2" placeholder="Write your reply"></textarea>
<button class="btn btn-primary-custom btn-sm" type="button">Send reply</button>
</div>
</li>
<li class="comment-item">
<div class="comment-header"><strong>Maria Lopez</strong><small>April 24, 2026</small></div>
<p>Can you share more examples for measuring content marketing ROI?</p>
<button class="btn btn-sm btn-outline-secondary reply-toggle" type="button" aria-expanded="false" aria-controls="replyBox2" data-target="replyBox2"><i class="fa-solid fa-reply me-1" aria-hidden="true"></i>Reply</button>
<div class="reply-box" id="replyBox2" hidden>
<label for="replyText2" class="form-label">Write a reply</label>
<textarea id="replyText2" class="form-control mb-2" rows="2" placeholder="Write your reply"></textarea>
<button class="btn btn-primary-custom btn-sm" type="button">Send reply</button>
</div>
</li>
</ul>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-3">
<p class="mb-0">© <span id="currentYear"></span> Editorial Notes. All rights reserved.</p>
<div class="footer-links">
<a href="#featured">Featured</a>
<a href="#articles">Articles</a>
<a href="#home">Back to top</a>
</div>
</div>
</footer>
</div>
</body>
</html>:root {
--blog-primary: #4f46e5;
--blog-primary-dark: #3730a3;
--blog-accent: #06b6d4;
--blog-heading: #101828;
--blog-body: #475467;
--blog-muted: #667085;
--blog-border: #e5e7eb;
--blog-surface: #f8fafc;
--blog-soft: #eef2ff;
--blog-white: #ffffff;
--blog-radius: 1.25rem;
--blog-shadow: 0 24px 60px rgba(16, 24, 40, 0.1);
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--blog-white);
}
.blog-landing-page {
color: var(--blog-body);
font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
line-height: 1.65;
overflow-x: hidden;
}
.blog-landing-page *,
.blog-landing-page *::before,
.blog-landing-page *::after {
box-sizing: border-box;
}
.blog-landing-page h1,
.blog-landing-page h2,
.blog-landing-page h3 {
color: var(--blog-heading);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.15;
}
.skip-link {
position: fixed;
top: -4rem;
left: 1rem;
z-index: 1200;
padding: 0.7rem 1rem;
border-radius: 0.65rem;
background: var(--blog-heading);
color: var(--blog-white);
text-decoration: none;
}
.skip-link:focus {
top: 1rem;
color: var(--blog-white);
}
.site-header {
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid transparent;
background: rgba(255, 255, 255, 0.93);
backdrop-filter: blur(14px);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
border-color: var(--blog-border);
box-shadow: 0 8px 28px rgba(16, 24, 40, 0.06);
}
.blog-navbar {
min-height: 4.75rem;
padding: 0.85rem 0;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--blog-heading);
font-weight: 800;
}
.brand:hover,
.brand:focus {
color: var(--blog-primary);
}
.brand-mark {
display: inline-grid;
width: 2.45rem;
height: 2.45rem;
place-content: center;
border-radius: 0.8rem;
background: linear-gradient(135deg, var(--blog-primary), var(--blog-accent));
color: var(--blog-white);
}
.blog-navbar .nav-link {
color: var(--blog-muted);
font-weight: 700;
padding: 0.55rem 0.75rem;
}
.blog-navbar .nav-link:hover,
.blog-navbar .nav-link:focus,
.blog-navbar .nav-link.active {
color: var(--blog-primary);
}
.menu-toggle {
border-color: var(--blog-border);
box-shadow: none !important;
}
.btn-primary-custom {
border: 1px solid var(--blog-primary);
border-radius: 0.8rem;
background: var(--blog-primary);
color: var(--blog-white);
font-weight: 750;
box-shadow: 0 14px 30px rgba(79, 70, 229, 0.16);
}
.btn-primary-custom:hover,
.btn-primary-custom:focus {
border-color: var(--blog-primary-dark);
background: var(--blog-primary-dark);
color: var(--blog-white);
}
.btn-outline-primary-custom {
border: 1px solid var(--blog-primary);
border-radius: 0.8rem;
color: var(--blog-primary);
font-weight: 750;
}
.btn-outline-primary-custom:hover,
.btn-outline-primary-custom:focus {
background: var(--blog-primary);
color: var(--blog-white);
}
.hero-section {
padding: clamp(4rem, 8vw, 7.4rem) 0 clamp(3.5rem, 7vw, 6rem);
background: radial-gradient(circle at 85% 10%, rgba(79, 70, 229, 0.14), transparent 34%), radial-gradient(circle at 10% 25%, rgba(6, 182, 212, 0.12), transparent 34%), linear-gradient(180deg, #ffffff 0%, var(--blog-surface) 100%);
scroll-margin-top: 5rem;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 1.1rem;
padding: 0.45rem 0.9rem;
border: 1px solid #c7d2fe;
border-radius: 999px;
background: var(--blog-soft);
color: var(--blog-primary-dark);
font-size: 0.92rem;
font-weight: 800;
}
.hero-section h1 {
max-width: 780px;
margin-bottom: 1.25rem;
font-size: clamp(2.45rem, 5.8vw, 4.7rem);
}
.hero-copy {
max-width: 650px;
margin-bottom: 1.8rem;
color: var(--blog-muted);
font-size: clamp(1.04rem, 2vw, 1.18rem);
}
.hero-search {
max-width: 640px;
margin-bottom: 1rem;
}
.hero-search .form-label {
color: var(--blog-heading);
font-weight: 750;
}
.hero-search .input-group-text,
.hero-search .form-control {
border-color: var(--blog-border);
border-radius: 0.9rem;
}
.hero-search .input-group-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background: var(--blog-white);
color: var(--blog-primary);
}
.hero-search .form-control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.topic-filter-group {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.topic-filter {
border: 1px solid var(--blog-border);
border-radius: 999px;
padding: 0.45rem 0.9rem;
background: var(--blog-white);
color: var(--blog-heading);
font-weight: 750;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.topic-filter:hover,
.topic-filter.active {
border-color: var(--blog-primary);
background: var(--blog-primary);
color: var(--blog-white);
}
.hero-card {
padding: clamp(1.2rem, 3vw, 1.6rem);
border: 1px solid var(--blog-border);
border-radius: calc(var(--blog-radius) + 0.35rem);
background: var(--blog-white);
box-shadow: var(--blog-shadow);
}
.hero-card-header {
display: flex;
align-items: center;
gap: 1rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid var(--blog-border);
}
.hero-card-icon {
display: grid;
width: 3.2rem;
height: 3.2rem;
place-content: center;
border-radius: 1rem;
background: var(--blog-soft);
color: var(--blog-primary);
font-size: 1.35rem;
}
.hero-card h2 {
margin: 0 0 0.15rem;
font-size: 1.35rem;
}
.hero-card p {
margin: 0;
color: var(--blog-muted);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
margin: 1.2rem 0;
}
.stats-grid div {
padding: 1rem 0.6rem;
border-radius: 1rem;
background: var(--blog-surface);
text-align: center;
}
.stats-grid dt {
color: var(--blog-heading);
font-size: 1.45rem;
font-weight: 850;
}
.stats-grid dd {
margin: 0;
color: var(--blog-muted);
font-size: 0.85rem;
}
.mini-feature {
display: flex;
gap: 0.7rem;
padding: 0.95rem 1rem;
border-radius: 1rem;
background: #ecfeff;
color: #155e75;
font-weight: 700;
}
.featured-section,
.content-section,
.comments-section {
padding: clamp(3.5rem, 7vw, 5.8rem) 0;
scroll-margin-top: 5rem;
}
.section-heading {
max-width: 700px;
margin: 0 auto 2.5rem;
}
.section-heading > p:last-child {
color: var(--blog-muted);
}
.eyebrow {
margin-bottom: 0.55rem;
color: var(--blog-primary);
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.17em;
text-transform: uppercase;
}
.section-heading h2,
.content-section h2,
.comments-section h2 {
font-size: clamp(1.85rem, 4vw, 2.55rem);
}
.featured-card,
.blog-card,
.sidebar-widget,
.comments-card {
border: 1px solid var(--blog-border);
border-radius: var(--blog-radius);
background: var(--blog-white);
box-shadow: 0 16px 45px rgba(16, 24, 40, 0.07);
overflow: hidden;
}
.featured-visual,
.blog-card-media {
display: grid;
place-content: center;
gap: 0.8rem;
min-height: 260px;
background: linear-gradient(135deg, var(--blog-primary), var(--blog-accent));
color: var(--blog-white);
text-align: center;
}
.featured-visual {
height: 100%;
}
.featured-visual i,
.blog-card-media i {
font-size: 3rem;
}
.featured-visual span {
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.featured-content {
display: flex;
min-height: 100%;
flex-direction: column;
justify-content: center;
padding: clamp(1.5rem, 4vw, 3.2rem);
}
.featured-content h3 {
margin-top: 0.85rem;
font-size: clamp(1.7rem, 4vw, 2.45rem);
}
.category-pill {
display: inline-flex;
align-self: flex-start;
border-radius: 999px;
padding: 0.35rem 0.75rem;
background: var(--blog-soft);
color: var(--blog-primary);
font-size: 0.75rem;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.post-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
color: var(--blog-muted);
font-size: 0.88rem;
font-weight: 650;
}
.content-section {
background: var(--blog-surface);
}
.results-text {
align-self: start;
margin: 0;
padding: 0.55rem 0.85rem;
border: 1px solid var(--blog-border);
border-radius: 999px;
background: var(--blog-white);
color: var(--blog-muted);
font-size: 0.9rem;
font-weight: 700;
}
.blog-card {
height: 100%;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 55px rgba(16, 24, 40, 0.11);
}
.blog-card-media {
min-height: 190px;
}
.media-seo {
background: linear-gradient(135deg, #1d4ed8, #60a5fa);
}
.media-email {
background: linear-gradient(135deg, #be185d, #f9a8d4);
}
.media-analytics {
background: linear-gradient(135deg, #0891b2, #67e8f9);
}
.media-content {
background: linear-gradient(135deg, #b45309, #fbbf24);
}
.blog-card-body {
display: flex;
height: calc(100% - 190px);
flex-direction: column;
padding: 1.35rem;
}
.blog-card-body h3 {
margin-top: 0.85rem;
font-size: 1.25rem;
}
.blog-card-body p {
flex-grow: 1;
color: var(--blog-muted);
}
.text-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 1rem;
color: var(--blog-primary);
font-weight: 800;
text-decoration: none;
}
.text-link:hover,
.text-link:focus {
color: var(--blog-primary-dark);
text-decoration: underline;
}
.sidebar-stack {
display: grid;
gap: 1rem;
}
.sidebar-widget {
padding: 1.35rem;
}
.sidebar-widget h2 {
margin-bottom: 0.9rem;
font-size: 1.18rem;
letter-spacing: -0.025em;
}
.author-widget {
text-align: center;
}
.author-avatar {
display: grid;
width: 4.5rem;
height: 4.5rem;
margin: 0 auto 1rem;
place-content: center;
border-radius: 50%;
background: var(--blog-soft);
color: var(--blog-primary);
font-size: 1.8rem;
}
.link-list {
margin: 0;
padding: 0;
list-style: none;
}
.link-list li + li {
margin-top: 0.75rem;
}
.link-list a {
color: var(--blog-heading);
font-weight: 700;
text-decoration: none;
}
.link-list a:hover,
.link-list a:focus {
color: var(--blog-primary);
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-cloud a {
display: inline-flex;
border-radius: 999px;
padding: 0.4rem 0.75rem;
background: var(--blog-soft);
color: var(--blog-primary);
font-size: 0.85rem;
font-weight: 750;
text-decoration: none;
}
.tag-cloud a:hover,
.tag-cloud a:focus {
background: var(--blog-primary);
color: var(--blog-white);
}
.newsletter-widget {
background: linear-gradient(135deg, #ffffff, #eef2ff);
}
.blog-pagination .page-link {
color: var(--blog-primary);
}
.blog-pagination .page-item.active .page-link {
border-color: var(--blog-primary);
background-color: var(--blog-primary);
}
.empty-state {
margin-top: 1.5rem;
padding: 2rem;
border: 1px dashed #cbd5e1;
border-radius: var(--blog-radius);
background: var(--blog-white);
text-align: center;
}
.empty-state i {
margin-bottom: 0.7rem;
color: var(--blog-primary);
font-size: 2rem;
}
.blog-post-item.is-hidden {
display: none !important;
}
.comments-card {
padding: clamp(1.2rem, 4vw, 2rem);
}
.comment-list {
display: grid;
gap: 1rem;
max-width: 850px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.comment-item {
padding: 1rem;
border: 1px solid var(--blog-border);
border-radius: 1rem;
background: var(--blog-white);
}
.comment-header {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.55rem;
}
.comment-header small {
color: var(--blog-muted);
}
.reply-box {
margin-top: 1rem;
}
.site-footer {
padding: 1.8rem 0;
border-top: 1px solid var(--blog-border);
color: var(--blog-muted);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.footer-links a {
color: var(--blog-primary);
font-weight: 750;
text-decoration: none;
}
.footer-links a:hover,
.footer-links a:focus {
text-decoration: underline;
}
.blog-landing-page a:focus-visible,
.blog-landing-page button:focus-visible,
.blog-landing-page input:focus-visible,
.blog-landing-page textarea:focus-visible {
outline: 3px solid rgba(79, 70, 229, 0.35);
outline-offset: 3px;
}
@media (max-width: 991.98px) {
.blog-navbar .navbar-collapse {
padding: 0.9rem 0 0.35rem;
}
.blog-navbar .nav-link {
padding: 0.7rem 0;
}
.hero-section {
padding-top: 3.5rem;
}
}
@media (max-width: 575.98px) {
.stats-grid {
grid-template-columns: 1fr;
}
.topic-filter {
flex: 1 1 auto;
}
.comment-header {
flex-direction: column;
gap: 0.1rem;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.blog-landing-page *,
.blog-landing-page *::before,
.blog-landing-page *::after {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
}
}document.addEventListener("DOMContentLoaded", function () {
"use strict";
const page = document.querySelector(".blog-landing-page");
if (!page) return;
const header = page.querySelector(".site-header");
const menuButton = page.querySelector(".menu-toggle");
const menu = page.querySelector("#primaryMenu");
const navLinks = Array.from(page.querySelectorAll(".blog-navbar .nav-link"));
const year = page.querySelector("#currentYear");
const searchInput = page.querySelector("#blogSearch");
const filterButtons = Array.from(page.querySelectorAll(".topic-filter"));
const postItems = Array.from(page.querySelectorAll(".blog-post-item"));
const resultsText = page.querySelector(".results-text");
const emptyState = page.querySelector(".empty-state");
const replyButtons = Array.from(page.querySelectorAll(".reply-toggle"));
const placeholderLinks = Array.from(page.querySelectorAll("a[href='#']"));
let activeFilter = "all";
if (year) {
year.textContent = String(new Date().getFullYear());
}
placeholderLinks.forEach(function (link) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
});
function normalize(value) {
return String(value || "").toLowerCase().trim();
}
function updateHeader() {
if (header) {
header.classList.toggle("is-scrolled", window.scrollY > 8);
}
}
function closeMenu() {
if (!menu || !menuButton) return;
menu.classList.remove("show");
menuButton.setAttribute("aria-expanded", "false");
menuButton.setAttribute("aria-label", "Open navigation menu");
}
if (menu && menuButton) {
menuButton.addEventListener("click", function () {
const isOpen = menu.classList.toggle("show");
menuButton.setAttribute("aria-expanded", String(isOpen));
menuButton.setAttribute("aria-label", isOpen ? "Close navigation menu" : "Open navigation menu");
});
navLinks.forEach(function (link) {
link.addEventListener("click", closeMenu);
});
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") closeMenu();
});
document.addEventListener("click", function (event) {
if (!menu.contains(event.target) && !menuButton.contains(event.target)) {
closeMenu();
}
});
}
function updateVisiblePosts() {
const query = normalize(searchInput ? searchInput.value : "");
let visibleCount = 0;
postItems.forEach(function (item) {
const category = normalize(item.getAttribute("data-category"));
const searchable = normalize(item.getAttribute("data-search")) + " " + normalize(item.textContent);
const matchesFilter = activeFilter === "all" || category === activeFilter;
const matchesSearch = !query || searchable.indexOf(query) !== -1;
const shouldShow = matchesFilter && matchesSearch;
item.classList.toggle("is-hidden", !shouldShow);
if (shouldShow) visibleCount += 1;
});
if (resultsText) {
resultsText.textContent = visibleCount === 1 ? "Showing 1 article." : "Showing " + visibleCount + " articles.";
}
if (emptyState) {
emptyState.hidden = visibleCount !== 0;
}
}
if (searchInput) {
searchInput.addEventListener("input", updateVisiblePosts);
}
filterButtons.forEach(function (button) {
button.addEventListener("click", function () {
activeFilter = button.getAttribute("data-filter") || "all";
filterButtons.forEach(function (currentButton) {
const isActive = currentButton === button;
currentButton.classList.toggle("active", isActive);
currentButton.setAttribute("aria-pressed", String(isActive));
});
updateVisiblePosts();
});
});
replyButtons.forEach(function (button) {
button.addEventListener("click", function () {
const targetId = button.getAttribute("data-target");
const replyBox = targetId ? page.querySelector("#" + targetId) : null;
if (!replyBox) return;
const isOpening = replyBox.hasAttribute("hidden");
replyBox.toggleAttribute("hidden", !isOpening);
button.setAttribute("aria-expanded", String(isOpening));
if (isOpening) {
const textarea = replyBox.querySelector("textarea");
if (textarea) textarea.focus();
}
});
});
if ("IntersectionObserver" in window && navLinks.length) {
const sections = navLinks
.map(function (link) {
const href = link.getAttribute("href");
return href && href.startsWith("#") ? page.querySelector(href) : null;
})
.filter(Boolean);
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
navLinks.forEach(function (link) {
link.classList.toggle("active", link.getAttribute("href") === "#" + entry.target.id);
});
}
});
}, { rootMargin: "-30% 0px -55% 0px", threshold: 0.05 });
sections.forEach(function (section) {
observer.observe(section);
});
}
updateVisiblePosts();
updateHeader();
window.addEventListener("scroll", updateHeader, { passive: true });
});