style: category page styling

src/components/Post.astro

@@ -24,6 +24,12 @@ switch (componentType) {
   default:
     break;
 }
+
+const postDateFormatted = post.data.date.toLocaleDateString("tr-TR", {
+  day: "numeric",
+  month: "long",
+  year: "numeric",
+});
 ---
 
 <style>
@@ -34,7 +40,12 @@ switch (componentType) {
   .post {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 12px;
+  }
+
+  .post-header {
+    display: flex;
+    flex-direction: column;
   }
 
   .post-category {
@@ -54,52 +65,102 @@ switch (componentType) {
     font-size: var(--small-desktop);
   }
 
-  .tags-and-date {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  .post-tags {
+  .meta {
     display: flex;
     flex-direction: row;
+    gap: 8px;
+  }
+
+  .meta-container {
+    display: flex;
+    align-items: center;
     gap: 4px;
-    margin: 0;
+  }
+
+  .meta-text {
+    font-size: var(--small-desktop);
+    color: #6d6d6d;
     padding: 0;
   }
-  .post-tags li {
+
+  .meta-list {
     list-style-type: none;
-    color: #6d6d6d;
+    padding-left: 0;
+    margin: 0;
+    display: flex;
+  }
+
+  .meta-list li {
+    padding-top: 0.1rem;
+    &:not(:last-child) {
+      &:after {
+        content: ",\00a0";
+      }
+    }
+  }
+
+  .read-more {
+    color: inherit;
     font-size: var(--small-desktop);
   }
 </style>
 
 <div class="post">
-  <p class="post-category">{post.data.subcategory}</p>
-  <h4 class="post-title">{post.data.title}</h4>
-  {shortSummary && <p class="post-summary">{post.data.summary}</p>}
-  <div class="tags-and-date">
-    {
-      showTags && (
-        <ul class="post-tags">
-          {post.data.tags.map((tag) => (
-            <li>{tag}</li>
-          ))}
-        </ul>
-      )
-    }
-
-    <p class="post-date">
+  <div class="post-header">
+    <p class="post-category">{post.data.subcategory}</p>
+    <h4 class="post-title">{post.data.title}</h4>
+    {shortSummary && <p class="post-summary">{post.data.summary}</p>}
+    <div class="meta">
       {
-        post.data.date.toLocaleDateString("tr-TR", {
-          day: "numeric",
-          month: "long",
-          year: "numeric",
-        })
+        showTags && (
+          <div class="meta-container">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              fill="#6d6d6d"
+              viewBox="0 0 256 256"
+            >
+              <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">
+              {post.data.tags.map((tag) => (
+                <li class="meta-text">{tag}</li>
+              ))}
+            </ul>
+          </div>
+        )
       }
-    </p>
+
+      <div class="meta-container">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          fill="#6d6d6d"
+          viewBox="0 0 256 256"
+          ><path
+            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>
+      </div>
+    </div>
   </div>
 
-  {longSummary && <p class="post-long-summary">{post.body.slice(0, 500)}</p>}
+  {
+    longSummary && (
+      <>
+        <p class="post-long-summary">{post.body.slice(0, 500)}</p>
+        {post.body.length > 500 && (
+          <a class="read-more" href={`/${post.slug}`}>
+            Devamını Oku
+          </a>
+        )}
+      </>
+    )
+  }
   {fullText && <p class="post-text">{post.body}</p>}
 </div>