style: replace styles with tailwind classes

src/components/Card.astro

@@ -1,61 +0,0 @@
----
-interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
-</style>

src/components/Footer.astro

@@ -2,22 +2,7 @@
 
 ---
 
-<style>
+<div class="flex flex-row items-center gap-2 text-gray-500 text-sm">
-  .footer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
-    color: gray;
-    font-size: var(--small-desktop);
-  }
-
-  .footer a {
-    color: inherit;
-  }
-</style>
-
-<div class="footer">
   <p class="copyright">© 2024 Furkan Erdem</p>
-  <a class="about-me" href="#">Hakkımda</a>
+  <a class="text-inherit" href="#">Hakkımda</a>
 </div>

src/components/Header.astro

@@ -7,13 +7,17 @@ const base = import.meta.env.BASE_URL;
     @apply text-xl text-inherit;
   }
 
-  .contact-links a {
+  .contact-links li a {
     @apply text-gray-500 no-underline;
   }
+
+  .nav-links a {
+    @apply no-underline;
+  }
 </style>
 
 <div class="flex flex-col justify-start gap-2">
-  <ul class="flex flex-row items-center list-none p-0 m-0 gap-3 contact-links">
+  <ul class="flex flex-row items-center list-none p-0 gap-3 contact-links">
     <li><a href="#">Eposta</a></li>
     <li><a href="#">Github</a></li>
     <li><a href="#">LinkedIn</a></li>
@@ -23,42 +27,26 @@ const base = import.meta.env.BASE_URL;
   <div class="flex flex-col gap-2">
     <div class="flex flex-row gap-4 items-center h-[110px]">
       <a href={base} class="no-underline text-inherit"
-        ><h1 class="font-mono text-[3.815rem] max-w-[250px] m-0 p-0 pb-2">
+        ><h1 class="font-mono text-[3.815rem] pb-2">log101</h1></a
-          log101
-        </h1></a
       >
       <div id="board" class="board"></div>
     </div>
     <div>
       <ul
-        class="flex flex-row items-center justify-between list-none p-0 m-0 gap-3 nav-links"
+        class="flex flex-row items-center justify-between list-none p-0 gap-3 nav-links"
       >
-        {
-          (
-            <>
         <li>
-                <a href={`${base}/category/fikir`} class="no-underline">
+          <a href={`${base}/category/fikir`}>Fikir</a>
-                  Fikir
-                </a>
         </li>
         <li>
-                <a href={`${base}/category/teknik`} class="no-underline">
+          <a href={`${base}/category/teknik`}>Teknik</a>
-                  Teknik
-                </a>
         </li>
         <li>
-                <a href={`${base}/category/edebiyat`} class="no-underline">
+          <a href={`${base}/category/edebiyat`}>Babür'ün Serüvenleri</a>
-                  Babür'ün Serüvenleri
-                </a>
         </li>
         <li>
-                <a href={`${base}/category/ansiklopedi`} class="no-underline">
+          <a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a>
-                  Ansiklopedi
-                </a>
         </li>
-            </>
-          )
-        }
       </ul>
       <hr class="mb-0" />
     </div>

src/components/Post.astro

@@ -41,64 +41,6 @@ const { Content } = await post.render();
 ---
 
 <style>
-  p {
-    margin: 0;
-    padding: 0;
-  }
-  .post {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .post-header {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .post-category {
-    color: #2f4f4f;
-    letter-spacing: 0.03em;
-  }
-
-  .post-title {
-    font-size: var(--h4-desktop);
-    font-weight: normal;
-    margin: 0;
-    padding: 0;
-  }
-
-  .post-date {
-    color: gray;
-    font-size: var(--small-desktop);
-  }
-
-  .meta {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
-
-  .meta-container {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .meta-text {
-    font-size: var(--small-desktop);
-    color: #6d6d6d;
-    padding: 0;
-  }
-
-  .meta-list {
-    list-style-type: none;
-    padding-left: 0;
-    margin: 0;
-    display: flex;
-  }
-
   .meta-list li {
     padding-top: 0.1rem;
     &:not(:last-child) {
@@ -107,33 +49,18 @@ const { Content } = await post.render();
       }
     }
   }
-
-  .read-more {
-    color: inherit;
-    font-size: var(--small-desktop);
-  }
-
-  .post-footer {
-    color: #424242;
-    font-size: var(--small-desktop);
-  }
-
-  .post-title-anchor {
-    text-decoration: none;
-    color: inherit;
-  }
 </style>
 
-<div class="post">
+<div class="flex flex-col gap-3">
-  <div class="post-header">
+  <div class="flex flex-col">
-    <p class="post-category">{post.data.subcategory}</p>
+    <p class="tracking-wide text-slate-700">{post.data.subcategory}</p>
-    <a class="post-title-anchor" href={postLink}
+    <a class="no-underline text-inherit" href={postLink}
-      ><h4 class="post-title">{post.data.title}</h4></a
+      ><h4 class="text-3xl font-normal">{post.data.title}</h4></a
     >
-    <div class="meta">
+    <div class="flex flex-row gap-2">
       {
         showTags && (
-          <div class="meta-container">
+          <div class="flex items-center gap-1">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="18"
@@ -143,16 +70,16 @@ const { Content } = await post.render();
             >
               <path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" />
             </svg>
-            <ul class="meta-list">
+            <ul class="list-none flex pl-0 meta-list">
               {post.data.tags.map((tag) => (
-                <li class="meta-text">{tag}</li>
+                <li class="text-sm text-gray-500">{tag}</li>
               ))}
             </ul>
           </div>
         )
       }
 
-      <div class="meta-container">
+      <div class="flex items-center gap-1">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="18"
@@ -163,8 +90,8 @@ const { Content } = await post.render();
             d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z"
           ></path></svg
         >
-        <ul class="meta-list">
+        <ul class="list-none flex pl-0 meta-list">
-          <p class="meta-text">{postDateFormatted}</p>
+          <p class="text-sm text-gray-500">{postDateFormatted}</p>
         </ul>
       </div>
     </div>
@@ -179,7 +106,7 @@ const { Content } = await post.render();
         </p>
         {post.body.length > 500 && (
           <a
-            class="read-more"
+            class="text-inherit text-sm"
             href={`${base}/category/${post.data.category}/${post.slug}`}
           >
             Devamını Oku
@@ -195,5 +122,5 @@ const { Content } = await post.render();
       </div>
     )
   }
-  {postFooter && <p class="post-footer">{postDateFormatted}</p>}
+  {postFooter && <p class="text-gray-600 text-sm">{postDateFormatted}</p>}
 </div>

src/content/blog/ataturk-ve-demokratik-turkiye.md

@@ -10,8 +10,6 @@ tags:
   - inkılap tarihi
 ---
 
-# Atatürk ve Demokratik Türkiye
-
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut neque sollicitudin, pretium ipsum lacinia, mattis elit. Fusce in dolor suscipit, rutrum risus vehicula, feugiat ipsum. Sed sit amet enim cursus, efficitur eros eu, dapibus lectus. In nec risus eget nisl sodales bibendum nec sit amet nisl. Nulla a dolor finibus, commodo velit et, aliquam lacus. Nunc cursus ultrices tellus, ut volutpat mauris luctus vitae. Donec tristique sollicitudin est, sed iaculis odio eleifend non.
 </br></br>
 Fusce posuere non elit in vehicula. Proin facilisis dignissim bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed posuere mi lectus, at eleifend mi tristique eu. Suspendisse potenti. Nam et eros velit.

src/layouts/Layout.astro

@@ -18,6 +18,8 @@ import "../styles/main.css";
     <title>{title}</title>
   </head>
   <body class="flex justify-center font-sans">
+    <div class="max-w-[750px] flex flex-col gap-8 my-6">
       <slot />
+    </div>
   </body>
 </html>

src/pages/category/[category]/[slug]/index.astro

@@ -4,7 +4,6 @@ import { getCollection } from "astro:content";
 import Footer from "@/components/Footer.astro";
 import Header from "@/components/Header.astro";
 import Layout from "@/layouts/Layout.astro";
-import "@/styles/home.css";
 import Post from "@/components/Post.astro";
 
 export async function getStaticPaths() {
@@ -19,9 +18,7 @@ const { entry } = Astro.props;
 ---
 
 <Layout title="log101">
-  <div class="container">
   <Header />
   <Post post={entry} componentType="full" />
   <Footer />
-  </div>
 </Layout>

src/pages/category/[category]/index.astro

@@ -7,8 +7,6 @@ import Footer from "@/components/Footer.astro";
 import Layout from "@/layouts/Layout.astro";
 import Post from "@/components/Post.astro";
 
-import "@/styles/home.css";
-
 export function getStaticPaths() {
   return CATEGORIES.map((category) => {
     return {
@@ -26,7 +24,6 @@ const allTeknikPosts = await getCollection(
 ---
 
 <Layout title="log101">
-  <div class="container">
   <Header />
   <div class="posts">
     {
@@ -36,5 +33,4 @@ const allTeknikPosts = await getCollection(
     }
   </div>
   <Footer />
-  </div>
 </Layout>

src/pages/index.astro

@@ -10,9 +10,8 @@ const allTeknikPosts = await getCollection("blog");
 ---
 
 <Layout title="log101">
-  <div class="w-[750px] flex flex-col gap-8 my-6">
   <Header />
-    <div class="flex flex-col gap-10">
+  <div class="posts">
     {
       allTeknikPosts
         .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
@@ -21,5 +20,4 @@ const allTeknikPosts = await getCollection("blog");
   </div>
   <a class="text-inherit" href="#">Tüm Yayınlar</a>
   <Footer />
-  </div>
 </Layout>

src/styles/main.css

@@ -17,3 +17,9 @@
 * {
   margin: 0;
 }
+
+@layer components {
+  .posts {
+    @apply flex flex-col gap-10;
+  }
+}