add: category, date sorting

Add category layouts and date sorting

app/assets/css/blog/author.css

@@ -0,0 +1,32 @@
+.BlogAuthor {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    & .meta {
+        display: flex;
+        flex-direction: column;
+        gap: .2rem;
+
+        & .name {
+            font-weight: bold;
+        }
+        & .date {
+            font-size: .8rem;
+        }
+    }
+
+    & .image {
+        --size: 50px;
+        height: var(--size);
+        width: var(--size);
+        border-radius: 50%;
+        overflow: hidden;
+
+        & img {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+    }
+}

app/assets/css/blog/card.css

@@ -0,0 +1,67 @@
+.BlogCard {
+    overflow: hidden;
+    border-radius: 1rem;
+    background: var(--color-black);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    transition: 150ms;
+    gap: 1rem;
+
+    &:hover {
+        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;
+        height: 100%;
+        padding: 0 1.5rem 1rem;
+        gap: 1.5rem;
+    }
+
+    & .chip {
+        margin-bottom: 1rem;
+    }
+
+    & header {
+        display: flex;
+        flex-direction: column;
+    }
+
+    & footer {
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+    }
+
+    & .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: .5rem;
+        opacity: .5;
+
+        & .tag {
+            color: var(--color-orange);
+        }
+    }
+}
+
+
+@media (width <= 780px) {
+    .BlogCard header {
+        align-items: center;
+    }
+}

app/assets/css/blog/overview.css

@@ -0,0 +1,15 @@
+.BlogOverview {
+    & .category-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        list-style: none;
+    }
+
+    & .article-overview {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 2rem;
+    }
+}