starting work on abstracting card design

2024-08-02 00:01:11 +02:00
parent 3428bda4bc
commit 3885b5135b
10 changed files with 872 additions and 38 deletions
@@ -318,3 +318,61 @@ $news-accent-bg: #f8e8b1;
        }
    }
 }
+
+//
+// Cards
+//
+
+.card {
+    display: grid;
+
+    --card-base-internal: var(--card-base, #f8f8f8);
+
+    background: var(--card-base-internal);
+    color: color-mix(in srgb, var(--card-base-internal), #000 80%);
+
+    @include neo-brutalist-card($size: 3px, $offset: 9px);
+
+    row-gap: 0.5rem;
+    padding: 1rem;
+
+    // Variants
+
+    &.large {
+        padding: 2rem;
+
+        @include neo-brutalist-card($size: 4px, $offset: 8px);
+
+        row-gap: 1rem;
+
+        & > .title {
+            font-size: 36px;
+            font-weight: 700;
+        }
+
+        & > .text {
+            font-size: 18px;
+        }
+    }
+
+    // Child Items
+
+    & > .title {
+        color: color-mix(in srgb, var(--card-base-internal), #000 75%);
+        font-size: 26px;
+        font-weight: 700;
+    }
+
+    & > .text {
+        font-size: 16px;
+    }
+
+    & > .tags {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        font-size: 14px;
+        font-weight: 600;
+        color: #555;
+    }
+}