shorten padding on smaller devices

components/HomeSection.tsx

@@ -5,7 +5,7 @@ const HomeSection: FC<{ children: ReactNode; className?: string }> = ({
   className,
 }) => (
   <section className={`w-full py-6 ${className ? className : ""}`}>
-    <div className="mx-auto flex max-w-8xl flex-col gap-8 px-8 lg:flex-row">
+    <div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 md:px-8 lg:flex-row">
       {children}
     </div>
   </section>

components/footer.tsx

@@ -10,7 +10,7 @@ import Link from "next/link";
 
 const Footer = () => (
   <footer className="bg-ctp-base text-ctp-text">
-    <div className="mx-auto flex max-w-8xl flex-col gap-8 px-8 py-6 md:flex-row">
+    <div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 py-6 md:flex-row md:px-8">
       <section className="basis-1/3">
         <h4 className="text-2xl font-bold">About</h4>
         <p>

components/navbar.tsx

@@ -35,7 +35,7 @@ const Navbar = () => {
           : ""
       } fixed top-0 left-0 z-20 w-full `}
     >
-      <div className="container mx-auto flex max-w-8xl flex-wrap items-center justify-between px-8">
+      <div className="container mx-auto flex max-w-8xl flex-wrap items-center justify-between px-4 md:px-8">
         <Link href="/">
           <a className="flex items-center gap-2 no-underline">
             <Image src="/svg/crystal-logo.svg" width={35} height={35} alt="" />

pages/docs/[[...slug]].tsx

@@ -141,7 +141,7 @@ const DocPage: NextPageWithLayout<{
   tree: TreeItem;
 }> = ({ source, tree }) => {
   return (
-    <div className="mx-auto min-h-screen max-w-8xl space-y-12 px-8 pt-24 lg:pt-28">
+    <div className="mx-auto min-h-screen max-w-8xl space-y-12 px-4 pt-24 md:px-8 lg:pt-28">
       <aside className="max-w-80 right-auto mb-8 flex flex-col break-normal align-top lg:fixed lg:mb-0">
         <TreeNode node={tree} path="/docs" />
       </aside>

pages/index.tsx

@@ -18,7 +18,7 @@ const Home: NextPageWithLayout = () => {
   return (
     <>
       <section>
-        <div className="flex flex-col items-center justify-center px-8 pt-36 pb-32 text-center lg:pt-44">
+        <div className="flex flex-col items-center justify-center px-4 pt-36 text-center md:px-8 md:pb-32 lg:pt-44">
           <h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight text-ctp-text md:text-5xl lg:text-6xl">
             An arch based distribution
           </h1>