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

Fix cramped host card layout on Nuggets page; v2.0.3
Publish Container / docker (push) Successful in 12m59s
Details

Browse Source 
- Restructure host card: image+name/role in a row header, bio spans full card width below
- Widen hosts column from 300px max to 360px max
- Add nuggets-host-card-header and nuggets-host-card-meta CSS classes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-09-08 10:47:21 -04:00
1 parent 334b455d25
commit 29d2ace1b2
4 files changed
+93 -87
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.css
+8 -6
View File
@@ -9879,15 +9879,17 @@
.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(240px, 300px) 1fr; gap: 2.5rem; align-items: start; }
.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; gap: 1rem; align-items: flex-start; background: rgba(26, 26, 21, 0.9); border: 1px solid rgba(201, 168, 76, 0.18); border-radius: 12px; padding: 1.1rem 1.25rem; }
.nuggets-host-card-img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(201, 168, 76, 0.3); }
.nuggets-host-card-name { font-family: var(--brand-font-heading); font-size: 1.1rem; color: #e8d9b5; margin: 0; }
.nuggets-host-card-role { font-size: 0.75rem; 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.85rem; color: var(--brand-muted); line-height: 1.5; margin: 0.5rem 0 0; }
.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-episodes-note { color: var(--brand-muted); margin-top: 1.5rem; }
.nuggets-latest-episode { background: rgba(26, 26, 21, 0.9); border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 12px; padding: 1.5rem 1.75rem; margin-top: 1.5rem; }
src/App.tsx
+7 -3
View File
@@ -1933,9 +1933,13 @@ function NuggetsPage({ content }: { content: SiteContent }) {
<div className="nuggets-hosts-list">
{activeHosts.map(host => (
<div key={host.id} className="nuggets-host-card">
{host.imageUrl && <img src={host.imageUrl} alt={host.name} className="nuggets-host-card-img" loading="lazy" />}
<h3 className="nuggets-host-card-name">{host.name}</h3>
{host.role && <p className="nuggets-host-card-role">{host.role}</p>}
<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>}
</div>
))}