From 79fd506d30eef3d113f4a8e3ab9ebd9004f1e8cc Mon Sep 17 00:00:00 2001
From: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>
Date: Sat, 28 Jun 2025 18:14:22 -0300
Subject: feat: index page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>
---
 src/components/Header.astro | 69 +++++++++++++++++++++++++++++++--------------
 1 file changed, 48 insertions(+), 21 deletions(-)

(limited to 'src/components/Header.astro')

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 28ab542..496337f 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,26 +1,53 @@
 ---
-import HeaderLink from "./HeaderLink.astro";
-import Search from "./Search.astro";
-
-export interface Props {
-  showSearch?: boolean;
-  showNav?: boolean;
-}
-
-const { showSearch, showNav } = Astro.props;
+import ActiveLink from "./organisms/ActiveLink.astro";
+import Search from "./templates/Search.astro";
 ---
 
 <header>
-  <h1>&lt;<a href="/">cravodeabril.pt</a>&gt;</h1>
-  {showSearch && <Search />}
-  {
-    showNav && (
-      <nav>
-        <ul>
-          <li><HeaderLink href="/blog">Publicações</HeaderLink></li>
-          <li><HeaderLink href="/blog/keywords">Palavras-Chave</HeaderLink></li>
-        </ul>
-      </nav>
-    )
-  }
+  <h1>
+    <span class="bracket">&lt;</span><a href="/">cravodeabril.pt</a><span
+      class="bracket"
+    >&gt;</span>
+  </h1>
+  <Search />
+  <nav>
+    <ul>
+      <li class="small"><ActiveLink href="/blog">Publicações</ActiveLink></li>
+      <li class="small">
+        <ActiveLink href="/blog/keywords">Palavras-Chave</ActiveLink>
+      </li>
+      <li class="small">
+        <ActiveLink href="/blog/micro/1">Micro blogue</ActiveLink>
+      </li>
+    </ul>
+  </nav>
 </header>
+
+<style>
+  header {
+    margin-block-end: calc(var(--size-4) * 1em);
+    border-block-end: 1px solid var(--color-light);
+  }
+  .bracket {
+    color: var(--color-active);
+  }
+  nav {
+    display: flex;
+    max-width: max-content;
+    align-items: center;
+    justify-content: center;
+  }
+  ul {
+    display: flex;
+    flex: 1;
+    gap: calc(var(--size-0) * 1em);
+    list-style-type: none;
+    align-items: center;
+    justify-content: center;
+    padding: calc(var(--size-2) * 1em);
+    margin-block-start: 0;
+  }
+  li {
+    padding: calc(var(--size-1) * 1em);
+  }
+</style>
-- 
cgit v1.2.3