Skip to content

feat: add system-aware theme and homepage redesign #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
samholmes wants to merge 31 commits into
base: main
Choose a base branch
from
Open

feat: add system-aware theme and homepage redesign #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
a16f63a
feat: add system-aware light mode
samholmes Aug 24, 2026
cc2630c
feat: adopt streamlined site layout
samholmes Aug 24, 2026
dbd4812
feat: rotate hero locations
samholmes Aug 24, 2026
6859d98
fix: angle hero location transitions
samholmes Aug 24, 2026
fe30985
fix: prevent hero location clipping
samholmes Aug 24, 2026
7ce3a38
fix: overlap hero location transitions
samholmes Aug 24, 2026
047b159
feat: add horizontal about accordion
samholmes Aug 24, 2026
ac1d471
copy: align about accordion messaging
samholmes Aug 24, 2026
a97c581
copy: refine about accordion label
samholmes Aug 24, 2026
39d133a
style: invert hero wordmark treatment
samholmes Aug 24, 2026
3fc789d
refactor: remove redundant homepage promos
samholmes Aug 24, 2026
20e3e8e
feat: animate hero accent colors
samholmes Aug 24, 2026
8e0088c
feat: animate hero accent gradient
samholmes Aug 24, 2026
c53ce96
style: extend angled hero gradient
samholmes Aug 24, 2026
f9d0f0c
fix: prevent hero accent clipping
samholmes Aug 24, 2026
ecabee7
style: use rainbow hero gradient
samholmes Aug 24, 2026
81b4914
style: speed up hero gradient
samholmes Aug 24, 2026
bb76636
style: accelerate hero gradient
samholmes Aug 24, 2026
229f8fe
style: repeat full-spectrum hero gradient
samholmes Aug 24, 2026
e979972
fix: make hero gradient loop seamlessly
samholmes Aug 24, 2026
c33844f
fix: remove seams from hero gradient
samholmes Aug 24, 2026
9a49a3a
style: add breathing rainbow text glow
samholmes Aug 24, 2026
a237d82
style: increase rainbow glow luminosity
samholmes Aug 24, 2026
fea775a
style: outline hero rainbow accent
samholmes Aug 24, 2026
bcdca5b
style: remove hero accent glow
samholmes Aug 24, 2026
3a0d891
style: restore hero accent glow
samholmes Aug 24, 2026
b967e7b
style: strengthen hero accent outline
samholmes Aug 24, 2026
06da92c
style: use solid white hero outline
samholmes Aug 24, 2026
b178d9d
fix: keep hero accent outline static
samholmes Aug 24, 2026
977a1d5
fix: prevent layered hero accent clipping
samholmes Aug 24, 2026
c477a73
fix: expand animated hero layer bounds
samholmes Aug 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 18 additions & 17 deletions app/admin/talks/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@ export default function AdminTalks() {
// Styled Components //

const BackgroundContainer = styled.section`
background-color: #0a0a0a;
background-color: var(--background);
position: fixed;
height: 100vh;
width: 100vw;
Expand Down Expand Up @@ -434,12 +434,12 @@ const PageHeader = styled.div`
const Title = styled.h1`
font-size: 2rem;
font-weight: 700;
color: white;
color: var(--foreground);
margin: 0;
`

const Subtitle = styled.p`
color: rgba(255, 255, 255, 0.6);
color: rgba(var(--foreground-rgb), 0.6);
margin: 0.5rem 0 0 0;
`

Expand All @@ -450,7 +450,7 @@ const FilterBar = styled.div`
`

const FilterLabel = styled.span`
color: rgba(255, 255, 255, 0.7);
color: rgba(var(--foreground-rgb), 0.7);
font-size: 0.875rem;
font-weight: 600;
`
Expand All @@ -470,10 +470,11 @@ const FilterButton = styled.button<{ $active: boolean; $color?: string }>`
transition: all 0.2s ease;
text-transform: capitalize;
border: 1px solid
${(props) => (props.$active ? props.$color || "white" : "rgba(255, 255, 255, 0.2)")};
${(props) => (props.$active ? props.$color || "white" : "rgba(var(--foreground-rgb), 0.2)")};
background-color: ${(props) =>
props.$active ? (props.$color || "white") + "22" : "transparent"};
color: ${(props) => (props.$active ? props.$color || "white" : "rgba(255, 255, 255, 0.6)")};
color: ${(props) =>
props.$active ? props.$color || "white" : "rgba(var(--foreground-rgb), 0.6)"};

&:hover {
border-color: ${(props) => props.$color || "white"};
Expand All @@ -488,10 +489,10 @@ const TalkList = styled.div`
`

const TalkCard = styled.div`
background-color: rgba(21, 21, 28, 0.75);
background-color: var(--surface);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.5rem;
display: flex;
Expand All @@ -509,7 +510,7 @@ const CardHeader = styled.div`
const TalkTitle = styled.h2`
font-size: 1.125rem;
font-weight: 600;
color: white;
color: var(--foreground);
margin: 0;
flex: 1;
`
Expand Down Expand Up @@ -612,7 +613,7 @@ const StatusPillSelect = styled.select<{ $color: string; $widthCh: number }>`

option {
background-color: #1a1a2e;
color: white;
color: var(--foreground);
}
`

Expand All @@ -632,7 +633,7 @@ const MetaRow = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 0.75rem;
background-color: rgba(255, 255, 255, 0.03);
background-color: rgba(var(--foreground-rgb), 0.03);
border-radius: 0.75rem;
padding: 0.75rem;

Expand All @@ -654,14 +655,14 @@ const MetaItem = styled.div`
const MetaLabel = styled.span`
font-size: 0.6875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
color: rgba(var(--foreground-rgb), 0.5);
text-transform: uppercase;
letter-spacing: 0.05em;
`

const MetaValue = styled.span`
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9);
color: rgba(var(--foreground-rgb), 0.9);
display: flex;
align-items: center;
gap: 0.5rem;
Expand All @@ -678,7 +679,7 @@ const HandleLink = styled.a`
`

const Synopsis = styled.p`
color: rgba(255, 255, 255, 0.7);
color: rgba(var(--foreground-rgb), 0.7);
font-size: 0.875rem;
line-height: 1.6;
margin: 0;
Expand All @@ -687,7 +688,7 @@ const Synopsis = styled.p`

const SlidesInfo = styled.div`
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
color: rgba(var(--foreground-rgb), 0.5);
`

const SlidesLink = styled.a`
Expand Down Expand Up @@ -732,13 +733,13 @@ const ErrorMessage = styled.div`

const EmptyState = styled.div`
text-align: center;
color: rgba(255, 255, 255, 0.5);
color: rgba(var(--foreground-rgb), 0.5);
padding: 3rem;
font-size: 1rem;
`

const LoadingText = styled.div`
color: white;
color: var(--foreground);
font-size: 1.25rem;
text-align: center;
margin-top: 4rem;
Expand Down
24 changes: 12 additions & 12 deletions app/admin/thumbnails/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ function AdminTalkThumbnailGen() {
//

const BackgroundContainer = styled.section`
background-color: #0a0a0a;
background-color: var(--background);
position: fixed;
height: 100vh;
width: 100vw;
Expand All @@ -382,13 +382,13 @@ const Container = styled.main`
const Title = styled.h1`
font-size: 2rem;
font-weight: 700;
color: white;
color: var(--foreground);
margin: 0;
text-align: center;
`

const Subtitle = styled.p`
color: rgba(255, 255, 255, 0.7);
color: rgba(var(--foreground-rgb), 0.7);
margin: -1rem 0 0 0;
text-align: center;
`
Expand Down Expand Up @@ -441,15 +441,15 @@ const Field = styled.div`
const Label = styled.label`
font-size: 0.875rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
color: rgba(var(--foreground-rgb), 0.9);
`

const FileInput = styled.input`
padding: 0.5rem;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(var(--foreground-rgb), 0.1);
border: 1px solid rgba(var(--foreground-rgb), 0.2);
border-radius: 0.5rem;
color: white;
color: var(--foreground);
font-size: 0.875rem;
cursor: pointer;

Expand All @@ -459,7 +459,7 @@ const FileInput = styled.input`
background-color: rgba(156, 163, 255, 0.2);
border: 1px solid rgba(156, 163, 255, 0.4);
border-radius: 0.375rem;
color: white;
color: var(--foreground);
cursor: pointer;
font-size: 0.8125rem;
transition: all 0.2s ease;
Expand All @@ -481,7 +481,7 @@ const HandleRow = styled.div`
`

const HandlePrefix = styled.span`
color: rgba(255, 255, 255, 0.5);
color: rgba(var(--foreground-rgb), 0.5);
font-size: 1rem;
font-weight: 600;
flex-shrink: 0;
Expand All @@ -501,7 +501,7 @@ const PhotoStatus = styled.p`

const OrDivider = styled.div`
text-align: center;
color: rgba(255, 255, 255, 0.4);
color: rgba(var(--foreground-rgb), 0.4);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
Expand All @@ -522,12 +522,12 @@ const DownloadRow = styled.div`
const SpecNote = styled.p`
margin: -1rem 0 0 0;
text-align: center;
color: rgba(255, 255, 255, 0.4);
color: rgba(var(--foreground-rgb), 0.4);
font-size: 0.75rem;
`

const LoadingText = styled.div`
color: white;
color: var(--foreground);
font-size: 1.25rem;
text-align: center;
margin-top: 4rem;
Expand Down
Loading
Loading