Frontend: Improve mobile support
This commit is contained in:
parent
1570ade4c0
commit
531c18626a
@ -59,7 +59,7 @@ const MojangStatusPage = async (): Promise<ReactElement> => {
|
|||||||
const { servers }: MojangServerStatusResponse =
|
const { servers }: MojangServerStatusResponse =
|
||||||
await getMojangServerStatus(); // Get Mojang server statuses
|
await getMojangServerStatus(); // Get Mojang server statuses
|
||||||
return (
|
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 */}
|
{/* Header */}
|
||||||
<h1
|
<h1
|
||||||
className={cn(
|
className={cn(
|
||||||
|
@ -52,7 +52,7 @@ const PlayerPage = async ({ params }: PageProps): Promise<ReactElement> => {
|
|||||||
|
|
||||||
// Render the page
|
// Render the page
|
||||||
return (
|
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">
|
<div className="flex flex-col gap-7">
|
||||||
<h1
|
<h1
|
||||||
className={cn(
|
className={cn(
|
||||||
|
@ -67,7 +67,7 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
|
|||||||
|
|
||||||
// Render the page
|
// Render the page
|
||||||
return (
|
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">
|
<div className="flex flex-col gap-7">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex flex-col gap-7">
|
<div className="flex flex-col gap-7">
|
||||||
|
@ -40,8 +40,8 @@ const Footer = (): ReactElement => (
|
|||||||
<footer
|
<footer
|
||||||
className={cn(
|
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
|
`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
|
"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` // Top Border
|
`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">
|
<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">
|
||||||
|
Loading…
Reference in New Issue
Block a user