mobile fixes

src/components/Box.astro

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

src/components/Button.astro

@@ -1,6 +1,6 @@
 ---
 const { link, style } = Astro.props;
-const url = link.startsWith('https') ? link : `${import.meta.env.BASE_URL}${link}`;
+const url = link.startsWith('https') || link.startsWith('#') ? link : `${import.meta.env.BASE_URL}${link}`;
 ---
 
 <a href={url} class={style}>

src/components/Content.astro

@@ -0,0 +1,10 @@
+---
+
+---
+
+<main id="content" class="
+    flex flex-col 
+    items-center
+    sm:gap-20 max-sm:gap-8
+    sm:p-20 max-sm:p-6 max-sm:pt-20
+"><slot/></main>

src/components/Footer.astro

@@ -3,7 +3,7 @@ import Link from "./Link.astro"
 import Text from "./Text.astro"
 ---
 
-<footer class="p-20">
+<footer class="sm:p-20 max-sm:p-4">
     <Text color="text-wallpaper-lightest" size="text-sm" center="true">
         Site by <Link style="alt2" href="https://twitter.com/hjfod">HJfod</Link>.
         <br>

src/components/Link.astro

@@ -1,7 +1,7 @@
 ---
 const { href, style, noUnderline } = Astro.props;
 const classList = `${style} ${noUnderline === 'true' ? 'no-link-underline' : ''}`;
-const url = href.startsWith('https') ? href : `${import.meta.env.BASE_URL}${href}`;
+const url = href.startsWith('https') || href.startsWith('#') ? href : `${import.meta.env.BASE_URL}${href}`;
 ---
 <!-- this is to prevent any unintended whitespace appearing after the link --><a href={url} class={classList}><slot/></a><style>
     a {

src/components/Title.astro

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

src/layouts/Default.astro

@@ -16,7 +16,7 @@ const { title } = Astro.props;
         <!-- title, desc and icon -->
         <title>{title}</title>
         <meta name="description" content="The official website for Globed - an open-source, highly customizable multiplayer mod for Geometry Dash.">
-        <link rel="icon" type="image/png" href="/logo.png" />
+        <link rel="icon" type="image/png" href={`${import.meta.env.BASE_URL}/logo.png`} />
 
         <!-- fonts -->
         <link rel="preconnect" href="https://fonts.googleapis.com">

src/pages/404.astro

@@ -3,10 +3,11 @@ import Page from '../layouts/Default.astro';
 import Text from '../components/Text.astro';
 import Button from '../components/Button.astro';
 import { HomeIcon } from 'astro-feather';
+import Content from '../components/Content.astro';
 ---
 
 <Page title="Install Globed">
-    <main class="p-20 mt-32 gap-8 text-xl flex flex-col items-center">
+    <Content>
         <h1 class="text-accent-default font-head font-bold text-6xl mb-12 mix-blend-screen">404 :(</h1>
 
         <Text>Oops! That page doesn't exist :(</Text>
@@ -15,5 +16,5 @@ import { HomeIcon } from 'astro-feather';
             <HomeIcon slot="pre-icon" />
             Return Home
         </Button>
-    </main>
+    </Content>
 </Page>

src/pages/about.astro

@@ -5,10 +5,11 @@ import InstructionBox from '../components/InstructionBox.astro';
 import Subtitle from '../components/Subtitle.astro';
 import Text from '../components/Text.astro';
 import Link from '../components/Link.astro';
+import Content from '../components/Content.astro';
 ---
 
 <Page title="About Globed">
-    <main class="sm:p-20 max-sm:p-6 mt-32 gap-8 text-xl flex flex-col items-center">
+    <Content>
         <Title>About Globed</Title>
 
         <Text>
@@ -54,6 +55,5 @@ import Link from '../components/Link.astro';
                 <Link href="https://discord.gg/d56q5Dkdm3">the Globed Discord server</Link>.
             </Text>
         </InstructionBox>
-
-    </main>
+    </Content>
 </Page>

src/pages/index.astro

@@ -13,6 +13,7 @@ import Link from '../components/Link.astro';
 import Title from '../components/Title.astro';
 import Subtitle from '../components/Subtitle.astro';
 import ButtonRow from '../components/ButtonRow.astro';
+import Content from '../components/Content.astro';
 
 const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file => file.default);
 ---
@@ -55,7 +56,7 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
 
     <Separator />
 
-    <main id="content" class="flex flex-col gap-20 sm:p-20 max-sm:p-6 max-sm:pt-20">
+    <Content>
         <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 
@@ -71,7 +72,7 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
         </Gallery>
 
         <Text>
-            Globed is availabe for <em>Geode</em>, the most popular third-party mod loader for 
+            Globed is available for <em>Geode</em>, the most popular third-party mod loader for 
             Geometry Dash. You can read more about Geode on <Link href="https://geode-sdk.org">its website</Link>!
         </Text>
 
@@ -91,8 +92,7 @@ const screenshots = (await Astro.glob('../images/screenshot-*.png')).map(file =>
                 </Button>
             </ButtonRow>
         </div>
-        </Text>
-    </main>
+    </Content>
 
     <Donate />
 

src/pages/install.astro

@@ -11,11 +11,11 @@ import Link from '../components/Link.astro';
 import Title from '../components/Title.astro';
 import InstructionBox from '../components/InstructionBox.astro';
 import ButtonRow from '../components/ButtonRow.astro';
+import Content from '../components/Content.astro';
 ---
 
 <Page title="Install Globed">
-    <main class="p-20 mt-32 gap-8 text-xl flex flex-col items-center">
-
+    <Content>
         <Title>Install Globed</Title>
 
         <Text>
@@ -44,7 +44,7 @@ import ButtonRow from '../components/ButtonRow.astro';
             <Image
                 src={searchForGlobed}
                 alt="Image showing a person searching for 'Globed' on the Geode in-game Downloads page."
-                class="max-w-paragraph rounded-xl"
+                class="sm:max-w-paragraph max-sm:w-full rounded-xl"
             ></Image>
         </InstructionBox>
 
@@ -55,7 +55,7 @@ import ButtonRow from '../components/ButtonRow.astro';
             <Image
                 src={getARoomYouTwo}
                 alt="Image showing a person searching for 'Globed' on the Geode in-game Downloads page."
-                class="max-w-paragraph rounded-xl"
+                class="sm:max-w-paragraph max-sm:w-full rounded-xl"
             ></Image>
         </InstructionBox>
 
@@ -74,8 +74,7 @@ import ButtonRow from '../components/ButtonRow.astro';
                 </Button>
             </ButtonRow>
         </InstructionBox>
-
-    </main>
+    </Content>
 
     <Donate />
 </Page>