trafficlunar/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: make layout a bit responsive

Browse source
This commit is contained in:
trafficlunar 2025-06-07 21:23:09 +01:00
parent aae1499dba
commit 1a1f9762c2
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/layouts/Layout.astro
View file

@ -38,10 +38,10 @@ import Lunar from "../assets/lunar.svg";
<KawaiiLogo class="w-full h-48 mt-16 transition-transform duration-300 hover:rotate-2 hover:scale-105" /> <KawaiiLogo class="w-full h-48 mt-16 transition-transform duration-300 hover:rotate-2 hover:scale-105" />
</a> </a>
<Lunar class="absolute top-8 right-8 size-12 cursor-pointer animate-avoid hover:animate-running not-hover:animate-pause" /> <Lunar class="absolute top-8 right-8 size-12 animate-avoid hover:animate-running not-hover:animate-pause" />
<div class="max-w-4xl grid grid-cols-5 gap-4 py-8 max-[56rem]:grid-cols-1"> <div class="max-w-4xl grid grid-cols-5 gap-4 py-8 max-sm:grid-cols-1">
<div class="flex flex-col items-center max-[56rem]:flex-row max-[56rem]:justify-center max-sm:flex-col gap-8" transition:persist> <div class="flex flex-col items-center gap-8 max-[56rem]:flex-row" transition:persist>
<a href="/"> <a href="/">
<img <img
src="/pfp.png" src="/pfp.png"
@ -50,13 +50,13 @@ import Lunar from "../assets/lunar.svg";
/> />
</a> </a>
<div class="flex flex-col justify-center max-sm:flex-row max-[56rem]:items-center max-[56rem]:mt-8 max-sm:mt-0 max-sm:gap-2"> <div class="flex flex-col justify-center w-full max-sm:flex-row max-sm:mt-0 max-sm:gap-2">
<Socials /> <Socials />
<Clock client:only /> <Clock client:only />
</div> </div>
</div> </div>
<div class="col-span-4 flex flex-col relative"> <div class="min-sm:col-span-4 flex flex-col relative">
<TrafficConeAlt class="absolute size-12 bottom-full left-16 text-peach" /> <TrafficConeAlt class="absolute size-12 bottom-full left-16 text-peach" />
<TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" /> <TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" />

4
src/pages/index.astro
View file

@ -18,11 +18,11 @@ import LocationIcon from "../assets/icons/location.svg";
<p class="my-2">You can view what I'm currently doing by going <a href="/status" class="link">here</a>.</p> <p class="my-2">You can view what I'm currently doing by going <a href="/status" class="link">here</a>.</p>
<div class="flex gap-1 mt-4"> <div class="flex gap-1 mt-4">
<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit px-2 py-0.5 flex gap-1 items-center"> <div class="text-sm rounded bg-peach/25 text-peach w-fit pl-1 pr-1.5 py-0.5 flex gap-1 items-center">
<PersonIcon /> <PersonIcon />
he/him he/him
</div> </div>
<div class="text-sm rounded-lg bg-peach/25 text-peach w-fit pl-1 pr-2 py-0.5 flex gap-1 items-center"> <div class="text-sm rounded bg-peach/25 text-peach w-fit pl-1 pr-1.5 py-0.5 flex gap-1 items-center">
<LocationIcon /> <LocationIcon />
Scotland Scotland
</div> </div>