aja/up
aja/up
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Checkpoint: iridescent theme upgrade + docs index redesign

Browse source
This commit is contained in:
Tolaria 2026-06-03 12:40:32 +08:00
parent 134d50afe8
commit 658802994d
4 changed files with 346 additions and 494 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
docs/index.md
View file

@ -1,156 +1,20 @@
---
icon: lucide/rocket
icon: lucide/leaf
---
# Welcome!
For full docs visit [zensical.org](https://zensical.org/docs/).
# _{site title here}_
## Commands
<figure class="godspark-hero" markdown="1">
<img src="assets/images/hero.jpg" alt="Awakening" />
<figcaption>Nature is the oldest teacher of awareness.</figcaption>
</figure>
- `zensical new` - Create a new project
- `zensical serve` - Start local web server
- `zensical build` - Build your site
<p class="intro-lead">
A quiet invitation into presence. This is a living space for reigniting the spark inside — not a performance, but a shared practice.
</p>
## [[markdown]]
## How to contribute
## Examples
### Admonitions
> Go to [documentation](https://zensical.org/docs/authoring/admonitions/)
!!! note
```text
This is a **note** admonition. Use it to provide helpful information.
```
!!! warning
```text
This is a **warning** admonition. Be careful!
```
### Details
> Go to [documentation](https://zensical.org/docs/authoring/admonitions/#collapsible-blocks)
??? info "Click to expand for more info"
```text
This content is hidden until you click to expand it.
Great for FAQs or long explanations.
```
## Code Blocks
> Go to [documentation](https://zensical.org/docs/authoring/code-blocks/)
```python
def greet(name):
print(f"Hello, {name}!") # (1)!
greet("Python")
```
1. Go to [documentation](https://zensical.org/docs/authoring/code-blocks/#code-annotations)
Code annotations allow to attach notes to lines of code.
Code can also be highlighted inline: `#!python print("Hello, Python!")`.
## Content tabs
> Go to [documentation](https://zensical.org/docs/authoring/content-tabs/)
=== "Python"
````text
``` python
print("Hello from Python!")
```
````
=== "Rust"
````text
``` rs
println!("Hello from Rust!");
```
````
## Diagrams
> Go to [documentation](https://zensical.org/docs/authoring/diagrams/)
``` mermaid
graph LR
A[Start] --> B{Error?};
B -->|Yes| C[Hmm...];
C --> D[Debug];
D --> B;
B ---->|No| E[Yay!];
```
## Footnotes
> Go to [documentation](https://zensical.org/docs/authoring/footnotes/)
Here's a sentence with a footnote.[1](#user-content-fn-1)
Hover it, to see a tooltip.
## Formatting
> Go to [documentation](https://zensical.org/docs/authoring/formatting/)
- ==This was marked (highlight)==
- ^^This was inserted (underline)^^
- ~~This was deleted (strikethrough)~~
- H~~2~~O
- A^T^A
- ++ctrl+alt+del++
## Icons, Emojis
> Go to [documentation](https://zensical.org/docs/authoring/icons-emojis/)
- :sparkles: `:sparkles:`
- :rocket: `:rocket:`
- :tada: `:tada:`
- :memo: `:memo:`
- :eyes: `:eyes:`
## Maths
> Go to [documentation](https://zensical.org/docs/authoring/math/)
$$
\cos x=\sum_{k=0}^{\infty}\frac{(-1)^k}{(2k)!}x^{2k}
$$
!!! warning "Needs configuration"\
Note that MathJax is included via a `script` tag on this page and is not\
configured in the generated default configuration to avoid including it\
in a pages that do not need it. See the documentation for details on how\
to configure it on all your pages if they are more Maths-heavy than these\
simple starter pages.
## Task Lists
> Go to [documentation](https://zensical.org/docs/authoring/lists/#using-task-lists)
- [x] Install Zensical
- [x] Configure `zensical.toml`
- [x] Write amazing documentation
- [ ] Deploy anywhere
## Tooltips
> Go to [documentation](https://zensical.org/docs/authoring/tooltips/)
[Hover me](https://example.com)
## Footnotes
1. This is the footnote. [↩](#user-content-fnref-1)
- **Add a reflection** — short notes, practices, or questions
- **Plant an idea** — link into new themed pages
- **Tend the tone** — kind, grounded edits keep the garden coherent

175
docs/javascripts/extra.js
View file

@ -1,161 +1,90 @@
/**
* God Spark — Zensical Theme Kit (JS)
* Zero dependencies. ~1.5 KB minified.
*
* Features
* ─ IntersectionObserver scroll-reveal (class: .godspark-reveal)
* ─ Optional cursor glow (enable via [godspark-glow] attribute)
* ─ Reduced-motion fallback baked in
* Godspark Refined — Zensical Light JS
* - Scroll reveal for `.gp-reveal`
* - Cursor glow via `[gp-glow]` attribute
* - Reduced-motion safe
*/
;(function () {
'use strict';
"use strict";
/* ── Reduced-motion preference (shared) ── */
const prefersReducedMotion = window.matchMedia(
'(prefers-reduced-motion: reduce)'
"(prefers-reduced-motion: reduce)"
).matches;
/* ── 1. Scroll Reveal via IntersectionObserver ── */
function initScrollReveal() {
if (prefersReducedMotion) return; // already handled in CSS
if (prefersReducedMotion) return;
const reveals = document.querySelectorAll('.godspark-reveal');
const nodes = document.querySelectorAll(".gp-reveal");
if (!nodes.length) return;
if (!reveals.length) return;
const thresholdRaw = getComputedStyle(document.documentElement)
.getPropertyValue("--gp-reveal-threshold")
.trim();
// Respect any user-set threshold via CSS variable, default 12%
const threshold = parseFloat(
getComputedStyle(document.documentElement)
.getPropertyValue('--godspark-reveal-threshold')
) || 0.12;
const threshold = Number.isFinite(parseFloat(thresholdRaw))
? parseFloat(thresholdRaw)
: 0.12;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
observer.unobserve(entry.target); // fire once
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
}
});
},
{ threshold, rootMargin: '0px 0px -40px 0px' }
{ threshold, rootMargin: "0px 0px -16px 0px" }
);
reveals.forEach((el) => observer.observe(el));
nodes.forEach((el) => observer.observe(el));
}
/* ── 2. Cursor Glow ── */
function initCursorGlow() {
// Only run if [godspark-glow] is present on <html> or <body>
if (!document.documentElement.hasAttribute('godspark-glow') &&
!document.body.hasAttribute('godspark-glow')) {
return;
const el = document.documentElement;
const enabled =
el.hasAttribute("gp-glow") || el.classList.contains("gp-glow-active");
if (!enabled) return;
if (prefersReducedMotion) return;
el.classList.add("gp-glow-active");
let raf = false;
function setGlow(x, y) {
el.style.setProperty("--gp-cursor-x", x + "px");
el.style.setProperty("--gp-cursor-y", y + "px");
}
if (prefersReducedMotion) return; // CSS already hides it
// Add a class for the CSS ::after pseudo-element to pick up
document.documentElement.classList.add('godspark-glow-active');
const glow = document.querySelector('.godspark-glow-active::after');
// We track position via a CSS custom property on the root element,
// letting the ::after pseudo consume it.
const styleEl = document.createElement('style');
styleEl.id = 'godspark-glow-dynamic';
document.head.appendChild(styleEl);
let mouseX = -400;
let mouseY = -400;
let rafPending = false;
function setGlowPosition (x, y) {
mouseX = x;
mouseY = y;
updateGlowStyle();
}
function updateGlowStyle () {
styleEl.textContent = `
:root {
--godspark-cursor-x: ${mouseX}px;
--godspark-cursor-y: ${mouseY}px;
}
`;
}
// Generate a unique glow element per page to act as the cursor-follower
const cursorEl = document.createElement('div');
cursorEl.setAttribute('aria-hidden', 'true');
cursorEl.className = 'godspark-cursor-glow';
cursorEl.style.cssText = `
position: fixed;
left: ${mouseX}px;
top: ${mouseY}px;
width: 380px;
height: 380px;
border-radius: 50%;
pointer-events: none;
z-index: 999999;
background: radial-gradient(circle,
rgba(195,174,214,0.22) 0%,
rgba(184,169,232,0.08) 35%,
transparent 70%
);
transform: translate(-50%, -50%);
touch-action: none;
will-change: left, top;
transition: none;
`;
document.body.appendChild(cursorEl);
function onPointerMove (e) {
if (rafPending) return;
rafPending = true;
function onMove(e) {
if (raf) return;
raf = true;
requestAnimationFrame(() => {
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
cursorEl.style.left = clientX + 'px';
cursorEl.style.top = clientY + 'px';
rafPending = false;
const cx = e.touches ? e.touches[0].clientX : e.clientX;
const cy = e.touches ? e.touches[0].clientY : e.clientY;
setGlow(cx, cy);
raf = false;
});
}
function onPointerLeave () {
cursorEl.style.opacity = '0';
}
function onHide() { el.style.setProperty("--gp-glow-opacity", "0"); }
function onShow() { el.style.setProperty("--gp-glow-opacity", "1"); }
function onPointerEnter () {
cursorEl.style.opacity = '1';
}
document.addEventListener('mousemove', onPointerMove, { passive: true });
document.addEventListener('touchmove', onPointerMove, { passive: true });
document.addEventListener('mouseleave', onPointerLeave);
document.addEventListener('mouseenter', onPointerEnter);
// Hide on idle after 4 s
let idleTimer;
function resetIdle () {
clearTimeout(idleTimer);
cursorEl.style.opacity = '1';
idleTimer = setTimeout(() => {
cursorEl.style.opacity = '0';
}, 4000);
}
document.addEventListener('mousemove', resetIdle, { passive: true });
resetIdle();
}
/* ── Boot ── */
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', boot);
} else {
boot();
const passive = { passive: true };
document.addEventListener("mousemove", onMove, passive);
document.addEventListener("touchmove", onMove, passive);
document.addEventListener("mouseleave", onHide);
document.addEventListener("mouseenter", onShow);
}
function boot() {
initScrollReveal();
initCursorGlow();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot);
} else {
boot();
}
})();

478
docs/stylesheets/extra.css
View file

@ -1,78 +1,92 @@
/*
* God Spark — Zensical Theme Kit
* Nature/consciousness theme: legible, calm, organic
* Godspark Refinement — Zensical Theme
* Nature + futuristic aurora pastel/iridescent upgrade.
* Additive CSS layer. Preserves toolbar readability.
*/
/* ─── Design Tokens ─── */
:root {
--godspark-bg: #f6fbf7; /* soft morning mist */
--godspark-surface: #ffffff;
--godspark-text: #1f2e1d; /* deep forest text */
--godspark-text-muted: #4f5d4b;
--godspark-primary: #6b8f71; /* sage */
--godspark-secondary: #a3c4a8; /* leaf mist */
--godspark-tertiary: #e8d5b7; /* warm sand */
--godspark-accent: #8da87d; /* moss */
--godspark-iridescent: linear-gradient(135deg, #e8f0e8, #c8d9c4, #a3c4a8, #d4cfb8, #c2d1c0);
--godspark-aurora: linear-gradient(160deg,
#f4f9f1 0%, #eaf2e4 25%, #f7f4ed 50%, #eef1f0 75%, #f6fbf7 100%);
--godspark-card-bg: rgba(255, 255, 255, 0.78);
--godspark-card-border: rgba(107, 143, 113, 0.22);
--godspark-glow: rgba(141, 168, 125, 0.35);
--godspark-glow-intense: rgba(107, 143, 113, 0.75);
--godspark-duration: 0.7s;
--godspark-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--godspark-distance: 24px;
/* Refined iris palette */
--gp-bg: #f6fbf7;
--gp-surface: #ffffff;
--gp-text: #1c2b1c;
--gp-text-muted: #4e5e4b;
--gp-primary: #7aaa8e; /* sage iridescence */
--gp-secondary: #a8c5b6;
--gp-tertiary: #e9dfc6;
--gp-accent: #b9a5d7; /* soft aurora purple */
/* Iridescent atmosphere tokens */
--gp-iris-1: #f1f6f3;
--gp-iris-2: #eef3f6;
--gp-iris-3: #f6f2f8;
--gp-iris-4: #f5f1ec;
--gp-aurora-iris: linear-gradient(
135deg,
var(--gp-iris-1), var(--gp-iris-2), var(--gp-iris-3), var(--gp-iris-4)
);
--gp-card-bg: rgba(255, 255, 255, 0.74);
--gp-card-border: rgba(122, 170, 150, 0.22);
--gp-card-shadow: 0 8px 28px rgba(122, 170, 150, 0.10);
--gp-card-hover: 0 18px 40px rgba(122, 170, 150, 0.16);
--gp-glow: rgba(141, 184, 160, 0.35);
--gp-glow-intense: rgba(160, 130, 210, 0.45);
--gp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--gp-duration: 0.78s;
--gp-distance: 20px;
}
/* ─── Base atmosphere ─── */
/* Base atmosphere */
body {
background-color: var(--godspark-bg);
background-image: var(--godspark-aurora);
background-size: 400% 400%;
background-color: var(--gp-bg);
background-image:
radial-gradient(ellipse at 12% -8%, rgba(210, 230, 240, 0.38), transparent 56%),
radial-gradient(ellipse at 88% 108%, rgba(215, 210, 235, 0.34), transparent 58%),
var(--gp-aurora-iris);
background-attachment: fixed;
color: var(--godspark-text);
background-size: 100% 100%, 100% 100%, 200% 200%;
color: var(--gp-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Subtle animated aurora — reduced-motion safe */
@media (prefers-reduced-motion: no-preference) {
body {
animation: godspark-breathe 28s ease-in-out infinite;
body.godspark-breathe {
animation: gp-breathe 36s ease-in-out infinite;
}
@keyframes godspark-breathe {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
@keyframes gp-breathe {
0%, 100% { background-position: 0 0, 0 0, 0% 50%; }
50% { background-position: 0 0, 0 0, 100% 50%; }
}
}
/* ─── Typography (solid, legible, no cycling) ─── */
/* Typography */
h1, h2, h3, h4, h5, h6,
.zensical article h1,
.zensical article h2,
.zensical article h3 {
article h1, article h2, article h3 {
font-weight: 650;
letter-spacing: -0.015em;
letter-spacing: -0.012em;
line-height: 1.2;
color: var(--godspark-text);
color: var(--gp-text);
}
a {
color: var(--godspark-primary);
color: var(--gp-primary);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.25s var(--godspark-ease), text-decoration-color 0.25s;
transition: color 0.22s var(--gp-ease), text-decoration-color 0.22s;
}
a:hover {
color: var(--godspark-accent);
color: var(--gp-accent);
}
/* ─── Layout helpers ─── */
/* Layout helpers */
.zensical article,
.zensical .content,
main,
article {
main, article {
position: relative;
z-index: 1;
}
@ -85,125 +99,200 @@ section {
z-index: 1;
}
/* ─── Cards ─── */
/* Cards */
.zensical .card,
.zensical article section,
section.card,
div.card,
article.card {
background: var(--godspark-card-bg);
border: 1px solid var(--godspark-card-border);
border-radius: 18px;
backdrop-filter: blur(12px) saturate(130%);
-webkit-backdrop-filter: blur(12px) saturate(130%);
article.card,
article section,
main section {
background: var(--gp-card-bg);
border: 1px solid var(--gp-card-border);
border-radius: 22px;
backdrop-filter: blur(14px) saturate(145%);
-webkit-backdrop-filter: blur(14px) saturate(145%);
padding: 1.6rem 1.8rem;
box-shadow:
0 4px 20px rgba(107, 143, 113, 0.08),
0 1px 3px rgba(0, 0, 0, 0.03);
box-shadow: var(--gp-card-shadow);
transition:
transform var(--godspark-duration) var(--godspark-ease),
box-shadow var(--godspark-duration) var(--godspark-ease),
transform var(--gp-duration) var(--gp-ease),
box-shadow var(--gp-duration) var(--gp-ease),
border-color 0.3s ease;
}
.zensical .card:hover,
section.card:hover,
div.card:hover,
article.card:hover {
transform: translateY(-3px);
box-shadow:
0 12px 36px rgba(107, 143, 113, 0.14),
0 2px 6px rgba(0, 0, 0, 0.04);
border-color: rgba(107, 143, 113, 0.45);
transform: translateY(-4px);
border-color: rgba(122, 170, 150, 0.48);
box-shadow: var(--gp-card-hover);
}
/* ─── Code blocks — careful not to break Zensical toolbars ─── */
pre {
background: rgba(255, 255, 255, 0.82);
border: 1px solid var(--godspark-card-border);
border-radius: 14px;
padding: 1.1rem 1.3rem;
}
code, kbd {
background: rgba(107, 143, 113, 0.10);
border: 1px solid rgba(107, 143, 113, 0.18);
border-radius: 7px;
color: var(--godspark-text);
}
/* ─── Blockquotes ─── */
blockquote {
border-left: 3px solid var(--godspark-secondary);
background: rgba(141, 168, 125, 0.08);
border-radius: 0 12px 12px 0;
padding: 0.9rem 1.2rem;
margin: 1.4rem 0;
color: var(--godspark-text-muted);
font-style: italic;
}
/* ─── HR divider ─── */
hr {
border: none;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--godspark-primary),
var(--godspark-secondary),
transparent);
margin: 2.4rem 0;
}
/* ─── Tables ─── */
table {
border-collapse: separate;
border-spacing: 0;
border-radius: 14px;
/* Homepage hero panels */
.hero-media,
.godspark-hero {
margin: 1.2rem 0 2rem;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(107, 143, 113, 0.07);
border: 1px solid var(--gp-card-border);
background:
linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.30)),
var(--gp-aurora-iris);
background-blend-mode: overlay;
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
box-shadow: var(--gp-card-shadow);
}
th {
background: linear-gradient(135deg, var(--godspark-primary), var(--godspark-accent));
color: #fff;
font-weight: 550;
.hero-media img,
.godspark-hero img {
display: block;
width: 100%;
height: auto;
max-height: 380px;
object-fit: cover;
}
td {
background: var(--godspark-surface);
border-bottom: 1px solid rgba(107, 143, 113, 0.12);
.hero-media figcaption,
.godspark-hero figcaption {
padding: 0.8rem 1rem;
color: var(--gp-text-muted);
font-size: 0.92rem;
}
/* ─── CTA buttons only (not Zensical toolbar icons) ─── */
.intro-lead {
font-size: 1.18rem;
line-height: 1.65;
color: var(--gp-text-muted);
}
/* Front-page lists */
.index main ul,
.index main ol {
padding-left: 1.2rem;
line-height: 1.75;
}
.index main ul li::marker,
.index main ol li::marker {
color: var(--gp-primary);
}
/* CTA buttons (additive only) */
button.cta,
a.cta,
.zensical .cta,
button[class*="godspark"],
a[class*="godspark"] {
background: linear-gradient(135deg, var(--godspark-primary), var(--godspark-accent));
background: linear-gradient(120deg, var(--gp-primary), var(--gp-accent));
color: #fff;
font-weight: 550;
border: none;
border-radius: 50px;
border: 1px solid rgba(122, 170, 150, 0.24);
border-radius: 999px;
padding: 0.55em 1.5em;
cursor: pointer;
transition: opacity 0.25s, box-shadow 0.25s;
transition: opacity 0.28s, box-shadow 0.28s, transform 0.28s var(--gp-ease);
text-decoration: none;
display: inline-block;
display: inline-flex;
align-items: center;
gap: 0.45em;
position: relative;
overflow: hidden;
}
button.cta:hover,
a.cta:hover,
.zensical .cta:hover,
button[class*="godspark"]:hover,
a[class*="godspark"]:hover {
opacity: 0.92;
box-shadow: 0 4px 18px var(--godspark-glow);
opacity: 0.96;
box-shadow: 0 12px 26px var(--gp-glow);
transform: translateY(-1px);
}
button.cta::after,
a.cta::after,
.zensical .cta::after,
button[class*="godspark"]::after,
a[class*="godspark"]::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, transparent, rgba(255,255,255,0.42), transparent);
background-size: 220% 100%;
background-repeat: no-repeat;
background-position: -130% 0;
pointer-events: none;
border-radius: inherit;
}
.zensical .cta:hover::after,
button[class*="godspark"]:hover::after,
a[class*="godspark"]:hover::after {
animation: gp-sheen 7s var(--gp-ease) infinite;
}
@keyframes gp-sheen {
0% { background-position: -140% 0; }
55% { background-position: 80% 0; }
100% { background-position: 80% 0; }
}
/* ─── Scroll reveal ─── */
/* Code (preserve toolbar button readability) */
pre {
background: rgba(255, 255, 255, 0.82);
border: 1px solid var(--gp-card-border);
border-radius: 14px;
padding: 1.1rem 1.3rem;
}
code, kbd {
background: rgba(122, 170, 150, 0.10);
border: 1px solid rgba(122, 170, 150, 0.18);
border-radius: 7px;
color: var(--gp-text);
}
/* Blockquotes */
blockquote {
border-left: 3px solid var(--gp-secondary);
background: rgba(141, 184, 160, 0.08);
border-radius: 0 12px 12px 0;
padding: 0.9rem 1.2rem;
margin: 1.4rem 0;
color: var(--gp-text-muted);
font-style: italic;
}
/* HR */
hr {
border: none;
height: 1px;
background: linear-gradient(90deg,
transparent,
var(--gp-primary),
var(--gp-secondary),
transparent);
margin: 2.4rem 0;
}
/* Tables */
table {
border-collapse: separate;
border-spacing: 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(122, 170, 150, 0.07);
}
th {
background: linear-gradient(135deg, var(--gp-primary), var(--gp-accent));
color: #fff;
font-weight: 550;
}
td {
background: var(--gp-surface);
border-bottom: 1px solid rgba(122, 170, 150, 0.12);
}
/* Scroll reveals */
.godspark-reveal {
opacity: 0;
transform: translateY(var(--godspark-distance));
transform: translateY(var(--gp-distance));
transition:
opacity var(--godspark-duration) var(--godspark-ease),
transform var(--godspark-duration) var(--godspark-ease);
opacity var(--gp-duration) var(--gp-ease),
transform var(--gp-duration) var(--gp-ease);
}
.godspark-reveal.is-visible {
opacity: 1;
@ -211,10 +300,10 @@ a[class*="godspark"]:hover {
}
.godspark-reveal.is-visible > * {
opacity: 0;
transform: translateY(var(--godspark-distance));
transform: translateY(var(--gp-distance));
transition:
opacity var(--godspark-duration) var(--godspark-ease),
transform var(--godspark-duration) var(--godspark-ease);
opacity var(--gp-duration) var(--gp-ease),
transform var(--gp-duration) var(--gp-ease);
}
.godspark-reveal.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.godspark-reveal.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
@ -227,56 +316,36 @@ a[class*="godspark"]:hover {
transform: translateY(0);
}
/* ─── Tone: disable cycling header colors ─── */
.md-header, .md-header__inner, .md-header__button, .md-icon {
animation: none !important;
}
/* ─── Tone: disable header color cycling backgrounds ─── */
[data-md-color-component="header"] {
animation: none !important;
}
/* ─── Tone: no shimmer on headings ─── */
h1, h2, h3, h4, h5, h6,
.zensical article h1,
.zensical article h2,
.zensical article h3 {
animation: none !important;
background: none !important;
-webkit-text-fill-color: var(--godspark-text) !important;
background-clip: unset !important;
color: var(--godspark-text);
}
/* ─── Cursor glow (opt-in via attribute) ─── */
[godspark-glow]::after,
.godspark-glow-active::after {
/* Cursor glow (opt-in attribute) */
[gp-glow]::after,
.gp-glow-active::after {
content: "";
position: fixed;
width: 360px;
height: 360px;
width: 400px;
height: 400px;
border-radius: 50%;
pointer-events: none;
z-index: 999999;
z-index: 999998;
background: radial-gradient(
circle,
rgba(141, 168, 125, 0.22) 0%,
rgba(107, 143, 113, 0.08) 35%,
transparent 70%
rgba(141, 184, 160, 0.30) 0%,
rgba(160, 130, 210, 0.16) 32%,
transparent 68%
);
transform: translate(-50%, -50%);
transition: opacity 0.4s ease;
opacity: 0;
will-change: transform, opacity;
left: -400px;
top: -400px;
transition: opacity 0.45s ease;
will-change: left, top, opacity;
}
[godspark-glow]::after,
.godspark-glow-active::after {
[gp-glow]::after,
.gp-glow-active::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
[godspark-glow]::after,
.godspark-glow-active::after {
[gp-glow]::after,
.gp-glow-active::after {
display: none !important;
}
.godspark-reveal {
@ -291,33 +360,50 @@ h1, h2, h3, h4, h5, h6,
}
}
/* ─── Selection ─── */
::selection {
background: var(--godspark-primary);
color: #fff;
}
:focus-visible {
outline: 2px solid var(--godspark-primary);
outline-offset: 3px;
border-radius: 4px;
}
/* ─── Scrollbar ─── */
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--godspark-bg);
background: var(--gp-bg);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
var(--godspark-primary),
var(--godspark-accent),
var(--godspark-secondary));
var(--gp-primary),
var(--gp-accent),
var(--gp-secondary));
border-radius: 99px;
}
/* ─── Print ─── */
/* Neutralize default Zensical color cycling without breaking toolbar icons */
.md-header,
.md-header__inner,
.md-header__button,
.md-icon,
[data-md-color-component="header"] {
animation: none !important;
}
h1, h2, h3, h4, h5, h6,
article h1, article h2, article h3 {
animation: none !important;
background: none !important;
-webkit-text-fill-color: var(--gp-text);
background-clip: unset !important;
color: var(--gp-text);
}
/* Selection/focus */
::selection {
background: var(--gp-primary);
color: #fff;
}
:focus-visible {
outline: 2px solid var(--gp-primary);
outline-offset: 3px;
border-radius: 4px;
}
/* Print */
@media print {
body {
background: #fff !important;
@ -326,32 +412,8 @@ h1, h2, h3, h4, h5, h6,
h1, h2, h3, h4, h5, h6 {
color: #000 !important;
}
.godspark-glow-active::after,
[godspark-glow]::after { display: none !important; }
.gp-glow-active::after,
[gp-glow]::after {
display: none !important;
}
/* ─── Hero image on homepage ─── */
.godspark-hero {
margin: 1.2rem 0 2rem;
border-radius: 22px;
overflow: hidden;
border: 1px solid var(--godspark-card-border);
background:
linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35)),
var(--godspark-aurora);
background-blend-mode: overlay;
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
}
.godspark-hero img {
display: block;
width: 100%;
height: auto;
max-height: 360px;
object-fit: cover;
}
.godspark-hero figcaption {
padding: 0.8rem 1rem;
color: var(--godspark-text-muted);
font-size: 0.92rem;
}

17
index.md
View file

@ -5,15 +5,12 @@
<figcaption>Nature is the oldest teacher of awareness.</figcaption>
</figure>
## A quiet invitation
<p class="intro-lead">
A quiet invitation into presence. This is a living space for reigniting the spark inside — not a performance, but a shared practice.
</p>
This is a living space for reigniting the spark inside.
Multiple voices are welcome. Gentle contributions grow the whole site.
## How to contribute
## What you can do here
- **Share what calls to you** — add a short note, reflection, or practice
- **Expand the garden** — link ideas into pages that branch and bloom
- **Keep it coherent** — small, kind edits often protect the tone best
> Awareness is not a performance. It is a presence.
- **Add a reflection** — short notes, practices, or questions
- **Plant an idea** — link into new themed pages
- **Tend the tone** — kind, grounded edits keep the garden coherent