From ccd909c71e5e3a32a1dbc4ba00c90e5c181147d5 Mon Sep 17 00:00:00 2001 From: HJfod <60038575+HJfod@users.noreply.github.com> Date: Mon, 4 Mar 2024 16:17:42 +0200 Subject: [PATCH] mobile fixes --- src/components/Box.astro | 2 +- src/components/Button.astro | 2 +- src/components/Content.astro | 10 ++++++++++ src/components/Footer.astro | 2 +- src/components/Link.astro | 2 +- src/components/Title.astro | 1 + src/layouts/Default.astro | 2 +- src/pages/404.astro | 5 +++-- src/pages/about.astro | 6 +++--- src/pages/index.astro | 8 ++++---- src/pages/install.astro | 11 +++++------ 11 files changed, 31 insertions(+), 20 deletions(-) create mode 100644 src/components/Content.astro diff --git a/src/components/Box.astro b/src/components/Box.astro index 3dbde67..57cdd29 100644 --- a/src/components/Box.astro +++ b/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> diff --git a/src/components/Button.astro b/src/components/Button.astro index 463989a..47dbd51 100644 --- a/src/components/Button.astro +++ b/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}> diff --git a/src/components/Content.astro b/src/components/Content.astro new file mode 100644 index 0000000..013f15d --- /dev/null +++ b/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> diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 53647bd..24ba711 100644 --- a/src/components/Footer.astro +++ b/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> diff --git a/src/components/Link.astro b/src/components/Link.astro index 20c5ac7..f815593 100644 --- a/src/components/Link.astro +++ b/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 { diff --git a/src/components/Title.astro b/src/components/Title.astro index 30a27fa..6f27829 100644 --- a/src/components/Title.astro +++ b/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 diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro index 3bddaa8..532d293 100644 --- a/src/layouts/Default.astro +++ b/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"> diff --git a/src/pages/404.astro b/src/pages/404.astro index c828a7b..191f987 100644 --- a/src/pages/404.astro +++ b/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> diff --git a/src/pages/about.astro b/src/pages/about.astro index 0347502..1dfa7ee 100644 --- a/src/pages/about.astro +++ b/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> diff --git a/src/pages/index.astro b/src/pages/index.astro index e44a2a1..8981732 100644 --- a/src/pages/index.astro +++ b/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 /> diff --git a/src/pages/install.astro b/src/pages/install.astro index 17809ae..9db51ec 100644 --- a/src/pages/install.astro +++ b/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>