Add blog list page css

style/portfolio.css

@@ -4,6 +4,7 @@
 
 @import './link.css';
 @import './project.css';
+@import './post.css';
 @import './social_links.css';
 @import './tag.css';
 @import './timeline.css';

style/post.css

@@ -0,0 +1,34 @@
+@layer components {
+    .posts, .post {
+        @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
+        @apply min-h-screen py-5;
+
+        & > h1 {
+            @apply font-bold text-3xl text-center;
+        }
+    }
+
+    .posts {
+        & > .posts__cards {
+            @apply grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-5;
+
+            & > div {
+                @apply rounded-xl overflow-hidden relative;
+                @apply bg-primary/10 dark:bg-dark_primary/10;
+                @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
+
+                & > img {
+                    @apply w-full h-48 object-cover;
+                }
+
+                & > div {
+                    @apply p-5 flex flex-col gap-3;
+
+                    & > h2 {
+                        @apply font-bold text-2xl;
+                    }
+                }
+            }
+        }
+    }
+}