feat: better card section page

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


Former-commit-id: 5f25a26c7e77335e90c2b954784fa98aed3ec864

1 files changed, 18 insertions, 9 deletions

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 {