style: move footer out of main section; put spacing rules on Layout

src/components/Footer.astro

@@ -57,8 +57,6 @@ const year = new Date().getFullYear()
 
 <style>
   footer {
-    padding: 0;
-
     display: grid;
     gap: 1em;
     grid-auto-flow: row;

src/layouts/Layout.astro

@@ -54,10 +54,11 @@ const { title, description, ogImage } = Astro.props
     </style>
 
     <style is:global>
-      main {
+      main,
+      footer {
         margin: auto;
         max-width: var(--content-width);
-        padding: 1em;
+        padding: 1em 1em 0;
       }
 
       h1 {
@@ -107,7 +108,10 @@ const { title, description, ogImage } = Astro.props
       }
     </style>
     <!-- Anonymous RUM for web perf by Cloudflare Web Analytics -->
-    <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "a39ad600e67a4db8960c639d2552435c"}'></script>
+    <script
+      defer
+      src="https://static.cloudflareinsights.com/beacon.min.js"
+      data-cf-beacon='{"token": "a39ad600e67a4db8960c639d2552435c"}'></script>
     <!-- End Cloudflare Web Analytics -->
   </body>
 </html>

src/pages/index.astro

@@ -60,8 +60,8 @@ import now from '../constants/now.json'
         />
       </ul>
     </section>
-    <Footer />
   </main>
+  <Footer />
 </Layout>
 
 <style>