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

Make the nav and hero more mobile responsive
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 1m1s
Details

Browse Source
This commit is contained in:
Braydon 2024-04-21 12:33:30 -04:00
parent e7bdfe1f65
commit e8000a1fbc
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Frontend/src/app/components/github-star-button.tsx
View File

@ -45,7 +45,7 @@ const GitHubStarButton = (): ReactElement => {
rel="noopener noreferrer"
target="_blank"
>
<MinecraftButton className="flex gap-1.5 items-center group/star">
<MinecraftButton className="px-3 xs:px-5 flex gap-1.5 items-center group/star">
{/* Star Count */}
<Suspense
fallback={<Skeleton className="w-4 h-5 rounded-md" />}

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

@ -29,9 +29,9 @@ const Hero = (): ReactElement => (
</div>
{/* Links */}
<div className="flex gap-5 xs:gap-10">
<div className="flex gap-3.5 xs:gap-5 sm:gap-10">
<Link href="/docs">
<MinecraftButton className="w-44 h-12">
<MinecraftButton className="w-36 xs:w-44 h-12">
Get Started
</MinecraftButton>
</Link>

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

@ -17,8 +17,8 @@ import { ReactElement } from "react";
const Navbar = (): ReactElement => {
const path: string = usePathname(); // Get the current path
return (
<nav className="fixed inset-x-0 flex h-16 px-2.5 xs:px-5 sm:px-12 bg-navbar-background transition-all transform-gpu z-50">
<div className="relative w-full flex justify-between items-center">
<nav className="fixed inset-x-0 flex h-16 px-3 xs:px-5 sm:px-12 bg-navbar-background transition-all transform-gpu z-50">
<div className="w-full flex justify-between items-center">
{/* App Branding - Left */}
<Link
className={cn(
@ -41,7 +41,7 @@ const Navbar = (): ReactElement => {
</Link>
{/* Center - Links */}
<div className="absolute inset-x-0 md:left-20 lg:left-0 flex justify-center md:justify-start lg:justify-center">
<div className="ml-auto absolute right-3 xs:inset-x-0 md:left-28 lg:left-0 flex justify-center md:justify-start lg:justify-center">
<div className="flex gap-7">
{Object.entries(config.navbarLinks).map(
(link: [string, string], index: number) => {