:root {
--primary-color: #2d3436;
--accent-color: #0984e3;
--text-gray: #636e72;
--border-light: #dfe6e9;
--bg-body: #f9f9f9;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
margin: 0;
background-color: var(--bg-body);
color: var(--primary-color);
}
/* Layout Container */
.container {
display: grid;
grid-template-columns: 1fr 300px; /* Main content | Sidebar */
gap: 50px;
max-width: 1100px;
margin: 40px auto;
padding: 0 20px;
}
/* Main Content Styling */
.blog-posts article {
background: white;
padding: 30px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.post-meta {
font-size: 0.85rem;
color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
h2 { margin: 0 0 15px 0; font-size: 1.8rem; }
p { color: var(--text-gray); }
/* Sidebar History Styling */
.history-sidebar {
position: sticky;
top: 20px;
height: fit-content;
}
.history-sidebar h3 {
font-size: 1.2rem;
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
margin-bottom: 20px;
}
.year-block { } /*Add coloring or whatever you want to the YEAR 2026*/
.year-label {
font-weight: bold;
font-size: 1.1rem;
display: block;
margin-bottom: 10px;
}
.month-block {
margin-left: 15px;
padding-left: 15px;
border-left: 1px solid var(--border-light);
margin-bottom: 15px;
}
.month-label {
font-size: 0.9rem;
color: var(--text-gray);
margin-bottom: 8px;
display: block;
}
.day-list {
list-style: none;
padding: 0;
margin: 0;
}
.day-item {
font-size: 0.85rem;
margin-bottom: 6px;
display: flex;
align-items: baseline;
}
.day-number {
font-weight: bold;
color: var(--accent-color);
min-width: 25px;
}
.day-item a {
text-decoration: none;
color: var(--primary-color);
transition: color 0.2s;
}
.day-item a:hover {
color: var(--accent-color);
}
/* Responsive Design */
@media (max-width: 850px) {
.container { grid-template-columns: 1fr; }
.history-sidebar { position: static; order: 2; }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Blog | History Navigation</title>
<link rel="stylesheet" href="Blog.css">
</head>
<body>
<header style="text-align:center; padding: 60px 0; background: white; border-bottom: 1px solid var(--border-light);">
<h1 style="margin:0; letter-spacing: -1px;">Journal Notes</h1>
<p style="color: var(--text-gray);">Thoughts on Design & Development</p>
</header>
<div class="container">
<!-- Main Article Feed -->
<main class="blog-posts">
<article>
<div class="post-meta">March 04, 2026</div>
<h2>Building the Perfect Sidebar</h2>
<p>The sidebar is often overlooked, but it's the anchor of any long-form blog. By organizing your history by year and day, you provide a clear roadmap of your creative journey...</p>
<a href="#" style="color: var(--accent-color); font-weight: bold; text-decoration: none;">Read Article →</a>
</article>
<article>
<div class="post-meta">February 12, 2026</div>
<h2>Why Minimalist UI Matters</h2>
<p>Minimalism isn't about removing elements; it's about making the remaining elements work harder. When the UI gets out of the way, the content becomes the hero...</p>
<a href="#" style="color: var(--accent-color); font-weight: bold; text-decoration: none;">Read Article →</a>
</article>
</main>
<!-- History Sidebar -->
<aside class="history-sidebar">
<h3>Archive</h3>
<!-- Year 2026 -->
<div class="year-block">
<details>
<summary class="year-label">2026</summary >
<details class="month-block">
<summary class="month-label">March</summary >
<ul class="day-list">
<li class="day-item"><span class="day-number">04</span> <a href="#">Building the Perfect Sidebar</a></li>
<li class="day-item"><span class="day-number">01</span> <a href="#">Spring Design Trends</a></li>
</ul>
</details>
<details class="month-block">
<summary class="month-label">February</summary >
<ul class="day-list">
<li class="day-item"><span class="day-number">12</span> <a href="#">Why Minimalist UI Matters</a></li>
</ul>
</details>
</div>
<!-- Year 2025 -->
<div class="year-block">
<details>
<summary class="year-label">2025</summary >
<details class="month-block">
<summary class="month-label">December</summary >
<ul class="day-list">
<li class="day-item"><span class="day-number">24</span> <a href="#">Year in Review</a></li>
</ul>
</details>
</div>
</aside>
</div>
</body>
</html>