ronnibaslund/dezky
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(website): responsive / mobile layouts

Browse Source 
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
2026-06-06 15:55:35 +02:00
parent bc0697c3e8
commit d668b1b6a6
28 changed files with 721 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/website/components/landing/PartnerCalculator.vue
+28 -2
View File
@@ -41,10 +41,15 @@ const annual = computed(() => monthly.value * 12)
const dkk = new Intl.NumberFormat('da-DK', { style: 'currency', currency: 'DKK', maximumFractionDigits: 0 })
const fmtMonthly = computed(() => dkk.format(monthly.value))
const fmtAnnual = computed(() => dkk.format(annual.value))
// Expose theme border color to scoped CSS via v-bind() so media-query-driven
// border direction changes (left on desktop, top on mobile) can still use the
// reactive theme value without window reads.
const borderColor = computed(() => t.value.border)
</script>
<template>
<div :style="{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
<div class="calc-grid" :style="{ display: 'grid', gap: '0', border: `1px solid ${t.border}`, borderRadius: '4px', overflow: 'hidden' }">
<!-- Controls -->
<div :style="{ padding: '36px', background: t.surface, display: 'flex', flexDirection: 'column', gap: '28px', justifyContent: 'center' }">
<div>
@@ -74,7 +79,7 @@ const fmtAnnual = computed(() => dkk.format(annual.value))
</div>
<!-- Output -->
<div :style="{ padding: '36px', background: t.bgAlt, borderLeft: `1px solid ${t.border}`, display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
<div class="calc-output" :style="{ padding: '36px', background: t.bgAlt, display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
<div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontSize: '11px', color: t.fgMuted, letterSpacing: '0.08em', textTransform: 'uppercase' }">{{ c.monthlyLabel }}</div>
<div :style="{ fontFamily: '\'Inter Tight\', sans-serif', fontWeight: 600, fontSize: 'clamp(40px, 5vw, 60px)', letterSpacing: '-0.03em', lineHeight: 1.0, color: t.fg, marginTop: '8px' }">{{ fmtMonthly }}</div>
<div :style="{ marginTop: '20px', paddingTop: '20px', borderTop: `1px solid ${t.border}`, fontFamily: '\'Inter\', sans-serif', fontSize: '15px', color: t.fgMuted }">
@@ -83,3 +88,24 @@ const fmtAnnual = computed(() => dkk.format(annual.value))
</div>
</div>
</template>
<style scoped>
/* Desktop: two equal columns; output panel has a left divider. */
.calc-grid {
grid-template-columns: 1fr 1fr;
}
.calc-output {
border-left: 1px solid v-bind(borderColor);
}
/* Mobile: stack to single column; swap left divider to a top divider. */
@media (max-width: 768px) {
.calc-grid {
grid-template-columns: 1fr;
}
.calc-output {
border-left: none;
border-top: 1px solid v-bind(borderColor);
}
}
</style>