Issue #9: More consistent margins, spacing across the site

Author: ALRubinger

src/components/Header.astro

@@ -9,7 +9,7 @@ const currentPath = Astro.url.pathname;
 ---
 
 <header class="sticky top-0 z-50 w-full bg-background/95 backdrop-blur-sm border-b supports-[backdrop-filter]:bg-background/60">
-  <div class="flex h-16 items-center gap-8 p-8">
+  <div class="flex h-16 items-center gap-8 py-8 px-16">
     <!-- Left Section: Logo + Navigation -->
     <div class="flex items-center gap-8 whitespace-nowrap">
       <MobileNav />

src/components/blockopensource/FooterBlockOS.astro

@@ -11,7 +11,7 @@ const currentYear = new Date().getFullYear();
 const copyrightText = footerBlockOSData.copyright || `© ${currentYear} ${footerBlockOSData.companyName}. All rights reserved.`;
 ---
 
-<footer class="bg-background border-t border-border mx-8 py-8">
+<footer class="bg-background border-t border-border mx-16 pt-8 pb-16">
   <div class="container mx-0 px-0">
     <div class="flex flex-col lg:flex-row lg:items-start gap-8 lg:gap-0 mb-12 md:mb-8">
       <!-- Block Logo and Name - Left Side -->
@@ -57,7 +57,7 @@ const copyrightText = footerBlockOSData.copyright || `© ${currentYear} ${footer
     </div>
 
     <!-- Footer Bottom -->
-    <div class="mt-8">
+    <div class="mt-16">
       <div class="flex justify-between items-center gap-4 md:flex-col md:text-center md:gap-6">
         <div class="text-sm text-muted-foreground">
           {copyrightText}

src/components/blog/BlogSection.astro

@@ -73,12 +73,12 @@ const getAuthorName = (authorId: string) => {
 ---
 
 <section class={`bg-grey-50 text-foreground ${sectionClasses}`}>
-  <div class="container min-w-0 py-8 px-6 mx-auto sm:px-25 sm:py-6">
+  <div class="container px-0 mx-0">
 
     <!-- Modern Layout Header -->
     {layout === 'modern' && (
-      <div class="flex flex-col mb-24 mx-auto md:mb-18">
-        <h1 class="mb-2">{title}</h1>
+      <div class="flex flex-col mb-24 mx-auto md:mb-18 pt-0 mt-0">
+        <h1 class="mb-2 mt-4">{title}</h1>
 
         {description && (
           <p class="text-lg leading-relaxed text-muted-foreground m-0 md:text-base">{description}</p>

src/layouts/ContentPageLayout.astro

@@ -39,7 +39,7 @@ const { title, description, headings, showTitleAsH1 = true, showBreadcrumbs = tr
 ---
 
 <BaseLayout title={title} description={description}>
-  <div class="relative mx-8 px-0 min-h-[calc(100vh-4rem)]">
+  <div class="relative mx-18 px-0 min-h-[calc(100vh-4rem)]">
 
     <div class={`
       relative min-h-[calc(100vh-64px)] max-w-[2400px]
@@ -63,12 +63,12 @@ const { title, description, headings, showTitleAsH1 = true, showBreadcrumbs = tr
         </nav>
       )}
 
-      <main class="container min-w-0 py-0 px-0">
+      <main class="container min-w-0 py-8 px-0">
         <div id="mainContent" class="prose prose-slate dark:prose-invert">
 
           {/** Breadcrumbs */}
           {showBreadcrumbs && (
-            <div class="mb-6 mt-2">
+            <div class="mb-8 mt-0">
               <Breadcrumbs 
                 indexText="Home"
                 mainBemClass="c-breadcrumbs"
@@ -94,7 +94,7 @@ const { title, description, headings, showTitleAsH1 = true, showBreadcrumbs = tr
 
       {headings && headings.length > 0 && (
         <aside class="relative bg-background/80 backdrop-blur-sm hidden xl:block">
-          <div class="sticky top-32 h-fit py-6 px-6">
+          <div class="sticky top-32 h-fit mb-16 py-6 px-6">
             <TableOfContents headings={headings} />
           </div>
         </aside>

src/pages/blog/[...slug].astro

@@ -7,7 +7,6 @@ import AuthorCard from '@/components/blog/AuthorCard.astro';
 import MDXComponents from '@/components/mdx/MDXComponents';
 import "@/styles/breadcrumbs.css";
 import { Image } from "astro:assets";
-import { getUrlRelativeToBase } from "@/lib/utils";
 
 /**
  * Magic required function for dynamic routes; deteremines the slug
@@ -61,7 +60,7 @@ if (!images[imagePath]) throw new Error(`"${imagePath}" does not exist`);
   maxWidth="wide"
 	showTitleAsH1={false}>
 
-	<div class="flex flex-col lg:flex-row mb-2 border rounded-md bg-muted overflow-hidden">
+	<div class="flex flex-col lg:flex-row mt-8 mb-8 border rounded-md bg-muted overflow-hidden">
 
 		<div class="flex-1 ml-6 lg:ml-6 ml-0 p-4 lg:p-6">
 			<h1 class="pb-0 mb-0 text-muted-background leading-tight">{title}</h1>
@@ -82,5 +81,7 @@ if (!images[imagePath]) throw new Error(`"${imagePath}" does not exist`);
 		</div>
 		)}
 	</div>
-  <Content components={MDXComponents} />
+  <div class="mb-16">
+	  <Content components={MDXComponents} />
+	</div>
 </ContentPageLayout>

src/pages/blog/index.astro

@@ -1,5 +1,5 @@
 ---
-import BaseLayout from "@/layouts/BaseLayout.astro";
+import ContentPageLayout from "@/layouts/ContentPageLayout.astro";
 import BlogSection from "@/components/blog/BlogSection.astro"
 import { getCollection } from "astro:content";
 
@@ -16,7 +16,9 @@ const postCategories = [...new Set(posts.flatMap(post => post.data.tags || []))]
 allCategories.push(...postCategories.map(cat => cat.charAt(0).toUpperCase() + cat.slice(1)));
 ---
 
-<BaseLayout title={title} description="Thoughts from the project team">
+<ContentPageLayout title={title}
+  showBreadcrumbs={false}
+  showTitleAsH1={false}>
 
   <BlogSection
     title={title}
@@ -31,4 +33,5 @@ allCategories.push(...postCategories.map(cat => cat.charAt(0).toUpperCase() + ca
     categories={allCategories}
     activeCategory="All"
   />
-</BaseLayout>
+
+</ContentPageLayout>