Frontend: Improve mobile support

This commit is contained in:
Braydon 2024-04-26 20:53:25 -04:00
parent 1570ade4c0
commit 531c18626a
4 changed files with 5 additions and 5 deletions

@ -59,7 +59,7 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
const { servers }: MojangServerStatusResponse =
await getMojangServerStatus(); // Get Mojang server statuses
return (
<main className="h-screen flex flex-col gap-7 justify-center items-center">
<main className="mb-32 xl:mb-24 2xl:mb-12 h-screen flex flex-col gap-7 justify-center items-center transition-all transform-gpu">
{/* Header */}
<h1
className={cn(

@ -52,7 +52,7 @@ const PlayerPage = async ({ params }: PageProps): Promise<ReactElement> => {
// Render the page
return (
<main className="px-3 h-screen flex justify-center items-center">
<main className="mb-32 xl:mb-24 2xl:mb-12 px-3 h-screen flex justify-center items-center transition-all transform-gpu">
<div className="flex flex-col gap-7">
<h1
className={cn(

@ -67,7 +67,7 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
// Render the page
return (
<main className="px-3 h-screen flex flex-col gap-7 justify-center items-center">
<main className="mb-52 sm:mb-36 2xl:mb-12 px-3 h-screen flex flex-col gap-7 justify-center items-center transition-all transform-gpu">
<div className="flex flex-col gap-7">
{/* Header */}
<div className="flex flex-col gap-7">

@ -40,8 +40,8 @@ const Footer = (): ReactElement => (
<footer
className={cn(
`before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-[url("/media/dark-wool-background.png")] before:bg-center before:bg-repeat`, // Background
"relative inset-x-0 bottom-0 h-72 flex justify-center items-center", // Styling
`after:absolute after:top-0 after:left-0 after:-translate-y-20 after:w-full after:h-20 after:bg-[url("/media/dark-wool-transition.png")] after:bg-center after:bg-repeat` // Top Border
"relative inset-x-0 bottom-0 h-72 flex justify-center items-center -z-10", // Styling
`after:absolute after:top-0 after:left-0 after:-translate-y-20 after:w-full after:h-20 after:bg-[url("/media/dark-wool-transition.png")] after:bg-center after:bg-repeat after:-z-10` // Top Border
)}
>
<div className="xl:px-40 pb-14 md:pb-0 flex flex-col gap-7 md:flex-row md:gap-0 justify-around items-center z-50 w-full h-full transition-all transform-gpu">