qreastech/MNQ-Catering-y-Evento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: mobile improvements — hamburger menu, responsive typography, grid fixes

Browse Source
This commit is contained in:
Manuel
2026-05-08 01:24:57 +02:00
parent c3667512e5
commit 58eb6dc952
6 changed files with 189 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SiteHeader.astro
+138 -3
View File
@@ -26,6 +26,7 @@ const links = [
/>
</a>
<!-- Desktop nav -->
<nav class="site-nav" aria-label="Principal">
{links.map(({ href, label, key }) => (
<a href={href} class={`nav-link${activeNav === key ? ' active' : ''}`}>
@@ -35,21 +36,70 @@ const links = [
</nav>
<div class="nav-actions">
<!-- WhatsApp solo en desktop -->
<a
href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
class="btn btn-pill"
class="btn btn-pill nav-wa"
target="_blank"
rel="noreferrer"
style="font-size: 0.6875rem; padding: 0.625rem 1.25rem;"
>
WhatsApp
</a>
<!-- Hamburger (mobile) -->
<button class="nav-toggle" id="navToggle" aria-label="Abrir menú" aria-expanded="false">
<span class="hb-bar"></span>
<span class="hb-bar"></span>
<span class="hb-bar"></span>
</button>
</div>
</div>
</header>
<!-- Mobile nav drawer -->
<div class="mobile-nav" id="mobileNav" aria-hidden="true">
{links.map(({ href, label, key }) => (
<a href={href} class={`mobile-nav-link${activeNav === key ? ' active' : ''}`}>
{label}
</a>
))}
<a
href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20cotizar%20mi%20evento"
class="btn btn-primary mobile-wa"
target="_blank"
rel="noreferrer"
style="width: 100%; justify-content: center; margin-top: 0.5rem;"
>
Consultar por WhatsApp
</a>
</div>
<script>
const toggle = document.getElementById('navToggle')!;
const mobileNav = document.getElementById('mobileNav')!;
toggle.addEventListener('click', () => {
const open = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', String(!open));
mobileNav.classList.toggle('open', !open);
mobileNav.setAttribute('aria-hidden', String(open));
document.body.style.overflow = open ? '' : 'hidden';
});
// Cerrar al navegar
mobileNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
toggle.setAttribute('aria-expanded', 'false');
mobileNav.classList.remove('open');
mobileNav.setAttribute('aria-hidden', 'true');
document.body.style.overflow = '';
});
});
</script>
<style>
/* ── Brand ── */
.site-brand-link {
display: flex;
align-items: center;
@@ -57,8 +107,93 @@ const links = [
}
.site-logo-banner {
height: 3.5rem;
height: 2.25rem;
width: auto;
object-fit: contain;
}
/* ── Hamburger ── */
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
width: 2.5rem;
height: 2.5rem;
}
.hb-bar {
display: block;
width: 22px;
height: 2px;
background: var(--color-on-surface);
border-radius: 2px;
transition: transform 250ms, opacity 200ms;
}
.nav-toggle[aria-expanded="true"] .hb-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hb-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hb-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── WhatsApp pill — oculto en mobile ── */
.nav-wa {
display: none;
font-size: 0.6875rem;
padding: 0.625rem 1.25rem;
}
/* ── Mobile drawer ── */
.mobile-nav {
display: none;
position: fixed;
top: var(--nav-h);
left: 0;
right: 0;
z-index: 49;
background: var(--color-surface);
border-bottom: 1px solid var(--color-outline-variant);
padding: var(--space-6) var(--space-page) var(--space-8);
flex-direction: column;
gap: var(--space-4);
box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}
.mobile-nav.open {
display: flex;
}
.mobile-nav-link {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-on-surface);
padding: var(--space-3) 0;
border-bottom: 1px solid rgb(208 197 175 / 20%);
transition: color 200ms;
}
.mobile-nav-link.active,
.mobile-nav-link:hover {
color: var(--color-primary);
}
/* ── Desktop overrides ── */
@media (min-width: 48rem) {
.site-logo-banner { height: 3.25rem; }
.nav-toggle { display: none; }
.nav-wa { display: inline-flex; }
.mobile-nav { display: none !important; }
}
</style>
src/pages/bodas-reales.astro
+9 -4
View File
@@ -190,16 +190,21 @@ import MainLayout from '../layouts/MainLayout.astro';
<style>
.bento-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.bento-large { position: relative; min-height: 28rem; }
.bento-small { position: relative; min-height: 20rem; }
.bento-large {
position: relative;
min-height: 22rem;
grid-column: span 2;
}
.bento-small { position: relative; min-height: 14rem; }
@media (min-width: 48rem) {
.bento-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: var(--space-8);
}
.bento-large {
grid-column: span 2;
src/pages/corporativo-business.astro
+5 -3
View File
@@ -143,17 +143,19 @@ import MainLayout from '../layouts/MainLayout.astro';
<style>
.corp-bento {
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr;
gap: var(--space-4);
}
.corp-wide, .corp-tall { position: relative; min-height: 20rem; }
.corp-wide, .corp-tall { position: relative; min-height: 18rem; }
@media (min-width: 48rem) {
.corp-bento {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 22rem 22rem;
gap: var(--space-8);
}
.corp-wide { grid-column: span 2; }
.corp-tall { grid-row: span 2; }
.corp-tall { grid-row: span 2; min-height: auto; }
[style*="grid-column:span 12"] { grid-column: span 6 !important; }
[style*="height:28rem"] { height: 36rem !important; }
}
src/pages/reuniones-familiares.astro
+10 -1
View File
@@ -240,15 +240,20 @@ import MainLayout from '../layouts/MainLayout.astro';
<style>
.hero-card-glass {
width: 100%;
max-width: 36rem;
background: rgb(255 248 240 / 92%);
backdrop-filter: blur(8px);
padding: var(--space-12);
padding: var(--space-8);
border: 1px solid rgb(208 197 175 / 20%);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
@media (min-width: 48rem) {
.hero-card-glass { padding: var(--space-12); }
}
.servicios-header {
display: grid;
gap: var(--space-8);
@@ -260,6 +265,10 @@ import MainLayout from '../layouts/MainLayout.astro';
gap: var(--space-8);
}
@media (max-width: 47.9rem) {
.card-stagger { margin-top: 0 !important; }
}
@media (min-width: 48rem) {
.card-stagger { margin-top: var(--space-24); }
src/styles/components.css
+24 -9
View File
@@ -501,22 +501,21 @@
.whatsapp-float {
position: fixed;
right: var(--space-8);
bottom: var(--space-8);
right: var(--space-4);
bottom: var(--space-4);
z-index: 60;
display: inline-flex;
align-items: center;
gap: var(--space-4);
gap: var(--space-3);
background: var(--color-primary);
color: var(--color-on-primary);
padding: var(--space-4) var(--space-6);
padding-left: var(--space-8);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
font-family: var(--font-sans);
font-size: var(--text-label-caps);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.15em;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: transform 200ms, box-shadow 200ms;
@@ -532,13 +531,29 @@
}
.whatsapp-float-icon {
width: 2.5rem;
height: 2.5rem;
width: 2rem;
height: 2rem;
border-radius: var(--radius-full);
background: rgb(255 255 255 / 15%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
@media (min-width: 48rem) {
.whatsapp-float {
right: var(--space-8);
bottom: var(--space-8);
padding: var(--space-4) var(--space-6);
padding-left: var(--space-8);
font-size: var(--text-label-caps);
gap: var(--space-4);
}
.whatsapp-float-icon {
width: 2.5rem;
height: 2.5rem;
}
}
/* ─────────────────────────────────────────────
src/styles/tokens.css
+3 -3
View File
@@ -22,9 +22,9 @@
--font-serif: 'Noto Serif', Georgia, serif;
/* Type scale */
--text-display: clamp(2.5rem, 6vw, 4rem);
--text-headline-lg: clamp(1.75rem, 4vw, 2.5rem);
--text-headline-md: 2rem;
--text-display: clamp(1.875rem, 5vw, 4rem);
--text-headline-lg: clamp(1.5rem, 4vw, 2.5rem);
--text-headline-md: clamp(1.375rem, 3.5vw, 2rem);
--text-label-caps: 0.75rem;
--text-base: 1rem;
--text-sm: 0.875rem;