From 1c55aaaef28d22fde5a710b496ed2faacdc162cf Mon Sep 17 00:00:00 2001
From: "Gustavo L de Mello (Guz)" <contact@guz.one>
Date: Mon, 16 Dec 2024 15:35:09 -0300
Subject: [PATCH] feat: desktop styling

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

diff --git a/handlers/pages/home.templ b/handlers/pages/home.templ
index b57a56d..6cc37a9 100644
--- a/handlers/pages/home.templ
+++ b/handlers/pages/home.templ
@@ -18,18 +18,24 @@ func (p *Home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 templ (p *Home) page() {
 	@layouts.Page() {
-		<main class="fixed w-100% h-screen">
-			<h1 class="absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-4 vertical-lr">
+		<main class="fixed w-100% h-screen md:flex justify-center items-center">
+			<h1
+				class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-4 vertical-lr",
+						"md:relative md:m-0 md:horizontal-tb md:w-fit" }
+			>
 				Keiko <span class="font-japanese text-8xl">稽古</span>
 			</h1>
-			<div
-				class="absolute z-2 top-0 left-0 w-100% h-100% bg-gradient-to-r from-black opacity-50 to-transparent"
-				aria-hidden="true"
-			></div>
-			<img
-				class="absolute z-1 top-0 left-0 -translate-x-15% h-100%"
-				src="/assets/img/2.png"
-			/>
+			<div class="absolute z-2 w-100% h-100% md:flex justify-center items-center top-0 left-0">
+				<div
+					class={ "absolute z-2 top-0 left-0 w-100% h-100% bg-gradient-to-r from-black opacity-50 to-transparent",
+							"md:bg-gradient-to-t md:from-20% md:to-50% md:opacity-100" }
+					aria-hidden="true"
+				></div>
+				<img
+					class="absolute z-1 top-0 left-0 -translate-x-15% h-100% md:relative md:h-70% md:translate-x-0 md:rounded-xl"
+					src="/assets/img/2.png"
+				/>
+			</div>
 		</main>
 		<div
 			class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"