From dc56e34bf13589d3d6e24d41c26f00667c8e7275 Mon Sep 17 00:00:00 2001
From: "Gustavo L de Mello (Guz)" <contact@guz.one>
Date: Mon, 16 Dec 2024 23:07:27 -0300
Subject: [PATCH] feat: footer desktop support

---
 handlers/pages/home.templ | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/handlers/pages/home.templ b/handlers/pages/home.templ
index d9dbf9f..73b1bca 100644
--- a/handlers/pages/home.templ
+++ b/handlers/pages/home.templ
@@ -136,11 +136,14 @@ templ (p *Home) page() {
 				aria-hidden="hidden"
 			></span>
 		</main>
-		<footer class="relative w-full h-screen bg-heropattern bg-black bg-top overflow-x-hidden">
-			<div class="relative z-3 w-full h-full flex justify-between md:w-fit md:h-fit">
+		<footer
+			class={ "relative w-full h-screen bg-heropattern bg-black bg-top overflow-x-hidden",
+					"md:flex justify-center items-center" }
+		>
+			<div class={ "relative z-3 w-full h-full flex justify-between md:w-fit md:h-fit md:gap-7" }>
 				<h2
 					class={ "relative z-4 m-4 mb-8 text-5xl vertical-rl rotate-180 text-white",
-							"md:horizontal-tb md:text-center" }
+							"md:horizontal-tb md:text-center md:rotate-0 md:m-0 md:flex md:items-center" }
 				>
 					<a
 						class="text-current no-underline"
@@ -150,9 +153,9 @@ templ (p *Home) page() {
 						contact@keikos.work
 					</a>
 				</h2>
-				<div class="flex flex-col justify-end m-4 mb-4 text-right">
+				<div class="flex flex-col justify-end m-4 mb-4 text-right md:m-0 md:justify-center">
 					<p class="mb-0">{ time.Now().Format("2006") } &copy; Helena "Keiko" Ayrim</p>
-					<p class="text-xs opacity-50">
+					<p class="text-xs opacity-50 md:mt-1">
 						Made & managed with
 						<span class="i-pixelarticons:heart h-0.75rem">love</span> by 
 						<a
@@ -170,7 +173,8 @@ templ (p *Home) page() {
 								aria-label="(Opens in new tab)"
 							></span>
 						</a>
-						(Work In Progress)
+						<span class="inline-block md:hidden pl-3">(Work In Progress)</span>
+						<span class="hidden md:inline-block pl-3">(WIP)</span>
 					</p>
 				</div>
 			</div>