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

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);