Clip pipeline improvements, direct YouTube upload, hero redesign, how-it-works updates
- make_clips: migrate refine_clip_timestamps to mlx-whisper, add LLM caption polishing, fix speaker label reversal in grouped caption lines - upload_clips: interactive episode/clip/platform menus, direct YouTube Shorts upload via Data API v3 (bypasses Postiz), direct Bluesky upload - Website hero: centered layout with left-column cover art on desktop, compact text links instead of pill buttons, scaled up typography - How-it-works: move anatomy section above diagram, update stats (320 names, 189+ personality layers, 20 towns, 570+ topics, 1400+ scenarios), add drunk/high/unhinged callers, voicemails, MLX Whisper GPU, LLM-polished captions - All footers: add System Status link, remove Ko-fi branding - .gitignore: YouTube OAuth credential files Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -47,7 +47,7 @@ a:hover {
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 3rem 1.5rem 2rem;
|
||||
padding: 3rem 1.5rem 2.5rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
@@ -57,14 +57,14 @@ a:hover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.cover-art {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 32px rgba(232, 121, 29, 0.35);
|
||||
box-shadow: 0 8px 32px rgba(232, 121, 29, 0.25);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@@ -72,31 +72,32 @@ a:hover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 1.15rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 400px;
|
||||
max-width: 500px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.phone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
margin-top: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.phone-inline {
|
||||
font-size: 0.95rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -110,12 +111,12 @@ a:hover {
|
||||
.on-air-badge {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
gap: 0.35rem;
|
||||
background: var(--accent-red);
|
||||
color: #fff;
|
||||
padding: 0.25rem 0.75rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 50px;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
@@ -128,8 +129,8 @@ a:hover {
|
||||
}
|
||||
|
||||
.on-air-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
animation: on-air-blink 1s step-end infinite;
|
||||
@@ -149,11 +150,11 @@ a:hover {
|
||||
.off-air-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #444;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-muted);
|
||||
padding: 0.25rem 0.75rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 50px;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
@@ -169,52 +170,58 @@ a:hover {
|
||||
text-shadow: 0 0 16px rgba(204, 34, 34, 0.35);
|
||||
}
|
||||
|
||||
/* Subscribe buttons — primary listen platforms */
|
||||
/* Subscribe — compact inline text links */
|
||||
.subscribe-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-top: 1.5rem;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.subscribe-label {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
letter-spacing: 0.12em;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.subscribe-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.subscribe-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.45rem 1rem;
|
||||
border-radius: 50px;
|
||||
font-size: 0.8rem;
|
||||
gap: 0.35rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
color: var(--text-muted);
|
||||
background: transparent;
|
||||
border: 1px solid var(--text-muted);
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
border: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.subscribe-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.subscribe-btn svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.subscribe-btn:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Secondary links — How It Works, Discord, Support */
|
||||
@@ -224,23 +231,35 @@ a:hover {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.secondary-link {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
transition: color 0.2s;
|
||||
opacity: 0.6;
|
||||
transition: color 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
.secondary-link:hover {
|
||||
color: var(--accent);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.secondary-sep {
|
||||
color: var(--text-muted);
|
||||
opacity: 0.4;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.3;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.support-link {
|
||||
color: var(--accent);
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.support-link:hover {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
/* Episodes */
|
||||
@@ -1201,13 +1220,15 @@ a:hover {
|
||||
/* Desktop */
|
||||
@media (min-width: 768px) {
|
||||
.hero {
|
||||
padding: 4rem 2rem 2.5rem;
|
||||
padding: 3.5rem 2rem 2.5rem;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
gap: 3rem;
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-info {
|
||||
@@ -1215,8 +1236,17 @@ a:hover {
|
||||
}
|
||||
|
||||
.cover-art {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.phone {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.subscribe-row {
|
||||
|
||||
Reference in New Issue
Block a user