From 06f0c739df8fef18804c0eacfce6fb06b51968e7 Mon Sep 17 00:00:00 2001 From: Tolaria Date: Wed, 3 Jun 2026 22:24:49 +0800 Subject: [PATCH] card design --- docs/practices/index.md | 12 +- docs/strategies/index.md | 10 +- docs/stylesheets/extra.css | 266 +++++++++++++++++++++++++++++++++++++ 3 files changed, 277 insertions(+), 11 deletions(-) diff --git a/docs/practices/index.md b/docs/practices/index.md index cb198f0..450142b 100644 --- a/docs/practices/index.md +++ b/docs/practices/index.md @@ -6,13 +6,13 @@ icon: material/run Small, doable actions. Each one is something you can try today — no preparation, no expertise, just willingness. -
+
-- [:material-nature-people: **Grounding in Nature**](grounding-in-nature.md) — Barefoot contact, sun gazing, sitting practice, melukat -- [:material-food-apple: **Nourishing the Body**](nourishing-the-body.md) — Real food, herbal teas, fasting, natural materials, self-massage -- [:material-meditation: **Daily Sadhana**](daily-sadhana.md) — Meditation, gratitude, shadow work, movement, visualization -- [:material-phone-check: **Digital Wellness**](digital-wellness.md) — News fast, screen limits, curating what enters your mind -- [:material-spa: **Spiritual Hygiene**](spiritual-hygiene.md) — Cleanse your space, set intention, sound as medicine +- [:material-nature-people: **Grounding in Nature**](grounding-in-nature.md) Barefoot contact, sun gazing, sitting practice, melukat +- [:material-food-apple: **Nourishing the Body**](nourishing-the-body.md) Real food, herbal teas, fasting, natural materials, self-massage +- [:material-meditation: **Daily Sadhana**](daily-sadhana.md) Meditation, gratitude, shadow work, movement, visualization +- [:material-phone-check: **Digital Wellness**](digital-wellness.md) News fast, screen limits, curating what enters your mind +- [:material-spa: **Spiritual Hygiene**](spiritual-hygiene.md) Cleanse your space, set intention, sound as medicine
diff --git a/docs/strategies/index.md b/docs/strategies/index.md index 478bbd0..c146263 100644 --- a/docs/strategies/index.md +++ b/docs/strategies/index.md @@ -6,12 +6,12 @@ icon: material/chess-knight Big-picture frameworks for when a practice opens a door and you're ready to walk through. These are the patterns, mindsets, and structural shifts — the strategy beneath the tactics. -
+
-- [:material-shield-lock: **Digital Sovereignty**](digital-sovereignty.md) — Own your hardware, software, data, and networks -- [:material-crowd: **Community Sovereignty**](community-sovereignty.md) — Parallel economies, PMAs, seva, freedom networks -- [:material-compass: **Finding Your Purpose**](finding-purpose.md) — Passion, suffering into service, building your tribe -- [:material-hand-heart: **Collective Awakening**](collective-awakening.md) — Mass intention, circles, crystallizing the vision +- [:material-shield-lock: **Digital Sovereignty**](digital-sovereignty.md) Own your hardware, software, data, and networks +- [:material-crowd: **Community Sovereignty**](community-sovereignty.md) Parallel economies, PMAs, seva, freedom networks +- [:material-compass: **Finding Your Purpose**](finding-purpose.md) Passion, suffering into service, building your tribe +- [:material-hand-heart: **Collective Awakening**](collective-awakening.md) Mass intention, circles, crystallizing the vision
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index d40f48d..11f64c7 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -37,6 +37,17 @@ --gp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --gp-duration: 0.78s; --gp-distance: 20px; + + /* ── Coherent green system (single source of truth for all greens) ── + Use these everywhere instead of ad-hoc rgba() values so the page reads + as one consistent sage family rather than a dozen different greens. */ + --green-900: #2f5641; /* deepest — strong emphasis / completion */ + --green-700: #3d6b52; /* deep sage — achievement, button border */ + --green-600: #4a8262; /* primary sage — links, button text */ + --green-500: #5b9a76; /* mid sage — hover */ + --green-300: #a8c5b6; /* light sage — icons, soft accents */ + --green-100: #e4efe9; /* faint sage — fills, tints */ + --green-glow: rgba(74, 130, 98, 0.22); /* unified shadow/glow tint */ } /* Base atmosphere */ @@ -593,3 +604,258 @@ article h1, article h2, article h3 { display: none !important; } } + +/* ═══════════════════════════════════════════════════════════════════════════ + Grid card background images — Practices & Strategies index pages + Light: daisyUI-style image-top card / Dark: atmospheric full-bleed overlay. + Images served locally at ~70 KB each. + ═══════════════════════════════════════════════════════════════════════════ */ + +/* ── Grid spacing ── + NB: the
    is display:contents, so the real grid lives on the .grid.cards + div itself. Gap MUST be set there, not on the ul. */ +[class*="gp-cards-"].grid.cards { + gap: 2.4rem !important; +} +[class*="gp-cards-"].grid.cards > ul { + gap: 2.4rem; +} + +/* ── Shared card shell ── */ +[class*="gp-cards-"].grid.cards ul li { + position: relative; + overflow: hidden; + border-radius: 16px; + isolation: isolate; + border: 1px solid var(--green-100); + transition: transform 0.35s var(--gp-ease), box-shadow 0.35s var(--gp-ease), border-color 0.3s ease; +} + +/* Image layer — positioning & sizing set per theme below */ +[class*="gp-cards-"].grid.cards ul li::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + z-index: 0; + transition: transform 1.2s var(--gp-ease); +} + +/* ── Full-card clickable overlay (covers entire li) ── */ +[class*="gp-cards-"].grid.cards ul li > a::after { + content: ""; + position: absolute; + inset: 0; + z-index: 2; +} + +/* ── No link underlines ── */ +[class*="gp-cards-"].grid.cards ul li a { + text-decoration: none !important; + background: transparent !important; +} + +/* ── Explore button (outline pill — white fill, green border + text). + Visual only; clicks pass through to the card link. Subtle fill-on-hover. ── */ +[class*="gp-cards-"].grid.cards ul li::after { + content: "🌱 Explore"; + position: absolute; + bottom: 1.1rem; + right: 1.1rem; + z-index: 3; + pointer-events: none; + background: var(--gp-surface); + color: var(--green-700); + border: 1.5px solid var(--green-600); + font-size: 0.72rem; + font-weight: 600; + padding: 0.32rem 0.82rem; + border-radius: 999px; + line-height: 1.4; + letter-spacing: 0.02em; + box-shadow: 0 1px 4px var(--green-glow); + transition: background 0.28s var(--gp-ease), + color 0.28s var(--gp-ease), + border-color 0.28s var(--gp-ease), + box-shadow 0.28s var(--gp-ease), + transform 0.28s var(--gp-ease); +} + +/* Flashy-but-subtle: the outline button fills with sage green and lifts + when the card is hovered. */ +[class*="gp-cards-"].grid.cards ul li:hover::after { + background: var(--green-600); + color: #fff; + border-color: var(--green-600); + transform: translateY(-2px); + box-shadow: 0 6px 18px var(--green-glow); +} + +/* ═══════════════════════════════════════════════════════════════════════ + LIGHT THEME (default) — daisyUI image-top card + ═══════════════════════════════════════════════════════════════════════ */ + +[class*="gp-cards-"].grid.cards ul li { + background: var(--gp-surface); + padding: 0 1.4rem 3.4rem 1.4rem; + padding-top: 176px; /* 150px image + ~26px gap before title */ + min-height: 310px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +[class*="gp-cards-"].grid.cards ul li::before { + height: 150px; + background-image: var(--card-img); +} + +[class*="gp-cards-"].grid.cards ul li { + color: var(--gp-text-muted); + font-size: 0.88rem; + line-height: 1.55; +} + +[class*="gp-cards-"].grid.cards ul li a { + color: var(--green-600); + display: block; + margin-bottom: 0.6rem !important; +} + +[class*="gp-cards-"].grid.cards ul li strong { + color: var(--green-700); + font-size: 1rem; + font-weight: 650; +} + +[class*="gp-cards-"].grid.cards ul li .twemoji { + color: var(--green-500); +} + +/* Clean, minimal hover — title deepens within the same sage family + (no lilac/purple shift). */ +[class*="gp-cards-"].grid.cards ul li a:hover, +[class*="gp-cards-"].grid.cards ul li a:hover strong { + color: var(--green-900); +} + +/* Light hover */ +[class*="gp-cards-"].grid.cards ul li:hover { + transform: translateY(-4px); + box-shadow: 0 14px 34px var(--green-glow); + border-color: var(--green-300); +} + +[class*="gp-cards-"].grid.cards ul li:hover::before { + transform: scale(1.05); +} + +/* ═══════════════════════════════════════════════════════════════════════ + CARD IMAGE URLS — defined once via custom properties + ═══════════════════════════════════════════════════════════════════════ */ + +.gp-cards-practices.grid.cards ul li:nth-child(1) { --card-img: url("/assets/images/cards/practices-grounding.jpg"); } +.gp-cards-practices.grid.cards ul li:nth-child(2) { --card-img: url("/assets/images/cards/practices-nourishing.jpg"); } +.gp-cards-practices.grid.cards ul li:nth-child(3) { --card-img: url("/assets/images/cards/practices-sadhana.jpg"); } +.gp-cards-practices.grid.cards ul li:nth-child(4) { --card-img: url("/assets/images/cards/practices-digital.jpg"); } +.gp-cards-practices.grid.cards ul li:nth-child(5) { --card-img: url("/assets/images/cards/practices-hygiene.jpg"); } + +.gp-cards-strategies.grid.cards ul li:nth-child(1) { --card-img: url("/assets/images/cards/strategies-digital-sov.jpg"); } +.gp-cards-strategies.grid.cards ul li:nth-child(2) { --card-img: url("/assets/images/cards/strategies-community-sov.jpg"); } +.gp-cards-strategies.grid.cards ul li:nth-child(3) { --card-img: url("/assets/images/cards/strategies-purpose.jpg"); } +.gp-cards-strategies.grid.cards ul li:nth-child(4) { --card-img: url("/assets/images/cards/strategies-awakening.jpg"); } + +/* ═══════════════════════════════════════════════════════════════════════ + DARK THEME (slate) — full-bleed atmospheric image + light text + ═══════════════════════════════════════════════════════════════════════ */ + +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li { + background: transparent; + padding: 1.3rem 1.3rem 3.4rem 1.3rem; + min-height: 170px; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li::before { + height: auto; + inset: 0; + z-index: -1; + background-image: + linear-gradient(160deg, rgba(14, 22, 16, 0.62) 0%, rgba(6, 14, 10, 0.74) 100%), + var(--card-img); +} + +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li { + color: rgba(255, 255, 255, 0.80); + border-color: rgba(255, 255, 255, 0.08); +} + +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li a, +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li strong { + color: rgba(255, 255, 255, 0.94); +} + +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li .twemoji { + color: rgba(255, 255, 255, 0.60); +} + +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li a:hover, +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li a:hover strong { + color: rgba(255, 255, 255, 1); +} + +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li:hover { + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32); + border-color: rgba(255, 255, 255, 0.14); +} + +/* Dark mode button — outline on glass; fills sage on hover */ +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li::after { + background: rgba(255, 255, 255, 0.10); + color: #fff; + border-color: rgba(255, 255, 255, 0.55); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); +} + +[data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li:hover::after { + background: var(--green-600); + color: #fff; + border-color: var(--green-600); + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38); +} + +/* ═══════════════════════════════════════════════════════════════════════ + RESPONSIVE & ACCESSIBILITY + ═══════════════════════════════════════════════════════════════════════ */ + +@media (prefers-reduced-motion: reduce) { + [class*="gp-cards-"].grid.cards ul li, + [class*="gp-cards-"].grid.cards ul li::before, + [class*="gp-cards-"].grid.cards ul li::after { + transition: none; + } + [class*="gp-cards-"].grid.cards ul li:hover::before { + transform: none; + } +} + +@media (max-width: 600px) { + [class*="gp-cards-"].grid.cards ul li { + min-height: 250px; + padding: 0 1.2rem 3.2rem 1.2rem; + padding-top: 130px; + } + [class*="gp-cards-"].grid.cards > ul { + gap: 1.4rem; + } + [data-md-color-scheme="slate"] [class*="gp-cards-"].grid.cards ul li { + min-height: 150px; + padding: 1.1rem 1.1rem 3.2rem 1.1rem; + } +}