From da40ffd6d57cfcdf6f144e753b208ebf2ed0abc4 Mon Sep 17 00:00:00 2001
From: "Gustavo L de Mello (Guz)" <contact@guz.one>
Date: Fri, 13 Dec 2024 20:42:11 -0300
Subject: [PATCH] feat: desktop support

---
 handlers/pages/home.templ | 43 ++++++++++++++++++++++-----------------
 uno.config.js             |  3 +++
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/handlers/pages/home.templ b/handlers/pages/home.templ
index 5a47015..8ac45d5 100644
--- a/handlers/pages/home.templ
+++ b/handlers/pages/home.templ
@@ -21,36 +21,35 @@ templ (p *Home) page() {
 			class="fixed z-1 w-screen h-100lvh top-0 left-0 flex justify-center items-center"
 		>
 			<div
-				class="overflow-x-hidden relative"
+				class="overflow-x-hidden relative md:w-screen"
 			>
 				<span
-					class="-translate-x-20% block"
+					class="-translate-x-20% sm:translate-x-0 md:translate-x-0 block md:flex md:justify-center"
 				>
 					<img
-						src="/assets/img/2024-09-03.jpg"
-						class="h-100vh animate-fade-in-right animate-ease-out"
+						src="/assets/img/2024-09-02.png"
+						class="h-100vh md:h-50vh animate-fade-in-right md:animate-fade-in-up animate-ease-out md:animate-ease-out md:rounded-2xl"
 					/>
 				</span>
 				<span
 					class={ "absolute top-0 left-0 w-100% h-100%",
-							"bg-gradient-to-r from-black to-transparent block" }
+							"bg-gradient-to-r md:bg-gradient-to-t from-black to-transparent block" }
 				></span>
 				<div
-					class={ "absolute top-0 left-0 h-100% w-100%",
-							"font-serif animate-slide-in-left animate-ease-out" }
+					class={ "absolute top-0 left-0 h-100% w-100% md:flex md:justify-center md:items-center",
+							"font-serif animate-slide-in-left md:animate-none animate-ease-out" }
 				>
 					<h1
-						class="m-0 flex rows-1 col-2 gap-2 rotate-90 origin-tl text-transparent"
+						class="m-0 flex rows-1 col-2 gap-2 rotate-90 md:rotate-0 origin-tl text-transparent md:animate-fade-in-up md:animate-ease-out"
 						style="-webkit-text-stroke:0.1rem white;text-stroke:0.1 white;"
 					>
 						<span
-							class="block origin-bl -translate-y-100% flex items-center h-8rem text-10rem"
+							class="block origin-bl -translate-y-100% md:translate-y-0 md:h-full flex items-center h-8rem text-10rem"
 						>
 							<span>Keiko</span>
 						</span>
 						<span
-							class="font-japanese origin-tl -rotate-90 flex items-center w-9rem text-7rem"
-							style="writing-mode: vertical-lr;"
+							class="font-japanese origin-tl -rotate-90 md:rotate-0 flex items-center w-9rem md:w-fit text-7rem vertical-lr md:horizontal-tb"
 						>
 							<span class="w-fit">稽古</span>
 						</span>
@@ -64,19 +63,25 @@ templ (p *Home) page() {
 				See more
 			</a>
 		</section>
-		<section class="absolute z-2 w-screen h-250lvh gap-0">
-			<span class="block w-screen h-45%"></span>
-			<span class="block w-screen h-20% bg-gradient-to-t from-black to-transparent"></span>
-			<div class="block w-screen h-35% bg-black pt-5rem flex cols-2 rows-1 font-serif">
-				<div class="w-30% h-full">
+		<section class="relative z-2 w-screen min-h-200lvh md:min-h-150lvh gap-0">
+			<span class="block w-screen h-40% md:hidden"></span>
+			<span class="block w-screen h-20% md:h-100vh bg-gradient-to-t from-black to-transparent md:to-40%"></span>
+			<div class="block w-screen h-40% md:h-100vh bg-black pt-5rem md:pt-4rem flex cols-2 rows-1 md:justify-center md:items-center font-serif">
+				<div class="w-30% h-full md:h-50% md:flex md:flex-col md:justify-between">
 					<h2
-						class="text-10rem text-transparent rotate-90 m-0"
+						class="text-10rem text-transparent rotate-90 md:rotate-0 m-0"
 						style="-webkit-text-stroke:0.1rem white;text-stroke:0.1 white;"
 					>
 						Socials
 					</h2>
+					<h3
+						class="hidden text-transparent text-5rem m-0 md:inline"
+						style="-webkit-text-stroke:0.1rem white;text-stroke:0.1 white;"
+					>
+						Contact
+					</h3>
 				</div>
-				<div class="w-70% h-80% text-right pr-2rem flex flex-col justify-between">
+				<div class="w-70% h-80% md:w-50% md:h-50% text-right pr-2rem flex flex-col justify-between">
 					<ul class="list-none p-0 text-3xl flex flex-col items-end gap-1rem">
 						<li class="border-solid border-0 border-b-1 border-white w-fit">
 							<a
@@ -103,7 +108,7 @@ templ (p *Home) page() {
 							</a>
 						</li>
 					</ul>
-					<div class="text-xl flex flex-col items-end">
+					<div class="text-xl md:text-3xl flex flex-col items-end">
 						<a
 							class="border-solid border-0 border-b-1 border-white w-fit m-0"
 						>
diff --git a/uno.config.js b/uno.config.js
index a7aaed3..835076d 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -69,6 +69,9 @@ export default defineConfig({
 				['min-height', `${d}dvh`],
 			];
 		}],
+		['vertical-lr', [['writing-mode', 'vertical-lr']]],
+		['vertical-rl', [['writing-mode', 'vertical-rl']]],
+		['horizontal-tb', [['writing-mode', 'horizontal-tb']]],
 	],
 	/* 	theme: {
 		colors: {