responsive design

src/components/Background.astro

@@ -14,5 +14,8 @@ import wallpaper from '../images/wallpaper.png';
         mask-image: linear-gradient(theme(colors.wallpaper.darkest), 10%, transparent);
         opacity: 50%;
         filter: blur(0.75rem);
+        object-fit: cover;
+        width: 100vw;
+        height: 100vh;
     }
 </style>

src/components/Box.astro

@@ -2,7 +2,7 @@
 
 ---
 
-<div class="p-8 gradient rounded-xl">
+<div class="sm:p-8 max-sm:p-4 gradient rounded-xl max-sm:mt-20">
     <slot/>
 </div>
 

src/components/Button.astro

@@ -12,9 +12,11 @@ const { link, style } = Astro.props;
     a {
         @apply
             grid items-center justify-items-center
-            text-accent-lightest text-xl font-body
+            text-accent-lightest font-body
             border-accent-lightest border-opacity-50 border-solid border-2 rounded-full
-            p-4 min-w-60
+            sm:text-xl max-sm:text-lg
+            sm:p-4 max-sm:p-3
+            sm:min-w-60 max-sm:min-w-52
             transition-colors;
 
         grid-template-columns: 1.75rem 1fr 1.75rem;

src/components/ButtonRow.astro

@@ -0,0 +1,6 @@
+---
+const { reverseOnMobile } = Astro.props;
+const classList = `flex sm:flex-row ${reverseOnMobile === 'true' ? 'max-sm:flex-col-reverse' : 'max-sm:flex-col'} justify-center gap-8`;
+---
+
+<div class={classList}><slot/></div>

src/components/InstructionBox.astro

@@ -13,8 +13,8 @@ const classList = `flex flex-col ${align ?? 'items-center'} gap-8`;
 <style>
     article {
         @apply
-            flex flex-row items-center
-            gap-8 p-8
+            flex sm:flex-row max-sm:flex-col items-center
+            gap-8 sm:p-8 max-sm:p-4
             bg-wallpaper-default bg-opacity-25 
             rounded-xl;
     }

src/components/Navbar.astro

@@ -9,7 +9,7 @@ import kofi from "../images/kofi.svg?raw"
 
 <div class="
     fixed
-    grid grid-cols-3
+    grid sm:grid-cols-3 max-sm:grid-cols-2
     justify-center items-center
     w-full
     bg-quardiary-darkest
@@ -19,7 +19,7 @@ import kofi from "../images/kofi.svg?raw"
         <Image src={logo} alt="Globed logo" class="w-[24px] h-[24px]"/>
         <p class="font-head text-xl text-accent-lightest">Globed</p>
     </div>
-    <div class="flex flex-row justify-center">
+    <div class="flex flex-row justify-center max-sm:hidden">
         <a href="/">
             <HomeIcon/>
             <span class="max-sm:hidden">Home</span>

src/components/Separator.astro

@@ -8,6 +8,9 @@
     div {
         background: linear-gradient(to right, transparent, 25%, theme(colors.accent.lightest), 75%, transparent);
         height: .2em;
-        width: 50vw;
+
+        @apply
+            md:w-1/2
+            max-md:w-3/4;
     }
 </style>

src/components/Subtitle.astro

@@ -2,4 +2,4 @@
 import Text from "./Text.astro"
 ---
 
-<Text size="text-2xl" center="true" font="font-head" bold="true"><slot/></Text>
+<Text size="sm:text-2xl max-sm:text-xl" center="true" font="font-head" bold="true"><slot/></Text>

src/components/Text.astro

@@ -4,7 +4,7 @@ const classList = `
     max-w-paragraph
     ${color ?? 'text-accent-lightest'}
     ${font ?? 'font-body'}
-    ${size ?? 'text-xl'}
+    ${size ?? 'sm:text-xl max-sm:text-base'}
     ${center === 'true' ? 'text-center' : ''}
     ${bold === 'true' ? 'font-bold' : ''}
 `

src/components/Title.astro

@@ -2,4 +2,9 @@
 
 ---
 
-<h1 class="text-accent-default font-head font-bold text-6xl mb-12 mt-12 mix-blend-screen"><slot/></h1>
+<h1 class="
+    text-accent-default font-head font-bold
+    sm:text-6xl max-sm:text-5xl
+    sm:mb-12 max-sm:mb-6 sm:mt-12 max-sm:mt-6
+    mix-blend-screen
+"><slot/></h1>

src/pages/about.astro

@@ -7,8 +7,8 @@ import Text from '../components/Text.astro';
 import Link from '../components/Link.astro';
 ---
 
-<Page title="Install Globed">
-    <main class="p-20 mt-32 gap-8 text-xl flex flex-col items-center">
+<Page title="About Globed">
+    <main class="sm:p-20 max-sm:p-6 mt-32 gap-8 text-xl flex flex-col items-center">
         <Title>About Globed</Title>
 
         <Text>
@@ -23,31 +23,31 @@ import Link from '../components/Link.astro';
 
         <Title>FAQ</Title>
 
-        <InstructionBox num="?" align="items-start">
+        <InstructionBox num="?" align="sm:items-start max-sm:items-center">
             <Subtitle>Is Globed free?</Subtitle>
             <Text>
                 Yes, Globed is <em>100% free</em>. However, <Link href="https://ko-fi.com/globed">donations</Link> are much appreciated, as they 
                 allow us to continue development!
             </Text>
         </InstructionBox>
 
-        <InstructionBox num="?" align="items-start">
+        <InstructionBox num="?" align="sm:items-start max-sm:items-center">
             <Subtitle>Is this official?</Subtitle>
             <Text>
                 No, Globed is not an official part of Geometry Dash nor affiliated with RobTop Games. 
                 The mod is fully fan-made by other passionate GD players.
             </Text>
         </InstructionBox>
 
-        <InstructionBox num="?" align="items-start" id="ios-info">
+        <InstructionBox num="?" align="sm:items-start max-sm:items-center" id="ios-info">
             <Subtitle>Can I get Globed on iOS?</Subtitle>
             <Text>
                 <em>Globed is not available on iOS</em>, as Geode can't support it. There are no plans 
                 to port the mod to iOS at this time.
             </Text>
         </InstructionBox>
 
-        <InstructionBox num="?" align="items-start">
+        <InstructionBox num="?" align="sm:items-start max-sm:items-center">
             <Subtitle>The game crashes a lot!</Subtitle>
             <Text>
                 This can be due to Globed, or due to some other mod. Please report the bug on 

src/pages/index.astro

@@ -12,13 +12,20 @@ import Donate from '../components/Donate.astro';
 import Link from '../components/Link.astro';
 import Title from '../components/Title.astro';
 import Subtitle from '../components/Subtitle.astro';
+import ButtonRow from '../components/ButtonRow.astro';
 
 const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file => file.default);
 ---
 
 <Page title="Globed">
-    <header class="flex flex-col justify-center items-center sm:mt-20 max-sm:mt-10 sm:p-20 max-sm:p-6 mb-16">
-        <Image src={logo} alt="Globed logo" class="w-48"/>
+    <header class="
+        flex flex-col
+        justify-center items-center
+        sm:mt-20 max-sm:mt-32
+        sm:p-20 max-sm:p-6
+        mb-16
+    ">
+        <Image src={logo} alt="Globed logo" class="sm:w-48 max-sm:w-28"/>
 
         <Title>Globed</Title>
 
@@ -30,7 +37,10 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
             <Link style="alt" noUnderline="true" href="https://www.robtopgames.com/">Geometry Dash</Link>
         </Subtitle>
 
-        <div class="flex flex-row mt-16 gap-4">
+        <!-- scuffiest padding of my life -->
+        <div class="h-8" />
+
+        <ButtonRow reverseOnMobile="true">
             <Button link="#content">
                 <ArrowDownIcon slot="pre-icon" />
                 About
@@ -40,12 +50,12 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
                 <ArrowRightIcon slot="post-icon" />
                 Install
             </Button>
-        </div>
+        </ButtonRow>
     </header>
 
     <Separator />
 
-    <div id="content" class="flex flex-col gap-20 p-20">
+    <main id="content" class="flex flex-col gap-20 sm:p-20 max-sm:p-6 max-sm:pt-20">
         <Text>
             Globed is a <em>Multiplayer Mod</em> for Geometry Dash that lets you easily play 
             together with your friends across the world. Just install the mod via Geode, and 
@@ -70,7 +80,7 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
                 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!
             </Text>
-            <div class="flex flex-row justify-center gap-4">
+            <ButtonRow>
                 <Button link="/install">
                     <DownloadIcon slot="pre-icon" />
                     Install Globed
@@ -79,10 +89,10 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
                     <BookIcon slot="pre-icon" />
                     Read More
                 </Button>
-            </div>
+            </ButtonRow>
         </div>
         </Text>
-    </div>
+    </main>
 
     <Donate />
 

src/pages/install.astro

@@ -10,6 +10,7 @@ import getARoomYouTwo from '../images/connect-to-server.png';
 import Link from '../components/Link.astro';
 import Title from '../components/Title.astro';
 import InstructionBox from '../components/InstructionBox.astro';
+import ButtonRow from '../components/ButtonRow.astro';
 ---
 
 <Page title="Install Globed">
@@ -62,7 +63,7 @@ import InstructionBox from '../components/InstructionBox.astro';
             <Text>
                 Need help using Globed? Hop in to our <em>Help</em> page, or <em>join our Discord</em>!
             </Text>
-            <div class="flex flex-row justify-center gap-8">
+            <ButtonRow>
                 <Button link="/about">
                     <BookIcon slot="pre-icon" />
                     Help
@@ -71,7 +72,7 @@ import InstructionBox from '../components/InstructionBox.astro';
                     <MessageCircleIcon slot="pre-icon" />
                     Discord
                 </Button>
-            </div>
+            </ButtonRow>
         </InstructionBox>
 
     </main>