azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Radio show website: light mode fix, headshot, motto update

Browse Source 
- Fix hero title/tagline/description text invisible in light mode
- Replace ghost button with accent-bordered outline button for contrast
- Add [data-theme="light"] overrides for hero gradients
- Add Mike Swanson headshot (WebP 11KB + JPEG fallback) to about page and home
- Replace SVG placeholders with real photo (circular crop on about, framed on home)
- Update show motto across all locations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Swanson
2026-03-15 18:04:31 -07:00
parent ee89727662
commit a2b8332770
9 changed files with 84 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
projects/radio-show/website/public/images/hosts/mike-swanson-sm.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
projects/radio-show/website/public/images/hosts/mike-swanson.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
projects/radio-show/website/public/images/hosts/mike-swanson.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

62
projects/radio-show/website/src/components/home/AboutPreview.astro
View File

@@ -31,16 +31,11 @@
</div>
<div class="about-visual">
<div class="about-image-placeholder">
<div class="about-image-inner">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</svg>
<span class="about-image-text">The Computer Guru</span>
</div>
<div class="about-photo-frame">
<picture>
<source srcset="/images/hosts/mike-swanson.webp" type="image/webp" />
<img src="/images/hosts/mike-swanson.jpg" alt="Mike Swanson - The Computer Guru" width="400" height="600" loading="lazy" />
</picture>
</div>
<div class="about-visual-accent"></div>
</div>
@@ -102,45 +97,21 @@
justify-content: center;
}
.about-image-placeholder {
.about-photo-frame {
width: 100%;
aspect-ratio: 4 / 5;
max-width: 400px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
max-width: 360px;
position: relative;
z-index: 1;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
overflow: hidden;
border: 2px solid hsl(200 85% 55% / 0.3);
box-shadow: 0 8px 32px hsl(200 85% 55% / 0.1);
}
.about-image-placeholder::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(135deg, hsl(200 85% 55% / 0.05), transparent 50%),
linear-gradient(315deg, hsl(270 60% 50% / 0.03), transparent 50%);
}
.about-image-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
color: var(--color-text-muted);
position: relative;
z-index: 1;
}
.about-image-text {
font-size: var(--text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
.about-photo-frame img {
width: 100%;
height: auto;
display: block;
}
.about-visual-accent {
@@ -165,10 +136,9 @@
order: -1;
}
.about-image-placeholder {
.about-photo-frame {
max-width: 280px;
margin-inline: auto;
aspect-ratio: 1;
}
}
</style>

50
projects/radio-show/website/src/components/home/HeroSection.astro
View File

@@ -14,7 +14,7 @@
<span class="hero-title__line hero-title__line--1">The Computer</span>
<span class="hero-title__line hero-title__line--2">Guru Show</span>
</h1>
<p class="hero-tagline">Technology: Fun and Simple</p>
<p class="hero-tagline">Helping you deal with all of your technology needs while treating you like a person in the process.</p>
<p class="hero-description">
Your source for making sense of the tech world without the jargon.
Hosted by Mike Swanson from Tucson, Arizona -- cutting through the noise
@@ -28,7 +28,7 @@
</svg>
Browse Episodes
</a>
<a href="/subscribe" class="btn btn--ghost btn--lg">Subscribe</a>
<a href="/subscribe" class="btn btn--outline btn--lg">Subscribe</a>
</div>
</div>
@@ -166,7 +166,7 @@
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 800;
line-height: 1.05;
background: linear-gradient(135deg, var(--color-text-primary) 30%, var(--color-accent) 100%);
background: linear-gradient(135deg, hsl(220 10% 92%) 30%, var(--color-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -184,6 +184,28 @@
background-clip: text;
}
[data-theme="light"] .hero-title__line {
background: linear-gradient(135deg, hsl(220 20% 15%) 30%, hsl(200 85% 35%) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .hero-title__line--2 {
background: linear-gradient(135deg, hsl(200 85% 35%) 0%, hsl(220 70% 40%) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="light"] .hero-tagline {
color: hsl(200 85% 35%);
}
[data-theme="light"] .hero-description {
color: hsl(220 15% 35%);
}
.hero-tagline {
font-size: var(--text-xl);
color: var(--color-accent);
@@ -215,6 +237,28 @@
font-size: var(--text-base);
}
.btn--outline {
background: transparent;
color: hsl(220 10% 92%);
border: 1.5px solid hsl(200 85% 55% / 0.5);
transition: all var(--transition-fast);
}
.btn--outline:hover {
border-color: var(--color-accent);
color: var(--color-accent);
background: hsl(200 85% 55% / 0.08);
}
[data-theme="light"] .btn--outline {
color: hsl(220 20% 25%);
border-color: hsl(200 85% 42% / 0.5);
}
[data-theme="light"] .btn--outline:hover {
border-color: hsl(200 85% 42%);
color: hsl(200 85% 42%);
background: hsl(200 85% 42% / 0.08);
}
/* Scroll hint */
.hero-scroll-hint {
position: absolute;

4
projects/radio-show/website/src/layouts/BaseLayout.astro
View File

@@ -8,7 +8,7 @@ interface Props {
image?: string;
}
const { title, description = 'The Computer Guru Show - Technology: Fun and Simple', image = '/og-image.jpg' } = Astro.props;
const { title, description = 'The Computer Guru Show - Helping you deal with all of your technology needs while treating you like a person in the process.', image = '/og-image.jpg' } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
@@ -97,7 +97,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
<div class="footer-grid">
<div class="footer-brand">
<span class="logo-text">The Computer Guru Show</span>
<p>Technology: Fun and Simple</p>
<p>Helping you deal with all of your technology needs while treating you like a person in the process.</p>
<p class="footer-location">Tucson, Arizona</p>
</div>
<div class="footer-links">

28
projects/radio-show/website/src/pages/about.astro
View File

@@ -9,7 +9,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<span class="badge fade-in">About</span>
<h1 class="hero__title fade-in">About the Show</h1>
<p class="hero__subtitle fade-in">
Technology: Fun and Simple. A podcast dedicated to breaking down the biggest stories in tech for everyone.
Helping you deal with all of your technology needs while treating you like a person in the process.
</p>
</div>
</section>
@@ -18,14 +18,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<section class="section">
<div class="container">
<div class="host-card card fade-in">
<div class="host-card__icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2a5 5 0 0 1 5 5v3a5 5 0 0 1-10 0V7a5 5 0 0 1 5-5z"/>
<path d="M17 10v1a5 5 0 0 1-10 0v-1"/>
<line x1="12" y1="19" x2="12" y2="22"/>
<line x1="8" y1="22" x2="16" y2="22"/>
</svg>
</div>
<picture class="host-card__photo">
<source srcset="/images/hosts/mike-swanson.webp" type="image/webp" />
<img src="/images/hosts/mike-swanson.jpg" alt="Mike Swanson - The Computer Guru" width="400" height="600" loading="lazy" />
</picture>
<h2 class="host-card__name">Mike Swanson</h2>
<p class="host-card__title">The Computer Guru</p>
<p class="host-card__bio">
@@ -175,10 +171,20 @@ import BaseLayout from '../layouts/BaseLayout.astro';
margin-inline: auto;
padding: var(--space-12) var(--space-8);
}
.host-card__icon {
color: var(--color-accent);
.host-card__photo {
display: block;
margin-bottom: var(--space-6);
}
.host-card__photo img {
width: 160px;
height: 160px;
object-fit: cover;
object-position: center 15%;
border-radius: 50%;
margin-inline: auto;
border: 3px solid var(--color-accent);
box-shadow: 0 0 24px var(--color-accent-glow);
}
.host-card__name {
font-size: var(--text-3xl);
margin-bottom: var(--space-2);

2
projects/radio-show/website/src/pages/feed.xml.ts
View File

@@ -12,7 +12,7 @@ export async function GET(context: APIContext) {
return rss({
title: 'The Computer Guru Show',
description:
'Technology: Fun and Simple. Hosted by Mike Swanson from Tucson, Arizona.',
'Helping you deal with all of your technology needs while treating you like a person in the process.',
site: context.site!.toString(),
items: sortedEpisodes.map((ep) => ({
title: ep.data.title,

2
projects/radio-show/website/src/pages/index.astro
View File

@@ -9,7 +9,7 @@ import AboutPreview from '../components/home/AboutPreview.astro';
import SubscribeCTA from '../components/home/SubscribeCTA.astro';
---
<BaseLayout title="Home" description="The Computer Guru Show - Technology: Fun and Simple. Your source for making sense of the tech world, hosted by Mike Swanson from Tucson, Arizona.">
<BaseLayout title="Home" description="The Computer Guru Show - Helping you deal with all of your technology needs while treating you like a person in the process.">
<HeroSection />
<LatestEpisodes />
<FeaturedClassics />