small design change

src/layouts/aboutSection.astro

@@ -6,7 +6,7 @@ export interface Props {
 const { title } = Astro.props
 ---
 
-<section>
+<section class="base">
   <h1>{title}</h1>
   <div>
     <slot />
@@ -32,6 +32,24 @@ const { title } = Astro.props
     color: white;
     font-size: 1em;
   }
+
+  .base {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  @media (min-width: 400px) {
+    .base {
+      margin-left: 3rem;
+      margin-right: 3rem;
+    }
+  }
+  @media (min-width: 1500px) {
+    .base {
+      margin-left: 10%;
+      margin-right: 10%;
+    }
+  }
   @media (min-width: 512px) {
     div {
       justify-content: left;

src/layouts/baseSection.astro

@@ -6,7 +6,7 @@ export interface Props {
 const { title } = Astro.props
 ---
 
-<div>
+<div class="base">
   <h1>{title}</h1>
   <div>
     <slot />
@@ -30,9 +30,12 @@ const { title } = Astro.props
     padding: 1em;
     position: relative;
   }
-  div > h1 {
+  div h1 {
     color: white;
-    margin: 0.5rem 0px 0.5rem 0.5em;
+    margin-top: 2rem;
+    margin-bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
@@ -43,4 +46,16 @@ const { title } = Astro.props
       column-gap: 1.5em;
     }
   }
+
+  .base {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+
+  @media (min-width: 1500px) {
+    .base {
+      margin-left: 10%;
+      margin-right: 10%;
+    }
+  }
 </style>

src/layouts/blogSection.astro

@@ -48,7 +48,10 @@ const { title } = Astro.props
   h1 {
     color: white;
     font-size: 2.25rem;
-    margin: 0.5rem 0px 0.5rem 0.5em;
+    margin-top: 1rem;
+    margin-bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);

src/layouts/contactSection.astro

@@ -6,7 +6,7 @@ export interface Props {
 const { title } = Astro.props
 ---
 
-<section>
+<section class="base">
   <h1>{title}</h1>
   <div>
     <slot />
@@ -35,4 +35,17 @@ const { title } = Astro.props
       justify-content: left;
     }
   }
+
+  @media (min-width: 400px) {
+    .base {
+      margin-left: 3rem;
+      margin-right: 3rem;
+    }
+  }
+  @media (min-width: 1500px) {
+    .base {
+      margin-left: 10%;
+      margin-right: 10%;
+    }
+  }
 </style>

src/layouts/customFooter.astro

@@ -23,6 +23,9 @@
       target="_blank"
       rel="noopener noreferrer">Atlas Academy</a
     > for providing the servant and ce images.
+    <div class="sticky-image-wrapper">
+      <img src="/assets/atlas.png" alt="" />
+    </div>
   </div>
   <br />
   <div>

src/layouts/taSection.astro

@@ -14,7 +14,7 @@ if (abovetext === undefined) {
 }
 ---
 
-<div>
+<div class="base">
   <h1>{title}</h1>
   <h2>{h2text}</h2>
   <div class="container ta-container">
@@ -34,7 +34,10 @@ if (abovetext === undefined) {
   }
   h1 {
     color: white;
-    margin: 0.5rem 0.5rem 0.5rem 0.75rem;
+    margin-top: 2rem;
+    margin-bottom: 0;
+    margin-left: auto;
+    margin-right: auto;
     padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
@@ -47,4 +50,16 @@ if (abovetext === undefined) {
     line-height: 20px;
     text-align: center;
   }
+
+  .base {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+
+  @media (min-width: 1500px) {
+    .base {
+      margin-left: 10%;
+      margin-right: 10%;
+    }
+  }
 </style>

src/pages/servants.astro

@@ -24,6 +24,7 @@ const description =
   <BaseSection title="CEs">
     {cedata.map((item) => <CeCard {...item} />)}
   </BaseSection>
+  <div class="placeholder"></div>
 </Layout>
 
 <style>