style: replace header styles with tailwind

src/components/Header.astro

@@ -3,115 +3,64 @@ const base = import.meta.env.BASE_URL;
 ---
 
 <style>
-  .header {
+  .nav-links a {
-    display: flex;
+    @apply text-xl text-inherit;
-    flex-direction: column;
-    justify-content: start;
-    gap: 6px;
-  }
-
-  .contact-links {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    gap: 12px;
   }
 
   .contact-links a {
-    color: grey;
+    @apply text-gray-500 no-underline;
-  }
-
-  .undecorated-anchor a {
-    text-decoration: none;
-  }
-
-  .nav-links {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    gap: 12px;
-  }
-
-  .nav-links a {
-    font-size: var(--h6-desktop);
-    color: inherit;
-  }
-
-  .title-and-nav {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .title-and-nav hr {
-    margin-bottom: 0;
-  }
-
-  .title-and-gol {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    align-items: center;
-    height: 110px;
-  }
-
-  .title-and-gol a {
-    text-decoration: none;
-    color: inherit;
-  }
-
-  .main-title {
-    font-family: "Courier New", Courier, monospace;
-    font-size: var(--h1-desktop);
-    max-width: 250;
-    margin: 0;
-    padding: 0;
-    padding-bottom: 8px;
   }
 </style>
 
-<div class="header">
+<div class="flex flex-col justify-start gap-2">
-  <ul class="contact-links undecorated-anchor">
+  <ul class="flex flex-row items-center list-none p-0 m-0 gap-3 contact-links">
     <li><a href="#">Eposta</a></li>
     <li><a href="#">Github</a></li>
     <li><a href="#">LinkedIn</a></li>
     <li><a href="#">CV</a></li>
   </ul>
 
-  <div class="title-and-nav">
+  <div class="flex flex-col gap-2">
-    <div class="title-and-gol">
+    <div class="flex flex-row gap-4 items-center h-[110px]">
-      <a href={base}><h1 class="main-title">log101</h1></a>
+      <a href={base} class="no-underline text-inherit"
+        ><h1 class="font-mono text-[3.815rem] max-w-[250px] m-0 p-0 pb-2">
+          log101
+        </h1></a
+      >
       <div id="board" class="board"></div>
     </div>
     <div>
-      <ul class="nav-links undecorated-anchor">
+      <ul
+        class="flex flex-row items-center justify-between list-none p-0 m-0 gap-3 nav-links"
+      >
         {
           (
             <>
               <li>
-                <a href={`${base}/category/fikir`}>Fikir</a>
+                <a href={`${base}/category/fikir`} class="no-underline">
+                  Fikir
+                </a>
               </li>
               <li>
-                <a href={`${base}/category/teknik`}>Teknik</a>
+                <a href={`${base}/category/teknik`} class="no-underline">
+                  Teknik
+                </a>
               </li>
               <li>
-                <a href={`${base}/category/edebiyat`}>Babür'ün Serüvenleri</a>
+                <a href={`${base}/category/edebiyat`} class="no-underline">
+                  Babür'ün Serüvenleri
+                </a>
               </li>
               <li>
-                <a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a>
+                <a href={`${base}/category/ansiklopedi`} class="no-underline">
+                  Ansiklopedi
+                </a>
               </li>
             </>
           )
         }
       </ul>
-      <hr />
+      <hr class="mb-0" />
     </div>
   </div>
 </div>

src/pages/index.astro

@@ -2,7 +2,6 @@
 import Header from "@/components/Header.astro";
 import Footer from "@/components/Footer.astro";
 import Layout from "@/layouts/Layout.astro";
-import "@/styles/home.css";
 
 import { getCollection } from "astro:content";
 import Post from "@/components/Post.astro";
@@ -11,16 +10,16 @@ const allTeknikPosts = await getCollection("blog");
 ---
 
 <Layout title="log101">
-  <div class="container">
+  <div class="w-[750px] flex flex-col gap-8 my-6">
     <Header />
-    <div class="posts">
+    <div class="flex flex-col gap-10">
       {
         allTeknikPosts
           .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
           .map((p) => <Post post={p} componentType="short" />)
       }
     </div>
-    <a class="home-all-posts" href="#">Tüm Yayınlar</a>
+    <a class="text-inherit" href="#">Tüm Yayınlar</a>
     <Footer />
   </div>
 </Layout>

src/styles/home.css

@@ -1,18 +0,0 @@
-.container {
-  width: 750px;
-  display: flex;
-  flex-direction: column;
-  gap: 36px;
-  margin: 24px 0px;
-}
-
-.posts {
-  display: flex;
-  flex-direction: column;
-  gap: 48px;
-}
-
-.home-all-posts {
-  padding-top: 16px;
-  color: inherit;
-}

tailwind.config.mjs

@@ -10,6 +10,7 @@ export default {
         "Trebuchet MS",
         "sans-serif",
       ],
+      mono: ["Courier New", "Courier", "monospace"],
     },
     extend: {},
   },