muken/la-huasca-ts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: mobile-responsive coffee menu with fluid typography

Browse Source
This commit is contained in:
muken
2026-06-30 20:57:25 -05:00
parent c42b1c3cc8
commit c829e27bf6
1 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/coffee/page.tsx
+27 -27
View File
@@ -38,9 +38,9 @@ export default function CoffeePage() {
const daily = items.find((i) => i.is_daily_special);
return (
<main style={{ padding: '2rem', maxWidth: '72rem', margin: '0 auto', minHeight: '60vh' }}>
<h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 0.5rem' }}>Coffee &amp; Kitchen</h1>
<p style={{ color: '#555', marginBottom: '2rem', maxWidth: '50ch' }}>
<main style={{ padding: 'clamp(1rem, 5vw, 2rem)', maxWidth: '72rem', margin: '0 auto', minHeight: '60vh' }}>
<h1 style={{ fontSize: 'clamp(28px, 6vw, 48px)', fontWeight: 400, fontStyle: 'italic', color: navy, margin: '0 0 0.25rem' }}>Coffee &amp; Kitchen</h1>
<p style={{ color: '#555', marginBottom: '1.5rem', maxWidth: '50ch', fontSize: 'clamp(14px, 3vw, 16px)' }}>
Locally sourced coffee, fresh pastries, and seasonal plates.
</p>
@@ -52,10 +52,10 @@ export default function CoffeePage() {
style={{
background: `linear-gradient(135deg, ${navy} 0%, #0e2f47 100%)`,
color: cream,
borderRadius: '20px',
padding: '1.5rem 2rem',
marginBottom: '2rem',
boxShadow: '0 6px 20px rgba(1,13,30,0.2)',
borderRadius: '16px',
padding: 'clamp(1rem, 4vw, 1.5rem) clamp(1.25rem, 5vw, 2rem)',
marginBottom: '1.5rem',
boxShadow: '0 4px 16px rgba(1,13,30,0.2)',
}}
>
<span
@@ -63,68 +63,68 @@ export default function CoffeePage() {
display: 'inline-block',
background: gold,
color: navy,
fontSize: '12px',
fontSize: '11px',
fontWeight: 700,
textTransform: 'uppercase',
letterSpacing: '0.1em',
padding: '0.35rem 0.8rem',
letterSpacing: '0.08em',
padding: '0.3rem 0.7rem',
borderRadius: '999px',
marginBottom: '0.75rem',
marginBottom: '0.5rem',
}}
>
Menu of the Day
</span>
<h2 style={{ margin: '0 0 0.5rem', fontSize: '26px' }}>{daily.name}</h2>
<p style={{ margin: '0 0 1rem', opacity: 0.85 }}>{daily.description}</p>
<strong style={{ color: gold, fontSize: '20px' }}>${daily.price}</strong>
<h2 style={{ margin: '0 0 0.35rem', fontSize: 'clamp(20px, 4vw, 26px)' }}>{daily.name}</h2>
<p style={{ margin: '0 0 0.75rem', opacity: 0.85, fontSize: 'clamp(14px, 3vw, 16px)' }}>{daily.description}</p>
<strong style={{ color: gold, fontSize: 'clamp(18px, 4vw, 20px)' }}>${daily.price}</strong>
</section>
)}
{!loading && items.length === 0 && <p style={{ color: '#777' }}>No menu items yet.</p>}
{categories.map((category) => (
<section key={category} style={{ marginBottom: '2rem' }}>
<section key={category} style={{ marginBottom: '1.5rem' }}>
<h2
style={{
fontSize: '20px',
fontSize: 'clamp(16px, 4vw, 20px)',
color: navy,
borderBottom: '2px solid ' + warm,
display: 'inline-block',
paddingBottom: '0.3rem',
margin: '0 0 1rem',
paddingBottom: '0.25rem',
margin: '0 0 0.75rem',
}}
>
{category}
</h2>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: '1rem' }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 280px), 1fr))', gap: 'clamp(0.75rem, 3vw, 1rem)' }}>
{items
.filter((i) => i.category === category)
.map((item) => (
<div
key={item.id}
style={{
padding: '1.25rem',
padding: 'clamp(1rem, 4vw, 1.25rem)',
background: cream,
borderRadius: '16px',
borderRadius: '12px',
boxShadow: '0 1px 3px rgba(1,13,30,0.08)',
}}
>
{(item.photos && item.photos.length > 0) && (
<div style={{ marginBottom: '0.75rem', background: '#e8e4dc', borderRadius: '12px', overflow: 'hidden' }}>
<div style={{ marginBottom: '0.6rem', background: '#e8e4dc', borderRadius: '10px', overflow: 'hidden' }}>
<img
src={item.featured_photo || item.photos[0]}
alt={item.name}
loading="lazy"
decoding="async"
style={{ width: '100%', height: 120, objectFit: 'cover', borderRadius: '12px' }}
style={{ width: '100%', height: 'clamp(100px, 25vw, 140px)', objectFit: 'cover', display: 'block' }}
/>
</div>
)}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.5rem' }}>
<strong style={{ color: navy }}>{item.name}</strong>
<span style={{ color: warm, fontWeight: 700 }}>${item.price}</span>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.4rem', gap: '0.5rem' }}>
<strong style={{ color: navy, fontSize: 'clamp(15px, 3.5vw, 17px)' }}>{item.name}</strong>
<span style={{ color: warm, fontWeight: 700, fontSize: 'clamp(15px, 3.5vw, 17px)', whiteSpace: 'nowrap' }}>${item.price}</span>
</div>
<p style={{ margin: 0, color: '#555', fontSize: '14px' }}>{item.description}</p>
<p style={{ margin: 0, color: '#555', fontSize: 'clamp(13px, 3vw, 14px)', lineHeight: 1.4 }}>{item.description}</p>
</div>
))}
</div>