diff --git a/_posts/theme/2026-07-19-Maodie.md b/_posts/theme/2026-07-19-Maodie.md new file mode 100644 index 00000000..902e5f89 --- /dev/null +++ b/_posts/theme/2026-07-19-Maodie.md @@ -0,0 +1,126 @@ +--- +layout: theme +title: Maodie +category: theme +date: 2026-07-19 +homepage: https://github.com/Lei285714/Maodie-Typora-theme +download: https://github.com/Lei285714/Maodie-Typora-theme/archive/main.zip +built-in: false +author: Lei285714 +thumbnail: maodie.png +typora-root-url: ../../ +--- + +# 圆头耄耋 · Maodie + +> 水枪也没用啊! +> +> —— Bilibili《我愿称之为史上最强战猫》02:11 + +一只为 [Typora](https://typora.io) 1.13+ 设计的耄耋主题。奶油底配深红棕字,气质沉稳、不刺眼,长时间写作不累,就是容易被哈气。 + +主题里藏了两只耄耋:一只在侧栏底部循环骑车,一只挂在文档滚动条cos跳楼基。点开任意标题,左侧会浮现对应数量的耄耋脸做层级标识。 + +在安装完成之后,你可以先阅读项目文件夹里的Function-demonstration.md,体验哈气的功能 + +## 安装 + +将 `maodie.css` 与 `maodie/` 子目录放到 Typora 主题目录(在偏好设置-外观中打开主题文件夹): + +重启打开 Typora,**菜单栏 → 主题 → maodie**,即刻生效。 + +## 设计要点 + +**12 色色板**:从米奶油底到深红棕字、从赤金到深海蓝代码字,配色板全部抽取为 CSS 变量定义在 `:root` 里,方便整体扩展或派生。 + +**两套不同色的金棕**:UI 主强调用 `#926E39` 沉稳烫金,代码字符串用 `#AE7821` 清亮金。代码字符串比 UI 主强调更显眼,因为代码阅读频率高。 + +**编辑反馈丰富**:标题进入编辑态显示层级猫脸(H1=1 只 20px、H6=6 只 10px),代码块装饰条精确盖住边框 miter 角,公式编辑区背景与文档色调同色而非 Typora 默认 `#F5F6F7` 灰。 + +**两只耄耋**:一只 GIF 在侧栏底部循环骑行,按住跳跃;一只挂在主滚动条 thumb 上,位置随滚动百分比天然移动。纯 CSS 实现,无 JS。 + +## 项目结构 + +``` +themes/ +├── maodie.css 主样式表,约 2600 行,55 节 +└── maodie/ + ├── fonts/ + │ ├── newsreader.woff2 + | ├── newsreader-italic.woff2内嵌字体 + | └── OFL.txt + ├── cat.gif 骑车耄耋 + ├── run.gif 跑步耄耋 + ├── run2.gif 跑步耄耋备选动画(替换 run.gif 即可换款) + ├── run3.gif 同上,备选 + ├── run4.gif 同上,备选 + ├── face-1.png ~ face-5.png 列表层级 marker + └── face-6.png 标题编辑态层级 marker +``` + +## 鸣谢 + +- 耄耋本耋,哈基米本基 +- 写主题时陪我熬夜的所有 Claude + +## 许可 + +随便用。如果觉得这只猫陪你待得舒服,不用感谢它,它马上来找你哈气。 + + + +# Round-headed Maodie · Maodie + +> A water gun doesn't even work! +> +> —— Bilibili, *What I'd Call the Strongest Battle Cat in History*, 02:11 + +A dark gold-brown light theme designed for [Typora](https://typora.io) 1.13+. Cream base with deep red-brown text — calm, non-glaring, easy on the eyes for long writing sessions. + +Two Maodies are hidden inside the theme: one at the bottom of the sidebar, looping on a bicycle, and one clinging to the document's scrollbar, dropping in place. Click any heading and a matching number of Maodie faces will appear on the left as a level indicator. + +After installation, start by reading the `Function-demonstration-EN.md` inside the project folder to experience the hissing for yourself. + +## Installation + +Place `maodie.css` and the `maodie/` subdirectory into the Typora themes directory. Open the theme folder via Preferences → Appearance. + +Restart Typora, then go to **Menu Bar → Themes → maodie**. Effective immediately. + +## Design Highlights + +**12-color palette**: from milk-cream base to deep red-brown text, from amber gold to deep sea blue for code. The full palette is extracted into CSS variables defined on `:root`, making it easy to extend or derive new variants. + +**Two distinct shades of gold-brown**: the UI's main accent uses `#926E39`, a steady burnt gold; code strings use `#AE7821`, a brighter clear gold. Code strings are louder than the UI accent on purpose, because code gets read more often. + +**Rich editor feedback**: headings entering edit mode show level cat faces — H1 = 1 face at 20px, H6 = 6 faces at 10px. Code block decoration bars precisely cover the border miter joints. The formula editing area's background matches the document's tone, instead of Typora's default `#F5F6F7` gray. + +**Two Maodies**: one GIF rides a bike in a loop at the bottom of the sidebar — press and hold to make it jump. The other clings to the thumb of the main scrollbar, its position naturally moving with the scroll percentage. Pure CSS, no JS. + +## Project Structure + +``` +themes/ +├── maodie.css main stylesheet, ~2600 lines, 55 sections +└── maodie/ + ├── fonts/ + │ ├── newsreader.woff2 + | ├── newsreader-italic.woff2 embedded font + | └── OFL.txt + ├── cat.gif biking Maodie + ├── run.gif running Maodie + ├── run2.gif alternative version of running Maodie + ├── run3.gif alternative version of running Maodie + ├── run4.gif alternative version of running Maodie + ├── face-1.png ~ face-5.png list level markers + └── face-6.png heading edit-mode level marker +``` + +## Credits + +- Maodie itself, Hajimi itself +- All the Claudes that kept me company through the theme writing + +## License + +Use it however you want. If you find this cat keeps you comfortable company, no need to thank it — it'll come over to hiss at you in a moment. diff --git a/media/thumbnails/maodie.png b/media/thumbnails/maodie.png index 405ce0a8..3894021d 100644 Binary files a/media/thumbnails/maodie.png and b/media/thumbnails/maodie.png differ