From 9f20921275912ea74610cccb455727903a45dcfc Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Thu, 16 May 2024 14:14:54 +0300
Subject: [PATCH] style: replace styles with tailwind classes

---
 src/components/Card.astro                     |  61 -----------
 src/components/Footer.astro                   |  19 +---
 src/components/Header.astro                   |  52 ++++-----
 src/components/Post.astro                     | 101 +++---------------
 .../blog/ataturk-ve-demokratik-turkiye.md     |   2 -
 src/layouts/Layout.astro                      |   4 +-
 .../category/[category]/[slug]/index.astro    |   9 +-
 src/pages/category/[category]/index.astro     |  20 ++--
 src/pages/index.astro                         |  20 ++--
 src/styles/main.css                           |   6 ++
 10 files changed, 65 insertions(+), 229 deletions(-)
 delete mode 100644 src/components/Card.astro

diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index bd6d597..0000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -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>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 6e546bc..d0adb8a 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,22 +2,7 @@
 
 ---
 
-<style>
-  .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">
+<div class="flex flex-row items-center gap-2 text-gray-500 text-sm">
   <p class="copyright">© 2024 Furkan Erdem</p>
-  <a class="about-me" href="#">Hakkımda</a>
+  <a class="text-inherit" href="#">Hakkımda</a>
 </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index fef1967..e93e3c3 100644
--- a/src/components/Header.astro
+++ b/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">
-          log101
-        </h1></a
+        ><h1 class="font-mono text-[3.815rem] pb-2">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">
-                  Fikir
-                </a>
-              </li>
-              <li>
-                <a href={`${base}/category/teknik`} class="no-underline">
-                  Teknik
-                </a>
-              </li>
-              <li>
-                <a href={`${base}/category/edebiyat`} class="no-underline">
-                  Babür'ün Serüvenleri
-                </a>
-              </li>
-              <li>
-                <a href={`${base}/category/ansiklopedi`} class="no-underline">
-                  Ansiklopedi
-                </a>
-              </li>
-            </>
-          )
-        }
+        <li>
+          <a href={`${base}/category/fikir`}>Fikir</a>
+        </li>
+        <li>
+          <a href={`${base}/category/teknik`}>Teknik</a>
+        </li>
+        <li>
+          <a href={`${base}/category/edebiyat`}>Babür'ün Serüvenleri</a>
+        </li>
+        <li>
+          <a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a>
+        </li>
       </ul>
       <hr class="mb-0" />
     </div>
diff --git a/src/components/Post.astro b/src/components/Post.astro
index 66ad025..fc2ca98 100644
--- a/src/components/Post.astro
+++ b/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="post-header">
-    <p class="post-category">{post.data.subcategory}</p>
-    <a class="post-title-anchor" href={postLink}
-      ><h4 class="post-title">{post.data.title}</h4></a
+<div class="flex flex-col gap-3">
+  <div class="flex flex-col">
+    <p class="tracking-wide text-slate-700">{post.data.subcategory}</p>
+    <a class="no-underline text-inherit" href={postLink}
+      ><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">
-          <p class="meta-text">{postDateFormatted}</p>
+        <ul class="list-none flex pl-0 meta-list">
+          <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>
diff --git a/src/content/blog/ataturk-ve-demokratik-turkiye.md b/src/content/blog/ataturk-ve-demokratik-turkiye.md
index 29c4076..6a010af 100644
--- a/src/content/blog/ataturk-ve-demokratik-turkiye.md
+++ b/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.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e01dd93..3675c41 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -18,6 +18,8 @@ import "../styles/main.css";
     <title>{title}</title>
   </head>
   <body class="flex justify-center font-sans">
-    <slot />
+    <div class="max-w-[750px] flex flex-col gap-8 my-6">
+      <slot />
+    </div>
   </body>
 </html>
diff --git a/src/pages/category/[category]/[slug]/index.astro b/src/pages/category/[category]/[slug]/index.astro
index 0d99fc5..4f47f34 100644
--- a/src/pages/category/[category]/[slug]/index.astro
+++ b/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>
+  <Header />
+  <Post post={entry} componentType="full" />
+  <Footer />
 </Layout>
diff --git a/src/pages/category/[category]/index.astro b/src/pages/category/[category]/index.astro
index d7461ab..edfdcdf 100644
--- a/src/pages/category/[category]/index.astro
+++ b/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,15 +24,13 @@ const allTeknikPosts = await getCollection(
 ---
 
 <Layout title="log101">
-  <div class="container">
-    <Header />
-    <div class="posts">
-      {
-        allTeknikPosts
-          .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
-          .map((p) => <Post post={p} componentType="long" />)
-      }
-    </div>
-    <Footer />
+  <Header />
+  <div class="posts">
+    {
+      allTeknikPosts
+        .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
+        .map((p) => <Post post={p} componentType="long" />)
+    }
   </div>
+  <Footer />
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0530111..53516b6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,16 +10,14 @@ 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">
-      {
-        allTeknikPosts
-          .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
-          .map((p) => <Post post={p} componentType="short" />)
-      }
-    </div>
-    <a class="text-inherit" href="#">Tüm Yayınlar</a>
-    <Footer />
+  <Header />
+  <div class="posts">
+    {
+      allTeknikPosts
+        .sort((p1, p2) => p2.data.date.getTime() - p1.data.date.getTime())
+        .map((p) => <Post post={p} componentType="short" />)
+    }
   </div>
+  <a class="text-inherit" href="#">Tüm Yayınlar</a>
+  <Footer />
 </Layout>
diff --git a/src/styles/main.css b/src/styles/main.css
index 3d4e4bf..6aaf3ea 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -17,3 +17,9 @@
 * {
   margin: 0;
 }
+
+@layer components {
+  .posts {
+    @apply flex flex-col gap-10;
+  }
+}