chore: put css in scopes

src/components/Footer.astro

@@ -2,6 +2,20 @@
 
 ---
 
+<style>
+  .footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    color: gray;
+  }
+
+  .footer a {
+    color: inherit;
+  }
+</style>
+
 <div class="footer">
   <p class="copyright">© 2024 Furkan Erdem</p>
   <a class="about-me" href="#">Hakkımda</a>

src/components/Header.astro

@@ -2,6 +2,76 @@
 import { CATEGORIES } from "../content/config";
 ---
 
+<style>
+  .header {
+    display: flex;
+    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;
+  }
+
+  .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;
+  }
+
+  .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">
   <ul class="contact-links undecorated-anchor">
     <li><a href="#">Eposta</a></li>
@@ -20,7 +90,7 @@ import { CATEGORIES } from "../content/config";
         {
           Object.entries(CATEGORIES).map(([k, v]) => (
             <li>
-              <a href=`/category/${k}`>{v}</a>
+              <a href={`/category/${k}`}>{v}</a>
             </li>
           ))
         }

src/components/Post.astro

@@ -2,6 +2,39 @@
 const { data } = Astro.props;
 ---
 
+<style>
+  .post {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .post-category {
+    margin: 0;
+    padding: 0;
+    color: #2f4f4f;
+    letter-spacing: 0.03em;
+  }
+
+  .post-title {
+    font-size: var(--h4-desktop);
+    font-weight: normal;
+    margin: 0;
+    padding: 0;
+  }
+
+  .post-summary {
+    margin: 0;
+    padding: 0;
+  }
+
+  .post-date {
+    margin: 0;
+    padding: 0;
+    color: gray;
+  }
+</style>
+
 <div class="post">
   <p class="post-category">{data.category}</p>
   <h4 class="post-title">{data.title}</h4>

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/header.css";
 import "../styles/home.css";
 
 import { getCollection } from "astro:content";

src/styles/header.css

@@ -1,87 +0,0 @@
-.container {
-  width: 750px;
-  display: flex;
-  flex-direction: column;
-  gap: 36px;
-  margin: 24px 0px;
-}
-
-.header {
-  display: flex;
-  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;
-}
-
-.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;
-}
-
-.main-title {
-  font-family: "Courier New", Courier, monospace;
-  font-size: var(--h1-desktop);
-  max-width: 250;
-  margin: 0;
-  padding: 0;
-  padding-bottom: 8px;
-}
-
-.footer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  color: gray;
-}
-
-.footer a {
-  color: inherit;
-}

src/styles/home.css

@@ -1,40 +1,17 @@
+.container {
+  width: 750px;
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  margin: 24px 0px;
+}
+
 .posts {
   display: flex;
   flex-direction: column;
   gap: 48px;
 }
 
-.post {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.post-category {
-  margin: 0;
-  padding: 0;
-  color: #2f4f4f;
-  letter-spacing: 0.03em;
-}
-
-.post-title {
-  font-size: var(--h4-desktop);
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-}
-
-.post-summary {
-  margin: 0;
-  padding: 0;
-}
-
-.post-date {
-  margin: 0;
-  padding: 0;
-  color: gray;
-}
-
 .home-all-posts {
   padding-top: 16px;
   color: inherit;