feat: better card section page

- show 2 cards on one row
- show card statistics
- use wider container for the page


Former-commit-id: 5f25a26c7e77335e90c2b954784fa98aed3ec864

3 files changed, 51 insertions, 22 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 6bf57fcc..8308d1c6 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -74,6 +74,39 @@
     }
 }
 
+.cards-section {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    @media screen and (min-width: 768px) {
+        grid-template-columns: 1fr 1fr;
+    }
+    .card {
+        margin: 0;
+        h3 {
+            margin: 0;
+        }
+    }
+}
+
+.cards-statistics {
+    margin: 1rem 0;
+    table tr > td:nth-child(2) {
+        text-align: right;
+    }
+    .number-pill {
+        text-align: center;
+        display: inline-block;
+        width: 1.75rem;
+        height: 1.75rem;
+        line-height: 1.75rem;
+        box-sizing: border-box;
+        border-radius: 50%;
+        background-color: var(--block-background-color);
+        font-size: 1rem;
+    }
+}
+
 #latest-cards {
     margin: 1rem 0;
     .latest-cards-container {
diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss
index da4113a2..7682dbae 100644
--- a/assets/css/components/_postlist.scss
+++ b/assets/css/components/_postlist.scss
@@ -131,19 +131,6 @@
             }
         }
     }
-    .term-list-cards {
-        @media screen and (min-width: 768px) {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1rem;
-        }
-        .card {
-            margin: 0;
-            h3 {
-                margin: 0;
-            }
-        }
-    }
 }
 
 .taxonomy-description hr {
diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index a54268b3..9b857fdb 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -29,22 +29,31 @@ figure {
 }
 
 .outbox {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
 
-    // Default width
-    width: 100%;
+  @media screen and (min-width: 768px) {
+    width: calc(var(--page-width) + 10rem);
+    margin: 0 -5rem;
+  }
 
-    // Properly interpolate calc() in media queries
+  @media screen and (min-width: 1200px) {
+    width: calc(var(--page-width) + 20rem);
+    margin: 0 -10rem;
+  }
+
+  &.small {
     @media screen and (min-width: 768px) {
-        width: calc(var(--page-width) + 5rem * 2);
-        margin: 0 -5rem;
+      width: calc(var(--page-width) + 4rem);
+      margin: 0 -2rem;
     }
 
     @media screen and (min-width: 1200px) {
-        width: calc(var(--page-width) + 10rem * 2);
-        margin: 0 -10rem;
+      width: calc(var(--page-width) + 10rem);
+      margin: 0 -5rem;
     }
+  }
 }
 
 .font-mono {