more general mobile support

This commit is contained in:
cirroskais 2024-04-21 08:23:21 -04:00
parent 11a948bd24
commit e335faa7a7
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
4 changed files with 10 additions and 10 deletions

View file

@ -10,9 +10,9 @@
<div class="flex py-2 w-full h-full shadow-lg bg-gray-500/10">
<div class="container flex">
<div class="hidden flex-col flex-1 my-auto text-sm md:flex text-neutral-500">
<div class="flex flex-col flex-1 my-auto text-xs md:text-sm text-neutral-500">
<p class="font-bold">cirroskais.xyz ― cirro's website</p>
<div class="flex space-x-0.5">
<div class="hidden space-x-0.5 md:flex">
<div class="my-auto w-5 h-5 font-bold">
<Eye></Eye>
</div>
@ -20,7 +20,7 @@
This website has been viewed <span class="font-bold">{$page.data.counter}</span> times.
</p>
</div>
<div class="flex space-x-0.5">
<div class="flex hidden space-x-0.5 md:flex">
<div class="my-auto w-5 h-5 font-bold">
<Forgejo></Forgejo>
</div>
@ -32,12 +32,12 @@
</p>
</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-xs md:text-sm xl:flex text-neutral-500">
<div class="mx-auto w-5 h-5 transition-colors focus:text-cirro hover:text-cirro">
<Heart></Heart>
</div>
</div>
<div class="hidden flex-col flex-1 my-auto text-sm md:flex text-neutral-500">
<div class="flex flex-col flex-1 my-auto text-xs md:text-sm text-neutral-500">
<div class="flex ml-auto space-x-1.5">
<p>Built with</p>
<a

View file

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

View file

@ -37,6 +37,6 @@
</div>
{/key}
<div class="hidden mt-4 w-screen md:block">
<div class="mt-4 w-screen">
<Footer></Footer>
</div>

View file

@ -82,17 +82,17 @@
<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
<div class="flex space-x-2.5">
<Image
style="w-24 h-24"
style="w-16 h-16 md:w-24 md:h-24"
src={$page.data.lastfm.recenttracks.track[0].image.find(
(_) => _.size == 'extralarge'
)?.['#text']}
alt="Album art for {$page.data.lastfm?.recenttracks?.track[0]?.name}"
/>
<div class="overflow-x-auto my-auto">
<p class="text-2xl whitespace-nowrap text-neutral-300">
<p class="text-lg whitespace-nowrap md:text-2xl text-neutral-300">
{$page.data.lastfm?.recenttracks?.track[0]?.name}
</p>
<p class="text-xl text-neutral-500">
<p class="md:text-xl text-neutral-500">
{$page.data.lastfm?.recenttracks?.track[0]?.artist?.['#text']}
</p>
</div>