brandan/personal-website
1
0
Fork 0
Code Pull requests Activity

focus/hover groups

Browse source
This commit is contained in:
cirroskais 2024-04-21 05:56:38 -04:00
parent 8150a25ffd
commit 02b7c819b0
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
5 changed files with 28 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/Blog/ListedPost.svelte
View file

@ -9,7 +9,7 @@
<a
in:fade={{ delay: 50 * index }}
href="/blog/{post.id}"
class="shadow-lg transition-all hover:-translate-y-1"
class="shadow-lg transition-all focus:-translate-y-1 hover:-translate-y-1"
>
<div
class="w-full rounded-lg aspect-video bg-gray-500/10"

2
src/lib/components/Footer.svelte
View file

@ -33,7 +33,7 @@
</div>
</div>
<div class="hidden flex-col flex-1 my-auto text-sm xl:flex text-neutral-500">
<div class="mx-auto w-5 h-5 transition-colors hover:text-cirro">
<div class="mx-auto w-5 h-5 transition-colors focus:text-cirro hover:text-cirro">
<Heart></Heart>
</div>
</div>

2
src/lib/components/HeaderLink.svelte
View file

@ -16,7 +16,7 @@
{href}
class="my-auto text-lg transition-all {selected
? 'font-bold tracking-wider'
: 'hover:text-neutral-400'}"
: 'hover:text-neutral-400 focus:text-neutral-400'}"
>
<slot />
</a>

2
src/lib/components/ImgButton.svelte
View file

@ -50,7 +50,7 @@
});
</script>
<a class="hover:shadow-2xl" {href} target="_blank">
<a class="hover:shadow-2xl focus:shadow-2xl" {href} target="_blank">
{#if loaded}
<img in:fade class="imgbutton" {src} alt="Button" bind:this={e} />
{:else}

36
src/routes/+page.svelte
View file

@ -35,33 +35,45 @@
<div
class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1"
>
<a class="flex" href="https://www.last.fm/user/{config.LASTFM}">
<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-red-500">
<a class="flex group" href="https://www.last.fm/user/{config.LASTFM}">
<div
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-focus:text-red-500 group-hover:text-red-500"
>
<Lastfm />
</div>
</a>
<a class="flex" href="https://github.com/{config.GITHUB}">
<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-black">
<a class="flex group" href="https://github.com/{config.GITHUB}">
<div
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
>
<GitHub />
</div>
</a>
<a class="flex" href="https://mastodon.social/{config.FEDIVERSE}">
<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-indigo-700">
<a class="flex group" href="https://mastodon.social/{config.FEDIVERSE}">
<div
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-indigo-700 group-focus:text-indigo-700"
>
<Mastodon />
</div>
</a>
<a class="flex" href="https://discord.com/users/{config.DISCORD}">
<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-blue-600">
<a class="flex group" href="https://discord.com/users/{config.DISCORD}">
<div
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-600 group-focus:text-blue-600"
>
<Discord />
</div>
</a>
<a class="flex" href="https://x.com/{config.TWITTER}">
<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-black">
<a class="flex group" href="https://x.com/{config.TWITTER}">
<div
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-black group-focus:text-black"
>
<X />
</div>
</a>
<a class="flex" href="https://bsky.app/profile/{config.BLUESKY}">
<div class="my-auto w-7 h-7 transition-colors text-neutral-400 hover:text-blue-400">
<a class="flex group" href="https://bsky.app/profile/{config.BLUESKY}">
<div
class="my-auto w-7 h-7 transition-colors text-neutral-400 group-hover:text-blue-400 group-focus:text-blue-400"
>
<Bluesky />
</div>
</a>