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

72
src/App.vue
View File

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