pinto/ttvfx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile polish: fix 320px overflow, 44px tap targets, readable badges

Browse Source 
- Project cards stack credits under title on small screens
- Fluid headings on /work and project pages; next-project banner wraps
- Footer, back, award and nav links padded to ~44px touch targets
- theRender.Fish marked as in-house project

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
twotalesanimation
2026-10-05 19:27:53 +02:00
parent c30a8fb486
commit ef0c2ef78e
9 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AwardBand.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export default function AwardBand({ award }: { award: Award }) {
{award.project && (
<Link
href={`/work/${award.project}/`}
className="font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
className="py-3.5 font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
>
See the project →
</Link>
components/Filmography.tsx
+3 -3
View File
@@ -19,17 +19,17 @@ export default function Filmography() {
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
<div className="absolute top-2 left-2 flex flex-wrap gap-1">
{c.upcoming && (
<span className="bg-accent px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-ink uppercase">
<span className="bg-accent px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-ink uppercase">
Upcoming
</span>
)}
{awardFor(c.slug) && (
<span className="bg-fg px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-ink uppercase">
<span className="bg-fg px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-ink uppercase">
{awardFor(c.slug)!.body} {awardFor(c.slug)!.result}
</span>
)}
{c.network && (
<span className="bg-black/70 px-1.5 py-0.5 font-mono text-[9px] tracking-[0.2em] text-fg uppercase backdrop-blur-sm">
<span className="bg-black/70 px-1.5 py-0.5 font-mono text-[10px] tracking-[0.2em] text-fg uppercase backdrop-blur-sm">
{c.network}
</span>
)}
components/Footer.tsx
+3 -3
View File
@@ -13,15 +13,15 @@ export default function Footer() {
<p className="mt-1 font-mono text-xs tracking-widest text-muted uppercase">Est. {site.founded}</p>
</div>
</div>
<nav className="flex flex-col gap-2" aria-label="Footer">
<nav className="-my-3 flex flex-col" aria-label="Footer">
{nav.map((item) => (
<Link key={item.href} href={item.href} className="text-sm text-muted hover:text-fg">
<Link key={item.href} href={item.href} className="py-3 text-sm text-muted hover:text-fg">
{item.label}
</Link>
))}
</nav>
<div className="flex flex-col gap-2 text-sm md:items-end">
<a href={`mailto:${site.email}`} className="hover:text-accent">
<a href={`mailto:${site.email}`} className="-my-3 py-3 break-all hover:text-accent">
{site.email}
</a>
<span className="text-muted">{site.location}</span>
components/Header.tsx
+2 -2
View File
@@ -27,7 +27,7 @@ export default function Header() {
}`}
>
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-5 md:h-20 md:px-8">
<Link href="/" className="flex items-center gap-3" onClick={() => setOpen(false)}>
<Link href="/" className="flex items-center gap-3 py-2" onClick={() => setOpen(false)}>
<Fox className="h-7 w-7 text-fg md:h-8 md:w-8" />
<span className="font-display text-sm font-light tracking-[0.22em] whitespace-nowrap uppercase md:text-lg md:tracking-[0.3em]">
Two Tales <span className="text-accent">VFX</span>
@@ -39,7 +39,7 @@ export default function Header() {
<Link
key={item.href}
href={item.href}
className="font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
className="py-3 font-mono text-xs tracking-[0.2em] text-muted uppercase transition-colors hover:text-fg"
>
{item.label}
</Link>
components/ProjectCard.tsx
+4 -4
View File
@@ -6,14 +6,14 @@ export default function ProjectCard({ project }: { project: Project }) {
return (
<Link href={`/work/${project.slug}/`} className="group block">
<Frame project={project} />
<div className="mt-5 flex items-start justify-between gap-6">
<div>
<h3 className="font-display text-2xl font-light tracking-wide uppercase transition-colors group-hover:text-accent md:text-3xl">
<div className="mt-5 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
<div className="min-w-0">
<h3 className="font-display text-2xl font-light tracking-wide break-words uppercase transition-colors group-hover:text-accent md:text-3xl">
{project.title}
</h3>
<p className="mt-1 text-sm text-muted">{project.client}</p>
</div>
<p className="max-w-[45%] pt-2 text-right font-mono text-[11px] tracking-widest text-muted uppercase">
<p className="font-mono sm:max-w-[45%] sm:pt-2 sm:text-right text-[11px] tracking-widest text-muted uppercase">
{project.credits.slice(0, 2).join(" / ")}
</p>
</div>