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 <a
in:fade={{ delay: 50 * index }} in:fade={{ delay: 50 * index }}
href="/blog/{post.id}" 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 <div
class="w-full rounded-lg aspect-video bg-gray-500/10" 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> </div>
<div class="hidden flex-col flex-1 my-auto text-sm xl:flex text-neutral-500"> <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> <Heart></Heart>
</div> </div>
</div> </div>

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

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

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

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

36
src/routes/+page.svelte
View file

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