focus/hover groups
This commit is contained in:
parent
8150a25ffd
commit
02b7c819b0
5 changed files with 28 additions and 16 deletions
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue