A clean, feature-rich theme for kiln — inspired by Hugo LoveIt.
IgnIt is a kiln theme built with Tailwind CSS v4 and MiniJinja templates. The visual design centers on glassmorphism over a configurable background image; the implementation keeps a single Tailwind source pipeline with conventions documented in CLAUDE.md.
- Glassmorphism panels with configurable background image; optional cursor-tracking glow (off by default)
- Dark / light mode with system preference detection and flash-free manual toggle
- Self-hosted Inter Variable + Maple Mono webfonts; CJK falls through to system fonts
- Print-optimized styles — clean typography, exposed link URLs, hidden chrome
- KaTeX math, Mermaid diagrams, Material-palette syntax highlighting
- Per-post comments via a thin provider dispatcher (Twikoo today; Giscus / Waline drop-in)
- Directive-based shortcodes (music embeds, link cards, etc.)
- Featured image surfaces — post banner, home / listing cards, OG / Twitter Card meta
- Sticky TOC sidebar (desktop) and collapsible TOC (mobile)
- Home page image cards with gradient overlays and desktop hover reveal
- Tag cloud, year-grouped archive, numbered pagination with page-jump
- Back-to-top + jump-to-comments float buttons (scroll-position-aware)
- Mobile menu with staggered item fade-in
- All CDN deps exact-pinned with SRI hashes (FontAwesome, KaTeX, Mermaid, Twikoo)
- Phase-scoped dep loading — each dep emitted once per page, gated on actual content needs
- LQIP wrappers paint kiln's base64 backdrop while sources decode
- Keyboard-accessible focus states (
:focus-visible), skip-to-content link, semantic landmark regions prefers-reduced-motionhonored across animations and smooth-scroll
| Document | Description |
|---|---|
| Customization | Override visual tokens, templates, social icons, comments, fonts, and static assets |
| Parameters | [params] schema reference — defaults, types, where each value is rendered |
| i18n | Translatable string reference — keys, English defaults, override pattern |
Add IgnIt to your kiln site as a Git submodule:
git submodule add https://github.com/hakula139/IgnIt.git themes/IgnItThen set it in your config.toml:
theme = "IgnIt"static/css/style.css ships pre-built, so consuming sites don't need Node.js.
A minimal config.toml to get IgnIt running:
theme = "IgnIt"
title = "My Site"
language = "en"
[params]
fontawesome = true
[params.home.profile]
avatar = "/images/avatar.webp"
title = "Site Title"
subtitle = "An optional tagline"
[[menu.main]]
name = "Posts"
url = "/posts/"
icon = "fas fa-archive"
weight = 1
[[menu.social]]
name = "GitHub"
url = "https://github.com/example"
icon = "svg:github"
weight = 1
external = trueFor the complete schema ([params.background], [params.comments], [params.footer], [params.section], [params.effects]) and the full menu field list, see Parameters. For visual customization, social icon overrides, comment provider wiring, and other extension patterns, see Customization.
All assets live under static/:
static/css/_src/— Tailwind sources (entry, partials); private build input, skipped by kilnstatic/css/style.css— compiled Tailwind output, shippedstatic/js/{comments,content,layout,listing}/*.js— JS sources, shipped as-is (no build step)
pnpm install # Install dev dependencies (Tailwind CLI, ESLint, Prettier)
pnpm dev # Watch mode — rebuilds static/css/style.css on changes
pnpm build # One-shot CSS buildCompression for both CSS and JS is handled at deploy time by kiln build --minify, so sources stay readable in the dev server for debugging.
For deeper architectural notes (CSS layering, dependency registry, build pipeline, coding conventions), see CLAUDE.md.
Copyright (c) 2026 Hakula. Licensed under the MIT License.