From c829e27bf6d2bf81dcf7ddc50d0319613374f7a1 Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Tue, 30 Jun 2026 20:57:25 -0500
Subject: [PATCH] feat: mobile-responsive coffee menu with fluid typography

---
 src/app/coffee/page.tsx | 54 ++++++++++++++++++++---------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/app/coffee/page.tsx b/src/app/coffee/page.tsx
index 23a1f95..df2b5d1 100644
--- a/src/app/coffee/page.tsx
+++ b/src/app/coffee/page.tsx
@@ -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>