refactor: change main block text sizing for mobile

index.html

@@ -49,12 +49,11 @@
     <div class="container px-2 2xl:h-screen" id="section_landing">
         <div class="text-white h-full lg:max-h-[45vh] xl:max-h-[40vh] 2xl:max-h-[60vh] relative">
             <div class="bg-bg-pink w-full h-full lg:max-h-[45vh] xl:max-h-[40vh] 2xl:max-h-[60vh] max-w-[46.25%] absolute top-0 right-0 -z-10 hidden sm:block"></div>
-            <div class="flex flex-col items-center justify-center gap-4 pt-8 pb-4 sm:gap-12 sm:py-8 sm:px-8 sm:flex-row">
+            <div class="flex flex-col items-center justify-center gap-4 pt-8 pb-4 sm:justify-between 2xl:justify-center sm:gap-12 sm:py-8 sm:px-8 sm:flex-row">
                 <img src="./static/avatar_512.png" alt="" class="w-[256px] lg:w-[372px] 2xl:w-[512px]" />
-                <div class="p-4 bg-bg-pink sm:bg-transparent">
+                <div class="w-full p-4 bg-bg-pink sm:bg-transparent md:w-auto">
-                    <h1 class="text-2xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
+                    <h1 class="text-3xl font-semibold lg:text-4xl xl:text-6xl 2xl:text-8xl">KENTAI RADIQUUM</h1>
-                    <p class="text-2xl font-light lg:text-3xl xl:text-4xl 2xl:text-5xl">Async / Await • Red panda /
+                    <p class="text-xl font-light lg:text-2xl xl:text-4xl 2xl:text-5xl">Async / Await <br class="md:hidden" /> <span class="hidden md:inline">•</span> Red panda / Protogen</p>
-                        Protogen</p>
                 </div>
             </div>
         </div>

static/tailwind.css

@@ -686,6 +686,14 @@ video {
   margin-top: 4rem;
 }
 
+.block {
+  display: block;
+}
+
+.inline {
+  display: inline;
+}
+
 .flex {
   display: flex;
 }
@@ -738,6 +746,10 @@ video {
   height: 100%;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
 .max-h-\[4px\] {
   max-height: 4px;
 }
@@ -799,6 +811,10 @@ video {
   width: 100%;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
 .max-w-\[46\.25\%\] {
   max-width: 46.25%;
 }
@@ -872,6 +888,10 @@ video {
   scroll-behavior: smooth;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -989,6 +1009,10 @@ video {
   padding: 8px;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1153,10 +1177,6 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
-.ease-in {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
 .\[filter\:darken\(10\%\)\] {
   filter: darken(10%);
 }
@@ -1244,6 +1264,10 @@ body {
     display: block;
   }
 
+  .sm\:inline {
+    display: inline;
+  }
+
   .sm\:h-10 {
     height: 2.5rem;
   }
@@ -1397,8 +1421,16 @@ body {
     margin-top: 6rem;
   }
 
-  .md\:h-screen {
+  .md\:inline {
-    height: 100vh;
+    display: inline;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:w-auto {
+    width: auto;
   }
 
   .md\:scroll-mt-20 {
@@ -1415,10 +1447,6 @@ body {
     margin-top: -248px;
   }
 
-  .xl\:h-screen {
-    height: 100vh;
-  }
-
   .xl\:max-h-\[40vh\] {
     max-height: 40vh;
   }
@@ -1435,6 +1463,10 @@ body {
     flex-direction: column;
   }
 
+  .xl\:justify-center {
+    justify-content: center;
+  }
+
   .xl\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -1457,44 +1489,10 @@ body {
 }
 
 @media (min-width: 1024px) {
-  @media (min-width: 1000px) {
-    .lg\:xl\:max-h-\[40vh\] {
-      max-height: 40vh;
-    }
-  }
-
-  .lg\:h-screen {
-    height: 100vh;
-  }
-
-  .lg\:max-h-\[40vh\] {
-    max-height: 40vh;
-  }
-
-  .lg\:max-h-\[50vh\] {
-    max-height: 50vh;
-  }
-
-  .lg\:max-h-\[50\%\] {
-    max-height: 50%;
-  }
-
-  .lg\:max-h-\[40\%\] {
-    max-height: 40%;
-  }
-
-  .lg\:max-h-\[45\%\] {
-    max-height: 45%;
-  }
-
   .lg\:max-h-\[45vh\] {
     max-height: 45vh;
   }
 
-  .lg\:max-h-\[30vh\] {
-    max-height: 30vh;
-  }
-
   .lg\:w-\[372px\] {
     width: 372px;
   }
@@ -1507,6 +1505,10 @@ body {
     gap: 1rem;
   }
 
+  .lg\:p-4 {
+    padding: 1rem;
+  }
+
   .lg\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -1516,6 +1518,11 @@ body {
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
+
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
 }
 
 @media (min-width: 1800px) {
@@ -1547,6 +1554,10 @@ body {
     flex-direction: row;
   }
 
+  .\32xl\:justify-center {
+    justify-content: center;
+  }
+
   .\32xl\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;