Skip to content

chore: make footer accessible with infinite scroll pages #71

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

Closed
iiio2 wants to merge 1 commit into from
Closed

chore: make footer accessible with infinite scroll pages #71

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
2 changes: 1 addition & 1 deletion app/app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ onUnmounted(() => {

<AppHeader :show-logo="!isHomepage" />

<div id="main-content" class="flex-1">
<div id="main-content" class="flex-1 pb-20 sm:pb-24">
<NuxtPage />
</div>

Expand Down
24 changes: 17 additions & 7 deletions app/components/AppFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,33 @@
<template>
<footer class="border-t border-border mt-auto">
<div class="container py-8 flex flex-col gap-4 text-fg-subtle text-sm">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<footer
role="contentinfo"
aria-label="Site footer"
class="fixed bottom-0 left-0 right-0 z-30 bg-bg/90 backdrop-blur-md border-t border-border"
>
<div
class="container py-3 sm:py-4 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-xs sm:text-sm"
>
<div class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4">
<p class="font-mono m-0">a better browser for the npm registry</p>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 sm:gap-6">
<a
href="https://github.com/danielroe/npmx.dev"
rel="noopener noreferrer"
class="link-subtle font-mono text-xs"
class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
>
source
</a>
<span class="text-border">|</span>
<a href="https://roe.dev" rel="noopener noreferrer" class="link-subtle font-mono text-xs">
<a
href="https://roe.dev"
rel="noopener noreferrer"
class="link-subtle font-mono text-xs min-h-11 min-w-11 flex items-center"
>
@danielroe
</a>
</div>
</div>
<p class="text-xs text-fg-subtle/60 text-center sm:text-left m-0">
<p class="text-xs text-fg-subtle/60 text-center sm:text-left m-0 hidden sm:block">
npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.
</p>
</div>
Expand Down
Loading