fix: scroll margins

index.html

@@ -46,7 +46,7 @@
             </div>
         </div>
     </header>
-    <div class="container px-2 2xl:h-screen" id="section_landing">
+    <div class="container px-2 sm:pb-3 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:justify-between 2xl:justify-center sm:gap-12 sm:py-8 sm:px-8 sm:flex-row">
@@ -87,8 +87,8 @@
             </div>
         </div>
     </div>
-    <div class="container min-h-screen px-2 py-6 overflow-hidden text-white scroll-mt-20 lg:scroll-mt-8 xl:scroll-mt-20" id="section_about">
+    <div class="container min-h-screen px-2 py-6 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="section_about">
-        <h1 class="mb-12 text-4xl font-bold text-center mt-28 sm:mt-32 md:mt-28 2xl:mt-20 sm:text-6xl">ABOUT ME</h1>
+        <h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">ABOUT ME</h1>
         <div class="flex flex-wrap gap-8 mx-auto sm:justify-center w-fit">
             <div class="flex flex-col w-[344px] sm:w-[416px]">
                 <div class="relative w-[344px] sm:w-[416px] h-[100px] sm:h-[120px] flex justify-center items-center bg-bg-gray">
@@ -144,8 +144,8 @@
             </div>
         </div>
     </div>
-    <div class="container min-h-screen py-6 overflow-hidden text-white scroll-mt-20 lg:scroll-mt-8 xl:scroll-mt-20" id="section_links">
+    <div class="container min-h-screen py-6 text-white scroll-mt-36 sm:scroll-mt-28 lg:scroll-mt-4 xl:scroll-mt-20" id="section_links">
-        <h1 class="mb-12 text-4xl font-bold text-center mt-28 sm:mt-32 md:mt-28 2xl:mt-20 sm:text-6xl">LINKS</h1>
+        <h1 class="mb-12 text-4xl font-bold text-center lg:mt-28 2xl:mt-20 sm:text-6xl">LINKS</h1>
         <div class="flex flex-wrap justify-center gap-8 mx-auto w-fit">
             <!-- Photo Links -->
             <div class="flex flex-col w-[344px] sm:w-[416px] gap-1 sm:gap-4">

static/tailwind.css

@@ -662,6 +662,11 @@ video {
   margin-bottom: 1rem;
 }
 
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .mb-12 {
   margin-bottom: 3rem;
 }
@@ -682,28 +687,16 @@ video {
   margin-left: 2rem;
 }
 
-.mt-16 {
-  margin-top: 4rem;
-}
-
-.mt-24 {
-  margin-top: 6rem;
-}
-
-.mt-32 {
-  margin-top: 8rem;
-}
-
 .mt-28 {
   margin-top: 7rem;
 }
 
-.block {
+.mt-\[50\%\] {
-  display: block;
+  margin-top: 50%;
 }
 
-.inline {
+.mt-20 {
-  display: inline;
+  margin-top: 5rem;
 }
 
 .flex {
@@ -758,10 +751,6 @@ video {
   height: 100%;
 }
 
-.h-2 {
-  height: 0.5rem;
-}
-
 .max-h-\[4px\] {
   max-height: 4px;
 }
@@ -823,10 +812,6 @@ video {
   width: 100%;
 }
 
-.w-2 {
-  width: 0.5rem;
-}
-
 .max-w-\[46\.25\%\] {
   max-width: 46.25%;
 }
@@ -836,34 +821,50 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.scroll-mt-14 {
+.scroll-mt-20 {
-  scroll-margin-top: 3.5rem;
+  scroll-margin-top: 5rem;
+}
+
+.scroll-mt-28 {
+  scroll-margin-top: 7rem;
+}
+
+.scroll-mt-32 {
+  scroll-margin-top: 8rem;
 }
 
 .scroll-mt-16 {
   scroll-margin-top: 4rem;
 }
 
-.scroll-mt-20 {
+.scroll-mt-64 {
-  scroll-margin-top: 5rem;
+  scroll-margin-top: 16rem;
-}
-
-.scroll-mt-4 {
-  scroll-margin-top: 1rem;
 }
 
 .scroll-mt-8 {
   scroll-margin-top: 2rem;
 }
 
-.scroll-mt-12 {
+.scroll-mb-8 {
-  scroll-margin-top: 3rem;
+  scroll-margin-bottom: 2rem;
+}
+
+.scroll-mb-28 {
+  scroll-margin-bottom: 7rem;
+}
+
+.scroll-mt-96 {
+  scroll-margin-top: 24rem;
 }
 
 .scroll-mt-24 {
   scroll-margin-top: 6rem;
 }
 
+.scroll-mt-36 {
+  scroll-margin-top: 9rem;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -924,10 +925,6 @@ video {
   scroll-behavior: smooth;
 }
 
-.rounded-full {
-  border-radius: 9999px;
-}
-
 .border {
   border-width: 1px;
 }
@@ -1045,10 +1042,6 @@ video {
   padding: 8px;
 }
 
-.p-1 {
-  padding: 0.25rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1090,6 +1083,14 @@ video {
   padding-top: 2rem;
 }
 
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pt-\[50\%\] {
+  padding-top: 50%;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1296,20 +1297,24 @@ body {
     top: -6rem;
   }
 
-  .sm\:mt-16 {
-    margin-top: 4rem;
-  }
-
   .sm\:mt-32 {
     margin-top: 8rem;
   }
 
-  .sm\:block {
+  .sm\:mt-20 {
-    display: block;
+    margin-top: 5rem;
   }
 
-  .sm\:inline {
+  .sm\:mt-12 {
-    display: inline;
+    margin-top: 3rem;
+  }
+
+  .sm\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .sm\:block {
+    display: block;
   }
 
   .sm\:h-10 {
@@ -1346,6 +1351,14 @@ body {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
+  .sm\:scroll-mt-4 {
+    scroll-margin-top: 1rem;
+  }
+
+  .sm\:scroll-mt-8 {
+    scroll-margin-top: 2rem;
+  }
+
   .sm\:scroll-mt-16 {
     scroll-margin-top: 4rem;
   }
@@ -1354,8 +1367,8 @@ body {
     scroll-margin-top: 6rem;
   }
 
-  .sm\:scroll-mt-32 {
+  .sm\:scroll-mt-28 {
-    scroll-margin-top: 8rem;
+    scroll-margin-top: 7rem;
   }
 
   .sm\:flex-row {
@@ -1423,6 +1436,10 @@ body {
     padding-bottom: 2rem;
   }
 
+  .sm\:pb-3 {
+    padding-bottom: 0.75rem;
+  }
+
   .sm\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -1473,14 +1490,14 @@ body {
 }
 
 @media (min-width: 768px) {
-  .md\:mt-24 {
-    margin-top: 6rem;
-  }
-
   .md\:mt-28 {
     margin-top: 7rem;
   }
 
+  .md\:mt-32 {
+    margin-top: 8rem;
+  }
+
   .md\:inline {
     display: inline;
   }
@@ -1489,12 +1506,20 @@ body {
     display: none;
   }
 
-  .md\:w-auto {
+  .md\:h-screen {
-    width: auto;
+    height: 100vh;
   }
 
-  .md\:scroll-mt-20 {
+  .md\:max-h-\[40vh\] {
-    scroll-margin-top: 5rem;
+    max-height: 40vh;
+  }
+
+  .md\:min-h-screen {
+    min-height: 100vh;
+  }
+
+  .md\:w-auto {
+    width: auto;
   }
 }
 
@@ -1523,12 +1548,24 @@ body {
     scroll-margin-top: 5rem;
   }
 
-  .xl\:flex-col {
+  .xl\:scroll-mt-24 {
-    flex-direction: column;
+    scroll-margin-top: 6rem;
   }
 
-  .xl\:justify-center {
+  .xl\:scroll-mt-16 {
-    justify-content: center;
+    scroll-margin-top: 4rem;
+  }
+
+  .xl\:scroll-mt-12 {
+    scroll-margin-top: 3rem;
+  }
+
+  .xl\:scroll-mt-8 {
+    scroll-margin-top: 2rem;
+  }
+
+  .xl\:flex-col {
+    flex-direction: column;
   }
 
   .xl\:text-2xl {
@@ -1553,10 +1590,18 @@ body {
 }
 
 @media (min-width: 1024px) {
+  .lg\:mt-28 {
+    margin-top: 7rem;
+  }
+
   .lg\:max-h-\[45vh\] {
     max-height: 45vh;
   }
 
+  .lg\:max-h-\[40vh\] {
+    max-height: 40vh;
+  }
+
   .lg\:w-\[372px\] {
     width: 372px;
   }
@@ -1565,44 +1610,27 @@ body {
     width: 64px;
   }
 
-  .lg\:scroll-mt-20 {
-    scroll-margin-top: 5rem;
-  }
-
-  .lg\:scroll-mt-10 {
-    scroll-margin-top: 2.5rem;
-  }
-
   .lg\:scroll-mt-8 {
     scroll-margin-top: 2rem;
   }
 
-  .lg\:scroll-mt-12 {
+  .lg\:scroll-mt-4 {
-    scroll-margin-top: 3rem;
+    scroll-margin-top: 1rem;
   }
 
   .lg\:gap-4 {
     gap: 1rem;
   }
 
-  .lg\:p-4 {
+  .lg\:text-2xl {
-    padding: 1rem;
+    font-size: 1.5rem;
-  }
+    line-height: 2rem;
-
-  .lg\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
   }
 
   .lg\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
   }
-
-  .lg\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
 }
 
 @media (min-width: 1800px) {
@@ -1622,6 +1650,10 @@ body {
     max-height: 60vh;
   }
 
+  .\32xl\:max-h-\[40vh\] {
+    max-height: 40vh;
+  }
+
   .\32xl\:w-\[300px\] {
     width: 300px;
   }
@@ -1634,6 +1666,10 @@ body {
     width: 64px;
   }
 
+  .\32xl\:scroll-mt-20 {
+    scroll-margin-top: 5rem;
+  }
+
   .\32xl\:flex-row {
     flex-direction: row;
   }