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

UI/UX audit fixes: stronger hero overlays, text-shadow for contrast, fix broken nav on about/gallery, constrain story blocks, fix photo mosaic object-position, normalize footers

Browse Source
This commit is contained in:
Omair Saleh
2026-03-09 01:15:20 +08:00
parent c476724f9a
commit 04ff75a853
6 changed files with 57 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/about/index.html
+2 -2
View File
@@ -22,7 +22,7 @@
<li><a href="/approach/">Our Approach</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/gallery/">Gallery</a></li>
<li><a href="/about/"><li><a href="/about/" class="active">About</a></li>
<li><a href="/about/" class="active">About</a></li>
<li><a href="/support/" class="nav-cta">Support a Project</a></li>
</ul>
</div>
@@ -146,7 +146,7 @@
<h2 class="fade-up">Let's build something together.</h2>
<p class="fade-up">Whether you're a donor, a charity partner, a foundation, or just someone who cares — we'd like to hear from you.</p>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:40px; margin-top:40px;" class="fade-up">
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:48px; margin-top:40px;" class="fade-up contact-grid">
<div>
<form action="https://formspree.io/f/placeholder" method="POST" style="max-width:480px;">
<div class="form-group">
html/approach/index.html
+10 -10
View File
@@ -53,11 +53,11 @@
</div>
<!-- Pillar 1: Water -->
<div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden;">
<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">
<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>
<div class="story-text" style="background: rgba(37,120,161,0.05);">
<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>
<p>Without clean water, nothing else is possible. Dirty water causes disease, absorbs time (women walk kilometres to collect it), and can't support agriculture at scale.</p>
@@ -67,11 +67,11 @@
</div>
<!-- Pillar 2: Food -->
<div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden;">
<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>
<div class="story-text" style="background: rgba(45,106,79,0.05);">
<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>
<p>With water secured, we establish food production systems. At Lolo, this means aquaculture — 10 earthen ponds stocked with catfish, with capacity for 35,000 fish across 3 harvest cycles per year.</p>
@@ -81,11 +81,11 @@
</div>
<!-- Pillar 3: Livelihoods -->
<div class="story-block fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden;">
<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">
<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>
<div class="story-text" style="background: rgba(107,58,42,0.05);">
<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>
<p>Surplus food creates economic opportunity. Fish is sold at local markets. Revenue funds operations, creates employment, and builds an economy that doesn't depend on outside funding.</p>
@@ -95,11 +95,11 @@
</div>
<!-- Pillar 4: Education -->
<div class="story-block reverse fade-up" style="margin-bottom:2px; border-radius:4px; overflow:hidden;">
<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>
<div class="story-text" style="background: rgba(201,168,76,0.05);">
<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>
<p>Education is the final pillar because it must be <em>sustained</em>. A school funded by a one-off campaign closes when the campaign ends. A school funded by a fish farm runs forever.</p>
html/css/style.css
+41 -15
View File
@@ -232,9 +232,9 @@ p { margin-bottom: 16px; max-width: 720px; }
inset: 0;
background: linear-gradient(
to bottom,
rgba(61, 31, 21, 0.3) 0%,
rgba(61, 31, 21, 0.5) 40%,
rgba(61, 31, 21, 0.85) 100%
rgba(61, 31, 21, 0.35) 0%,
rgba(61, 31, 21, 0.55) 40%,
rgba(61, 31, 21, 0.88) 100%
);
}
.hero-content {
@@ -447,7 +447,8 @@ p { margin-bottom: 16px; max-width: 720px; }
.story-block {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 500px;
min-height: 440px;
max-height: 600px;
overflow: hidden;
}
.story-block.reverse { direction: rtl; }
@@ -488,7 +489,12 @@ p { margin-bottom: 16px; max-width: 720px; }
@media (max-width: 768px) {
.story-block,
.story-block.reverse { grid-template-columns: 1fr; direction: ltr; }
.story-block.reverse {
grid-template-columns: 1fr;
direction: ltr;
max-height: none;
}
.story-block .story-photo { max-height: 320px; }
.story-text { padding: 40px 24px; }
}
@@ -922,12 +928,18 @@ p { margin-bottom: 16px; max-width: 720px; }
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(61,31,21,0.25) 0%, rgba(61,31,21,0.6) 50%, rgba(61,31,21,0.9) 100%);
background: linear-gradient(
to bottom,
rgba(61,31,21,0.55) 0%,
rgba(61,31,21,0.65) 30%,
rgba(61,31,21,0.78) 60%,
rgba(61,31,21,0.92) 100%
);
}
.page-hero-visual .container { position: relative; z-index: 1; }
.page-hero-visual .label { color: var(--gold); margin-bottom: 8px; }
.page-hero-visual h1 { color: var(--cream); margin-bottom: 16px; }
.page-hero-visual p { font-size: 18px; color: rgba(245,239,224,0.8); max-width: 600px; }
.page-hero-visual .label { color: var(--gold); margin-bottom: 8px; text-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.page-hero-visual h1 { color: var(--cream); margin-bottom: 16px; text-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.page-hero-visual p { font-size: 18px; color: rgba(245,239,224,0.85); max-width: 600px; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
/* ─── Photo Break (cinematic full-width strip) ─── */
.photo-break {
@@ -947,7 +959,13 @@ p { margin-bottom: 16px; max-width: 720px; }
display: flex;
align-items: center;
justify-content: center;
background: rgba(61,31,21,0.4);
background: linear-gradient(
to bottom,
rgba(61,31,21,0.35) 0%,
rgba(61,31,21,0.55) 40%,
rgba(61,31,21,0.6) 60%,
rgba(61,31,21,0.45) 100%
);
}
.photo-break .photo-break-text {
text-align: center;
@@ -959,12 +977,14 @@ p { margin-bottom: 16px; max-width: 720px; }
color: var(--cream);
font-size: clamp(1.4rem, 3vw, 2rem);
margin-bottom: 8px;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.photo-break .photo-break-text p {
font-size: 15px;
color: rgba(245,239,224,0.7);
color: rgba(245,239,224,0.8);
max-width: 500px;
margin: 0 auto;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
.photo-break { height: 240px; }
@@ -998,24 +1018,25 @@ p { margin-bottom: 16px; max-width: 720px; }
/* ─── Support Card with image ─── */
.support-card-img {
height: 180px;
height: 160px;
overflow: hidden;
margin: -32px -32px 24px -32px;
margin: -32px -32px 20px -32px;
border-radius: 4px 4px 0 0;
}
.support-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
transition: transform 0.4s;
}
.support-card:hover .support-card-img img { transform: scale(1.05); }
/* ─── Pillar Card with thumbnail ─── */
.pillar-card-thumb {
height: 140px;
height: 130px;
overflow: hidden;
margin: -32px -24px 20px -24px;
margin: -32px -24px 16px -24px;
border-radius: 0;
}
.pillar-card-thumb img {
@@ -1041,8 +1062,13 @@ p { margin-bottom: 16px; max-width: 720px; }
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 70%;
transition: transform 0.5s;
}
.photo-mosaic .mosaic-hero img,
.photo-mosaic img.mosaic-hero {
object-position: center 80%;
}
.photo-mosaic img:hover { transform: scale(1.03); }
@media (max-width: 768px) {
.photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
html/gallery/index.html
+1
View File
@@ -148,6 +148,7 @@
<li><a href="/">Home</a></li>
<li><a href="/approach/">Our Approach</a></li>
<li><a href="/projects/">Projects</a></li>
<li><a href="/gallery/" class="active">Gallery</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/support/" class="nav-cta">Support a Project</a></li>
</ul>
html/index.html
+1 -2
View File
@@ -254,7 +254,7 @@
<div class="footer-brand">
<div class="footer-arabic">تَعَاوُنُوا</div>
<div class="footer-wordmark">TAAWUNU</div>
<p>A social impact studio that designs, manages, and verifies community empowerment projects through a proven Water → Food → Livelihoods → Education model.</p>
<p>A social impact studio designing permanent self-sufficiency for marginalized communities.</p>
</div>
<div>
<h4>Explore</h4>
@@ -271,7 +271,6 @@
<ul>
<li><a href="/projects/#aquaculture">Lolo Aquaculture</a></li>
<li><a href="/projects/#water">Solar Water Well</a></li>
<li><a href="/projects/#education">Community School</a></li>
</ul>
</div>
<div>
html/projects/index.html
+1 -1
View File
@@ -57,7 +57,7 @@
<!-- Photo Mosaic -->
<div class="photo-mosaic fade-up" style="margin-bottom:8px;">
<img class="mosaic-hero" src="/images/gallery/fish-harvest-community.jpg" alt="Community members harvesting catfish from a pond — nets in hand, basins waiting on the red embankment" loading="lazy">
<img class="mosaic-hero" src="/images/gallery/fish-harvest-community.jpg" alt="Community members harvesting catfish from a pond — nets in hand, basins waiting on the red embankment" loading="lazy" style="object-position: center 85%;">
<img src="/images/gallery/pond-construction-workers.jpg" alt="Workers digging fish ponds by hand into the laterite earth" loading="lazy">
<img src="/images/gallery/catfish-closeup-basin.jpg" alt="Freshly harvested catfish packed in a basin — the model works" loading="lazy">
</div>