Balloon Layout Demo

Balloon layout is useful for demonstrating information step-by-step.

Clean UI with small resources. Monochrome has clean UI design with ~5KB gzipped bundled CSS.
Self-Contained. Monochrome doesn’t require webpack, nodejs and other dependencies to setup or edit, just hugo.
Responsive layout. Adapt to different viewpoint, from desktop to mobile.
Support light/dark mode. Low-light UI.
Multiple layouts built-in. Monochrome now supports 6 different layouts. See Demo.
Nested navbar and Multilingual mode. Make good use of hugo’s well-designed structure.
Syntax Highlighting (with copy feature). Integrate both server-side solution (Chroma, hugo built-in) and client-side solution (Prism.js, for someone who need more languages supported).
Site Search with real-time matches highlight. Powered by Fuse.js.
SEO-friendly. Easily change your author, description, keywords, open graph, twitter card meatdata.
Support mathematical notation. Powered by MathJax.
Useful shortcodes. See Document.