From dc70df15f286bf2ac25fe7b831950577765907ce Mon Sep 17 00:00:00 2001
From: Mikkel Svartveit <mikkel.svartveit@gmail.com>
Date: Wed, 13 Dec 2023 16:30:41 -0800
Subject: [PATCH] Minor styling and accessibility changes

---
 src/components/Navbar.svelte |  6 ++++++
 src/layouts/BaseLayout.astro |  6 +-----
 src/layouts/RootLayout.astro |  4 ++++
 src/pages/index.astro        | 38 ++++++++++++++++++------------------
 4 files changed, 30 insertions(+), 24 deletions(-)
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index b8b9167..649ea67 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -77,9 +77,15 @@
 
 {#if !collapsed}
   <div
+    role="presentation"
     transition:fade={{ duration: 100 }}
     class="fixed left-0 top-0 z-20 h-full w-full bg-black opacity-50"
+    on:click={() => (collapsed = true)}
+    on:keydown={(event) => {
+      if (event.key === "Escape") collapsed = true;
+    }}
   />
+
   <ul
     transition:slide={{ duration: 300, axis: "x" }}
     class="fixed right-0 top-0 z-30 block h-full bg-white p-4"
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index bb10ca1..3d0a612 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -17,11 +17,7 @@ const { title, description, noStickyNavbar } = Astro.props;
     sticky={!noStickyNavbar}
     currentPath={Astro.url.pathname}
   />
-  <main>
+  <main class="pb-6">
     <slot />
   </main>
-
-  <style>
-    @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Source+Code+Pro&family=Source+Serif+Pro:wght@300;400;600&display=swap");
-  </style>
 </RootLayout>
diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro
index 94697cf..ac0dc93 100644
--- a/src/layouts/RootLayout.astro
+++ b/src/layouts/RootLayout.astro
@@ -27,6 +27,10 @@ const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
     />
     <meta name="theme-color" content={themeColor ?? "#facc15"} />
     <ViewTransitions fallback="none" />
+
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Source+Code+Pro&family=Source+Serif+Pro:wght@300;400;600&display=swap");
+    </style>
   </head>
 
   <body class={`bg-gray-50 ${hideScrollbar ? "" : "overflow-y-scroll"}`}>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7498028..736465e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -18,7 +18,7 @@ const latestArticleImage = latestArticle.data.image;
 
 <BaseLayout>
   <div
-    class="mx-auto flex max-w-5xl flex-col-reverse items-stretch px-3 pb-6 pt-8 sm:px-6 md:flex-row"
+    class="mx-auto flex max-w-5xl flex-col-reverse items-stretch px-4 pb-6 pt-8 sm:px-6 md:flex-row"
   >
     <section class="mb-10 mt-4 w-full md:w-3/5">
       <h1
@@ -67,7 +67,7 @@ const latestArticleImage = latestArticle.data.image;
   <h2 class="mb-3 text-center text-lg text-gray-500">Latest article</h2>
   <a
     href={`/articles/${latestArticleSlug}`}
-    class="mx-auto block max-w-lg px-3 text-gray-600 sm:px-6"
+    class="mx-auto block max-w-lg px-4 text-gray-600 sm:px-6"
   >
     <div
       class="flex items-center overflow-hidden rounded-lg bg-white underline-offset-4 shadow transition hover:underline hover:shadow-md"
@@ -78,21 +78,21 @@ const latestArticleImage = latestArticle.data.image;
       </h3>
     </div>
   </a>
-
-  <footer class="mb-8 mt-20 flex w-full justify-center">
-    <p class="text-xs text-gray-500">
-      Built with
-      <a
-        class="underline underline-offset-1 hover:text-gray-400"
-        href="https://astro.build/"
-        target="_blank">Astro</a
-      >
-       and
-      <a
-        class="underline underline-offset-1 hover:text-gray-400"
-        href="https://tailwindcss.com/"
-        target="_blank">Tailwind CSS</a
-      >.
-    </p>
-  </footer>
 </BaseLayout>
+
+<footer class="mb-8 mt-20 flex w-full justify-center">
+  <p class="text-xs text-gray-500">
+    Built with
+    <a
+      class="underline underline-offset-1 hover:text-gray-400"
+      href="https://astro.build/"
+      target="_blank">Astro</a
+    >
+     and
+    <a
+      class="underline underline-offset-1 hover:text-gray-400"
+      href="https://tailwindcss.com/"
+      target="_blank">Tailwind CSS</a
+    >.
+  </p>
+</footer>
