From 8ae59a0344a4a6db961a8f659d801e2543686bf9 Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Mon, 9 Mar 2026 02:52:32 +0800 Subject: [PATCH] Revert story-block to 2-col grid, caption inside story-photo sub-grid --- html/approach/index.html | 8 ++++---- html/css/style.css | 20 +++++--------------- html/index.html | 4 ++-- 3 files changed, 11 insertions(+), 21 deletions(-) diff --git a/html/approach/index.html b/html/approach/index.html index 2f036b5..5497a43 100644 --- a/html/approach/index.html +++ b/html/approach/index.html @@ -56,8 +56,8 @@
Solar-powered borehole pumping 10,000 litres of clean water daily +
Solar-powered borehole and elevated storage tank, Lolo Camp
-
Solar-powered borehole and elevated storage tank, Lolo Camp
Pillar 1

Water

@@ -71,8 +71,8 @@
Aerial view of 10 fish ponds carved into the red laterite earth +
Aerial view: 10 earthen ponds carved into red laterite, Lolo Farm
-
Aerial view: 10 earthen ponds carved into red laterite, Lolo Farm
Pillar 2

Food

@@ -86,8 +86,8 @@
Fresh catfish for sale at the local market — surplus creates livelihoods +
Fresh catfish at Lolo market — surplus creates livelihoods
-
Fresh catfish at Lolo market — surplus creates livelihoods
Pillar 3

Livelihoods

@@ -101,8 +101,8 @@
Children study at wooden desks in an open-air classroom with corrugated roof +
Children study at an open-air classroom, Lolo Camp
-
Children study at an open-air classroom, Lolo Camp
Pillar 4

Education

diff --git a/html/css/style.css b/html/css/style.css index b0ce99e..dbae742 100644 --- a/html/css/style.css +++ b/html/css/style.css @@ -449,16 +449,16 @@ 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: 620px; + max-height: 600px; overflow: hidden; } .story-block.reverse { direction: rtl; } .story-block.reverse > * { direction: ltr; } +/* story-photo is a grid-within-grid: rows = 1fr (image) + auto (caption) */ .story-photo { - grid-row: 1 / 2; - grid-column: 1 / 2; + display: grid; + grid-template-rows: 1fr auto; overflow: hidden; position: relative; } @@ -472,16 +472,6 @@ 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; @@ -1367,7 +1357,7 @@ p { margin-bottom: 16px; max-width: 720px; } } /* ─── Photo Caption Bar (brand mandatory) ─── */ -/* Grid child row 2, col 1 — sits below .story-photo */ +/* Sub-grid row 2 inside .story-photo — naturally below the img */ .story-caption { background: var(--deep); color: rgba(245,239,224,0.78); diff --git a/html/index.html b/html/index.html index 5c01e4a..bb11bd3 100644 --- a/html/index.html +++ b/html/index.html @@ -152,8 +152,8 @@
Community members and team planting at the Lolo Farm site, April 2024 +
Community members and project team planting at Lolo Farm, Adamawa Region, April 2024
-
Community members and project team planting at Lolo Farm, Adamawa Region, April 2024
Flagship Project

The Lolo Aquaculture Project

@@ -166,8 +166,8 @@
Children studying Quran on wooden boards at Lolo Camp, February 2025 +
Children study Quran on wooden alluha boards, Lolo Camp, February 2025
-
Children study Quran on wooden alluha boards, Lolo Camp, February 2025
Why Education Comes Last

First the well. Then the farm. Then the school.