From 05f33a6e1059e84c309c5f674e094ed3b1105134 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Sat, 18 Apr 2026 20:54:50 +0200 Subject: feat: add prev/next article navigation with shell prompt style Add top and bottom navigation between sequential articles with hacker aesthetic: - Top nav: [visitor@danix.xyz articles]$ cd - Bottom nav: [visitor@danix.xyz articles]$ ls ../ - Missing link shows dimmed placeholder (beginning/end) - Only renders on articles, not static pages - New partial: article-nav.html - Styling: monospace prompt in accent color, hover links with transition Co-Authored-By: Claude Haiku 4.5 --- themes/danix-xyz-hacker/assets/css/main.min.css | 54 +++++++++++++++++++++++++ 1 file changed, 54 insertions(+) (limited to 'themes/danix-xyz-hacker/assets/css/main.min.css') diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css index d928b7a..942d401 100644 --- a/themes/danix-xyz-hacker/assets/css/main.min.css +++ b/themes/danix-xyz-hacker/assets/css/main.min.css @@ -1632,6 +1632,56 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { /* Hero typography with fluid sizing */ +/* ---- Article prev/next navigation ---- */ + +.article-nav { + border-color: var(--border); +} + + + .frosted-bar.article-nav { + border-color: var(--border); +} + +.article-nav { + border-top-width: 1px; + border-color: var(--border); + padding-top: 1.5rem; +} + +.article-nav-prompt { + margin-bottom: 0.5rem; + font-family: JetBrains Mono, monospace; + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--accent); +} + +.article-nav-links { + display: flex; + align-items: center; + justify-content: space-between; + font-family: JetBrains Mono, monospace; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.article-nav-link { + color: var(--text); + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.article-nav-link:hover { + color: var(--accent); +} + +.article-nav-placeholder { + color: var(--text-dim); + opacity: 0.4; +} + .sr-only { position: absolute; width: 1px; @@ -1935,6 +1985,10 @@ article.border.border-border\/30.rounded-lg.card.group.bg-bg { max-width: 80rem; } +.max-w-\[45\%\] { + max-width: 45%; +} + .max-w-lg { max-width: 32rem; } -- cgit v1.2.3