87 lines
3.7 KiB
Markdown
87 lines
3.7 KiB
Markdown
|
---
|
|||
|
|
title: Theming
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Zensical Consciousness Theme — Plan & Prompt Document
|
|||
|
|
|
|||
|
|
## 1. Goal
|
|||
|
|
|
|||
|
|
Build a nature/consciousness-themed, beautiful, pastel/iridescent, performance-safe theme
|
|||
|
|
for a multi-contributor Zensical awareness site about reigniting the God Spark within.
|
|||
|
|
|
|||
|
|
## 2. What we learned from Zensical customization
|
|||
|
|
|
|||
|
|
- Theme extension is mostly additive:
|
|||
|
|
- `zensical.toml` → `extra_css` for extra stylesheets.
|
|||
|
|
- Page templates can be overridden by placing matching files under `overrides/`.
|
|||
|
|
- Site theming is largely controlled by palette/color attributes:
|
|||
|
|
- `data-md-color-scheme`
|
|||
|
|
- `data-md-color-primary`
|
|||
|
|
- `data-md-color-accent`
|
|||
|
|
- `extra.css` is the safest layer; it shouldn’t break Zensical if it only adds selectors
|
|||
|
|
and doesn’t overwrite core layout-critical rules blindly.
|
|||
|
|
- We should keep JS minimal, lazy-friendly, and nonblocking for contributors.
|
|||
|
|
|
|||
|
|
## 3. Non-goals / constraints
|
|||
|
|
|
|||
|
|
- No TypeScript/React build pipeline rerouting.
|
|||
|
|
- No breaking built-in Zensical navigation/search/skip behavior.
|
|||
|
|
- No space/technology motif — instead: botanical/organic/aurora/nature.
|
|||
|
|
- Animations must respect load speed and reduced-motion.
|
|||
|
|
- Theme should still be readable as Markdown documentation after styling.
|
|||
|
|
|
|||
|
|
## 4. Adapting MotionSites-style prompts for Kimi
|
|||
|
|
|
|||
|
|
From the example landing-page prompts:
|
|||
|
|
|
|||
|
|
- Use: typography system, motion patterns, component thinking, copy composition.
|
|||
|
|
- Remove: React/TS/Vite/Framer Motion specifics.
|
|||
|
|
- Replace with: plain HTML/CSS + minimal vanilla JS utilities that Zensical can load.
|
|||
|
|
|
|||
|
|
## 5. Ready-to-run Kimi prompt (refined)
|
|||
|
|
|
|||
|
|
You are a web designer specializing in calm, premium editorial interfaces.
|
|||
|
|
Create a Zensical theme add-on for a consciousness/awakening awareness site.
|
|||
|
|
Theme name placeholder: "God Spark". Site title is temporary and may change later.
|
|||
|
|
|
|||
|
|
Constraints:
|
|||
|
|
|
|||
|
|
- Output must be plain HTML/CSS/JS only.
|
|||
|
|
- Must work as a Zensical `extra.css` drop-in plus optional `overrides/` partials.
|
|||
|
|
- Do NOT use React, TypeScript, Tailwind build, Framer Motion, or shadcn/ui.
|
|||
|
|
- Do NOT break Zensical core behavior.
|
|||
|
|
- Performance-first: no heavy dependencies; any JS should be small and optional.
|
|||
|
|
- Accessibility-first: readable contrast, reduced-motion safe, semantic markup.
|
|||
|
|
|
|||
|
|
Design brief:
|
|||
|
|
|
|||
|
|
- Aesthetic: futuristic pastel + iridescent, but inspired by nature rather than space/tech.
|
|||
|
|
Soft aurora-like gradients, botanical motifs, dappled-light effects, gentle watercolor-like transitions.
|
|||
|
|
- Color palette references: soft lavender, mist, pearl, sage, blush, iris, morning frost.
|
|||
|
|
- Typography: elegant serif headings, clean sans-serif body. Use standard system fonts or
|
|||
|
|
Google Fonts loaded with `preconnect` if needed.
|
|||
|
|
- Contributions UI must remain friendly for many contributors: simple class names, clear areas
|
|||
|
|
to edit content blocks, great default headings, friendly call-to-action language.
|
|||
|
|
|
|||
|
|
Functional requirements:
|
|||
|
|
|
|||
|
|
1. Provide one CSS file intended as Zensical's `extra.css` entry.
|
|||
|
|
2. Provide optional HTML/JS micro-animations:
|
|||
|
|
- fade-up reveal on scroll via IntersectionObserver
|
|||
|
|
- soft parallax cursor glow (optional, turned off by default)
|
|||
|
|
3. Provide at least 2 override template examples for `overrides/` (e.g., `main.html`, `footer.html`)
|
|||
|
|
that layer glass surfaces and brand text without removing existing placeholders.
|
|||
|
|
4. Include README with install steps, customization guidance, and contributor notes.
|
|||
|
|
|
|||
|
|
## 6. Execution plan
|
|||
|
|
|
|||
|
|
1. Create an isolated sandbox outside the project.
|
|||
|
|
2. Generate theme kit using the prompt above with Kimi.
|
|||
|
|
3. Review generated files for Zensical safety before pulling into the project.
|
|||
|
|
4. Keep the prompt in `docs/zensical-theme-plan.md` for refinement.
|
|||
|
|
|
|||
|
|
## 7. Where this is saved
|
|||
|
|
|
|||
|
|
- Path: `/home/a/w/up/docs/zensical-theme-plan.md`
|
|||
|
|
- Reuse by updating this file and rerunning Kimi from the same sandboxed branch/tree.
|