1 files changed, 105 insertions, 0 deletions
diff --git a/sysret.org/themes/tabi-lean/sass/parts/_cards.scss b/sysret.org/themes/tabi-lean/sass/parts/_cards.scss
new file mode 100644
index 0000000..0b6c560
--- /dev/null
+++ b/sysret.org/themes/tabi-lean/sass/parts/_cards.scss
@@ -0,0 +1,105 @@
+.filter-controls {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    margin-top: 1.2rem;
+    margin-bottom: -1rem;
+    padding: 0;
+    list-style: none;
+
+    #all-projects-filter {
+        display: none;
+    }
+
+    .taxonomy-item {
+        margin: 0;
+
+        a {
+            display: inline-block;
+            box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+            border-radius: 1rem;
+            background: var(--bg-2);
+            padding: 0 16px;
+            color: var(--text-color);
+            font-size: 0.8rem;
+            text-decoration: none;
+
+            &:hover {
+                background: var(--primary-color);
+                color: var(--hover-color);
+            }
+
+            &.active {
+                background: var(--primary-color);
+                color: var(--hover-color);
+            }
+        }
+    }
+}
+
+.cards {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+    margin-top: 4vmin;
+    padding-block: 12px;
+
+    .card {
+        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+        border-radius: 1rem;
+        background: var(--bg-2);
+        min-height: 100px;
+        overflow: hidden;
+
+        &:hover {
+            background-color: var(--primary-color);
+        }
+
+        &:hover .card-description {
+            color: var(--hover-color);
+        }
+
+        .card-info {
+            padding-inline: 24px;
+            padding-block-start: 0;
+            padding-block-end: 24px;
+            text-align: center;
+        }
+        .card-image {
+            $margin: 1.6rem;
+            margin: $margin;
+            margin-bottom: $margin / 1.5;
+            width: calc(100% - $margin * 2);
+            height: auto;
+        }
+
+        .card-image-placeholder {
+            width: 100%;
+            height: 12px;
+        }
+
+        .card-description {
+            margin-top: 0.5em;
+            overflow: hidden;
+            color: var(--text-color);
+        }
+    }
+}
+
+@media all and (max-width: 720px) {
+    .cards {
+        gap: 18px;
+    }
+
+    .filter-controls {
+        gap: 8px;
+        margin: 18px 0;
+
+        .taxonomy-item a {
+            padding: 4px 12px;
+        }
+    }
+}