quikcue/taawunu-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix caption: grid-row2 sibling of story-photo, remove wrong reverse overrides

Browse Source
This commit is contained in:
Omair Saleh
2026-03-09 02:45:54 +08:00
parent a19149d94b
commit aa53bf2a77
3 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/approach/index.html
+8 -8
View File
@@ -56,8 +56,8 @@
<div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
<div class="story-photo">
<img src="/images/gallery/borehole-water-flowing.jpg" alt="Solar-powered borehole pumping 10,000 litres of clean water daily" loading="lazy" style="object-position: center 30%;">
<div class="story-caption">Solar-powered borehole and elevated storage tank, Lolo Camp</div>
</div>
</div>
<div class="story-caption">Solar-powered borehole and elevated storage tank, Lolo Camp</div>
<div class="story-text" style="background: rgba(37,120,161,0.05); padding: 48px 40px;">
<div class="label" style="color:var(--water);">Pillar 1</div>
<h2 style="color:var(--water);">Water</h2>
@@ -71,8 +71,8 @@
<div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
<div class="story-photo">
<img src="/images/gallery/fish-ponds-aerial.jpg" alt="Aerial view of 10 fish ponds carved into the red laterite earth" loading="lazy">
<div class="story-caption">Aerial view: 10 earthen ponds carved into red laterite, Lolo Farm</div>
</div>
</div>
<div class="story-caption">Aerial view: 10 earthen ponds carved into red laterite, Lolo Farm</div>
<div class="story-text" style="background: rgba(45,106,79,0.05); padding: 48px 40px;">
<div class="label" style="color:var(--green);">Pillar 2</div>
<h2 style="color:var(--green);">Food</h2>
@@ -86,8 +86,8 @@
<div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
<div class="story-photo">
<img src="/images/gallery/market-fish-sales.jpg" alt="Fresh catfish for sale at the local market — surplus creates livelihoods" loading="lazy" style="object-position: center 40%;">
<div class="story-caption">Fresh catfish at Lolo market — surplus creates livelihoods</div>
</div>
</div>
<div class="story-caption">Fresh catfish at Lolo market — surplus creates livelihoods</div>
<div class="story-text" style="background: rgba(107,58,42,0.05); padding: 48px 40px;">
<div class="label" style="color:var(--earth);">Pillar 3</div>
<h2 style="color:var(--earth);">Livelihoods</h2>
@@ -101,8 +101,8 @@
<div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden; max-height:520px;">
<div class="story-photo">
<img src="/images/gallery/children-classroom-light.jpg" alt="Children study at wooden desks in an open-air classroom with corrugated roof" loading="lazy">
<div class="story-caption">Children study at an open-air classroom, Lolo Camp</div>
</div>
</div>
<div class="story-caption">Children study at an open-air classroom, Lolo Camp</div>
<div class="story-text" style="background: rgba(201,168,76,0.05); padding: 48px 40px;">
<div class="label" style="color:var(--gold);">Pillar 4</div>
<h2 style="color:var(--gold);">Education</h2>
html/css/style.css
+18 -10
View File
@@ -449,22 +449,21 @@ p { margin-bottom: 16px; max-width: 720px; }
.story-block {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto;
min-height: 440px;
max-height: 600px;
max-height: 620px;
overflow: hidden;
}
.story-block.reverse { direction: rtl; }
.story-block.reverse > * { direction: ltr; }
.story-photo {
grid-row: 1 / 2;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.story-photo img {
flex: 1;
min-height: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s;
display: block;
@@ -472,6 +471,16 @@ p { margin-bottom: 16px; max-width: 720px; }
.story-block:hover .story-photo img {
transform: scale(1.03);
}
/* Caption: row 2, col 1 (below photo). In rtl blocks, col1 is visually right → follows photo ✓ */
.story-caption {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
/* story-text: row 1-2, col 2. In rtl blocks, col2 is visually left → correct ✓ */
.story-text {
grid-row: 1 / 3;
grid-column: 2 / 3;
}
.story-text {
padding: 64px 48px;
display: flex;
@@ -1357,16 +1366,15 @@ p { margin-bottom: 16px; max-width: 720px; }
}
/* ─── Photo Caption Bar (brand mandatory) ─── */
/* Uses flex-column in .story-photo — img grows, caption sits below */
/* Grid child row 2, col 1 — sits below .story-photo */
.story-caption {
flex-shrink: 0;
background: var(--deep);
color: rgba(245,239,224,0.75);
color: rgba(245,239,224,0.78);
font-family: var(--font-body);
font-size: 10.5px;
font-size: 11px;
font-style: italic;
letter-spacing: 0.01em;
padding: 6px 14px;
padding: 7px 16px;
line-height: 1.4;
}
html/index.html
+2 -2
View File
@@ -152,8 +152,8 @@
<section class="story-block fade-up">
<div class="story-photo">
<img src="/images/community-planting.jpg" alt="Community members and team planting at the Lolo Farm site, April 2024" loading="lazy">
<div class="story-caption">Community members and project team planting at Lolo Farm, Adamawa Region, April 2024</div>
</div>
<div class="story-caption">Community members and project team planting at Lolo Farm, Adamawa Region, April 2024</div>
<div class="story-text">
<div class="section-label">Flagship Project</div>
<h2>The Lolo Aquaculture Project</h2>
@@ -166,8 +166,8 @@
<section class="story-block reverse fade-up">
<div class="story-photo">
<img src="/images/children-quran-study.jpg" alt="Children studying Quran on wooden boards at Lolo Camp, February 2025" loading="lazy">
<div class="story-caption">Children study Quran on wooden alluha boards, Lolo Camp, February 2025</div>
</div>
<div class="story-caption">Children study Quran on wooden alluha boards, Lolo Camp, February 2025</div>
<div class="story-text">
<div class="section-label">Why Education Comes Last</div>
<h2>First the well. Then the farm. Then the school.</h2>