fix: layout template

zuplo · Dec 8, 2023 · d1d778b · d1d778b
1 parent 4e14433
commit d1d778b
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 42 deletions.
diff --git a/src/app/policies/page.tsx b/src/app/policies/page.tsx
@@ -14,7 +14,7 @@ export default async function Page() {
   const policies = await getAllPolicies();
 
   return (
-    <DocsContainer className="w-full px-8">
+    <DocsContainer className="w-full flex-col px-8 pb-[60px]">
       <Prose>
         <DocsHeader title="Policies" />
         <p>
@@ -39,12 +39,14 @@ export default async function Page() {
           so developers can simply write code to customize any aspect of Zuplo.
         </p>
       </Prose>
-      <Link
-        href="/articles/policies"
-        className="not-prose btn btn-large btn-secondary-light mt-6 inline-block no-underline"
-      >
-        Check out details
-      </Link>
+      <div>
+        <Link
+          href="/articles/policies"
+          className="btn btn-large btn-secondary-light mt-6 inline-block no-underline"
+        >
+          Check out details
+        </Link>
+      </div>
 
       <div
         role="list"

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -33,31 +33,33 @@ function Header() {
         "!dark:bg-black": scrollY > 10,
       })}
     >
-      <div className="mx-auto flex min-h-[52px] w-full max-w-[1180px] items-center justify-between px-4 py-2 lg:box-content lg:px-0 lg:py-5">
-        <div className="flex p-3 lg:hidden">
-          <MobileNavigation />
-        </div>
-        <div className="relative flex basis-0 items-center">
-          <Logo className="block w-28 lg:w-36" />
-        </div>
-        <div className="flex flex-grow justify-end lg:justify-center">
-          <div className="">
-            <Search />
+      <div className="relative w-full px-5">
+        <div className="mx-auto flex min-h-[52px] w-full max-w-[1180px] items-center justify-between py-2 lg:box-content lg:px-0 lg:py-5">
+          <div className="flex p-3 lg:hidden">
+            <MobileNavigation />
           </div>
-        </div>
-        <div className="hidden justify-end lg:flex">
-          <ThemeSelector className="relative z-10 my-auto mr-8" />
-          <StartFreeCTAButton />
-        </div>
-        {/* <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
-          <Search />
-        </div>
-        <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
-          <ThemeSelector className="relative z-10" />
-          <div className="hidden lg:flex">
+          <div className="relative flex basis-0 items-center">
+            <Logo className="block w-28 lg:w-36" />
+          </div>
+          <div className="flex flex-grow justify-end lg:justify-center">
+            <div className="">
+              <Search />
+            </div>
+          </div>
+          <div className="hidden justify-end lg:flex">
+            <ThemeSelector className="relative z-10 my-auto mr-8" />
             <StartFreeCTAButton />
           </div>
-        </div> */}
+          {/* <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
+            <Search />
+          </div>
+          <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
+            <ThemeSelector className="relative z-10" />
+            <div className="hidden lg:flex">
+              <StartFreeCTAButton />
+            </div>
+          </div> */}
+        </div>
       </div>
     </header>
   );
@@ -67,18 +69,20 @@ export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex w-full flex-col bg-white dark:bg-black">
       <Header />
-      <div className="relative mx-auto w-full max-w-8xl rounded-xl bg-gray-400 dark:bg-white lg:mt-[92px]">
-        <Container className="flex h-[calc(100vh-7rem)] flex-auto justify-center">
-          <aside className="hidden lg:relative lg:block lg:flex-none">
-            {/* <div className="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
-            <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
-            <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" /> */}
-            <div className="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-7rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 xl:w-72 xl:pr-8">
-              <Navigation />
-            </div>
-          </aside>
-          {children}
-        </Container>
+      <div className="relative w-full px-5">
+        <div className="relative mx-auto w-full max-w-8xl rounded-xl bg-gray-400 dark:bg-white lg:mt-[92px]">
+          <Container className="flex h-[calc(100vh-7rem)] flex-auto justify-center">
+            <aside className="hidden border-r border-gray-500 lg:relative lg:block lg:flex-none">
+              {/* <div className="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
+              <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
+              <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" /> */}
+              <div className="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-7rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 xl:w-72 xl:pr-8">
+                <Navigation />
+              </div>
+            </aside>
+            {children}
+          </Container>
+        </div>
       </div>
     </div>
   );

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -81,7 +81,7 @@
     @apply rounded-xl px-12 py-5 text-base;
   }
   .btn.btn-secondary-light {
-    @apply border border-gray-500 bg-transparent text-black hover:bg-[#d9d9d9];
+    @apply border border-gray-500 bg-transparent text-white hover:bg-[#d9d9d9] dark:text-black;
   }
   .btn.btn-secondary-dark {
     @apply border border-gray-600 bg-transparent text-white hover:bg-[#ffffff59];