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); const daily = items.find((i) => i.is_daily_special);
return ( return (
<main style={{ padding: '2rem', maxWidth: '72rem', margin: '0 auto', minHeight: '60vh' }}> <main style={{ padding: 'clamp(1rem, 5vw, 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> <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: '2rem', maxWidth: '50ch' }}> <p style={{ color: '#555', marginBottom: '1.5rem', maxWidth: '50ch', fontSize: 'clamp(14px, 3vw, 16px)' }}>
Locally sourced coffee, fresh pastries, and seasonal plates. Locally sourced coffee, fresh pastries, and seasonal plates.
</p> </p>
@@ -52,10 +52,10 @@ export default function CoffeePage() {
style={{ style={{
background: `linear-gradient(135deg, ${navy} 0%, #0e2f47 100%)`, background: `linear-gradient(135deg, ${navy} 0%, #0e2f47 100%)`,
color: cream, color: cream,
borderRadius: '20px', borderRadius: '16px',
padding: '1.5rem 2rem', padding: 'clamp(1rem, 4vw, 1.5rem) clamp(1.25rem, 5vw, 2rem)',
marginBottom: '2rem', marginBottom: '1.5rem',
boxShadow: '0 6px 20px rgba(1,13,30,0.2)', boxShadow: '0 4px 16px rgba(1,13,30,0.2)',
}} }}
> >
<span <span
@@ -63,68 +63,68 @@ export default function CoffeePage() {
display: 'inline-block', display: 'inline-block',
background: gold, background: gold,
color: navy, color: navy,
fontSize: '12px', fontSize: '11px',
fontWeight: 700, fontWeight: 700,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: '0.1em', letterSpacing: '0.08em',
padding: '0.35rem 0.8rem', padding: '0.3rem 0.7rem',
borderRadius: '999px', borderRadius: '999px',
marginBottom: '0.75rem', marginBottom: '0.5rem',
}} }}
> >
Menu of the Day Menu of the Day
</span> </span>
<h2 style={{ margin: '0 0 0.5rem', fontSize: '26px' }}>{daily.name}</h2> <h2 style={{ margin: '0 0 0.35rem', fontSize: 'clamp(20px, 4vw, 26px)' }}>{daily.name}</h2>
<p style={{ margin: '0 0 1rem', opacity: 0.85 }}>{daily.description}</p> <p style={{ margin: '0 0 0.75rem', opacity: 0.85, fontSize: 'clamp(14px, 3vw, 16px)' }}>{daily.description}</p>
<strong style={{ color: gold, fontSize: '20px' }}>${daily.price}</strong> <strong style={{ color: gold, fontSize: 'clamp(18px, 4vw, 20px)' }}>${daily.price}</strong>
</section> </section>
)} )}
{!loading && items.length === 0 && <p style={{ color: '#777' }}>No menu items yet.</p>} {!loading && items.length === 0 && <p style={{ color: '#777' }}>No menu items yet.</p>}
{categories.map((category) => ( {categories.map((category) => (
<section key={category} style={{ marginBottom: '2rem' }}> <section key={category} style={{ marginBottom: '1.5rem' }}>
<h2 <h2
style={{ style={{
fontSize: '20px', fontSize: 'clamp(16px, 4vw, 20px)',
color: navy, color: navy,
borderBottom: '2px solid ' + warm, borderBottom: '2px solid ' + warm,
display: 'inline-block', display: 'inline-block',
paddingBottom: '0.3rem', paddingBottom: '0.25rem',
margin: '0 0 1rem', margin: '0 0 0.75rem',
}} }}
> >
{category} {category}
</h2> </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 {items
.filter((i) => i.category === category) .filter((i) => i.category === category)
.map((item) => ( .map((item) => (
<div <div
key={item.id} key={item.id}
style={{ style={{
padding: '1.25rem', padding: 'clamp(1rem, 4vw, 1.25rem)',
background: cream, background: cream,
borderRadius: '16px', borderRadius: '12px',
boxShadow: '0 1px 3px rgba(1,13,30,0.08)', boxShadow: '0 1px 3px rgba(1,13,30,0.08)',
}} }}
> >
{(item.photos && item.photos.length > 0) && ( {(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 <img
src={item.featured_photo || item.photos[0]} src={item.featured_photo || item.photos[0]}
alt={item.name} alt={item.name}
loading="lazy" loading="lazy"
decoding="async" 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>
)} )}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.5rem' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '0.4rem', gap: '0.5rem' }}>
<strong style={{ color: navy }}>{item.name}</strong> <strong style={{ color: navy, fontSize: 'clamp(15px, 3.5vw, 17px)' }}>{item.name}</strong>
<span style={{ color: warm, fontWeight: 700 }}>${item.price}</span> <span style={{ color: warm, fontWeight: 700, fontSize: 'clamp(15px, 3.5vw, 17px)', whiteSpace: 'nowrap' }}>${item.price}</span>
</div> </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>
))} ))}
</div> </div>