Merge pull request #2 from MockBukkit/fix-width-overflow

Author: thelooter

components/CatchSection.vue

@@ -2,9 +2,9 @@
 
 <template>
     <div
-        class="mx-auto my-[5rem] flex w-screen max-w-screen-xl flex-1 flex-row items-center justify-center max-md:my-[2rem] max-md:mt-4 max-md:w-screen max-md:flex-col"
+        class="mx-auto my-[5rem] flex w-full max-w-screen-xl flex-1 flex-row items-center justify-center max-md:my-[2rem] max-md:mt-4 max-md:w-full max-md:flex-col"
     >
-        <div class="w-screen max-w-screen-xl text-white max-md:flex max-md:flex-col">
+        <div class="w-full max-w-screen-xl text-white max-md:flex max-md:flex-col max-xl:ml-4 max-md:ml-0">
             <h1 class="py-2 text-left text-5xl font-semibold max-md:py-0 max-md:text-center max-md:text-2xl">
                 Testing.
             </h1>
@@ -13,7 +13,7 @@
             >
                 Simplified.
             </h2>
-            <p class="text-md mx-lg:px-6 py-2 pr-20 font-medium max-lg:w-screen max-lg:pr-0 max-md:text-center">
+            <p class="text-md mx-lg:px-6 py-2 pr-20 font-medium max-lg:w-full max-lg:pr-0 max-md:text-center">
                 Mockbukkit makes unit testing of Paper Plugins easier by providing Mocks for common features
             </p>
             <div class="mt-3 flex flex-row items-center justify-start max-md:flex-col max-md:justify-center">
@@ -41,7 +41,7 @@
                 </a>
             </div>
         </div>
-        <div class="flex w-screen max-w-screen-xl justify-end">
+        <div class="flex w-full max-w-screen-xl justify-end">
             <img src="~/assets/minecraft-trees.jpg" alt="test" class="w-11/12 rounded-2xl max-md:mx-auto max-md:mt-5" />
         </div>
     </div>

components/footer/Footer.vue

@@ -55,7 +55,7 @@ const footer_categories = [
 
 <template>
     <div class="mx-auto flex max-w-screen-xl flex-col divide-y divide-neutral-500">
-        <div class="mx-auto flex max-w-screen-xl flex-row max-md:flex-col">
+        <div class="flex max-w-screen-xl flex-row max-md:flex-col justify-between">
             <FooterCategory
                 v-for="category in footer_categories"
                 :title="category.title"
@@ -66,10 +66,10 @@ const footer_categories = [
             <img
                 src="../../assets/logo.png"
                 alt="Full Logo"
-                class="h-auto w-1/6 max-md:mx-auto max-md:my-4 max-md:w-2/3"
+                class="h-auto w-1/6 max-md:mx-auto max-md:my-4 max-md:w-2/3 max-xl:ml-4"
             />
             <div>
-                <p class="text-sm text-neutral-400 max-md:text-center">
+                <p class="text-sm text-neutral-400 max-md:text-center max-xl:mr-4">
                     © 2024 The Mockbukkit Team.
                 </p>
             </div>

components/footer/FooterCategory.vue

@@ -20,7 +20,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <div class="mx-40 my-8 text-center max-md:mx-auto max-md:my-2">
+    <div class="w-40 my-8 text-center max-md:mx-auto max-md:my-2">
         <h2 class="my-5 font-bold text-white">{{ title }}</h2>
         <ul>
             <li v-for="link in links" :key="link.name">

components/highlight/HighlightCard.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 
 <template>
     <div
-        class="flex flex-col rounded-lg bg-gradient-to-b from-green-800 to-green-700 pb-10 pt-3 shadow-xl transition duration-200 ease-in-out hover:scale-105"
+        class="flex flex-col rounded-lg bg-gradient-to-b from-green-800 to-green-700 pb-10 pt-3 shadow-xl transition duration-200 ease-in-out scale-95 hover:scale-100"
     >
         <div class="mt-3 flex flex-col items-center justify-center">
             <font-awesome-icon class="mb-3 text-3xl text-white" :icon="icon" />

components/highlight/HighlightSection.vue

@@ -32,27 +32,27 @@ const loopCards = computed(() => {
 </script>
 
 <template>
-    <div class="my-8 flex w-screen flex-col bg-neutral-800 py-8">
+    <div class="my-8 flex w-full flex-col bg-neutral-800 py-8">
         <div class="mx-auto flex flex-row">
             <h3 class="font text-xl font-semibold text-white">Make your development life</h3>
             <h3 class="ml-1 text-xl font-semibold text-green-500">easier.</h3>
         </div>
-        <div class="mx-auto my-8 flex max-w-screen-xl flex-row max-md:flex-col">
+        <div class="mx-auto my-8 flex max-w-screen-xl flex-row max-lg:flex-col">
             <HighlightCard
-                class="my-4 mr-4 flex-1 max-md:ml-4"
+                class="flex-1 my-2 mr-2 max-lg:ml-2"
                 :icon="cards[0].icon"
                 :title="cards[0].title"
                 :text="cards[0].text"
             ></HighlightCard>
             <HighlightCard
                 v-for="card in loopCards"
-                class="mx-4 my-4 flex-1 max-md:mx-4"
+                class="flex-1 my-2 mx-2 "
                 :icon="card.icon"
                 :title="card.title"
                 :text="card.text"
             ></HighlightCard>
             <HighlightCard
-                class="my-4 ml-4 flex-1 max-md:mr-4"
+                class="flex-1 my-2 ml-2 max-lg:mr-2"
                 :icon="cards[cards.length - 1].icon"
                 :title="cards[cards.length - 1].title"
                 :text="cards[cards.length - 1].text"