Rainnny/RESTfulMC
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Wiki Activity

Make the nav and landing page better on mobile
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m5s
Details

Browse Source
This commit is contained in:
Braydon 2024-04-17 17:50:05 -04:00
parent fa2a2dd8d8
commit 2f419c1754
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Frontend/src/app/components/landing/hero.tsx
View File

@ -14,7 +14,10 @@ const Hero = (): JSX.Element => (
<div className="flex flex-col gap-4 items-center text-center">
{/* Title */}
<h1
className={cn("text-6xl text-minecraft-green-3", minecrafter.className)}
className={cn(
"text-5xl sm:text-6xl text-minecraft-green-3",
minecrafter.className
)}
>
{config.siteName}
</h1>

8
Frontend/src/app/components/navbar.tsx
View File

@ -20,20 +20,20 @@ import { Suspense } from "react";
const Navbar = (): JSX.Element => {
const path: string = usePathname(); // Get the current path
return (
<nav className="fixed inset-x-0 flex h-16 px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
<nav className="fixed inset-x-0 flex h-16 sm:px-12 justify-center sm:justify-between items-center bg-navbar-background z-50">
{/* Left */}
<div className="flex gap-7 lg:gap-12 items-center transition-all transform-gpu">
<div className="flex gap-3 xs:gap-7 lg:gap-12 items-center transition-all transform-gpu">
{/* App Branding */}
<Link
className={cn(
"hidden sm:flex text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
"text-3xl text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu",
minecrafter.className
)}
href="/"
>
{/* Small Screens */}
<Image
className="hidden sm:flex lg:hidden"
className="lg:hidden"
src="/media/logo.webp"
alt="Site Logo"
width={42}