responsive content block

app/src/views/LandingPage.vue

@@ -91,8 +91,10 @@ const scrollToSection = (sectionId) => {
 
       <!-- main content -->
       <main class="w-full h-[94vh] overflow-y-auto">
-        <div class="h-1/2 m-3 px-10">
+        <div class="w-full flex flex-col items-center">
-          <div class="w-full h-full flex flex-col justify-around items-center">
+          <div
+            class="flex flex-col md:flex-row mt-10 justify-around gap-5 items-center"
+          >
             <h1 class="text-text-primary text-7xl font-extrabold font-mono">
               Linux
             </h1>
@@ -101,9 +103,10 @@ const scrollToSection = (sectionId) => {
               Odyssey
             </h1>
           </div>
+          <div class="w-full md:w-2/3 px-5">
             <section
               id="intro"
-            class="text-text p-20 grid grid-cols-1 gap-3 justify-items-center"
+              class="text-text grid grid-cols-1 gap-3 justify-items-center"
             >
               <h1
                 class="text-text inline-block bg-bg-primary p-5 rounded-xl opacity-90"
@@ -125,7 +128,10 @@ const scrollToSection = (sectionId) => {
               <div
                 class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
               >
-              <img src="../img/icon_shuttle.svg" class="h-[18vh] row-span-2" />
+                <img
+                  src="../img/icon_shuttle.svg"
+                  class="h-[18vh] row-span-2"
+                />
                 <h1
                   class="text-text-primary p-5 font-extrabold font-mono col-span-2"
                   style="font-size: 3.5vh"
@@ -157,7 +163,10 @@ const scrollToSection = (sectionId) => {
               <div
                 class="bg-bg-primary p-5 rounded-xl opacity-90 grid grid-cols-3 grid-rows-2 justify-items-center items-center"
               >
-              <img src="../img/icon_settings.svg" class="h-[18vh] row-span-2" />
+                <img
+                  src="../img/icon_settings.svg"
+                  class="h-[18vh] row-span-2"
+                />
                 <h1
                   class="text-text-primary p-5 font-extrabold font-mono col-span-2 pt-8"
                   style="font-size: 3.5vh"
@@ -220,7 +229,9 @@ const scrollToSection = (sectionId) => {
               </h1>
               <div class="p-3 col-span-3">
                 <div class="grid grid-cols-4 gap-3 justify-items-center">
-                <h1 class="font-bold" style="font-size: 2.5vh">wancat 林貓</h1>
+                  <h1 class="font-bold" style="font-size: 2.5vh">
+                    wancat 林貓
+                  </h1>
                   <h1 class="font-bold" style="font-size: 2.5vh">Neil</h1>
                   <h1 class="font-bold" style="font-size: 2.5vh">A.H.</h1>
                   <h1 class="font-bold" style="font-size: 2.5vh">Ray Gur</h1>
@@ -270,6 +281,7 @@ const scrollToSection = (sectionId) => {
                 "以前覺得寫程式是我生活中碰不到而且很難的項目。但通過這堂課之後，覺得寫程式不再那麼難以親近"
               </h1>
             </section>
+          </div>
           <section
             id="contact"
             class="text-text p-10 grid grid-cols-3 gap-5 justify-items-center"