kegorii/dd
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance Footer and GameBoard components with accessibility improvements

Browse Source
This commit is contained in:
pd0a6847 2025-11-25 16:11:50 +09:00
parent 89f62e18a8
commit ad7554a15e
2 changed files with 81 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/custom/Footer.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { UserRound } from '@lucide/svelte';
</script>
<footer class="sticky bottom-0 isolate z-50 border-border bg-background text-foreground " role="contentinfo" aria-label="Site footer">
<footer class="sticky bottom-0 isolate z-50 border-border bg-background text-foreground ">
<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
<div class="relative flex flex-col justify-between border-x border-t border-border ">
<div class="flex w-full items-stretch">

10
src/lib/components/custom/GameBoard.svelte
View File

@ -25,9 +25,10 @@
);
</script>
<footer class="min-h-[100dvh] flex flex-col border-border bg-background text-foreground">
<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6 w-full">
<div class="relative flex-1 flex flex-col justify-between border-x border-border p-4">
<footer class="flex flex-col border-border bg-background text-foreground">
<div class="mx-auto w-full max-w-3xl px-5 lg:max-w-6xl lg:px-6">
<div class="border-x border-border min-h-[100dvh] ">
<div class="relative flex flex-1 flex-col justify-between p-4">
<div class="mb-3 flex justify-start">
<ToggleGroup.Root
variant="outline"
@ -96,7 +97,7 @@
animate:flip={{ duration: 400 }}
in:fly={{ y: 20, duration: 300, delay: 100 }}
out:fade={{ duration: 200 }}
class="hover:border-black flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded-lg border p-1 text-[12px] leading-tight transition-colors"
class="flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded-lg border p-1 text-[12px] leading-tight transition-colors hover:border-black"
>
<span class="font-semibold">{betSection.category}</span>
<span>{betSection.id}</span>
@ -107,4 +108,5 @@
</div>
</div>
</div>
</div>
</footer>