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

feat(shared): add cn utility for tailwind-aware class merging #38

Merged
ilia merged 11 commits from feature/minor-improvements into main 2026-04-23 12:11:03 +00:00
Conversation 0 Commits 11 Files Changed 48
+31 -21
1 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dbcc1caeb0 - Show all commits
src/widgets/Footer/ui/Footer.svelte
+23 -13
View File
@@ -6,14 +6,33 @@
<script lang="ts">
import type { ResponsiveManager } from '$shared/lib/helpers';
import { FooterLink } from '$shared/ui';
import clsx from 'clsx';
import { getContext } from 'svelte';
const responsive = getContext<ResponsiveManager>('responsive');
const isVertical = $derived(responsive?.isDesktop || responsive?.isDesktopLarge);
const currentYear = new Date().getFullYear();
</script>
{#if responsive?.isDesktop || responsive?.isDesktopLarge}
<footer class="fixed bottom-5 right-5 z-50 flex flex-col items-end gap-1 pointer-events-none">
<footer
class={clsx(
'fixed z-10 flex flex-row items-end gap-1 pointer-events-none',
isVertical ? 'bottom-5 right-5 [writing-mode:vertical-rl] rotate-180' : ' bottom-2 left-1/2 -translate-x-1/2',
)}
>
<!-- Project Name (Horizontal) -->
<div
class={clsx(
'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 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>
<!-- Portfolio Link (Vertical) -->
<div class="pointer-events-auto">
<FooterLink
@@ -21,16 +40,7 @@ const currentYear = new Date().getFullYear();
href="https://allmy.work/"
target="_blank"
rel="noopener noreferrer"
class="border border-subtle"
class={clsx('border border-subtle', isVertical ? 'text-2xs' : 'text-4xs')}
/>
</div>
<!-- Project Name (Horizontal) -->
<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="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>
</footer>
{/if}
</footer>