Center everything

adamplesnik · Jan 16, 2025 · 4c2d38f · 4c2d38f
1 parent 53a837f
commit 4c2d38f
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/src/components/WorkTile.tsx b/src/components/WorkTile.tsx
@@ -19,7 +19,10 @@ const WorkTile = ({
 
   return (
     <div
-      className={clsx('relative flex w-full flex-col gap-8 px-6 pb-12 sm:px-8 md:px-12', className)}
+      className={clsx(
+        'relative mx-auto flex w-full max-w-screen-2xl flex-col gap-8 px-6 pb-12 sm:px-8 md:px-12',
+        className
+      )}
     >
       <span id={id} className="absolute -top-12 block" />
       {top && (

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -5,20 +5,24 @@ import { catchDetail, catchPhrase, freeTime, tech } from '@/content/phrases'
 const About = () => {
   return (
     <>
-      <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
-        {catchPhrase}
-      </Paragraph>
-      <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
-        {catchDetail}
-      </Paragraph>
-      <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
-        {tech}
-      </Paragraph>
-      <Paragraph big className="mb-24 px-6 sm:px-8 md:px-12">
-        {freeTime}
-      </Paragraph>
-      <div className="-mb-24 flex flex-col gap-2 rounded-lg bg-cv-light p-6 sm:p-8 md:p-12 dark:bg-cv-dark">
-        <CvTimeline />
+      <div className="mx-auto w-full max-w-screen-2xl">
+        <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
+          {catchPhrase}
+        </Paragraph>
+        <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
+          {catchDetail}
+        </Paragraph>
+        <Paragraph big className="mb-12 px-6 sm:px-8 md:px-12">
+          {tech}
+        </Paragraph>
+        <Paragraph big className="mb-24 px-6 sm:px-8 md:px-12">
+          {freeTime}
+        </Paragraph>
+      </div>
+      <div className="-mb-24 flex flex-col gap-2 bg-cv-light pb-12 dark:bg-cv-dark">
+        <div className="mx-auto w-full max-w-screen-2xl p-6 sm:p-8 md:p-12">
+          <CvTimeline />
+        </div>
       </div>
     </>
   )

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -7,7 +7,7 @@ import vkjbPreview from '@/content/vkjb/images/vkjb-home.jpg'
 
 const Home = () => {
   return (
-    <>
+    <div className="mx-auto w-full max-w-screen-2xl">
       <Intro />
       <div className="flex flex-col gap-12 p-6 sm:px-8 md:px-12">
         <WorkPreviewTile
@@ -24,7 +24,7 @@ const Home = () => {
           titleRight
         />
       </div>
-    </>
+    </div>
   )
 }
 

diff --git a/src/partials/Layout.tsx b/src/partials/Layout.tsx
@@ -48,7 +48,7 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
           </div>
         </div>
       </div>
-      <div className="mx-auto w-full max-w-screen-2xl">{outlet ? outlet : <Outlet />}</div>
+      {outlet ? outlet : <Outlet />}
       <Footer />
     </div>
   )
-Original file line number
+Diff line change
@@ Expand Up @@
               </div>
             </div>
           </div>
-          <div className="mx-auto w-full max-w-screen-2xl">{outlet ? outlet : <Outlet />}</div>
+          {outlet ? outlet : <Outlet />}
           <Footer />
         </div>
       )
@@ Expand Down @@