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

View file

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

View file

@ -37,6 +37,6 @@
</div> </div>
{/key} {/key}
<div class="hidden mt-4 w-screen md:block"> <div class="mt-4 w-screen">
<Footer></Footer> <Footer></Footer>
</div> </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="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
<div class="flex space-x-2.5"> <div class="flex space-x-2.5">
<Image <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( src={$page.data.lastfm.recenttracks.track[0].image.find(
(_) => _.size == 'extralarge' (_) => _.size == 'extralarge'
)?.['#text']} )?.['#text']}
alt="Album art for {$page.data.lastfm?.recenttracks?.track[0]?.name}" alt="Album art for {$page.data.lastfm?.recenttracks?.track[0]?.name}"
/> />
<div class="overflow-x-auto my-auto"> <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} {$page.data.lastfm?.recenttracks?.track[0]?.name}
</p> </p>
<p class="text-xl text-neutral-500"> <p class="md:text-xl text-neutral-500">
{$page.data.lastfm?.recenttracks?.track[0]?.artist?.['#text']} {$page.data.lastfm?.recenttracks?.track[0]?.artist?.['#text']}
</p> </p>
</div> </div>