padreug/chateaudufaune.ariege.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: padreug:fa1ba0f299408f492142208ef2195c10c8c89c92
Branches Tags
padreug:main
padreug:feat/hero-stag-animation
...
compare: padreug:ead5dc13c17db0101f36ad5ff36e503686066183
Branches Tags
padreug:main
padreug:feat/hero-stag-animation

2 commits
fa1ba0f299 ... ead5dc13c1

Author SHA1 Message Date
Padreug
ead5dc13c1 style(header): shrink aside-hero title to text-3xl on mobile 
The long uppercase Symposium hero title ran large at text-4xl on narrow
phones. Start at text-3xl, keep md:text-5xl at the desktop breakpoint.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-14 16:56:29 +02:00
Padreug
a76dce449f feat(header): hide nav on scroll-down, reveal on scroll-up 
Standard VueUse recipe: useWindowScroll for the reactive position,
compare against the watcher's previous value for direction. Header
translates off the top when scrolling down and slides back in on
scroll-up; always shown near the top and while the mobile sheet is open.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-06-14 16:50:07 +02:00
2 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/SiteHeader.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch } from 'vue' import { ref, computed, watch } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { RouterLink, useRoute } from 'vue-router' import { RouterLink, useRoute } from 'vue-router'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
@ -26,6 +27,18 @@ const route = useRoute()
const mobileOpen = ref(false) const mobileOpen = ref(false)
// Hide the header on scroll-down, reveal on scroll-up — the standard VueUse
// recipe: `useWindowScroll` for the reactive position, then compare against
// the watcher's previous value for direction. Always shown near the top of
// the page; the 8px deadband stops jitter from tiny scroll deltas.
const hidden = ref(false)
const { y } = useWindowScroll()
watch(y, (cur, prev) => {
if (cur < 80) hidden.value = false
else if (cur - prev > 8) hidden.value = true
else if (prev - cur > 8) hidden.value = false
})
interface NavItem { interface NavItem {
to: string to: string
label: string label: string
@ -88,7 +101,8 @@ watch(() => route.path, closeMobile)
<template> <template>
<header <header
class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150" class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150 transition-transform duration-300 ease-out"
:class="hidden && !mobileOpen ? '-translate-y-full' : 'translate-y-0'"
> >
<div class="mx-auto max-w-7xl px-4 lg:px-6"> <div class="mx-auto max-w-7xl px-4 lg:px-6">
<div class="flex h-16 items-center justify-between gap-4"> <div class="flex h-16 items-center justify-between gap-4">

2
src/components/layout/PageHero.vue
View file

@ -28,7 +28,7 @@ const hasAside = () => !!slots.aside
<p v-if="kicker" class="font-display text-xs uppercase tracking-[0.3em] text-accent"> <p v-if="kicker" class="font-display text-xs uppercase tracking-[0.3em] text-accent">
{{ kicker }} {{ kicker }}
</p> </p>
<h1 class="mt-3 font-display text-4xl uppercase leading-tight tracking-wider md:text-5xl"> <h1 class="mt-3 font-display text-3xl uppercase leading-tight tracking-wider md:text-5xl">
{{ title }} {{ title }}
</h1> </h1>
<p v-if="lede" class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90"> <p v-if="lede" class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">