From c26ce8eb447aa11afdc6b6e370d3974b9ad44ad7 Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Wed, 21 Aug 2019 12:53:01 +0200
Subject: [PATCH] more about cards

---
 homepage/theme/templates/base.html |  79 +++++++++++---
 styles/index.css                   | 160 ++++++++++++++++++-----------
 2 files changed, 164 insertions(+), 75 deletions(-)

diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html
index 5cf2cea..4dab771 100644
--- a/homepage/theme/templates/base.html
+++ b/homepage/theme/templates/base.html
@@ -81,35 +81,38 @@
         </div>
       </div>
     </div>
+
     <div class="feature">
       <div class="container-full">
-
         <div class="card-deck">
           <div class="card">
-            <div class="card-body">
-              <div class="cardtext">
+            <div class="card-gfx">
+              <img src="/theme/images/offen-logo-circle-only.svg" width="42" height="46">
+            </div>
+            <div class="card-text">
               Feature Text 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-              </div>
             </div>
           </div>
           <div class="card">
-            <div class="card-body">
-              <div class="cardtext">
+            <div class="card-gfx">
+              <img src="/theme/images/offen-logo-circle-only.svg" width="42" height="46">
+            </div>
+            <div class="card-text">
               Feature Text 2 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-              </div>
             </div>
           </div>
           <div class="card">
-            <div class="card-body">
-              <div class="cardtext">
+            <div class="card-gfx">
+              <img src="/theme/images/offen-logo-circle-only.svg" width="42" height="46">
+            </div>
+            <div class="card-text">
               Feature Text 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
-              </div>
             </div>
           </div>
         </div>
-
       </div>
     </div>
+
     <div class="cta-top">
       <div class="container-full">
         CTA TOP
@@ -136,15 +139,57 @@
 
   <div class="cta-bottom">
     <div class="container-full">
-      CTA BOTTOM
+      <div class="card-deck">
+        <div class="card">
+          <div class="card-text">
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+            <div class="btn-wrapper">
+            <a class="btn btn-color-black" href="{{GITHUB_ORG}}" target="_blank">Get involved</a>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-text">
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+            <div class="btn-wrapper">
+            <a class="btn btn-color-black" href="/status/" target="_blank">Status</a>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-text">
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+            <div class="btn-wrapper">
+            <a class="btn btn-color-black" href="{{PATREON_URL}}" target="_blank">Support Us</a>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
+
   <div class="footer">
-    <div class="container-full">
-      <a href="/" title="offen home page" alt="offen home page">
-        <img src="/theme/images/offen-logo-letters-only-grey.svg" alt="offen logo" width="86" height="38">
-      </a>
-   </div>
+    <div class="footer-card-deck">
+      <div class="footer-card">
+        <a href="/" title="offen home page" alt="offen home page">
+          <img src="/theme/images/offen-logo-letters-only-grey.svg" alt="offen logo" width="86" height="38">
+        </a>
+      </div>
+      <div class="footer-card">
+        <p>
+          <a href="#">LINK</a>
+        </p>
+        <p>
+          <a href="#">LINK</a>
+        </p>
+        <p>
+          <a href="#">LINK</a>
+        </p>
+      </div>
+      <div class="footer-card">
+        August 2019
+      </div>
+    </div>
   </div>
 
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
diff --git a/styles/index.css b/styles/index.css
index 4669dc9..386bdb7 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -41,7 +41,6 @@ LAYOUT
 }
 .feature {
   width: 100%;
-  height: 400px;
   background-color: var(--grey-bright);
 }
 .cta-top {
@@ -61,33 +60,122 @@ LAYOUT
 }
 .cta-bottom {
   width: 100%;
-  height: 200px;
   background-color: var(--yellow-mid);
 }
 .footer {
   width: 100%;
-  height: 240px;
+  min-height: 300px;
   color: var(--grey-mid);
   background-color: var(--black-mid);
 }
-
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
-  .container-reader,
-  .container-full {
-    padding: 40px 20px 80px 20px;
-  }
-}
-
 /* Desktop Styles */
 @media only screen and (min-width: 961px) {
   .container-reader {
     width: 600px;
     margin: 0 auto;
-    padding: 40px 20px 80px 20px;
+    padding: 60px 20px 120px 20px;
   }
   .container-full {
-    padding: 40px 80px 80px 80px;
+    padding: 60px 80px 120px 80px;
+  }
+  .footer {
+    padding: 40px 40px 0 40px;
+  }
+}
+/* Tablet Styles */
+@media only screen and (min-width: 600px) and (max-width: 960px) {
+  .container-reader,
+  .container-full {
+    width: 600px;
+    margin: 0 auto;
+    padding: 60px 20px 120px 20px;
+  }
+}
+/* Mobile Styles */
+@media only screen and (max-width: 960px) {
+  .container-reader,
+  .container-full,
+  .footer {
+    padding: 60px 20px 120px 20px;
+  }
+}
+
+
+/* ---------------------------------------------------
+CARDS
+----------------------------------------------------*/
+.card-deck,
+.card,
+.footer-card-deck {
+  display: flex;
+}
+.card {
+  max-width: 400px;
+  color: var(--black-mid);
+}
+.footer-card p {
+  margin: 0 0 4px 0;
+}
+.footer-card:nth-child(1),
+.footer-card:nth-child(2) {
+  margin: 0 0 20px 0;
+}
+/* Mobile Styles */
+@media only screen and (max-width: 960px) {
+  .card-deck,
+  .card,
+  .footer-card-deck {
+    flex-direction: column;
+  }
+  .card {
+    align-self: center;
+  }
+  .card:nth-child(2) {
+    margin: 80px 0 80px 0;
+  }
+  .card-gfx,
+  .card-text,
+  .footer-card {
+    text-align: center;
+  }
+  .card-gfx {
+    margin: 0 0 20px 0;
+  }
+}
+/* Tablet Styles */
+@media only screen and (min-width: 600px) and (max-width: 960px) {
+
+}
+/* Desktop Styles */
+@media only screen and (min-width: 961px) {
+  .card-deck,
+  .card,
+  .footer-card-deck {
+    flex-direction: row;
+  }
+  .card-deck {
+    justify-content: space-evenly;
+  }
+  .card:nth-child(2) {
+    margin: 0 40px 0 40px;
+  }
+  .card-gfx,
+  .card-text {
+    text-align: left;
+  }
+  .card-gfx {
+    margin: 0 20px 0 0;
+  }
+  .footer-card-deck {
+    justify-content: space-between;
+  }
+  .footer-card:nth-child(1),
+  .footer-card:nth-child(2) {
+    flex-grow: 1;
+  }
+  .footer-card:nth-child(3) {
+    text-align: right;
+    flex-grow: 10;
   }
 }
 
@@ -383,47 +471,3 @@ nav ul li ul li a {
 #nav-toggle.active span:after {
   transform: rotate(-45deg);
 }
-
-
-/* ---------------------------------------------------
-CARDS
-----------------------------------------------------*/
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-clip: border-box;
-}
-.card-body {
-  flex: 1 1 auto;
-  text-align: center;
-}
-.card-deck {
-  display: flex;
-  flex-direction: column;
-}
-.card-deck .card {
-  margin: 0 0 15px 0;
-}
-
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
-
-}
-
-/* Desktop Styles */
-@media only screen and (min-width: 961px) {
-  /* Card */
-  .card-deck {
-    flex-flow: row wrap;
-    margin: 0 -15px 0 -15px;
-  }
-  .card-deck .card {
-    display: flex;
-    flex: 1 0 0%;
-    flex-direction: column;
-    margin: 0 15px 0 15px;
-  }
-}