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
|
||||
- `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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
function initScrollReveal() {
|
||||
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;
|
||||
function initCursorGlow() {
|
||||
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"); }
|
||||
|
||||
const passive = { passive: true };
|
||||
document.addEventListener("mousemove", onMove, passive);
|
||||
document.addEventListener("touchmove", onMove, passive);
|
||||
document.addEventListener("mouseleave", onHide);
|
||||
document.addEventListener("mouseenter", onShow);
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
function boot () {
|
||||
function boot() {
|
||||
initScrollReveal();
|
||||
initCursorGlow();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot);
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
}
|
||||
|
||||
/* ─── 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;
|
||||
.gp-glow-active::after,
|
||||
[gp-glow]::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
17
index.md
17
index.md
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue