CapsuleX
A minimal, modern blog theme for Astro featuring a distinctive capsule-shaped floating navigation with glassmorphism design.
Design
The signature capsule navigation bar stays fixed at the top with a frosted-glass effect and pill-shaped corners. This design language extends to the footer, back-to-top button, and other UI elements for a cohesive look.
Features
Navigation & Layout
- Floating capsule navigation with backdrop blur
- Tri-state theme switcher (Auto / Light / Dark)
- Responsive mobile menu
- Matching capsule footer
Reading Experience
- Floating table of contents (desktop sidebar, mobile toggle)
- Reading progress bar
- Estimated reading time
- Pinned posts support
- Prev/Next post navigation
Content
- Callout blocks: Note, Tip, Warning, Caution
- Enhanced code blocks with filename labels and diff syntax
- One-click code copy button
- Image lightbox with keyboard navigation
- Tag-based post organization
Interaction
- Scroll fade-in animations
- View Transitions for smooth page navigation
- Back to top button
Search & Feed
- Client-side search with Fuse.js (⌘K shortcut)
- RSS feed with auto-discovery
Tech Stack
- Astro 7
- Markdown / MDX
- CSS Variables (no framework)
- Shiki syntax highlighting
- Fuse.js search
- @astrojs/rss
License
Apache 2.0
