bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-27 17:41:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: use consistent styling for icons and footer

Browse source
This commit is contained in:
Bart van der Braak 2024-01-16 19:41:09 +01:00
parent 450220f108
commit 3bb13dbdb0
4 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lib/components/site/mode-toggle.svelte
View file

@ -7,12 +7,12 @@
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" class="w-9 px-0">
<Button builders={[builder]} variant="ghost" class="h-9 w-9">
<Sun
class="dark:-roate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0"
class="absolute h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<span class="sr-only">Toggle theme</span>
</Button>

2
src/lib/components/site/nav/mobile-nav.svelte
View file

@ -23,7 +23,7 @@
</Sheet.Trigger>
<Sheet.Content side="right" class="pr-0">
<MobileLink href="/" class="flex items-center" bind:open>
<span class="sr-only">Return to home</span>
<span class="sr-only">Logo icon (return home)</span>
<img src={Icons.logoIcon} class="mr-2 h-4 w-4" alt="icon of hellob.art" />
<span class="font-mono font-bold tracking-tighter">{siteConfig.name}</span>
</MobileLink>

14
src/lib/components/site/site-footer.svelte
View file

@ -1,6 +1,8 @@
<script lang="ts">
import { Blocks, Cloud } from 'lucide-svelte';
import { siteConfig } from '$lib/config/site';
import Separator from '$lib/components/ui/separator/separator.svelte';
import { Code } from 'radix-icons-svelte';
</script>
<footer class="container py-6">
@ -13,7 +15,9 @@
<div class="flex justify-center">
<div class="flex h-5 items-center space-x-4 text-xs">
<div>
Built using <a
<span class="hidden sm:inline">Built using</span>
<Blocks class="inline h-[1rem] w-[1rem] sm:hidden" />
<a
href={siteConfig.links.shadcnSvelte}
target="_blank"
rel="noreferrer"
@ -22,7 +26,9 @@
</div>
<Separator orientation="vertical" />
<div>
Hosted on <a
<span class="hidden sm:inline">Hosted on</span>
<Cloud class="inline h-[1rem] w-[1rem] sm:hidden" />
<a
href={siteConfig.links.vercel}
target="_blank"
rel="noreferrer"
@ -31,7 +37,9 @@
</div>
<Separator orientation="vertical" />
<div>
Source code at <a
<span class="hidden sm:inline">Source code at</span>
<Code class="inline h-[1rem] w-[1rem] sm:hidden" />
<a
href={siteConfig.links.gitHubProject}
target="_blank"
rel="noreferrer"

10
src/lib/components/site/site-header.svelte
View file

@ -10,12 +10,12 @@
>
<div class="container flex h-14 items-center">
<a href="/" class="mr-6 flex items-center space-x-2">
<span class="sr-only">Return to home</span>
<span class="sr-only">Logo (return home)</span>
<Icons.logo />
</a>
<MainNav />
<div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
<nav class="flex items-center">
<nav class="flex">
<a href={siteConfig.links.gitHubProfile} target="_blank" rel="noopener noreferrer">
<div
class={cn(
@ -23,7 +23,7 @@
size: 'sm',
variant: 'ghost'
}),
'w-9 px-0'
'h-9 w-9 px-0'
)}
>
<Icons.gitHub class="h-4 w-4" />
@ -37,10 +37,10 @@
size: 'sm',
variant: 'ghost'
}),
'w-9 px-0'
'h-9 w-9 px-0'
)}
>
<Icons.linkedIn class="h-3 w-3 fill-current" />
<Icons.linkedIn class="h-4 w-4" />
<span class="sr-only">LinkedIn</span>
</div>
</a>