Skip to content

Commit 947d036

Browse files
mbuotidemmbuotidem
committed
Add sidebar
1 parent 1cec2d7 commit 947d036

5 files changed

Lines changed: 434 additions & 1 deletion

File tree

‎config.toml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,14 @@ copyright = "© $CURRENT_YEAR Isaac M $SEPARATOR Except where otherwise noted ,
2626
# Canonical URL base - ensures all pages have proper canonical tags
2727
base_canonical_url = "https://misaac.me"
2828

29+
# Custom stylesheets
30+
stylesheets = ["custom-sidebar.css"]
31+
2932
menu = [
3033
{ name = "blog", url = "blog", trailing_slash = true },
34+
{ name = "archive", url = "archive", trailing_slash = true },
3135
{ name = "linkedin", external_url = "https://www.linkedin.com/in/miisaac/", trailing_slash = false },
3236
{ name = "github", external_url = "https://github.com/mbuotidem/", trailing_slash = false },
33-
#{ name = "archive", url = "archive", trailing_slash = true },
3437
{ name = "tags", url = "tags", trailing_slash = true },
3538
]
3639

‎content/archive/_index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
+++
2+
title = "Archive"
3+
template = "archive.html"
4+
+++

‎static/custom-sidebar.css‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
/* Custom two-column layout with sidebar */
2+
3+
/* Align navbar with content grid */
4+
.navbar {
5+
max-width: 1200px;
6+
margin: 0 auto;
7+
padding-left: 1rem;
8+
padding-right: 1rem;
9+
}
10+
11+
.layout-container {
12+
display: grid;
13+
grid-template-columns: minmax(0, 900px) 280px;
14+
gap: 3rem;
15+
max-width: 1200px;
16+
margin: 0 auto;
17+
padding: 0 1rem;
18+
justify-content: center;
19+
}
20+
21+
.main-content {
22+
min-width: 0; /* Prevents grid blowout */
23+
}
24+
25+
/* Mobile browse section - shows at top */
26+
.mobile-browse {
27+
display: none;
28+
margin: 2rem 0;
29+
padding: 1.5rem;
30+
background: var(--background-secondary, #f9f9f9);
31+
border-radius: 8px;
32+
}
33+
34+
.mobile-browse h3 {
35+
font-size: 1rem;
36+
font-weight: 600;
37+
margin-bottom: 1rem;
38+
text-transform: uppercase;
39+
letter-spacing: 0.05em;
40+
}
41+
42+
.mobile-browse-grid {
43+
display: grid;
44+
grid-template-columns: 1fr 1fr;
45+
gap: 1.5rem;
46+
}
47+
48+
.mobile-browse-section h4 {
49+
font-size: 0.85rem;
50+
font-weight: 600;
51+
margin-bottom: 0.5rem;
52+
opacity: 0.7;
53+
}
54+
55+
.mobile-browse-list {
56+
list-style: none;
57+
padding: 0;
58+
margin: 0;
59+
font-size: 0.85rem;
60+
}
61+
62+
.mobile-browse-list li {
63+
margin-bottom: 0.4rem;
64+
}
65+
66+
.mobile-browse-list a {
67+
text-decoration: none;
68+
}
69+
70+
.mobile-browse-list a:hover {
71+
text-decoration: underline;
72+
}
73+
74+
.mobile-browse-tags {
75+
display: flex;
76+
flex-wrap: wrap;
77+
gap: 0.4rem;
78+
}
79+
80+
.mobile-browse-tags a {
81+
display: inline-block;
82+
padding: 0.2rem 0.6rem;
83+
background: var(--background-tertiary, #e8e8e8);
84+
border-radius: 1rem;
85+
font-size: 0.75rem;
86+
text-decoration: none;
87+
}
88+
89+
.mobile-browse-tags a:hover {
90+
background: var(--background-body, #ddd);
91+
}
92+
93+
/* Sidebar Styles */
94+
.sidebar {
95+
padding: 2rem 0;
96+
position: sticky;
97+
top: 2rem;
98+
height: fit-content;
99+
max-height: calc(100vh - 4rem);
100+
overflow-y: auto;
101+
}
102+
103+
.sidebar-section {
104+
margin-bottom: 2.5rem;
105+
}
106+
107+
.sidebar-section h3 {
108+
font-size: 1rem;
109+
font-weight: 600;
110+
margin-bottom: 1rem;
111+
text-transform: uppercase;
112+
letter-spacing: 0.05em;
113+
opacity: 0.8;
114+
}
115+
116+
.sidebar-list {
117+
list-style: none;
118+
padding: 0;
119+
margin: 0;
120+
}
121+
122+
.sidebar-list li {
123+
margin-bottom: 0.75rem;
124+
line-height: 1.4;
125+
}
126+
127+
.sidebar-list a {
128+
text-decoration: none;
129+
display: block;
130+
font-size: 0.9rem;
131+
}
132+
133+
.sidebar-list a:hover {
134+
text-decoration: underline;
135+
}
136+
137+
.sidebar-date {
138+
display: block;
139+
font-size: 0.75rem;
140+
opacity: 0.6;
141+
margin-top: 0.25rem;
142+
}
143+
144+
.sidebar-count {
145+
font-size: 0.85rem;
146+
opacity: 0.6;
147+
margin-left: 0.25rem;
148+
}
149+
150+
/* Tags in sidebar */
151+
.sidebar-tags {
152+
display: flex;
153+
flex-wrap: wrap;
154+
gap: 0.5rem;
155+
}
156+
157+
.sidebar-tag {
158+
display: inline-block;
159+
padding: 0.25rem 0.75rem;
160+
background: var(--background-secondary, #f0f0f0);
161+
border-radius: 1rem;
162+
font-size: 0.8rem;
163+
text-decoration: none;
164+
transition: background 0.2s;
165+
}
166+
167+
.sidebar-tag:hover {
168+
background: var(--background-tertiary, #e0e0e0);
169+
}
170+
171+
/* Responsive: Show mobile browse, hide sidebar */
172+
@media (max-width: 1024px) {
173+
.layout-container {
174+
grid-template-columns: 1fr;
175+
gap: 2rem;
176+
max-width: 800px;
177+
}
178+
179+
.sidebar {
180+
display: none;
181+
}
182+
183+
.mobile-browse {
184+
display: block;
185+
}
186+
}
187+
188+
/* Extra small screens - single column browse */
189+
@media (max-width: 480px) {
190+
.mobile-browse-grid {
191+
grid-template-columns: 1fr;
192+
gap: 1rem;
193+
}
194+
}
195+
196+
/* Dark mode support */
197+
[data-theme="dark"] .sidebar-tag {
198+
background: var(--background-secondary, #2a2a2a);
199+
}
200+
201+
[data-theme="dark"] .sidebar-tag:hover {
202+
background: var(--background-tertiary, #3a3a3a);
203+
}
204+
205+
/* Scrollbar styling for sidebar */
206+
.sidebar::-webkit-scrollbar {
207+
width: 6px;
208+
}
209+
210+
.sidebar::-webkit-scrollbar-track {
211+
background: transparent;
212+
}
213+
214+
.sidebar::-webkit-scrollbar-thumb {
215+
background: var(--border-color, #ccc);
216+
border-radius: 3px;
217+
}
218+
219+
.sidebar::-webkit-scrollbar-thumb:hover {
220+
background: var(--text-secondary, #999);
221+
}

‎templates/archive.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{% extends "base.html" %}
2+
3+
{% block main_content %}
4+
5+
{{ macros_page_header::page_header(title=section.title) }}
6+
7+
{# Set locale for date #}
8+
{% set date_locale = macros_translate::translate(key="date_locale", default="en_GB", language_strings=language_strings) %}
9+
10+
<div class="archive">
11+
<ul class="list-with-title">
12+
{%- set source_paths = section.extra.section_path | default(value="blog/") -%}
13+
{%- if source_paths is iterable -%}
14+
{%- set paths = source_paths -%}
15+
{%- else -%}
16+
{%- set paths = [source_paths] -%}
17+
{%- endif %}
18+
{%- set all_posts = [] -%}
19+
{%- for path in paths -%}
20+
{%- if lang == config.default_language %}
21+
{%- set section_item = get_section(path=path ~ "_index.md") -%}
22+
{%- else %}
23+
{%- set section_item = get_section(path=path ~ "_index." ~ lang ~ ".md") -%}
24+
{%- endif %}
25+
{%- set_global all_posts = all_posts | concat(with=section_item.pages) -%}
26+
{%- endfor %}
27+
28+
{# Group posts by year. #}
29+
{% set posts_by_year = all_posts | group_by(attribute="year") %}
30+
{% set years = [] %}
31+
{% for year, ignored in posts_by_year %}
32+
{% set_global years = years | concat(with=[year]) %}
33+
{% endfor %}
34+
35+
{# Iterate over sorted & reversed years (newest to oldest). #}
36+
{% for year in years | sort | reverse %}
37+
{% set posts = posts_by_year[year] %}
38+
{% if posts | length > 0 %}
39+
<li>
40+
<h2 class="listing-title" id="{{ year }}">{{ year }}</h2>
41+
<ul class="listing">
42+
{% for post in posts %}
43+
<li class="listing-item">
44+
<div class="post-time">
45+
<span class="date">
46+
{{ post.date | date(format="%d %b", locale=date_locale) }}
47+
</span>
48+
</div>
49+
<a href="{{ post.permalink }}" title="{{ post.title }}">{{ post.title }}</a>
50+
</li>
51+
{% endfor %}
52+
</ul>
53+
</li>
54+
{% endif %}
55+
{% endfor %}
56+
</ul>
57+
</div>
58+
59+
{% endblock main_content %}

0 commit comments

Comments
 (0)