# About Shirone

Welcome to the demo site of **Shirone** (白音) — an expressive, anime-inspired blog theme built on the **Material 3 Expressive (M3E)** design system.

::github{repo="LyraVoid/Shirone"}

## ✦ Design & Philosophy

Shirone aims to combine the warmth of expressive anime aesthetics with the rigor of modern web engineering:

- **Dynamic Chromatic Spell**: Full dynamic HCT palette generation responding seamlessly to light/dark modes and user preferences with zero layout shifts.
- **Seamless Shell Navigation**: Persistent application shell driven by Swup for continuous music playback, smooth page transitions, and preserved state.
- **Rich Story Grimoire**: Markdown and MDX authoring with KaTeX math, Mermaid diagrams, interactive admonitions, expressive code blocks, and adaptive image galleries.
- **Zero Extra Burden**: Optional integrations (comments, analytics, music widgets) load dynamically on demand — zero DOM footprint and zero bundle overhead when disabled.

## ✦ Tech Stack

- **Framework**: [Astro 7](https://astro.build/) & [Svelte 5](https://svelte.dev/) (Runes-driven islands)
- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/) & [Stylus](https://stylus-lang.com/)
- **Design Standard**: [Material 3 Expressive](https://m3.material.io/)
- **Typography**: Outfit & Yozai (悠哉圆体) with automated build-time subsetting
- **Search Engine**: [Pagefind](https://pagefind.app/) offline full-text search

## ✦ Credits

- **Font**: [Yozai Font (悠哉字体)](https://github.com/lxgw/yozai-font) by [lxgw](https://github.com/lxgw)