more mobile fixes

src/components/Box.astro

@@ -2,7 +2,13 @@
 
 ---
 
-<div class="sm:p-8 max-sm:p-4 gradient rounded-xl max-sm:my-12">
+<div class="
+    flex flex-col
+    sm:p-8 max-sm:p-4
+    gradient rounded-xl
+    max-sm:mx-8 max-sm:my-12
+    sm:gap-8 max-sm:gap-4
+">
     <slot/>
 </div>
 

src/components/ButtonRow.astro

@@ -4,7 +4,7 @@ const classList = `
     flex
     sm:flex-row ${reverseOnMobile === 'true' ? 'max-sm:flex-col-reverse' : 'max-sm:flex-col'}
     items-center justify-center
-    gap-8
+    sm:gap-8 max-sm:gap-4
 `;
 ---
 

src/components/Donate.astro

@@ -10,7 +10,7 @@ import Box from "./Box.astro"
         Globed is supported by your <em>donations</em>. If you enjoy the mod, please consider 
         donating on the <em>Ko-fi</em>!
     </Text>
-    <div class="flex flex-row justify-center mt-8">
+    <div class="flex flex-row justify-center">
         <Button link="https://ko-fi.com/globed">
             <DollarSignIcon slot="pre-icon" />
             Donate

src/components/InstructionBox.astro

@@ -1,6 +1,6 @@
 ---
 const { num, align, id } = Astro.props;
-const classList = `flex flex-col ${align ?? 'items-center'} gap-8`;
+const classList = `flex flex-col ${align ?? 'items-center'} sm:gap-8 max-sm:gap-4`;
 ---
 
 <article id={id}>
@@ -14,7 +14,8 @@ const classList = `flex flex-col ${align ?? 'items-center'} gap-8`;
     article {
         @apply
             flex sm:flex-row max-sm:flex-col items-center
-            gap-8 sm:p-8 max-sm:p-4
+            sm:gap-8 max-sm:gap-4
+            sm:p-8 max-sm:p-4
             bg-wallpaper-default bg-opacity-25 
             rounded-xl;
     }

src/pages/index.astro

@@ -23,20 +23,21 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
         flex flex-col
         justify-center items-center
         sm:mt-20 max-sm:mt-32
-        sm:p-20 max-sm:p-6
+        sm:p-20 max-sm:p-4
         mb-16
     ">
         <Image src={logo} alt="Globed logo" class="sm:w-48 max-sm:w-28"/>
 
         <Title>Globed</Title>
 
-        <Subtitle>
-            An 
-            <Link noUnderline="true" href="https://github.com/dankmeme01/globed2">Open-Source</Link>, 
-            Highly Customizable <br>
-            <span class="font-bold">Multiplayer Mod</span> for 
-            <Link style="alt" noUnderline="true" href="https://www.robtopgames.com/">Geometry Dash</Link>
-        </Subtitle>
+        <span class="max-w-subtitle">
+            <Subtitle>
+                An 
+                <Link noUnderline="true" href="https://github.com/dankmeme01/globed2">Open-Source</Link>, 
+                Highly Customizable Multiplayer Mod for 
+                <Link style="alt" noUnderline="true" href="https://www.robtopgames.com/">Geometry Dash</Link>
+            </Subtitle>
+        </span>
 
         <!-- scuffiest padding of my life -->
         <div class="h-8" />
@@ -76,7 +77,7 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
             Geometry Dash. You can read more about Geode on <Link href="https://geode-sdk.org">its website</Link>!
         </Text>
 
-        <div class="flex flex-col gap-8 mt-8">
+        <div class="flex flex-col sm:gap-8 max-sm:gap-4 mt-8">
             <Text>
                 Interested? Go to the <em>Installation Page</em> for instructions on how to get Globed, 
                 or <em>About page</em> if you want to learn more!

tailwind.config.mjs

@@ -96,6 +96,8 @@ export default {
         extend: {
             maxWidth: {
                 'paragraph': 'min(36rem, 90vw)',
+                // this is just to ensure that "Multiplayer Mod" is on one line in the main page
+                'subtitle':  'min(32rem, 90vw)',
             }
         },
     },