Styling

src/components/Footer.astro

@@ -1,52 +1,72 @@
-<footer id="global-footer" role="contentinfo">
-    <div class="container readable">
-        <ul role="list" class="social flex gap">
-        <li>
-            <a
-            class="button"
-            itemprop="sameAs"
-            rel="me"
-            href="https://github.com/eventua11y/a11y.courses"
-            title="GitHub">
-            <i class="fab fa-github"></i>
-            </a>
-        </li>
-        <li>
-            <a
-            class="button"
-            itemprop="sameAs"
-            rel="me"
-            href="https://mastodon.social/@a11ycourses"
-            title="Mastodon">
-            <i class="fab fa-mastodon"></i>
-            </a>
-        </li>
-        </ul>
-        <p class="text-muted">
-        <small>&copy {new Date().getFullYear()}
-            <a href="https://mattobee.com/">Matt Obee</a>
-        </small>
-        </p>
-        <p class="text-muted">
-        <small>This page conforms to
-            <abbr title="Web Content Accessibility Guidelines">WCAG</abbr>
-            2.2 at Level
-            <abbr title="Double-A">AA</abbr>.</small>
-        </p>
-        <p class="text-muted">
-        <small>Powered by
-            <a href="https://astro.build/">Astro</a>,
-            <a href="https://www.sanity.io/">Sanity</a>,  
-            and
-            <a href="https://www.netlify.com/">Netlify</a>. Basic accessibility tests by
-            <a href="https://github.com/pa11y/pa11y">pa11y</a>/<a href="https://github.com/dequelabs/axe-core">axe-core</a>.</small>
-        </p>
-        <p class="text-muted">
-        <small>
-            Privacy-first analytics by
-            <a href="https://usefathom.com/ref/VZYIPT">Fathom</a>.
-        </small>
-        </p>
+<footer id="global-footer">
+  <div class="container flow flow-s">
+    <ul role="list" class="social flex gap">
+      <li>
+        <a
+          class="button"
+          itemprop="sameAs"
+          rel="me"
+          href="https://github.com/eventua11y/a11y.courses"
+          title="GitHub"
+        >
+          <i class="fab fa-github"></i>
+        </a>
+      </li>
+      <li>
+        <a
+          class="button"
+          itemprop="sameAs"
+          rel="me"
+          href="https://mastodon.social/@a11ycourses"
+          title="Mastodon"
+        >
+          <i class="fab fa-mastodon"></i>
+        </a>
+      </li>
+    </ul>
+    <div>
+        <div class="flow flow-3xs">
+            <p class="text-muted">
+                <small
+                >&copy {new Date().getFullYear()}
+                <a href="https://mattobee.com/">Matt Obee</a>
+                </small>
+            </p>
+            <p class="text-muted">
+                <small
+                >This page conforms to
+                <abbr title="Web Content Accessibility Guidelines">WCAG</abbr>
+                2.2 at Level
+                <abbr title="Double-A">AA</abbr>.</small
+                >
+            </p>
+            <p class="text-muted">
+                <small
+                >Powered by
+                <a href="https://astro.build/">Astro</a>,
+                <a href="https://www.sanity.io/">Sanity</a>, and
+                <a href="https://www.netlify.com/">Netlify</a>. Basic accessibility
+                tests by
+                <a href="https://github.com/pa11y/pa11y">pa11y</a>/<a
+                    href="https://github.com/dequelabs/axe-core">axe-core</a
+                >.</small
+                >
+            </p>
+            <p class="text-muted">
+                <small>
+                Privacy-first analytics by
+                <a href="https://usefathom.com/ref/VZYIPT">Fathom</a>.
+                </small>
+            </p>
+        </div>
     </div>
+  </div>
 </footer>
-<!-- End #global-footer -->
+<!-- End #global-footer -->
+
+<style>
+  #global-footer {
+    line-height: 1;
+    margin-top: var(--space-xl);
+  }
+</style>

src/components/Header.astro

@@ -11,9 +11,12 @@ import logo from '../images/ac_logo.svg';
 <!-- End #global-header -->
 
 <style>
+    header {
+        padding: var(--space-s);
+    }
     .logo {
         height: auto;
-        max-width: 100%;
+        max-width: 50%;
         width: 20rem;
     }
 </style>

src/pages/index.astro

@@ -10,7 +10,7 @@ const courses = await getCourses();
 console.log(courses);
 ---
 <BaseLayout>
-  <main>
+  <main class="container">
     <h1 class="sr-only">Accessibility Courses</h1>
     {/* Checking if courses is an array and if it has any elements */}
     {Array.isArray(courses) && courses.length > 0 ? (

src/styles/utils.css

@@ -32,4 +32,9 @@
   }
   .d-b {
     display: block;
+  }
+
+  .container {
+    width: min(100% - 3rem, var(--container-max, 60ch));
+    margin-inline: auto;
   }