From ecea5543a8504c31535824dfcbc5554e42f24eff Mon Sep 17 00:00:00 2001
From: "naoto.kido" <naoto.kido@techblue.style>
Date: Thu, 17 Apr 2025 19:46:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20blog=E3=81=AEdescription=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/routes/blog/index.module.scss | 14 +++++++++++++-
 app/routes/blog/index.tsx         |  2 ++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/routes/blog/index.module.scss b/app/routes/blog/index.module.scss
index cacaf1f..aeeb751 100644
--- a/app/routes/blog/index.module.scss
+++ b/app/routes/blog/index.module.scss
@@ -30,6 +30,11 @@
 
       margin-bottom: 42px;
 
+      .description {
+        font-size: 20px;
+        color: var(--grey-text-color) !important;
+      }
+
       img {
         height: 200px;
         width: 200px;
@@ -60,6 +65,7 @@
           display: flex;
           justify-content: end;
           .tag {
+            font-size: 16px !important;
             color: var(--accent-color) !important;
             background-color: #2199c9 !important;
           }
@@ -100,11 +106,17 @@
   }
   .articleItem {
     flex-direction: column;
-    height: 400px !important;
+    height: max-content !important;
+    min-height: 400px !important;
     max-width: 400px;
     min-width: 200px;
     margin: 0 12px;
 
+    .description {
+      padding-top: 24px;
+      padding-bottom: 64px;
+    }
+
     img {
       width: 100% !important;
     }
diff --git a/app/routes/blog/index.tsx b/app/routes/blog/index.tsx
index d760dcc..998926e 100644
--- a/app/routes/blog/index.tsx
+++ b/app/routes/blog/index.tsx
@@ -7,6 +7,7 @@ import { useIsMobile } from "~/hooks/useIsMobile";
 type Article = {
   id: string,
   title: string,
+  description: string,
   thumbnail: string,
   type: string,
   topics: string[],
@@ -40,6 +41,7 @@ export default function Blog(): JSX.Element {
               <img src={`https://raw.githubusercontent.com/object-t/object-t-blog/refs/heads/main/thumbnail/${article.thumbnail}`} alt={article.title} className={styles.thumbnail} />
               <div className={styles.textBox}>
                 <h2>{article.title}</h2>
+                <p className={styles.description}>{article.description}</p>
                 <div className={styles.details}>
                   <div className={styles.tagContainer}>
                   {