sam1902/Skwik
sam1902/Skwik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore(chrome): logo flush left, stepper to the right at lg
Some checks failed
Deploy to GitHub Pages / build (push) Has been cancelled
Details
Deploy to GitHub Pages / deploy (push) Has been cancelled
Details

Browse Source 
Header is now a flex row with the Skwik mark + tagline pinned left and
the stepper + theme toggle on the right at lg+. Below lg the row stacks
— logo on top, stepper underneath — and the theme toggle moves up next
to the logo so it stays reachable without the absolute-positioned
floating button in the footer. Footer is now byline + GitHub link only.
This commit is contained in:
Samuel Prevost 2026-05-01 00:41:36 +02:00
parent 8aaec477f6
commit 3cfd1c3101
1 changed files with 33 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/App.vue
View File

@ -15,22 +15,22 @@ const store = useAppStore()
<template>
<div class="min-h-screen bg-background text-foreground">
<!-- Header lays out as a single h-14 row on desktop and stacks
into title-row + stepper-row on mobile so the title doesn't
collide with the stepper at narrow widths. The theme toggle
stays in the desktop header but moves into the footer on
mobile (see below). -->
<!-- Header layout:
- >= lg: single h-14 row, logo flush left, stepper + theme
toggle on the right.
- < lg: stack into a logo row and a stepper row below it,
theme toggle aligned with the logo on the right. The
stepper row gets `overflow-x-auto` so the labels don't
break the page width on narrow tablets/phones. -->
<header
class="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
<div class="mx-auto max-w-7xl px-4">
<div
class="flex items-center justify-between gap-3 py-2 sm:grid sm:h-14 sm:grid-cols-3 sm:py-0"
class="flex flex-col gap-2 py-2 lg:h-14 lg:flex-row lg:items-center lg:justify-between lg:py-0"
>
<div class="hidden sm:block">
<!-- left-column spacer for the 3-col grid -->
</div>
<div class="flex items-center gap-2 sm:justify-center">
<div class="flex items-center justify-between gap-2">
<div class="flex items-center gap-2">
<SkwikLogo :size="28" />
<h1
class="font-mono text-lg font-semibold tracking-tight"
@ -42,18 +42,18 @@ const store = useAppStore()
>Perspective Correction</span
>
</div>
<div class="hidden items-center justify-end gap-4 sm:flex">
<StepIndicator />
<div class="lg:hidden">
<ThemeToggle />
</div>
</div>
<!-- Mobile-only stepper row. overflow-x-auto keeps the
page width sane if the labels still don't fit on
very narrow screens. -->
<div
class="-mx-4 flex justify-center overflow-x-auto px-4 pb-2 sm:hidden"
class="-mx-4 flex justify-center overflow-x-auto px-4 lg:mx-0 lg:items-center lg:justify-end lg:gap-4 lg:overflow-visible lg:px-0"
>
<StepIndicator />
<div class="hidden lg:block">
<ThemeToggle />
</div>
</div>
</div>
</div>
</header>
@ -70,10 +70,9 @@ const store = useAppStore()
<MeasureViewer v-else-if="store.currentStep === 6" />
</main>
<!-- Footer is fixed to the bottom. On mobile we tuck the theme
toggle into the right edge so it's reachable without
eating into the header chrome; the toggle is absolutely
positioned so it doesn't push the centered byline around. -->
<!-- Footer is fixed to the bottom and only carries the byline +
GitHub link. The theme toggle now lives in the header at
every breakpoint. -->
<footer
class="fixed inset-x-0 bottom-0 z-40 border-t border-border/50 bg-background/95 py-3 text-center text-xs text-muted-foreground backdrop-blur supports-[backdrop-filter]:bg-background/60"
>
@ -113,11 +112,6 @@ const store = useAppStore()
Fork me on GitHub
</a>
</span>
<div
class="absolute bottom-1/2 right-2 translate-y-1/2 sm:hidden"
>
<ThemeToggle />
</div>
</footer>
</div>
</template>