valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement sticky header with height compression and glassmorphism
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-20 12:45:32 +01:00
parent 78dc8cbd08
commit d33dcd7fb9
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
partials/header.hbs
View File

@@ -1,10 +1,14 @@
<header class="text-[var(--text-primary)] body-font shadow-lg bg-[var(--bg-primary)]">
<div class="container mx-auto flex p-5 items-center justify-between">
<header
class="sticky top-0 z-40 w-full transition-all duration-500 ease-in-out border-b border-transparent"
:class="isSticky ? 'bg-[var(--bg-primary)]/80 backdrop-blur-md py-2 shadow-lg border-[var(--bg-tertiary)]' : 'bg-[var(--bg-primary)] py-5 shadow-none'">
<div class="container mx-auto flex items-center justify-between transition-all duration-500 ease-in-out px-5">
<a href="{{@site.url}}" class="flex title-font font-medium items-center text-[var(--text-primary)]" @click.stop>
{{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
<img src="{{@site.logo}}" alt="{{@site.title}}" class="transition-all duration-500 w-auto site-logo" :class="isSticky ? 'h-8' : 'h-10'">
{{else}}
{{> "icons/logo" class="h-10 w-auto site-logo"}}
<div class="transition-all duration-500" :class="isSticky ? 'scale-90' : 'scale-100'">
{{> "icons/logo" class="h-10 w-auto site-logo"}}
</div>
{{/if}}
</a>