diff --git a/app/globals.css b/app/globals.css index a7b8eb6..c6a84ef 100644 --- a/app/globals.css +++ b/app/globals.css @@ -667,4 +667,118 @@ footer.site .disc { max-width: 640px; margin: 0 auto 10px; line-height: 1.5; } animation: shimmer 1.4s infinite; border-radius: 6px; } + +/* ── Full-width content bands (In Pictures, The Board) ────────────────── + These are deliberately NOT news desks: they sit above / below the wire + grid in their own gold-edged bands so a visitor immediately sees them. */ +.band { + margin: 22px 0; + background: + radial-gradient(120% 200% at 0% 0%, rgba(255, 212, 38, 0.05), transparent 45%), + var(--panel); + border: 1px solid var(--line); + border-top: 2px solid var(--gold-dim); + border-radius: 10px; + padding: 18px 20px 22px; + box-shadow: var(--glow-soft); +} +.bandhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 14px; } +.bandtitle { + font-family: var(--font-display); + font-weight: 800; + color: var(--gold); + font-size: 20px; + letter-spacing: 0.14em; + text-transform: uppercase; +} +.bandsub { color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; } + +/* The board button is NOT a news desk — give it its own gold treatment so it + reads as "another area of the site", not a category. */ +.navbtn.board { + background: var(--gold); + color: #14110b; + border-color: var(--gold); + font-weight: 700; +} +.navbtn.board .dot { background: #14110b; } +.navbtn.board:hover { background: var(--gold-2); box-shadow: var(--glow); } +.navbtn.board.active { background: var(--gold-2); box-shadow: var(--glow); } + +/* In Pictures */ +.photoscroll { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); + gap: 12px; +} +.photo { + margin: 0; + background: var(--bg-2); + border: 1px solid var(--line-soft); + border-radius: 8px; + overflow: hidden; + cursor: pointer; + transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; +} +.photo:hover { border-color: var(--gold-dim); box-shadow: var(--glow-soft); transform: translateY(-2px); } +.photo .phimg { + aspect-ratio: 4 / 3; + background: var(--bg-2) center/cover no-repeat; +} +.photo figcaption { padding: 9px 11px 11px; } +.photo .cap { + color: var(--text); + font-size: 14px; + font-weight: 600; + line-height: 1.35; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.photo .cred { + margin-top: 7px; + font-family: var(--font-mono); + font-size: 11px; + color: var(--gold); + letter-spacing: 0.02em; + line-height: 1.35; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.photo .lic { + margin-top: 3px; + font-family: var(--font-mono); + font-size: 10px; + color: var(--faint); + letter-spacing: 0.02em; +} +.photos-note { + margin-top: 12px; + color: var(--faint); + font-size: 12px; + font-weight: 500; + letter-spacing: 0.02em; +} + +/* The Board band */ +.board-band .postform.big { max-width: 720px; } +.board-band .postform.big { display: grid; grid-template-columns: 1fr 2fr; gap: 10px 14px; align-items: end; } +.board-band .postform.big label[for="bnick"] { grid-column: 1; } +.board-band .postform.big #bnick { grid-column: 1; } +.board-band .postform.big label[for="bmsg"] { grid-column: 2; } +.board-band .postform.big #bmsg { grid-column: 2; } +.board-band .postform.big .go { grid-column: 2; justify-self: start; } +.board-band .postform.big .err { grid-column: 1 / -1; } +.postlist.board { max-width: none; margin: 16px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } +.postlist.board .post { margin-bottom: 0; } + +@media (max-width: 640px) { + .board-band .postform.big { grid-template-columns: 1fr; } + .board-band .postform.big label[for="bnick"], .board-band .postform.big #bnick, + .board-band .postform.big label[for="bmsg"], .board-band .postform.big #bmsg, + .board-band .postform.big .go { grid-column: 1; } +} @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } diff --git a/app/page.js b/app/page.js index ee511d2..61f87d5 100644 --- a/app/page.js +++ b/app/page.js @@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { CATEGORIES, sectionName } from "../lib/categories.js"; import { clipText, dek } from "../lib/text.js"; +import { PHOTOS, commonsUrl } from "../lib/photos.js"; // BidaAngMamamayan — a PUBLIC tribute news desk for Senator BAM Aquino. // No login, no accounts, no "I like this" — the site's whole identity is the @@ -200,7 +201,7 @@ export default function Home() { {c.label} ))} - { e.preventDefault(); setView("board"); window.scrollTo({ top: 0 }); }}> + { e.preventDefault(); if (view === "front") { document.getElementById("board-band")?.scrollIntoView({ behavior: "smooth", block: "start" }); } else { setView("front"); setTimeout(() => document.getElementById("board-band")?.scrollIntoView({ behavior: "smooth", block: "start" }), 60); } }}> {boardCount > 0 && }Thank You Board @@ -246,6 +247,30 @@ export default function Home() { {view === "front" && ( <> + {/* ── IN PICTURES — credited public photos, its own full-width band ── */} +
+
+ In Pictures + Public photos of the senator — every image credited to its source +
+
+ {PHOTOS.map((p, i) => ( +
window.open(commonsUrl(p.commons), "_blank", "noopener")}> +
+
+
{p.caption}
+
📷 {p.source}
+
{p.credit}
+
+
+ ))} +
+
+ Click a photo to view it on Wikimedia Commons. Photos are public-domain, sourced from the + senator's official Senate / social pages. This section is separate from the news wire. +
+
+
{!edition && ( @@ -296,21 +321,6 @@ export default function Home() {
-
-
Thank you, Senator BAM {boardCount} posted
- {(boardPosts || []).slice(0, 4).map((p) => ( -
-
{p.nick}
-
{clipText(p.message, 120)}
-
{ago(p.createdAt)}
-
- ))} - {(boardPosts || []).length === 0 &&
No messages yet — be the first to say thank you.
} - { e.preventDefault(); setView("board"); window.scrollTo({ top: 0 }); }}> - SIGN THE BOARD → - -
-
Who he is
@@ -319,11 +329,41 @@ export default function Home() { 2025 PalaPinas esports championship, and a legislator who has made the fight for college students, scholarships, and fair electricity his signature. This desk follows - the wire for every story that bears his name. + the wire for every story that bears his name — from verified Philippine and + international news outlets only.
+ + {/* ── THE BOARD — its own prominent full-width band, not a news desk ── */} +
+
+ Thank you, Senator BAM + The community board — say it to the senator, no account needed +
+
+ + setNick(e.target.value)} maxLength={24} placeholder="e.g. PampangaProud, BamGang13" required /> + +