# Prev/Next Article Navigation — Design Spec

## Context

danix.xyz articles currently have no way to navigate between sequential posts. The user wants shell-prompt-style "hacker" navigation at both the top and bottom of each article, consistent with the site's open-source/hacker soul.

## Visual Design

### Top nav (above breadcrumb)
```
[visitor@danix.xyz articles]$ cd
◄ Previous Article Title          Next Article Title ►
```

### Bottom nav (after tags section)
```
[visitor@danix.xyz articles]$ ls ../
◄ Previous Article Title          Next Article Title ►
```

- Two lines, full width of the content column (`md:col-span-2`)
- Line 1: decorative shell prompt — monospace, accent purple, not a link
- Line 2: prev on left (◄ title), next on right (title ►), both clickable
- Missing side: dimmed placeholder `◄ (beginning)` or `(end) ►`
- Both sides always rendered to keep layout balanced

## Architecture

Single reusable partial `article-nav.html` accepting:
- `page` — current Hugo page context
- `variant` — `"top"` or `"bottom"` (controls prompt command: `cd` vs `ls ../`)

Hugo variables: `.PrevInSection` / `.NextInSection` (nil-safe).

## Styling

- Font: JetBrains Mono (`font-mono`)
- Prompt color: `var(--accent)` (#a855f7 purple)
- Link hover: `hover:text-accent transition-colors`
- Placeholder: `text-text-dim opacity-40`
- Container: `border-t border-border pt-6`
- Titles truncated at `max-w-[45%]` with `truncate` to prevent collision

## Files Affected

- `layouts/partials/article-nav.html` — new partial (create)
- `layouts/articles/single.html` — insert partial top + bottom
- `layouts/_default/single.html` — insert partial top + bottom
- `assets/css/main.css` — add `.article-nav*` component classes

## Accessibility

- `aria-hidden="true"` on prompt line (decorative)
- `rel="prev"` / `rel="next"` on links (SEO + semantics)
- `title` attribute on links for full title on hover (truncation)
- `aria-label` on placeholder spans