From 1a1f9762c2feab4f91bd06c28a434aca24158008 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sat, 7 Jun 2025 21:23:09 +0100
Subject: [PATCH] style: make layout a bit responsive

---
 src/layouts/Layout.astro | 10 +++++-----
 src/pages/index.astro    |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0f7919d..a044e13 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -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" />
 		</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="flex flex-col items-center max-[56rem]:flex-row max-[56rem]:justify-center max-sm:flex-col gap-8" transition:persist>
+		<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 gap-8 max-[56rem]:flex-row" transition:persist>
 				<a href="/">
 					<img
 						src="/pfp.png"
@@ -50,13 +50,13 @@ import Lunar from "../assets/lunar.svg";
 					/>
 				</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 />
 					<Clock client:only />
 				</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-14 bottom-full left-27 text-peach" />
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 40940ae..6cfd397 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -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>
 
 		<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 />
 				he/him
 			</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 />
 				Scotland
 			</div>