nate/Siteforge
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign Nuggets page: host pills in a row above episodes; v2.0.22
Publish Container / docker (push) Successful in 14m8s
Details

Browse Source 
Replaces the two-column hosts/episodes sidebar layout with a single full-width
column: host pills (photo + name, pill-shaped, clickable) in a horizontal row
at the top, episodes list filling the full width below.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-09-16 07:37:25 -04:00
1 parent b35605f411
commit 7ff5c453e8
3 files changed
+24 -44
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "siteforge",
"private": true,
"version": "2.0.21",
"version": "2.0.22",
"type": "module",
"scripts": {
"dev": "vite",
src/App.css
+8 -19
View File
@@ -9879,22 +9879,15 @@
.nuggets-platform-links { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.section-nuggets-body { padding: 2.5rem 1.5rem 4rem; }
.nuggets-body-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 3rem; align-items: start; }
.nuggets-body-col { min-width: 0; }
.nuggets-hosts-list { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.nuggets-host-card { display: flex; flex-direction: column; background: rgba(26, 26, 21, 0.9); border: 1px solid rgba(201, 168, 76, 0.18); border-radius: 12px; padding: 1.25rem 1.5rem; }
.nuggets-host-card-header { display: flex; align-items: center; gap: 0.9rem; }
.nuggets-host-card-img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(201, 168, 76, 0.3); }
.nuggets-host-card-meta { display: flex; flex-direction: column; }
.nuggets-host-card-name { font-family: var(--brand-font-heading); font-size: 1.05rem; color: #e8d9b5; margin: 0; }
.nuggets-host-card-role { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-gold); opacity: 0.85; margin: 0.2rem 0 0; }
.nuggets-host-card-bio { font-size: 0.875rem; color: var(--brand-muted); line-height: 1.6; margin: 0.875rem 0 0; }
.nuggets-host-card--link { text-decoration: none; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; }
.nuggets-host-card--link:hover { border-color: rgba(201, 168, 76, 0.45); box-shadow: 0 4px 18px rgba(0,0,0,0.28); transform: translateY(-2px); }
.nuggets-host-card--link .nuggets-host-card-name { color: #e8d9b5; }
.nuggets-host-card-cta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-gold); margin: 0.9rem 0 0; opacity: 0.75; transition: opacity 0.15s; }
.nuggets-host-card--link:hover .nuggets-host-card-cta { opacity: 1; }
.nuggets-hosts-row-wrap { margin-bottom: 2.5rem; }
.nuggets-hosts-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.nuggets-host-pill { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; background: rgba(26, 26, 21, 0.9); border: 1px solid rgba(201, 168, 76, 0.18); border-radius: 40px; padding: 0.45rem 1rem 0.45rem 0.45rem; transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s; }
.nuggets-host-pill:hover { border-color: rgba(201, 168, 76, 0.45); box-shadow: 0 3px 14px rgba(0,0,0,0.25); transform: translateY(-1px); }
.nuggets-host-pill-img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(201, 168, 76, 0.3); flex-shrink: 0; }
.nuggets-host-pill-name { font-family: var(--brand-font-heading); font-size: 0.95rem; color: #e8d9b5; white-space: nowrap; }
.nuggets-episodes-full { margin-top: 0; }
.nuggets-host-detail-layout { display: grid; grid-template-columns: 240px 1fr; gap: 3.5rem; align-items: start; padding-top: 0.5rem; }
.nuggets-host-detail-photo-col { display: flex; justify-content: center; }
@@ -9916,10 +9909,6 @@
.nuggets-latest-episode-desc { color: var(--brand-muted); line-height: 1.55; margin: 0 0 1rem; }
.nuggets-episode-list { margin-top: 2rem; }
@media (max-width: 800px) {
.nuggets-body-layout { grid-template-columns: 1fr; }
}
.breadcrumb {
font-size: 0.85rem;
color: var(--brand-muted);
src/App.tsx
+15 -24
View File
@@ -1926,31 +1926,22 @@ function NuggetsPage({ content }: { content: SiteContent }) {
)}
<section className="section-nuggets-body" aria-label={`${nuggets.title} hosts and episodes`}>
<div className="section-inner nuggets-body-layout">
<div className="nuggets-body-col nuggets-body-hosts">
{activeHosts.length > 0 && (
<>
<p className="eyebrow">Meet the Hosts</p>
<div className="nuggets-hosts-list">
{activeHosts.map(host => (
<Link key={host.id} to={`/nuggets/hosts/${host.id}`} className="nuggets-host-card nuggets-host-card--link">
<div className="nuggets-host-card-header">
{host.imageUrl && <img src={host.imageUrl} alt={host.name} className="nuggets-host-card-img" loading="lazy" />}
<div className="nuggets-host-card-meta">
<h3 className="nuggets-host-card-name">{host.name}</h3>
{host.role && <p className="nuggets-host-card-role">{host.role}</p>}
</div>
</div>
{host.bio && <p className="nuggets-host-card-bio">{host.bio}</p>}
<p className="nuggets-host-card-cta">View Profile →</p>
</Link>
))}
</div>
</>
)}
</div>
<div className="section-inner">
{activeHosts.length > 0 && (
<div className="nuggets-hosts-row-wrap">
<p className="eyebrow" style={{ marginBottom: '1rem' }}>Meet the Hosts</p>
<div className="nuggets-hosts-row">
{activeHosts.map(host => (
<Link key={host.id} to={`/nuggets/hosts/${host.id}`} className="nuggets-host-pill">
{host.imageUrl && <img src={host.imageUrl} alt={host.name} className="nuggets-host-pill-img" loading="lazy" />}
<span className="nuggets-host-pill-name">{host.name}</span>
</Link>
))}
</div>
</div>
)}
<div className="nuggets-body-col nuggets-body-episodes">
<div className="nuggets-episodes-full">
<p className="eyebrow">Episodes</p>
{loading ? (
<p className="nuggets-episodes-note">Loading episodes…</p>