Checkpoint: iridescent theme upgrade + docs index redesign
This commit is contained in:
Tolaria
parent
134d50afe8
commit
658802994d
4 changed files with 346 additions and 494 deletions
162
docs/index.md
162
docs/index.md
|
|
@ -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
|
<p class="intro-lead">
|
||||||
- `zensical serve` - Start local web server
|
A quiet invitation into presence. This is a living space for reigniting the spark inside — not a performance, but a shared practice.
|
||||||
- `zensical build` - Build your site
|
</p>
|
||||||
|
|
||||||
## [[markdown]]
|
## How to contribute
|
||||||
|
|
||||||
## Examples
|
- **Add a reflection** — short notes, practices, or questions
|
||||||
|
- **Plant an idea** — link into new themed pages
|
||||||
### Admonitions
|
- **Tend the tone** — kind, grounded edits keep the garden coherent
|
||||||
|
|
||||||
> 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)
|
|
||||||
|
|
|
||||||
|
|
@ -1,161 +1,90 @@
|
||||||
/**
|
/**
|
||||||
* God Spark — Zensical Theme Kit (JS)
|
* Godspark Refined — Zensical Light JS
|
||||||
* Zero dependencies. ~1.5 KB minified.
|
* - Scroll reveal for `.gp-reveal`
|
||||||
*
|
* - Cursor glow via `[gp-glow]` attribute
|
||||||
* Features
|
* - Reduced-motion safe
|
||||||
* ─ IntersectionObserver scroll-reveal (class: .godspark-reveal)
|
|
||||||
* ─ Optional cursor glow (enable via [godspark-glow] attribute)
|
|
||||||
* ─ Reduced-motion fallback baked in
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
;(function () {
|
;(function () {
|
||||||
'use strict';
|
"use strict";
|
||||||
|
|
||||||
/* ── Reduced-motion preference (shared) ── */
|
|
||||||
const prefersReducedMotion = window.matchMedia(
|
const prefersReducedMotion = window.matchMedia(
|
||||||
'(prefers-reduced-motion: reduce)'
|
"(prefers-reduced-motion: reduce)"
|
||||||
).matches;
|
).matches;
|
||||||
|
|
||||||
/* ── 1. Scroll Reveal via IntersectionObserver ── */
|
function initScrollReveal() {
|
||||||
function initScrollReveal () {
|
if (prefersReducedMotion) return;
|
||||||
if (prefersReducedMotion) return; // already handled in CSS
|
|
||||||
|
|
||||||
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 = Number.isFinite(parseFloat(thresholdRaw))
|
||||||
const threshold = parseFloat(
|
? parseFloat(thresholdRaw)
|
||||||
getComputedStyle(document.documentElement)
|
: 0.12;
|
||||||
.getPropertyValue('--godspark-reveal-threshold')
|
|
||||||
) || 0.12;
|
|
||||||
|
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
(entries) => {
|
(entries) => {
|
||||||
entries.forEach((entry) => {
|
entries.forEach((entry) => {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
entry.target.classList.add('is-visible');
|
entry.target.classList.add("is-visible");
|
||||||
observer.unobserve(entry.target); // fire once
|
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() {
|
||||||
function initCursorGlow () {
|
const el = document.documentElement;
|
||||||
// Only run if [godspark-glow] is present on <html> or <body>
|
const enabled =
|
||||||
if (!document.documentElement.hasAttribute('godspark-glow') &&
|
el.hasAttribute("gp-glow") || el.classList.contains("gp-glow-active");
|
||||||
!document.body.hasAttribute('godspark-glow')) {
|
|
||||||
return;
|
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
|
function onMove(e) {
|
||||||
|
if (raf) return;
|
||||||
// Add a class for the CSS ::after pseudo-element to pick up
|
raf = true;
|
||||||
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;
|
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
const clientX = e.touches ? e.touches[0].clientX : e.clientX;
|
const cx = e.touches ? e.touches[0].clientX : e.clientX;
|
||||||
const clientY = e.touches ? e.touches[0].clientY : e.clientY;
|
const cy = e.touches ? e.touches[0].clientY : e.clientY;
|
||||||
cursorEl.style.left = clientX + 'px';
|
setGlow(cx, cy);
|
||||||
cursorEl.style.top = clientY + 'px';
|
raf = false;
|
||||||
rafPending = false;
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function onPointerLeave () {
|
function onHide() { el.style.setProperty("--gp-glow-opacity", "0"); }
|
||||||
cursorEl.style.opacity = '0';
|
function onShow() { el.style.setProperty("--gp-glow-opacity", "1"); }
|
||||||
}
|
|
||||||
|
|
||||||
function onPointerEnter () {
|
const passive = { passive: true };
|
||||||
cursorEl.style.opacity = '1';
|
document.addEventListener("mousemove", onMove, passive);
|
||||||
}
|
document.addEventListener("touchmove", onMove, passive);
|
||||||
|
document.addEventListener("mouseleave", onHide);
|
||||||
document.addEventListener('mousemove', onPointerMove, { passive: true });
|
document.addEventListener("mouseenter", onShow);
|
||||||
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 ── */
|
function boot() {
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', boot);
|
|
||||||
} else {
|
|
||||||
boot();
|
|
||||||
}
|
|
||||||
|
|
||||||
function boot () {
|
|
||||||
initScrollReveal();
|
initScrollReveal();
|
||||||
initCursorGlow();
|
initCursorGlow();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", boot);
|
||||||
|
} else {
|
||||||
|
boot();
|
||||||
|
}
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,92 @@
|
||||||
/*
|
/*
|
||||||
* God Spark — Zensical Theme Kit
|
* Godspark Refinement — Zensical Theme
|
||||||
* Nature/consciousness theme: legible, calm, organic
|
* Nature + futuristic aurora pastel/iridescent upgrade.
|
||||||
|
* Additive CSS layer. Preserves toolbar readability.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* ─── Design Tokens ─── */
|
|
||||||
:root {
|
:root {
|
||||||
--godspark-bg: #f6fbf7; /* soft morning mist */
|
/* Refined iris palette */
|
||||||
--godspark-surface: #ffffff;
|
--gp-bg: #f6fbf7;
|
||||||
--godspark-text: #1f2e1d; /* deep forest text */
|
--gp-surface: #ffffff;
|
||||||
--godspark-text-muted: #4f5d4b;
|
--gp-text: #1c2b1c;
|
||||||
--godspark-primary: #6b8f71; /* sage */
|
--gp-text-muted: #4e5e4b;
|
||||||
--godspark-secondary: #a3c4a8; /* leaf mist */
|
--gp-primary: #7aaa8e; /* sage iridescence */
|
||||||
--godspark-tertiary: #e8d5b7; /* warm sand */
|
--gp-secondary: #a8c5b6;
|
||||||
--godspark-accent: #8da87d; /* moss */
|
--gp-tertiary: #e9dfc6;
|
||||||
--godspark-iridescent: linear-gradient(135deg, #e8f0e8, #c8d9c4, #a3c4a8, #d4cfb8, #c2d1c0);
|
--gp-accent: #b9a5d7; /* soft aurora purple */
|
||||||
--godspark-aurora: linear-gradient(160deg,
|
|
||||||
#f4f9f1 0%, #eaf2e4 25%, #f7f4ed 50%, #eef1f0 75%, #f6fbf7 100%);
|
/* Iridescent atmosphere tokens */
|
||||||
--godspark-card-bg: rgba(255, 255, 255, 0.78);
|
--gp-iris-1: #f1f6f3;
|
||||||
--godspark-card-border: rgba(107, 143, 113, 0.22);
|
--gp-iris-2: #eef3f6;
|
||||||
--godspark-glow: rgba(141, 168, 125, 0.35);
|
--gp-iris-3: #f6f2f8;
|
||||||
--godspark-glow-intense: rgba(107, 143, 113, 0.75);
|
--gp-iris-4: #f5f1ec;
|
||||||
--godspark-duration: 0.7s;
|
|
||||||
--godspark-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
|
--gp-aurora-iris: linear-gradient(
|
||||||
--godspark-distance: 24px;
|
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 {
|
body {
|
||||||
background-color: var(--godspark-bg);
|
background-color: var(--gp-bg);
|
||||||
background-image: var(--godspark-aurora);
|
background-image:
|
||||||
background-size: 400% 400%;
|
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;
|
background-attachment: fixed;
|
||||||
color: var(--godspark-text);
|
background-size: 100% 100%, 100% 100%, 200% 200%;
|
||||||
|
color: var(--gp-text);
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Subtle animated aurora — reduced-motion safe */
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
body {
|
body.godspark-breathe {
|
||||||
animation: godspark-breathe 28s ease-in-out infinite;
|
animation: gp-breathe 36s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
@keyframes godspark-breathe {
|
@keyframes gp-breathe {
|
||||||
0%, 100% { background-position: 0% 50%; }
|
0%, 100% { background-position: 0 0, 0 0, 0% 50%; }
|
||||||
50% { background-position: 100% 50%; }
|
50% { background-position: 0 0, 0 0, 100% 50%; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Typography (solid, legible, no cycling) ─── */
|
/* Typography */
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6,
|
||||||
.zensical article h1,
|
article h1, article h2, article h3 {
|
||||||
.zensical article h2,
|
|
||||||
.zensical article h3 {
|
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
letter-spacing: -0.015em;
|
letter-spacing: -0.012em;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
color: var(--godspark-text);
|
color: var(--gp-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--godspark-primary);
|
color: var(--gp-primary);
|
||||||
text-decoration-thickness: 1px;
|
text-decoration-thickness: 1px;
|
||||||
text-underline-offset: 3px;
|
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 {
|
a:hover {
|
||||||
color: var(--godspark-accent);
|
color: var(--gp-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Layout helpers ─── */
|
/* Layout helpers */
|
||||||
.zensical article,
|
.zensical article,
|
||||||
.zensical .content,
|
.zensical .content,
|
||||||
main,
|
main, article {
|
||||||
article {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -85,125 +99,200 @@ section {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Cards ─── */
|
/* Cards */
|
||||||
.zensical .card,
|
.zensical .card,
|
||||||
.zensical article section,
|
|
||||||
section.card,
|
section.card,
|
||||||
div.card,
|
div.card,
|
||||||
article.card {
|
article.card,
|
||||||
background: var(--godspark-card-bg);
|
article section,
|
||||||
border: 1px solid var(--godspark-card-border);
|
main section {
|
||||||
border-radius: 18px;
|
background: var(--gp-card-bg);
|
||||||
backdrop-filter: blur(12px) saturate(130%);
|
border: 1px solid var(--gp-card-border);
|
||||||
-webkit-backdrop-filter: blur(12px) saturate(130%);
|
border-radius: 22px;
|
||||||
|
backdrop-filter: blur(14px) saturate(145%);
|
||||||
|
-webkit-backdrop-filter: blur(14px) saturate(145%);
|
||||||
padding: 1.6rem 1.8rem;
|
padding: 1.6rem 1.8rem;
|
||||||
box-shadow:
|
box-shadow: var(--gp-card-shadow);
|
||||||
0 4px 20px rgba(107, 143, 113, 0.08),
|
|
||||||
0 1px 3px rgba(0, 0, 0, 0.03);
|
|
||||||
transition:
|
transition:
|
||||||
transform var(--godspark-duration) var(--godspark-ease),
|
transform var(--gp-duration) var(--gp-ease),
|
||||||
box-shadow var(--godspark-duration) var(--godspark-ease),
|
box-shadow var(--gp-duration) var(--gp-ease),
|
||||||
border-color 0.3s ease;
|
border-color 0.3s ease;
|
||||||
}
|
}
|
||||||
.zensical .card:hover,
|
.zensical .card:hover,
|
||||||
section.card:hover,
|
section.card:hover,
|
||||||
div.card:hover,
|
div.card:hover,
|
||||||
article.card:hover {
|
article.card:hover {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-4px);
|
||||||
box-shadow:
|
border-color: rgba(122, 170, 150, 0.48);
|
||||||
0 12px 36px rgba(107, 143, 113, 0.14),
|
box-shadow: var(--gp-card-hover);
|
||||||
0 2px 6px rgba(0, 0, 0, 0.04);
|
|
||||||
border-color: rgba(107, 143, 113, 0.45);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Code blocks — careful not to break Zensical toolbars ─── */
|
/* Homepage hero panels */
|
||||||
pre {
|
.hero-media,
|
||||||
background: rgba(255, 255, 255, 0.82);
|
.godspark-hero {
|
||||||
border: 1px solid var(--godspark-card-border);
|
margin: 1.2rem 0 2rem;
|
||||||
border-radius: 14px;
|
border-radius: 22px;
|
||||||
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;
|
|
||||||
overflow: hidden;
|
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 {
|
.hero-media img,
|
||||||
background: linear-gradient(135deg, var(--godspark-primary), var(--godspark-accent));
|
.godspark-hero img {
|
||||||
color: #fff;
|
display: block;
|
||||||
font-weight: 550;
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 380px;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
td {
|
.hero-media figcaption,
|
||||||
background: var(--godspark-surface);
|
.godspark-hero figcaption {
|
||||||
border-bottom: 1px solid rgba(107, 143, 113, 0.12);
|
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,
|
button.cta,
|
||||||
a.cta,
|
a.cta,
|
||||||
.zensical .cta,
|
.zensical .cta,
|
||||||
button[class*="godspark"],
|
button[class*="godspark"],
|
||||||
a[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;
|
color: #fff;
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
border: none;
|
border: 1px solid rgba(122, 170, 150, 0.24);
|
||||||
border-radius: 50px;
|
border-radius: 999px;
|
||||||
padding: 0.55em 1.5em;
|
padding: 0.55em 1.5em;
|
||||||
cursor: pointer;
|
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;
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.45em;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
button.cta:hover,
|
button.cta:hover,
|
||||||
a.cta:hover,
|
a.cta:hover,
|
||||||
.zensical .cta:hover,
|
.zensical .cta:hover,
|
||||||
button[class*="godspark"]:hover,
|
button[class*="godspark"]:hover,
|
||||||
a[class*="godspark"]:hover {
|
a[class*="godspark"]:hover {
|
||||||
opacity: 0.92;
|
opacity: 0.96;
|
||||||
box-shadow: 0 4px 18px var(--godspark-glow);
|
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 {
|
.godspark-reveal {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(var(--godspark-distance));
|
transform: translateY(var(--gp-distance));
|
||||||
transition:
|
transition:
|
||||||
opacity var(--godspark-duration) var(--godspark-ease),
|
opacity var(--gp-duration) var(--gp-ease),
|
||||||
transform var(--godspark-duration) var(--godspark-ease);
|
transform var(--gp-duration) var(--gp-ease);
|
||||||
}
|
}
|
||||||
.godspark-reveal.is-visible {
|
.godspark-reveal.is-visible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -211,10 +300,10 @@ a[class*="godspark"]:hover {
|
||||||
}
|
}
|
||||||
.godspark-reveal.is-visible > * {
|
.godspark-reveal.is-visible > * {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(var(--godspark-distance));
|
transform: translateY(var(--gp-distance));
|
||||||
transition:
|
transition:
|
||||||
opacity var(--godspark-duration) var(--godspark-ease),
|
opacity var(--gp-duration) var(--gp-ease),
|
||||||
transform var(--godspark-duration) var(--godspark-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(1) { transition-delay: 0.00s; }
|
||||||
.godspark-reveal.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
|
.godspark-reveal.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
|
||||||
|
|
@ -227,56 +316,36 @@ a[class*="godspark"]:hover {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Tone: disable cycling header colors ─── */
|
/* Cursor glow (opt-in attribute) */
|
||||||
.md-header, .md-header__inner, .md-header__button, .md-icon {
|
[gp-glow]::after,
|
||||||
animation: none !important;
|
.gp-glow-active::after {
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── 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 {
|
|
||||||
content: "";
|
content: "";
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 360px;
|
width: 400px;
|
||||||
height: 360px;
|
height: 400px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 999999;
|
z-index: 999998;
|
||||||
background: radial-gradient(
|
background: radial-gradient(
|
||||||
circle,
|
circle,
|
||||||
rgba(141, 168, 125, 0.22) 0%,
|
rgba(141, 184, 160, 0.30) 0%,
|
||||||
rgba(107, 143, 113, 0.08) 35%,
|
rgba(160, 130, 210, 0.16) 32%,
|
||||||
transparent 70%
|
transparent 68%
|
||||||
);
|
);
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
transition: opacity 0.4s ease;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
will-change: transform, opacity;
|
left: -400px;
|
||||||
|
top: -400px;
|
||||||
|
transition: opacity 0.45s ease;
|
||||||
|
will-change: left, top, opacity;
|
||||||
}
|
}
|
||||||
[godspark-glow]::after,
|
[gp-glow]::after,
|
||||||
.godspark-glow-active::after {
|
.gp-glow-active::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@media (prefers-reduced-motion: reduce) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
[godspark-glow]::after,
|
[gp-glow]::after,
|
||||||
.godspark-glow-active::after {
|
.gp-glow-active::after {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.godspark-reveal {
|
.godspark-reveal {
|
||||||
|
|
@ -291,33 +360,50 @@ h1, h2, h3, h4, h5, h6,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Selection ─── */
|
/* Scrollbar */
|
||||||
::selection {
|
|
||||||
background: var(--godspark-primary);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
:focus-visible {
|
|
||||||
outline: 2px solid var(--godspark-primary);
|
|
||||||
outline-offset: 3px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Scrollbar ─── */
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: var(--godspark-bg);
|
background: var(--gp-bg);
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: linear-gradient(180deg,
|
background: linear-gradient(180deg,
|
||||||
var(--godspark-primary),
|
var(--gp-primary),
|
||||||
var(--godspark-accent),
|
var(--gp-accent),
|
||||||
var(--godspark-secondary));
|
var(--gp-secondary));
|
||||||
border-radius: 99px;
|
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 {
|
@media print {
|
||||||
body {
|
body {
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
|
|
@ -326,32 +412,8 @@ h1, h2, h3, h4, h5, h6,
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
color: #000 !important;
|
color: #000 !important;
|
||||||
}
|
}
|
||||||
.godspark-glow-active::after,
|
.gp-glow-active::after,
|
||||||
[godspark-glow]::after { display: none !important; }
|
[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
17
index.md
|
|
@ -5,15 +5,12 @@
|
||||||
<figcaption>Nature is the oldest teacher of awareness.</figcaption>
|
<figcaption>Nature is the oldest teacher of awareness.</figcaption>
|
||||||
</figure>
|
</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.
|
## How to contribute
|
||||||
Multiple voices are welcome. Gentle contributions grow the whole site.
|
|
||||||
|
|
||||||
## What you can do here
|
- **Add a reflection** — short notes, practices, or questions
|
||||||
|
- **Plant an idea** — link into new themed pages
|
||||||
- **Share what calls to you** — add a short note, reflection, or practice
|
- **Tend the tone** — kind, grounded edits keep the garden coherent
|
||||||
- **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.
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue