Merge pull request #92 from object-t/feature/91

feat: blogのdescriptionを追加

Author: naoido

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;
     }

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}>
                   {