Adjust padding in DocsLayout and blog layout for improved spacing

Author: fabian-hiller

website/src/components/DocsLayout.tsx

@@ -98,15 +98,15 @@ export const DocsLayout = component$(() => {
         </div>
         <Navigation
           class={clsx(
-            'px-8 py-9 lg:w-60 lg:py-32',
+            'px-8 py-9 lg:w-60 lg:py-24 xl:py-32',
             showChapters.value ? '2xl:w-64' : '2xl:w-72'
           )}
         />
       </SideBar>
 
       <main
         class={clsx(
-          'relative flex-1 py-12 md:py-20 lg:w-px lg:py-32',
+          'relative flex-1 py-12 md:py-14 lg:w-px lg:py-24 xl:py-32',
           showChapters.value ? 'lg:px-9' : 'lg:pl-9'
         )}
       >

website/src/routes/blog/(posts)/layout.tsx

@@ -9,7 +9,7 @@ export default component$(() => {
   const location = useLocation();
 
   return (
-    <main class="flex flex-1 flex-col items-center py-12 md:py-20 lg:py-32">
+    <main class="flex flex-1 flex-col items-center py-12 md:py-20 lg:py-28 xl:py-32">
       {/* Article */}
       <article class="max-w-(--breakpoint-xl) flex w-full flex-col gap-12 md:gap-20 lg:gap-24">
         <div class="max-w-(--breakpoint-md) mx-8 flex flex-col gap-5 md:items-center md:gap-7 md:self-center lg:mx-10 lg:gap-9">

website/src/routes/blog/index.tsx

@@ -50,7 +50,7 @@ export const usePosts = routeLoader$(async () =>
 export default component$(() => {
   const posts = usePosts();
   return (
-    <main class="max-w-(--breakpoint-lg) flex w-full flex-1 flex-col self-center py-12 md:py-20 lg:py-32">
+    <main class="max-w-(--breakpoint-lg) flex w-full flex-1 flex-col self-center py-12 md:py-14 lg:py-24 xl:py-32">
       <div class="mdx">
         <h1>Blog</h1>
         <p>