diff --git a/_includes/base.njk b/_includes/base.njk
index f3fa797..770935e 100644
--- a/_includes/base.njk
+++ b/_includes/base.njk
@@ -15,6 +15,7 @@
--color-text-heading: #2c3e50;
--color-text-muted: #666;
--color-text-link: #3498db;
+ --color-text-link-muted: #999;
/* Backgrounds */
--color-bg-page: #fff;
--color-bg-surface: #f5f5f5;
@@ -65,6 +66,7 @@
--color-text-heading: #f0f0f0;
--color-text-muted: #a0a0a0;
--color-text-link: #5dade2;
+ --color-text-link-muted: #777;
--color-bg-page: #1a1a1a;
--color-bg-surface: #2d2d2d;
--color-bg-warning: #3d3520;
diff --git a/_includes/post.njk b/_includes/post.njk
index 1050c2f..03e44d2 100644
--- a/_includes/post.njk
+++ b/_includes/post.njk
@@ -28,9 +28,45 @@ pageType: post
Tags
{% endif %}
+
+ {% set currentIndex = -1 %}
+ {% for post in collections.posts %}
+ {% if post.url == page.url %}
+ {% set currentIndex = loop.index0 %}
+ {% endif %}
+ {% endfor %}
+
+ {% if currentIndex >= 0 %}
+ {% set prevPost = collections.posts[currentIndex - 1] if currentIndex > 0 else null %}
+ {% set nextPost = collections.posts[currentIndex + 1] if currentIndex < collections.posts.length - 1 else null %}
+
+
+ {% endif %}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 4dd619e..da40982 100644
--- a/css/style.css
+++ b/css/style.css
@@ -331,6 +331,53 @@ footer {
font-size: var(--font-size-small);
}
+/* Post Navigation */
+nav.post-navigation {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding-top: var(--space-element);
+ width: 100%;
+}
+
+.post-nav-link {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+}
+
+.post-nav-link:hover:not(.post-nav-disabled) .post-nav-title {
+ text-decoration: underline;
+}
+
+.post-nav-prev {
+ align-items: flex-start;
+ text-align: left;
+}
+
+.post-nav-next {
+ align-items: flex-end;
+ text-align: right;
+}
+
+.post-nav-label {
+ font-size: var(--font-size-small);
+ color: var(--color-text-muted);
+}
+
+.post-nav-title {
+ color: var(--color-text-link);
+ font-weight: var(--font-weight-medium);
+}
+
+.post-nav-disabled {
+ cursor: not-allowed;
+}
+
+.post-nav-disabled .post-nav-label {
+ color: var(--color-text-link-muted);
+}
+
/* Icon utilities */
.icon-invertible {
transition: filter 0.2s;