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
This commit is contained in:
Tolaria
parent
12494bf0f0
commit
4e9e16b735
10 changed files with 45 additions and 58 deletions
|
|
@ -4,14 +4,14 @@ icon: material/meditation
|
|||
|
||||
# Daily Sadhana
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/daily-sadhana.jpg" alt="A person meditating peacefully in morning light" loading="lazy">
|
||||
<figcaption>Photo by <a href="https://unsplash.com/@jareddrice">Jared Rice</a> on Unsplash</figcaption>
|
||||
</figure>
|
||||
|
||||
*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.
|
||||
|
||||
<figure class="page-infographic" markdown="1">
|
||||
<figure class="page-infographic">
|
||||
<img src="../assets/images/daily-sadhana-infographic.png" alt="Infographic: Daily Sadhana sunrise mandala — Meditation, Gratitude, Shadow Work, Movement, Visualization" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ icon: material/phone-check
|
|||
|
||||
# Digital Wellness
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/digital-wellness.jpg" alt="A peaceful nature scene — digital detox in the forest" loading="lazy">
|
||||
<figcaption>Photo by <a href="https://unsplash.com/@lianhao">Lianhao Qu</a> on Unsplash</figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ icon: material/nature-people
|
|||
|
||||
# Grounding in Nature
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/grounding-nature.png" alt="Bare feet on moss-covered earth in a sun-dappled forest clearing" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ icon: material/food-apple
|
|||
|
||||
# Nourishing the Body
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/nourishing-body.png" alt="Fresh organic vegetables and herbs on a rustic wooden table" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -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 ── */
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ icon: material/hand-heart
|
|||
|
||||
# Collective Awakening
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/collective-awakening.jpg" alt="Group of people meditating together in nature at golden hour" loading="lazy">
|
||||
<figcaption>Photo by <a href="https://unsplash.com/@rishikesh_yogpeeth">Rishikesh Yogpeeth</a> on Unsplash</figcaption>
|
||||
</figure>
|
||||
|
|
@ -25,7 +25,7 @@ When you join a mass meditation — whether online or in person — you are not
|
|||
|
||||
## Creating your own circle
|
||||
|
||||
<figure class="page-infographic" markdown="1">
|
||||
<figure class="page-infographic">
|
||||
<img src="../assets/images/collective-awakening-infographic.png" alt="Infographic: 4-step circle practice — Silence, Intention, Visualize, Sound — with a Love-centered compass" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ icon: material/crowd
|
|||
|
||||
# Community Sovereignty
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/community-sovereignty.jpg" alt="People shopping at a farmers market with fresh produce" loading="lazy">
|
||||
<figcaption>Photo by <a href="https://unsplash.com/@theguccer2100">Spencer Plouzek</a> on Unsplash</figcaption>
|
||||
</figure>
|
||||
|
|
@ -61,7 +61,7 @@ Do three kind things every week that you tell no one about. The anonymity is par
|
|||
|
||||
## Building freedom networks
|
||||
|
||||
<figure class="page-infographic" markdown="1">
|
||||
<figure class="page-infographic">
|
||||
<img src="../assets/images/community-sovereignty-infographic.png" alt="Infographic: Freedom Network wheel — Education, Technology, Health, Legal, Economic domains radiating from Community Sovereignty" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ icon: material/shield-lock
|
|||
|
||||
# Digital Sovereignty
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/digital-sovereignty.png" alt="An open laptop running Linux on a wooden desk, symbolizing digital freedom" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ icon: material/compass
|
|||
|
||||
# Finding Your Purpose
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/finding-purpose.png" alt="A winding forest path at dawn with golden light filtering through trees" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ icon: material/spa
|
|||
|
||||
# Spiritual Hygiene
|
||||
|
||||
<figure class="page-hero" markdown="1">
|
||||
<figure class="page-hero">
|
||||
<img src="../assets/images/spiritual-hygiene.png" alt="A serene meditation space with singing bowl, candle, and soft morning light" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
@ -40,7 +40,7 @@ You don't need to believe in guides for this to work. The practice is about sett
|
|||
|
||||
## Sound as medicine
|
||||
|
||||
<figure class="page-infographic" markdown="1">
|
||||
<figure class="page-infographic">
|
||||
<img src="../assets/images/spiritual-hygiene-infographic.png" alt="Infographic: Healing frequencies chart — 432 Hz and 528 Hz — with daily and weekly spiritual hygiene rhythm" loading="lazy">
|
||||
<figcaption><span class="ai-credit">Generated with GPT-5.4-Image-2</span></figcaption>
|
||||
</figure>
|
||||
|
|
|
|||
Loading…
Reference in a new issue