Skip to content

Improved header shrinking on small screens #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zefir-git merged 1 commit into from
Mar 16, 2026
Merged

Improved header shrinking on small screens #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/components/AppHeader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,21 @@ export class AppHeader extends Component {
return html`
<header
role="banner"
class="group/header flex items-center justify-between border-b border-white/5 px-4 py-4 transition-colors has-open:bg-neutral-900 sm:px-0 sm:py-16"
class="group/header flex items-center justify-between gap-2 border-white/5 p-4 transition-colors has-open:bg-neutral-900 sm:px-0 sm:py-16"
>
<a
href="${logoHref}"
class="z-20 outline-offset-2 outline-blue-400 focus-visible:outline-2"
>
<img src="https://wsrv.nl?url=${window.encodeURIComponent(
this.logoUrl,
)}" alt="${this.logoAlt}" class="h-8" />
<img
src="https://wsrv.nl?url=${window.encodeURIComponent(this.logoUrl)}"
alt="${this.logoAlt}"
class="max-h-8"
/>
</a>
<nav
aria-label="Desktop navigation"
class="flex items-center gap-2"
class="flex shrink-0 items-center gap-2"
>
${this.links.map((link) =>
html`
Expand Down Expand Up @@ -77,11 +79,11 @@ export class AppHeader extends Component {
</button>
</nav>
<div
class="absolute inset-x-0 top-16 z-50 grid w-full grid-rows-[0fr] border-b border-b-white/5 bg-neutral-900 shadow-md transition-all transition-discrete ease-out open:grid-rows-[1fr] sm:hidden starting:open:grid-rows-[0fr]"
class="absolute inset-x-0 top-18 z-50 grid w-full grid-rows-[0fr] border-b border-b-white/5 bg-neutral-900 shadow-md transition-all transition-discrete ease-out open:grid-rows-[1fr] sm:hidden starting:open:grid-rows-[0fr]"
popover
id="menu"
>
<nav aria-label="Mobile navigation" class="py-2 overflow-hidden">
<nav aria-label="Mobile navigation" class="pb-2 overflow-hidden">
${this.links.map((link) =>
html`
<a
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppRoot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export class AppRoot extends Component {
class="ring-white/5 ring-inset sm:rounded-2xl sm:bg-neutral-900 sm:ring-1"
>
${new StatusOverview(this.site.mainStatus, this.services)}
<div class="p-6 pt-0! md:p-8">
<div class="p-4 pt-0! sm:p-6 md:p-8">
${this.page}
</div>
</main>
Expand Down