From 904bc46b631c222e800cb6a53bd1400378ccce2e Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Thu, 2 Apr 2020 18:27:58 +0000
Subject: [PATCH] add card component

---
 site/layouts/partials/components/card.html | 15 +++++
 src/css/imports/components/card.scss       | 74 ++++++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 site/layouts/partials/components/card.html
 create mode 100644 src/css/imports/components/card.scss

diff --git a/site/layouts/partials/components/card.html b/site/layouts/partials/components/card.html
new file mode 100644
index 0000000..20fc748
--- /dev/null
+++ b/site/layouts/partials/components/card.html
@@ -0,0 +1,15 @@
+<!-- TODO convert to proper template -->
+<div class="card-layout">
+  <div class="c-img-card about-card">
+    <div class="c-img-card__header background-image"></div>
+    <div class="c-img-card__body">
+      <div class="c-img-card__body-bg body-background"></div>
+      <h3>Card Heading</h3>
+      <p>
+        Amet recusandae optio quia velit quisquam. Dolorem ipsam non modi est quisquam? Quia inventore neque amet laudantium impedit a, dignissimos. Repellendus vero animi saepe tempora quibusdam! Repudiandae esse ex adipisci
+      </p>
+    </div>
+  </div>
+</div>
+</div>
+
diff --git a/src/css/imports/components/card.scss b/src/css/imports/components/card.scss
new file mode 100644
index 0000000..3d422db
--- /dev/null
+++ b/src/css/imports/components/card.scss
@@ -0,0 +1,74 @@
+.c-img-card {
+  $bp-collapse: $bp-s;
+
+  z-index: 1;
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &__body {
+    padding: 32px 48px;
+  }
+
+  &__body-bg {
+    z-index: -1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  @media (max-width: $bp-collapse) {
+    &__header,
+    &__body,
+    &__body-bg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+    }
+
+    &__header {
+      z-index: -1;
+    }
+
+    &__body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+
+    &__body-bg {
+      opacity: 0.6;
+    }
+  }
+
+  @media (min-width: $bp-collapse) {
+    display: flex;
+    flex-direction: column;
+
+    &__header,
+    &__body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__header {
+      flex: 0 1 50%;
+    }
+
+    &__body {
+      position: relative;
+      flex: 1 0 50%;
+    }
+
+    &__body-bg {
+      opacity: 1;
+    }
+  }
+}