From e9b5dc4dc4424f06356df1a9af8a5b73b6ce1260 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 15 Sep 2024 15:10:26 +0500
Subject: [PATCH] make bigger text for links subtext

---
 index.html          | 69 +++++++++++++++++++++++++++++----------------
 static/tailwind.css | 55 ++++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index bc1b61b..b9eca19 100644
--- a/index.html
+++ b/index.html
@@ -81,89 +81,110 @@
             <p>Feel free to reach out anytime! I will be happy to chat.</p>
         </div>
     </div>
-    <div class="container h-screen mx-auto text-white scroll-mt-40" id="section_links">
-        <h1 class="mt-16 mb-12 text-6xl font-bold text-center">LINKS</h1>
-        <div class="flex gap-8 mx-8">
-            <div class="flex flex-col gap-4">
-                <div class="relative w-[356px] h-[304px] flex justify-end items-end">
-                    <img class="absolute inset-0 w-[356px] h-[304px] object-cover -z-10" alt="" src="./static/assets/photos_section_image.png"/>
+    <div class="flex flex-col items-center justify-center p-8 text-white scroll-mt-24" id="section_links">
+        <h1 class="mx-auto mb-12 text-6xl font-bold w-fit">LINKS</h1>
+        <div class="flex items-start justify-center gap-8">
+            <!-- Photo Links -->
+            <div class="flex flex-col w-[416px] gap-4">
+                <div class="relative w-[416px] aspect-[342/288] flex justify-end items-end">
+                    <img class="absolute inset-0 w-[416px] aspect-[342/288] object-cover -z-10" alt="" src="./static/assets/photos_section_image.png"/>
                     <p class="font-bold text-[40px] leading-[1] p-[8px]">PHOTOS</p>
                 </div>
                 <div class="flex gap-4">
                     <a href="https://pixey.org/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around">
+                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
                             <img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">pixey.org</p>
-                                <p class="font-light text-[12px] leading-[1]">See the photos like in instagram</p>
+                                <p class="font-light text-[14px] leading-[1]">See the photos like in instagram</p>
                             </div>
                         </div>
                     </a>
                     <a href="https://instafops.net/radiquwum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around">
+                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
                             <img class="w-20 h-20 mx-auto" alt="" src="./static/assets/pixelfed.svg" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">instafops.net</p>
-                                <p class="font-light text-[12px] leading-[1]">Photos that more furry related</p>
+                                <p class="font-light text-[14px] leading-[1]">Photos that more furry related</p>
                             </div>
                         </div>
                     </a>
                 </div>
                 <a href="https://wah.su/photos" target="_blank" referrerpolicy="origin">
-                    <div class="bg-white text-black w-[356px] h-[150px] p-2 flex justify-around items-center">
+                    <div class="bg-white text-black w-[416px] h-[180px] p-2 flex justify-around items-center">
                         <img class="w-20 h-20" alt="" src="./static/assets/immich.png" />
                         <div class="flex flex-col gap-1">
                             <p class="font-medium text-[24px] leading-[1]">wah.su/photos</p>
-                            <p class="font-light text-[12px] leading-[1]">View gallery like in google photos</p>
+                            <p class="font-light text-[14px] leading-[1]">View gallery like in google photos</p>
                         </div>
                     </div>
                 </a>
             </div>
-            <div class="flex flex-col gap-4">
-                <div class="relative w-[356px] h-[150px] flex justify-end items-end bg-bg-blue">
+            <!-- Social Media Links -->
+            <div class="flex flex-col w-[416px] gap-4">
+                <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-bg-blue">
                     <p class="font-bold text-[40px] leading-[1] p-[8px]">SOCIAL MEDIA</p>
                 </div>
                 <div class="flex flex-wrap gap-4">
                     <a href="https://furry.engineer/@radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around">
+                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
                             <img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--mastodon-icon.svg" />
                             <div class="flex flex-col justify-end gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">Mastodon</p>
-                                <p class="font-light text-[12px] leading-[1]">@radiquum@furry.engineer</p>
+                                <p class="font-light text-[14px] leading-[1]">@radiquum@furry.engineer</p>
                             </div>
                         </div>
                     </a>
                     <a href="https://bsky.app/profile/radiquum.wah.su" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around">
+                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
                             <img class="w-16 mx-auto h-14" alt="" src="./static/assets/Bluesky_Logo.png" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">Bluesky</p>
-                                <p class="font-light text-[12px] leading-[1]">@radiquum.wah.su</p>
+                                <p class="font-light text-[14px] leading-[1]">@radiquum.wah.su</p>
                             </div>
                         </div>
                     </a>
-                </div>
-                <div class="flex flex-wrap gap-4">
                     <a href="https://x.com/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around">
+                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
                             <img class="mx-auto w-14 h-14" alt="" src="./static/assets/logos--twitter.svg" />
                             <div class="flex flex-col justify-end gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">Twitter</p>
-                                <p class="font-light text-[12px] leading-[1]">@radiquum</p>
+                                <p class="font-light text-[14px] leading-[1]">@radiquum</p>
                             </div>
                         </div>
                     </a>
                     <a href="https://vk.com/radiquum" target="_blank" referrerpolicy="origin">
-                        <div class="bg-white text-black w-[170px] h-[150px] p-2 flex flex-col justify-around">
+                        <div class="bg-white text-black w-[200px] h-[180px] p-2 flex flex-col justify-around">
                             <img class="mx-auto w-14 h-14" alt="" src="./static/assets/VKLogo.png" />
                             <div class="flex flex-col gap-1">
                                 <p class="font-medium text-[24px] leading-[1]">VKontakte</p>
-                                <p class="font-light text-[12px] leading-[1]">radiquum</p>
+                                <p class="font-light text-[14px] leading-[1]">radiquum</p>
                             </div>
                         </div>
                     </a>
                 </div>
             </div>
+            <!-- Projects Links -->
+            <div class="flex flex-col w-[416px] gap-4">
+                <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
+                    <p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
+                </div>
+            </div>
+            <!-- Contact and Friends links Links -->
+            <div class="flex flex-col w-[416px] gap-8">
+                <!-- Contact Links -->
+                <div class="flex flex-col gap-4">
+                    <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
+                        <p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
+                    </div>
+                </div>
+                <!-- Friends Links -->
+                <div class="flex flex-col gap-4">
+                    <div class="relative w-[416px] h-[180px] flex justify-end items-end bg-black">
+                        <p class="font-bold text-[40px] leading-[1] p-[8px]">PROJECTS</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <script src="./static/script.js"></script>
diff --git a/static/tailwind.css b/static/tailwind.css
index b397c21..d148b34 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -644,6 +644,11 @@ video {
   margin-right: 2rem;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -672,10 +677,18 @@ video {
   margin-top: 8rem;
 }
 
+.mt-14 {
+  margin-top: 3.5rem;
+}
+
 .flex {
   display: flex;
 }
 
+.aspect-\[342\/288\] {
+  aspect-ratio: 342/288;
+}
+
 .h-\[37px\] {
   height: 37px;
 }
@@ -736,6 +749,14 @@ video {
   height: 3.5rem;
 }
 
+.h-\[180px\] {
+  height: 180px;
+}
+
+.h-\[416px\] {
+  height: 416px;
+}
+
 .max-h-\[40vh\] {
   max-height: 40vh;
 }
@@ -832,6 +853,27 @@ video {
   width: 3.5rem;
 }
 
+.w-\[386px\] {
+  width: 386px;
+}
+
+.w-\[390px\] {
+  width: 390px;
+}
+
+.w-\[400px\] {
+  width: 400px;
+}
+
+.w-\[416px\] {
+  width: 416px;
+}
+
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .max-w-\[1200px\] {
   max-width: 1200px;
 }
@@ -864,6 +906,10 @@ video {
   scroll-margin-top: 10rem;
 }
 
+.scroll-mt-24 {
+  scroll-margin-top: 6rem;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -974,6 +1020,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -995,6 +1046,10 @@ video {
   padding: 0.25rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;