fix: minor ux improvements

Author: coderdiaz

src/components/SwitchTheme.tsx

@@ -44,7 +44,7 @@ export default function SwitchTheme() {
   return (
     <button
       onClick={toggleTheme}
-      className="hidden md:block fixed top-0 mt-5 mr-5 right-0 p-2 rounded-full bg-muted-foreground/40 hover:bg-muted-foreground/60 text-headings transition-colors cursor-pointer"
+      className="hidden md:block fixed z-50 top-0 mt-5 mr-5 right-0 p-2 rounded-full bg-muted-foreground/40 hover:bg-muted-foreground/60 text-headings transition-colors cursor-pointer"
       aria-label={`Switch to ${theme === DARK_THEME ? 'light' : 'dark'} theme`}
     >
       {theme === DARK_THEME ? (

src/components/partials/Header.astro

@@ -8,7 +8,7 @@ const isWritingPage = pathname.startsWith('/writing');
 
 ---
 
-<header>
+<header class="relative z-10">
   <Container>
     <div class="flex justify-end">
       <nav class="flex items-center gap-4">

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

@@ -20,29 +20,31 @@ const { Content } = await render(entry);
 ---
 
 <BaseLayout seo={entry.data.seo}>
-  <Container>
-    <article class="flex flex-col gap-6">
-      <div class="flex flex-col gap-2 pt-6">
-        <a href="/writing" class="transition-all text-muted-foreground hover:text-foreground pb-4 text-sm">
-          Back to writing
-        </a>
-        <div class="flex flex-col gap-1.5">
-          <Avatar />
-          <span class="text-foreground">{DEFAULT_CONFIGURATION.author.name}</span>
+  <section class="-mt-12">
+    <Container>
+      <article class="flex flex-col gap-6">
+        <div class="flex flex-col gap-2 pt-6">
+          <a href="/writing" class="fixed z-20 transition-all text-muted-foreground hover:text-foreground pb-4 text-sm w-max">
+            Back to writing
+          </a>
+          <div class="flex flex-col gap-1.5 mt-12">
+            <Avatar />
+            <span class="text-foreground">{DEFAULT_CONFIGURATION.author.name}</span>
+          </div>
+          <h1 class="text-3xl font-semibold text-headings">{entry.data.title}</h1>
         </div>
-        <h1 class="text-3xl font-semibold text-headings">{entry.data.title}</h1>
-      </div>
-      <div class="relative aspect-video overflow-hidden rounded-lg">
-        <Image
-          src={entry.data.image}
-          alt={entry.data.title}
-          class="object-cover"
-        />
-      </div>
-      <div class="prose dark:prose-invert">
-        <Content />
-      </div>
-    </article>
-  </Container>
+        <div class="relative aspect-video overflow-hidden rounded-lg">
+          <Image
+            src={entry.data.image}
+            alt={entry.data.title}
+            class="object-cover"
+          />
+        </div>
+        <div class="prose dark:prose-invert">
+          <Content />
+        </div>
+      </article>
+    </Container>
+  </section>
 </BaseLayout>