Added navigation

components/Header.tsx

@@ -1,14 +1,16 @@
 import { site } from "../data/site.ts";
+import Nav from "./Nav.tsx";
 
 export function Header() {
   return (
-    <header class="px-3 py-3 bg-[#84ea9a] h-16 flex items-center">
+    <header class="px-6 py-3 bg-[#84ea9a] h-16 flex items-center justify-between">
       <div class="px-4 max-w-screen-md">
         <a href="/" class="text-2xl font-bold hover:text-underline">
         <span class = 'text-[#ffdc17] font-outline-2'>JS</span>
           <span class = 'text-[#e04d6e] font-outline-2'>Less</span>
         </a>
       </div>
+      <Nav/>
     </header>
   );
 }

components/HomeHeader.tsx

@@ -1,17 +1,19 @@
 import { Container } from "./Container.tsx";
 import { site } from "../data/site.ts";
+import Nav from "./Nav.tsx";
 
 export function HomeHeader() {
   return (
     <header
       class="bg-[#84ea9a] relative min-h-[30vh]"
     >
-      <Container>
-        <h1 class="Header text-4xl lg:text-8xl font-bold absolute bottom-6 flex items-center">
+      <div class="px-4 mx-auto max-w-screen-md abc">
+        <h1 class="Header text-4xl lg:text-8xl font-bold flex items-center">
           <span class = 'text-[#ffdc17] font-outline'>JS</span>
           <span class = 'text-[#e04d6e] font-outline'>Less</span>
         </h1>
-      </Container>
+        <Nav/>
+      </div>
     </header>
   );
 }

components/Nav.tsx

@@ -0,0 +1,21 @@
+
+export default function (){
+    return (
+        <nav class="flex" >
+    <ul class="flex justify-center items-center gap-2 sm:gap-4 flex-wrap">
+        <li class="flex items-center">
+            <a href="https://github.com/JSLess" class="text-white hover:text-green-600 inline-block transition" aria-label="GitHub">
+        <svg class="h-6 w-6 " fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
+        </svg></a></li>
+        <li class="flex items-center">
+            <a href="https://discord.gg/wm8PDGHN2k" class="text-white hover:text-green-600 inline-block transition" aria-label="Discord">
+            <svg class="h-6 w-6 " fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M20.16 4.50747C18.5996 3.79309 16.9523 3.28628 15.2603 3C15.0287 3.41393 14.8192 3.8398 14.6326 4.27584C12.8302 4.00424 10.9973 4.00424 9.19488 4.27584C9.00819 3.83984 8.79868 3.41398 8.56723 3C6.87405 3.2887 5.22569 3.79671 3.66374 4.51121C0.56287 9.099 -0.277728 13.5729 0.142571 17.9832C1.95852 19.3249 3.99108 20.3453 6.15191 21C6.63846 20.3456 7.069 19.6514 7.43896 18.9247C6.73628 18.6622 6.05807 18.3384 5.41219 17.957C5.58217 17.8337 5.74842 17.7067 5.90907 17.5834C7.78846 18.4673 9.83971 18.9255 11.9165 18.9255C13.9934 18.9255 16.0446 18.4673 17.924 17.5834C18.0865 17.7161 18.2528 17.8431 18.4209 17.957C17.7738 18.339 17.0943 18.6635 16.3904 18.9265C16.7599 19.6529 17.1905 20.3466 17.6774 21C19.8401 20.3479 21.8742 19.328 23.6905 17.9851C24.1837 12.8705 22.848 8.43773 20.16 4.50747ZM7.97134 15.2709C6.80011 15.2709 5.83248 14.208 5.83248 12.9004C5.83248 11.5928 6.76648 10.5205 7.9676 10.5205C9.16872 10.5205 10.1289 11.5928 10.1083 12.9004C10.0878 14.208 9.16499 15.2709 7.97134 15.2709ZM15.8617 15.2709C14.6886 15.2709 13.7248 14.208 13.7248 12.9004C13.7248 11.5928 14.6588 10.5205 15.8617 10.5205C17.0647 10.5205 18.0174 11.5928 17.9969 12.9004C17.9763 14.208 17.0554 15.2709 15.8617 15.2709Z"></path>
+            </svg>
+            </a>
+        </li>
+    </ul>
+</nav>
+    )
+}

data/posts/CSS-Event-Listeners-Sparks.md

@@ -1,7 +1,7 @@
 ---
 title: CSS Event Listeners - Sparks
 published_at: 2024-02-20
-updated_at: 2024-02-20
+updated_at: 2024-02-21
 ---
 
 

static/styles.css

@@ -14,4 +14,14 @@
 .Header {
     inset-inline : 0 ;
     justify-content : center ;
+}
+
+.abc {
+  display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+    padding-bottom: 2rem;
+    gap: 1rem;
 }