fix: improved header behaviour

Author: coderdiaz

src/components/partials/Header.astro

@@ -8,23 +8,23 @@ const isWritingPage = pathname.startsWith('/writing');
 
 ---
 
-<header class="relative z-10">
-  <Container>
-    <div class="flex justify-end">
-      <nav class="flex items-center gap-4">
-        <ul class="flex items-center gap-6">
+<header class="w-full">
+  <Container class="max-w-full flex justify-center items-center">
+    <div class="w-max fixed top-0 mt-5 bg-muted-foreground/40 backdrop-blur-md border border-border rounded-full p-1">
+      <nav class="flex items-center">
+        <ul class="flex items-center gap-1">
           <li>
             <a href="/" class:list={[
-              'font-medium transition-colors',
+              'font-medium transition-colors block px-5 py-2',
               'hover:text-headings',
-              isHomePage && 'text-headings',
+              isHomePage && 'text-headings bg-muted-foreground/40 rounded-full',
             ]}>Home</a>
           </li>
           <li>
             <a href="/writing" class:list={[
-              'font-medium transition-colors',
+              'font-medium transition-colors block px-5 py-2',
               'hover:text-headings',
-              isWritingPage && 'text-headings',
+              isWritingPage && 'text-headings bg-muted-foreground/40 rounded-full',
             ]}>Writing</a>
           </li>
         </ul>

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

@@ -20,14 +20,14 @@ const { Content } = await render(entry);
 ---
 
 <BaseLayout seo={entry.data.seo}>
-  <section class="-mt-12">
+  <section>
     <Container>
       <article class="flex flex-col gap-6">
-        <div class="flex flex-col gap-2 pt-7">
-          <a href="/writing" class="absolute z-20 transition-all text-muted-foreground hover:text-foreground pb-4 text-sm w-max">
+        <div class="flex flex-col gap-2">
+          <a href="/writing" class="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">
+          <div class="flex flex-col gap-1.5">
             <Avatar />
             <span class="text-foreground">{DEFAULT_CONFIGURATION.author.name}</span>
           </div>