Use CenterLayout

Author: Adam Plesnik

docs/src/layouts/Page.tsx

@@ -3,16 +3,18 @@ import { ScrollRestoration } from 'react-router-dom'
 import PageBackground from '../components/PageBackground'
 import Footer from '../partials/Footer'
 import Nav from '../partials/Nav'
+import CenterLayout from './CenterLayout'
 
 function Page({ children }: PropsWithChildren<PageProps>) {
   return (
     <div className="flex flex-col items-center justify-center">
       <PageBackground />
       <Nav />
-      <div className="relative z-10 w-full max-w-screen-lg p-8 md:p-16 lg:p-20">
+      <CenterLayout className="pt-12">
         <div className="w-full">{children}</div>
         <Footer />
-      </div>
+      </CenterLayout>
+
       <ScrollRestoration />
     </div>
   )

docs/src/partials/Nav.tsx

@@ -1,11 +1,12 @@
-import { Github } from "lucide-react";
-import DarkModeSwitch from "../components/DarkModeSwitch.tsx";
-import HeaderNavAnchor from "../components/HeaderNavAnchor.tsx";
+import { Github } from 'lucide-react'
+import DarkModeSwitch from '../components/DarkModeSwitch.tsx'
+import HeaderNavAnchor from '../components/HeaderNavAnchor.tsx'
+import CenterLayout from '../layouts/CenterLayout.tsx'
 
 const Nav = () => {
   return (
     <div className="sticky top-0 z-20 flex w-full items-stretch justify-center border-b border-b-slate-200/50 bg-white/20 text-zinc-800 shadow-lg backdrop-blur-sm dark:border-b-slate-600/50 dark:bg-slate-800/60 dark:text-zinc-300">
-      <div className="flex w-full max-w-screen-lg items-stretch gap-2 px-8 py-2 md:px-16 lg:px-20">
+      <CenterLayout className="flex items-stretch gap-2 py-2 sm:py-3">
         <HeaderNavAnchor to="/">How To</HeaderNavAnchor>
         <HeaderNavAnchor to="/docs">Docs</HeaderNavAnchor>
         <HeaderNavAnchor to="/tech">Tech</HeaderNavAnchor>
@@ -18,9 +19,9 @@ const Nav = () => {
         >
           <Github className="group-hover:animate-bounce-bottom" />
         </a>
-      </div>
+      </CenterLayout>
     </div>
-  );
-};
+  )
+}
 
-export default Nav;
+export default Nav