From 6c0f4774360393ea1f30fb5bd121fc9ab91bcafb Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Mon, 16 Sep 2024 11:43:21 +0500
Subject: [PATCH] feat: responsive about and links sections

---
 index.html          |   8 +--
 static/tailwind.css | 145 +++++++++++++-------------------------------
 tailwind.config.js  |   4 +-
 3 files changed, 49 insertions(+), 108 deletions(-)

diff --git a/index.html b/index.html
index aa0baf4..90b2a09 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
     </div>
     <div class="container min-h-screen py-6 text-white scroll-mt-12" id="section_about">
         <h1 class="mt-16 mb-12 text-6xl font-bold text-center">ABOUT ME</h1>
-        <div class="flex flex-wrap gap-8 w-fit">
+        <div class="flex flex-wrap justify-center gap-8 mx-auto w-fit">
             <div class="flex flex-col w-[416px]">
                 <div class="relative w-[416px] h-[120px] flex justify-center items-center bg-bg-gray">
                     <p class="font-bold text-4xl p-[8px]">Tech enthusiast</p>
@@ -93,7 +93,7 @@
                     </div>
                 </div>
             </div>
-            <div class="flex flex-col w-[416px]">
+            <div class="flex flex-col w-[416px] xl:-mt-[248px] 2xl:-mt-0">
                 <div class="relative w-[416px] h-[120px] flex justify-center items-center bg-orange-600">
                     <p class="font-bold text-4xl p-[8px]">Red Pandas admirer</p>
                 </div>
@@ -123,7 +123,7 @@
     </div>
     <div class="container min-h-screen py-6 text-white scroll-mt-12" id="section_links">
         <h1 class="mt-16 mb-12 text-6xl font-bold text-center">LINKS</h1>
-        <div class="flex flex-wrap gap-8 w-fit">
+        <div class="flex flex-wrap justify-center gap-8 mx-auto w-fit">
             <!-- Photo Links -->
             <div class="flex flex-col w-[416px] gap-4">
                 <div class="relative w-[416px] h-[376px] flex justify-end items-end overflow-hidden" id="photos-image">
@@ -290,7 +290,7 @@
                 </div>
             </div>
             <!-- Contact and Friends links Links -->
-            <div class="flex flex-col w-[416px] gap-4">
+            <div class="flex flex-col w-[416px] gap-8 xl:gap-4 xl:-mt-[196px] 2xl:-mt-0">
                 <!-- Contact Links -->
                 <div class="flex flex-col gap-4">
                     <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-pink">
diff --git a/static/tailwind.css b/static/tailwind.css
index fc18b06..905795f 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -572,21 +572,21 @@ video {
   }
 }
 
+@media (min-width: 1000px) {
+  .container {
+    max-width: 1000px;
+  }
+}
+
 @media (min-width: 1024px) {
   .container {
     max-width: 1024px;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1800px) {
   .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1760px) {
-  .container {
-    max-width: 1760px;
+    max-width: 1800px;
   }
 }
 
@@ -793,10 +793,6 @@ video {
   width: 100%;
 }
 
-.max-w-\[1200px\] {
-  max-width: 1200px;
-}
-
 .max-w-\[45\%\] {
   max-width: 45%;
 }
@@ -818,10 +814,6 @@ video {
   scroll-margin-top: 3rem;
 }
 
-.scroll-mt-20 {
-  scroll-margin-top: 5rem;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -950,71 +942,25 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.bg-orange-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
-}
-
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
-
-.bg-green-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-}
-
-.bg-pink-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 72 153 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
 .bg-orange-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(234 88 12 / var(--tw-bg-opacity));
 }
 
-.bg-opacity-70 {
-  --tw-bg-opacity: 0.7;
-}
-
-.bg-opacity-20 {
-  --tw-bg-opacity: 0.2;
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
 
-.bg-opacity-5 {
-  --tw-bg-opacity: 0.05;
-}
-
-.bg-opacity-80 {
-  --tw-bg-opacity: 0.8;
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1051,11 +997,6 @@ video {
   padding-right: 2rem;
 }
 
-.py-16 {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1084,18 +1025,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.pb-6 {
-  padding-bottom: 1.5rem;
-}
-
-.pt-12 {
-  padding-top: 3rem;
-}
-
-.pt-24 {
-  padding-top: 6rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1215,10 +1144,6 @@ video {
   filter: darken(10%);
 }
 
-.\[filter\:lighen\(10\%\)\] {
-  filter: lighen(10%);
-}
-
 @font-face {
   font-family: 'Inter';
 
@@ -1305,6 +1230,35 @@ body {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+@media (min-width: 1000px) {
+  .xl\:-mt-\[196px\] {
+    margin-top: -196px;
+  }
+
+  .xl\:-mt-\[248px\] {
+    margin-top: -248px;
+  }
+
+  .xl\:gap-4 {
+    gap: 1rem;
+  }
+
+  .xl\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .xl\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
+  .xl\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:w-\[372px\] {
     width: 372px;
@@ -1330,24 +1284,11 @@ body {
   }
 }
 
-@media (min-width: 1280px) {
-  .xl\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
+@media (min-width: 1800px) {
+  .\32xl\:-mt-0 {
+    margin-top: -0px;
   }
 
-  .xl\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
-
-  .xl\:text-6xl {
-    font-size: 3.75rem;
-    line-height: 1;
-  }
-}
-
-@media (min-width: 1760px) {
   .\32xl\:w-\[512px\] {
     width: 512px;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 633e4a3..901b593 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,8 +13,8 @@ module.exports = {
         // 'sm': '640px',
         // 'md': '768px',
         // 'lg': '1024px',
-        // 'xl': '1280px',
-        '2xl': '1760px',
+        'xl': '1000px',
+        '2xl': '1800px',
       },
       container: {
         center: true,