From 1a4ebe4fe134ec74b3a955b7facccc40c8e0d5b8 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Mon, 16 Sep 2024 12:24:22 +0500
Subject: [PATCH] responsive for tablets and hd screens

---
 index.html          |  6 +++---
 static/tailwind.css | 12 ++++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 8efee1f..016d9a2 100644
--- a/index.html
+++ b/index.html
@@ -36,8 +36,8 @@
                 </div>
             </div>
         </div>
-        <div class="flex text-white h-full max-h-[40vh]">
-            <div class="max-w-[53.75%] bg-bg-gray py-4 w-full h-full">
+        <div class="flex flex-wrap text-white h-full max-h-[40vh]">
+            <div class="xl:max-w-[53.75%] bg-bg-gray py-4 w-full h-full">
                 <div class="flex items-center justify-between gap-2 px-4">
                     <img src="./static/file_icon.svg" alt="" class="w-[30px] h-[37px]" />
                     <p class="text-3xl text-bg-pink">yaml</p>
@@ -56,7 +56,7 @@
                             href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">"LOADING . . ."</a></p>
                 </div>
             </div>
-            <div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%] flex-col 2xl:flex-row">
+            <div class="flex items-end justify-end w-full xl:max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%] xl:flex-col 2xl:flex-row">
                 <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
                     href="#section_about">ABOUT ME</a>
                 <a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] 2xl:w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue"
diff --git a/static/tailwind.css b/static/tailwind.css
index 1b97346..bae2cd3 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -1247,6 +1247,18 @@ body {
     max-height: 40vh;
   }
 
+  .xl\:max-w-\[53\.75\%\] {
+    max-width: 53.75%;
+  }
+
+  .xl\:max-w-\[45\%\] {
+    max-width: 45%;
+  }
+
+  .xl\:flex-col {
+    flex-direction: column;
+  }
+
   .xl\:gap-4 {
     gap: 1rem;
   }