From 4e9e16b735300ab2a019e057848a5d9ec62e4af1 Mon Sep 17 00:00:00 2001 From: Tolaria Date: Wed, 3 Jun 2026 17:30:24 +0800 Subject: [PATCH] feat: overlay image captions on bottom-right corner - Captions now positioned over the image (absolute, bottom-right) - Semi-transparent white background with subtle blur - Smaller text (0.68rem), no emojis - Remove markdown='1' from figure tags so img is direct child - Merged .page-hero and .page-infographic styles --- docs/practices/daily-sadhana.md | 4 +- docs/practices/digital-wellness.md | 2 +- docs/practices/grounding-in-nature.md | 2 +- docs/practices/nourishing-the-body.md | 2 +- docs/stylesheets/extra.css | 77 ++++++++++--------------- docs/teachings/collective-awakening.md | 4 +- docs/teachings/community-sovereignty.md | 4 +- docs/teachings/digital-sovereignty.md | 2 +- docs/teachings/finding-purpose.md | 2 +- docs/teachings/spiritual-hygiene.md | 4 +- 10 files changed, 45 insertions(+), 58 deletions(-) diff --git a/docs/practices/daily-sadhana.md b/docs/practices/daily-sadhana.md index 0444cc1..f348376 100644 --- a/docs/practices/daily-sadhana.md +++ b/docs/practices/daily-sadhana.md @@ -4,14 +4,14 @@ icon: material/meditation # Daily Sadhana -
+
A person meditating peacefully in morning light
Photo by Jared Rice on Unsplash
*Sadhana* means daily spiritual practice — not something you do when you have time, but the foundation you build everything else upon. It doesn't require a temple or a teacher. It requires showing up. -
+
Infographic: Daily Sadhana sunrise mandala — Meditation, Gratitude, Shadow Work, Movement, Visualization
Generated with GPT-5.4-Image-2
diff --git a/docs/practices/digital-wellness.md b/docs/practices/digital-wellness.md index 76122f8..e7091f7 100644 --- a/docs/practices/digital-wellness.md +++ b/docs/practices/digital-wellness.md @@ -4,7 +4,7 @@ icon: material/phone-check # Digital Wellness -
+
A peaceful nature scene — digital detox in the forest
Photo by Lianhao Qu on Unsplash
diff --git a/docs/practices/grounding-in-nature.md b/docs/practices/grounding-in-nature.md index c534639..cd3ed63 100644 --- a/docs/practices/grounding-in-nature.md +++ b/docs/practices/grounding-in-nature.md @@ -4,7 +4,7 @@ icon: material/nature-people # Grounding in Nature -
+
Bare feet on moss-covered earth in a sun-dappled forest clearing
Generated with GPT-5.4-Image-2
diff --git a/docs/practices/nourishing-the-body.md b/docs/practices/nourishing-the-body.md index 7b7bf6a..bb49a49 100644 --- a/docs/practices/nourishing-the-body.md +++ b/docs/practices/nourishing-the-body.md @@ -4,7 +4,7 @@ icon: material/food-apple # Nourishing the Body -
+
Fresh organic vegetables and herbs on a rustic wooden table
Generated with GPT-5.4-Image-2
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 1b8cfc1..e30b46d 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -495,62 +495,49 @@ article h1, article h2, article h3 { max-height: 420px; } -/* ── Page hero images — full-width, minimal chrome ── */ -.page-hero { - margin: 0.6rem 0 1.4rem; - border-radius: 12px; - overflow: hidden; -} -.page-hero img { - display: block; - width: 100%; - height: auto; - border-radius: 12px; -} -.page-hero figcaption { - padding: 0.35rem 0.6rem 0; - color: var(--gp-text-muted); - font-size: 0.75rem; - font-style: italic; - text-align: right; - line-height: 1.3; -} -.page-hero figcaption a { - color: var(--gp-primary); - font-style: normal; -} - -/* ── AI-generated image credit — cute and understated ── */ -.ai-credit { - display: inline-block; - font-size: 0.72rem; - color: var(--gp-text-muted); - opacity: 0.65; - font-style: italic; - letter-spacing: 0.01em; -} -.ai-credit::before { - content: "🌸 "; -} -.ai-credit::after { - content: " 🌸"; -} - -/* ── Infographic figure — full-width, minimal chrome ── */ +/* ── Page hero images — full-width, caption overlay ── */ +.page-hero, .page-infographic { - margin: 1.2rem 0 1.6rem; + position: relative; + margin: 0.6rem 0 1.2rem; border-radius: 12px; overflow: hidden; + line-height: 0; } +.page-hero img, .page-infographic img { display: block; width: 100%; height: auto; border-radius: 12px; } +.page-hero figcaption, .page-infographic figcaption { - padding: 0.3rem 0.6rem 0; - text-align: right; + position: absolute; + bottom: 0; + right: 0; + padding: 0.2rem 0.55rem; + background: rgba(255, 255, 255, 0.72); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + border-radius: 8px 0 0 0; + color: var(--gp-text-muted); + font-size: 0.68rem; + font-style: italic; + line-height: 1.35; + max-width: 55%; +} +.page-hero figcaption a, +.page-infographic figcaption a { + color: var(--gp-primary); + font-style: normal; +} + +/* ── AI-generated image credit — tiny, no emoji ── */ +.ai-credit { + font-size: 0.68rem; + color: var(--gp-text-muted); + font-style: italic; } /* ── Footer badges ── */ diff --git a/docs/teachings/collective-awakening.md b/docs/teachings/collective-awakening.md index 17d3986..41a7c18 100644 --- a/docs/teachings/collective-awakening.md +++ b/docs/teachings/collective-awakening.md @@ -4,7 +4,7 @@ icon: material/hand-heart # Collective Awakening -
+
Group of people meditating together in nature at golden hour
Photo by Rishikesh Yogpeeth on Unsplash
@@ -25,7 +25,7 @@ When you join a mass meditation — whether online or in person — you are not ## Creating your own circle -
+
Infographic: 4-step circle practice — Silence, Intention, Visualize, Sound — with a Love-centered compass
Generated with GPT-5.4-Image-2
diff --git a/docs/teachings/community-sovereignty.md b/docs/teachings/community-sovereignty.md index 766966a..6065ac2 100644 --- a/docs/teachings/community-sovereignty.md +++ b/docs/teachings/community-sovereignty.md @@ -4,7 +4,7 @@ icon: material/crowd # Community Sovereignty -
+
People shopping at a farmers market with fresh produce
Photo by Spencer Plouzek on Unsplash
@@ -61,7 +61,7 @@ Do three kind things every week that you tell no one about. The anonymity is par ## Building freedom networks -
+
Infographic: Freedom Network wheel — Education, Technology, Health, Legal, Economic domains radiating from Community Sovereignty
Generated with GPT-5.4-Image-2
diff --git a/docs/teachings/digital-sovereignty.md b/docs/teachings/digital-sovereignty.md index 92aa2c7..2d70ec3 100644 --- a/docs/teachings/digital-sovereignty.md +++ b/docs/teachings/digital-sovereignty.md @@ -4,7 +4,7 @@ icon: material/shield-lock # Digital Sovereignty -
+
An open laptop running Linux on a wooden desk, symbolizing digital freedom
Generated with GPT-5.4-Image-2
diff --git a/docs/teachings/finding-purpose.md b/docs/teachings/finding-purpose.md index 4a5b0cc..516f931 100644 --- a/docs/teachings/finding-purpose.md +++ b/docs/teachings/finding-purpose.md @@ -4,7 +4,7 @@ icon: material/compass # Finding Your Purpose -
+
A winding forest path at dawn with golden light filtering through trees
Generated with GPT-5.4-Image-2
diff --git a/docs/teachings/spiritual-hygiene.md b/docs/teachings/spiritual-hygiene.md index 4bc79a1..a00ff17 100644 --- a/docs/teachings/spiritual-hygiene.md +++ b/docs/teachings/spiritual-hygiene.md @@ -4,7 +4,7 @@ icon: material/spa # Spiritual Hygiene -
+
A serene meditation space with singing bowl, candle, and soft morning light
Generated with GPT-5.4-Image-2
@@ -40,7 +40,7 @@ You don't need to believe in guides for this to work. The practice is about sett ## Sound as medicine -
+
Infographic: Healing frequencies chart — 432 Hz and 528 Hz — with daily and weekly spiritual hygiene rhythm
Generated with GPT-5.4-Image-2