feat(website): responsive / mobile layouts
Make the marketing site mobile-friendly across every page and section. Desktop appearance is unchanged; all breakpoint logic targets <=768px. - Fluid section padding via clamp(); equal grids use auto-fit/minmax, asymmetric grids stack to one column via scoped-CSS media queries - Nav: real hamburger menu on mobile (links, lang toggle, login, CTA) - ProductMockup: scales the whole dashboard to fit (zoom) instead of reflowing its internals into a tall stack - Lower oversized heading clamp() minimums so titles no longer overflow at ~390px (hero, page headers, final CTA, brand cover/chapter) - HowItWorks: row-gap when steps stack so node markers clear the text - Compare + partners tables: stacked rows now label each value with its column (Dezky vs hyperscaler / CSP) instead of an ambiguous header - Footer columns, tiers, calculator and tables stack cleanly on mobile
This commit is contained in:
Ronni Baslund
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
// Sticky top nav with logo, anchor links, language toggle, login + demo CTA.
|
||||
// Ported from landing-sections.jsx Nav (light mode, production subset).
|
||||
import { computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { APP_URL } from '~/utils/landingTokens'
|
||||
import { useTheme, useCopy, useLang, toggleLang, scrollToAnchor, goToSection } from '~/composables/useLanding'
|
||||
@@ -11,6 +11,8 @@ const copy = useCopy()
|
||||
const lang = useLang()
|
||||
const route = useRoute()
|
||||
|
||||
const mobileOpen = ref(false)
|
||||
|
||||
const items = computed(() => [
|
||||
{ label: copy.value.nav.product, href: '/#suite' },
|
||||
{ label: copy.value.nav.security, href: '/#sovereignty' },
|
||||
@@ -32,6 +34,12 @@ function onNav(e: MouseEvent, href: string) {
|
||||
e.preventDefault()
|
||||
scrollToAnchor(href.slice(href.indexOf('#')))
|
||||
}
|
||||
mobileOpen.value = false
|
||||
}
|
||||
|
||||
function onMobileLink(e: MouseEvent, href: string) {
|
||||
onNav(e, href)
|
||||
mobileOpen.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -43,7 +51,8 @@ function onNav(e: MouseEvent, href: string) {
|
||||
borderBottom: `1px solid ${t.border}`,
|
||||
}">
|
||||
<div :style="{
|
||||
maxWidth: '1280px', margin: '0 auto', padding: '18px 64px',
|
||||
maxWidth: '1280px', margin: '0 auto',
|
||||
padding: `18px clamp(20px, 5vw, 64px)`,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
}">
|
||||
<NuxtLink to="/" :style="{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }" @click="onLogo">
|
||||
@@ -51,7 +60,8 @@ function onNav(e: MouseEvent, href: string) {
|
||||
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontWeight: 600, fontSize: '16px', letterSpacing: '-0.02em', color: t.fg }">dezky</div>
|
||||
</NuxtLink>
|
||||
|
||||
<nav :style="{ display: 'flex', alignItems: 'center', gap: '36px' }">
|
||||
<!-- Desktop nav cluster — hidden on mobile via scoped CSS -->
|
||||
<nav class="nav-desktop" :style="{ display: 'flex', alignItems: 'center', gap: '36px' }">
|
||||
<NuxtLink
|
||||
v-for="(it, i) in items" :key="i" :to="it.href"
|
||||
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted, letterSpacing: '-0.005em' }"
|
||||
@@ -59,7 +69,8 @@ function onNav(e: MouseEvent, href: string) {
|
||||
>{{ it.label }}</NuxtLink>
|
||||
</nav>
|
||||
|
||||
<div :style="{ display: 'flex', alignItems: 'center', gap: '14px' }">
|
||||
<!-- Desktop CTA cluster — hidden on mobile via scoped CSS -->
|
||||
<div class="nav-desktop" :style="{ display: 'flex', alignItems: 'center', gap: '14px' }">
|
||||
<button
|
||||
:style="{
|
||||
background: 'transparent', border: `1px solid ${t.border}`,
|
||||
@@ -72,6 +83,110 @@ function onNav(e: MouseEvent, href: string) {
|
||||
<a :href="APP_URL" :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }">{{ copy.nav.login }}</a>
|
||||
<LandingBtn variant="primary" @click="goToSection('#final-cta', route.path)">{{ copy.nav.cta }} →</LandingBtn>
|
||||
</div>
|
||||
|
||||
<!-- Hamburger — visible only on mobile via scoped CSS -->
|
||||
<button
|
||||
class="nav-hamburger"
|
||||
:aria-label="mobileOpen ? 'Close menu' : 'Open menu'"
|
||||
:aria-expanded="mobileOpen"
|
||||
:style="{
|
||||
flexDirection: 'column', justifyContent: 'center', alignItems: 'center',
|
||||
gap: '5px', background: 'transparent', border: 'none', cursor: 'pointer',
|
||||
padding: '6px', borderRadius: '4px',
|
||||
}"
|
||||
@click="mobileOpen = !mobileOpen"
|
||||
>
|
||||
<!-- Three bar lines; top/bottom rotate to X when open -->
|
||||
<span :style="{
|
||||
display: 'block', width: '22px', height: '2px',
|
||||
background: t.fg, borderRadius: '2px',
|
||||
transition: 'transform 0.2s, opacity 0.2s',
|
||||
transform: mobileOpen ? 'translateY(7px) rotate(45deg)' : 'none',
|
||||
}" />
|
||||
<span :style="{
|
||||
display: 'block', width: '22px', height: '2px',
|
||||
background: t.fg, borderRadius: '2px',
|
||||
transition: 'opacity 0.2s',
|
||||
opacity: mobileOpen ? 0 : 1,
|
||||
}" />
|
||||
<span :style="{
|
||||
display: 'block', width: '22px', height: '2px',
|
||||
background: t.fg, borderRadius: '2px',
|
||||
transition: 'transform 0.2s, opacity 0.2s',
|
||||
transform: mobileOpen ? 'translateY(-7px) rotate(-45deg)' : 'none',
|
||||
}" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile dropdown panel — JS-toggled, SSR-safe (visibility is CSS-controlled above 768px) -->
|
||||
<div
|
||||
v-if="mobileOpen"
|
||||
class="nav-mobile-panel"
|
||||
:style="{
|
||||
background: 'rgba(250,250,247,0.97)',
|
||||
borderTop: `1px solid ${t.border}`,
|
||||
padding: '24px clamp(20px, 5vw, 64px) 32px',
|
||||
display: 'flex', flexDirection: 'column', gap: '0',
|
||||
}"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="(it, i) in items" :key="i" :to="it.href"
|
||||
:style="{
|
||||
fontFamily: '\'Inter\', sans-serif', fontSize: '16px', color: t.fgMuted,
|
||||
letterSpacing: '-0.005em', padding: '14px 0',
|
||||
borderBottom: `1px solid ${t.border}`,
|
||||
display: 'block',
|
||||
}"
|
||||
@click="onMobileLink($event, it.href)"
|
||||
>{{ it.label }}</NuxtLink>
|
||||
|
||||
<div :style="{ display: 'flex', alignItems: 'center', gap: '14px', paddingTop: '24px', flexWrap: 'wrap' }">
|
||||
<button
|
||||
:style="{
|
||||
background: 'transparent', border: `1px solid ${t.border}`,
|
||||
color: t.fgMuted, fontSize: '11px', padding: '6px 10px', borderRadius: '4px',
|
||||
fontFamily: '\'JetBrains Mono\', monospace', letterSpacing: '0.06em', textTransform: 'uppercase',
|
||||
whiteSpace: 'nowrap',
|
||||
}"
|
||||
@click="toggleLang()"
|
||||
>{{ lang === 'da' ? 'da · en' : 'en · da' }}</button>
|
||||
<a
|
||||
:href="APP_URL"
|
||||
:style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }"
|
||||
@click="mobileOpen = false"
|
||||
>{{ copy.nav.login }}</a>
|
||||
<LandingBtn variant="primary" @click="() => { goToSection('#final-cta', route.path); mobileOpen = false }">{{ copy.nav.cta }} →</LandingBtn>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Desktop clusters: visible by default, hidden on mobile */
|
||||
.nav-desktop {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Hamburger: hidden by default, shown on mobile */
|
||||
.nav-hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Mobile panel: always rendered when v-if is true, but constrained to mobile */
|
||||
@media (max-width: 768px) {
|
||||
.nav-desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-hamburger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure the mobile panel is not shown on desktop even if somehow open */
|
||||
@media (min-width: 769px) {
|
||||
.nav-mobile-panel {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user