glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Footer): change the footer styles and layout to avoid overlapping with the TypographyMenu

Browse Source
This commit is contained in:
Ilia Mashkov
2026-04-23 09:41:31 +03:00
parent 2c579a3336
commit dbcc1caeb0
1 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/Footer/ui/Footer.svelte
+31 -21
View File
@@ -6,31 +6,41 @@
<script lang="ts"> <script lang="ts">
import type { ResponsiveManager } from '$shared/lib/helpers'; import type { ResponsiveManager } from '$shared/lib/helpers';
import { FooterLink } from '$shared/ui'; import { FooterLink } from '$shared/ui';
import clsx from 'clsx';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
const responsive = getContext<ResponsiveManager>('responsive'); const responsive = getContext<ResponsiveManager>('responsive');
const isVertical = $derived(responsive?.isDesktop || responsive?.isDesktopLarge);
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
</script> </script>
{#if responsive?.isDesktop || responsive?.isDesktopLarge} <footer
<footer class="fixed bottom-5 right-5 z-50 flex flex-col items-end gap-1 pointer-events-none"> class={clsx(
<!-- Portfolio Link (Vertical) --> 'fixed z-10 flex flex-row items-end gap-1 pointer-events-none',
<div class="pointer-events-auto"> isVertical ? 'bottom-5 right-5 [writing-mode:vertical-rl] rotate-180' : ' bottom-2 left-1/2 -translate-x-1/2',
<FooterLink )}
text="allmy.work" >
href="https://allmy.work/" <!-- Project Name (Horizontal) -->
target="_blank" <div
rel="noopener noreferrer" class={clsx(
class="border border-subtle" 'pointer-events-auto items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-3 py-1 border border-subtle',
/> isVertical ? 'flex' : 'hidden',
</div> )}
>
<div class="w-1.5 h-1.5 bg-brand"></div>
<span class="text-2xs font-mono uppercase tracking-wider-mono text-neutral-500 dark:text-neutral-400">
GlyphDiff © 2025 — {currentYear}
</span>
</div>
<!-- Project Name (Horizontal) --> <!-- Portfolio Link (Vertical) -->
<div class="pointer-events-auto flex items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-3 py-1 border border-subtle"> <div class="pointer-events-auto">
<div class="w-1.5 h-1.5 bg-brand"></div> <FooterLink
<span class="text-2xs font-mono uppercase tracking-wider-mono text-neutral-500 dark:text-neutral-400"> text="allmy.work"
GlyphDiff © 2025 — {currentYear} href="https://allmy.work/"
</span> target="_blank"
</div> rel="noopener noreferrer"
</footer> class={clsx('border border-subtle', isVertical ? 'text-2xs' : 'text-4xs')}
{/if} />
</div>
</footer>