add: category, date sorting

Add category layouts and date sorting

app/assets/css/blogCard.css

@@ -12,6 +12,17 @@
         scale: 1.05;
     }
 
+    & > .image {
+        flex: 0 0 200px;
+        width: 100%;
+
+        & img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+    }
+
     & .card-content {
         display: flex;
         flex-direction: column;
@@ -24,6 +35,11 @@
         margin-bottom: 1rem;
     }
 
+    & header {
+        display: flex;
+        flex-direction: column;
+    }
+
     & footer {
         margin-top: auto;
         display: flex;
@@ -41,4 +57,12 @@
             color: var(--color-orange);
         }
     }
+}
+
+
+
+@media (width <= 780px) {
+    .BlogCard header {
+        align-items: center;
+    }
 }

app/assets/css/global.css

@@ -290,7 +290,7 @@ span.chip {
 
 .grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
 }
 
@@ -325,7 +325,7 @@ span.chip {
 }
 
 @media (width <= 780px) {
-    h1, h2, h3, h4, h5, h6, p {
+    h1, h2, h3, h4, h5, h6, p, small {
         text-align: center;
     }
 }