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, and the implementation keeps a single Tailwind source pipeline with conventions documented in CLAUDE.md.
- Glassmorphism panels with configurable background image and 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, with CJK falling through to system fonts
- Print-optimized styles with clean typography, exposed link URLs, and hidden chrome
- KaTeX math, Mermaid diagrams, Material-palette syntax highlighting
- Optional lightGallery overlay for article figures and Twikoo content images
- Per-post comments via a thin provider dispatcher (Twikoo built in, other providers via a site partial)
- Optional Twikoo view counts for posts and standalone pages
- Directive-based shortcodes (music and Bilibili embeds, link cards)
- Featured images on the post banner, home cards, and 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, lightGallery, Mermaid, Twikoo)
- Phase-scoped dep loading, with each dep emitted once per page and gated on actual content needs
- Content-hashed URLs for local CSS and JavaScript entry assets
- 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.lightgallery], [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), a private build input that kiln skipsstatic/css/style.css: compiled Tailwind output, shippedstatic/js/{comments,content,layout,listing,util}/*.js: JS sources, shipped as-is with 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.