Join us page (#1002)

* Set main layout

* Style Advice Card Mbl, Stle Volunteer Card Mbl

* Stle Advice Car Mbl, Stle Volunteer Card Mbl

* Style Partner Card Mbl

* Style Partner with Us Mbl

* Fix button and card classes, Desktop style for Banner

* Style Desktop cards

* Add links

* Change nav bar link

* undo mian.yml edit

* fix main.yml rout

* Style fixes round 1

* Margin fix

* Update donation graphics

* fixed overlaping margins

* update banner style in tablet

* clarify scss comments

* remove duplicate files

* made quotes in main.scss single

* add mailto: to email link line 149

* add slack link

* add target blank to a tags

Co-authored-by: Travis Tincher <[email protected]>

_data/navigation/main.yml

@@ -7,10 +7,10 @@
 
 - name: Press
   link: /#press
-  
+
 - name: Connect
   link: /#about
-  
+
 - name: Toolkit
   link: /toolkit
 

_sass/components/_join-us.scss

@@ -0,0 +1,269 @@
+/*--------
+| Mobile 
+----------*/
+
+.join-us-wrapper {
+  min-height: 100vh;
+}
+
+.join-us-banner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4rem 1rem;
+  height: fit-content;
+
+  .join-us-banner-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    h1 {
+      font-size: 24px;
+      padding-bottom: 28px;
+    }
+
+    p {
+      font-size: 18px;
+      max-width: 300px;
+      @media #{$bp-tablet-up} {
+        max-width: 500px;
+      }
+    }
+  }
+
+  img {
+    width: 80%;
+    max-width: 500px;
+    margin: auto;
+    padding-top: 20px;
+  }
+}
+
+.join-us-card-container {
+  background: #f7f5f5;
+  display: flex;
+  flex-direction: column;
+
+  .page-card {
+    border-radius: 20px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    h1 {
+      font-size: 1.25rem;
+      margin-bottom: 1rem;
+      // Fixes title wrap at smallest mobile size
+      @media (max-width: #{$screen-mobile - 160}) {
+        padding: 0 43px;
+        text-align: center;
+      }
+    }
+
+    h2 {
+      font-size: 16px;
+      width: 100%;
+      max-width: 300px;
+    }
+
+    .join-us-card-img {
+      width: 150px;
+      padding: 40px 0;
+    }
+
+    .join-us-donation-png {
+      width: 100%;
+      margin: 20px auto;
+    }
+
+    ol {
+      padding-left: 20px;
+      max-width: 300px;
+    }
+
+    ul {
+      padding-left: 20px;
+    }
+
+    .join-us-card-body {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p {
+        padding-bottom: 20px;
+        max-width: 300px;
+      }
+
+      li {
+        padding: 3px 0;
+      }
+
+      li::marker {
+        padding: 3px 0;
+      }
+
+      .join-us-remove-p-padding {
+        padding-bottom: 0;
+      }
+
+      .btn-partner-with-us {
+        margin-bottom: 27px;
+        width: 175px;
+      }
+    }
+  }
+
+  .card-primary {
+    background: $color-white;
+  }
+
+  .page-card-lg {
+    max-width: 896px;
+    width: 100%;
+    box-shadow: 0px 0px 8px rgba(51, 51, 51, 0.2);
+    padding: 3rem;
+    margin: 16px auto;
+
+    @media #{$bp-below-mobile} {
+      padding: 32px 20px;
+      margin: 12px auto;
+    }
+  }
+
+  .join-us-donation {
+    margin: 20px auto;
+    background: #f6f6f6;
+    padding: 20px;
+    border-radius: 20px;
+
+    h2 {
+      margin-bottom: 24px;
+    }
+
+    li {
+      font-size: 1.125rem;
+      padding: 8px 0;
+    }
+
+    #donation-footer {
+      padding-left: 20px;
+      font-size: 15px;
+    }
+  }
+}
+
+/*---------
+| Tablet
+-----------*/
+@media #{$bp-tablet-up} {
+  .join-us-card-container {
+    .page-card {
+      display: grid;
+      grid-template-columns: 2fr 3fr;
+      grid-template-rows: auto;
+
+      h1 {
+        grid-column: 2 / span 1;
+        grid-row: 1 / span 1;
+        font-size: 1.5rem;
+        margin-bottom: 2rem;
+      }
+
+      ol {
+        max-width: 480px;
+      }
+
+      img {
+        grid-column: 1 / span 1;
+        grid-row: 1 / span 2;
+        margin: auto;
+      }
+
+      #join-us-donation-icon {
+        margin: 1rem auto;
+        align-self: flex-start;
+      }
+
+      .join-us-card-body {
+        grid-column: 2 / span 2;
+        grid-row: 2 / span 1;
+        align-items: flex-start;
+
+        p {
+          max-width: 480px;
+        }
+
+        .join-us-donation-png {
+          max-width: 419px;
+          padding-bottom: 20px;
+        }
+      }
+
+      .join-us-donation {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        grid-column: 1 / span 2;
+        grid-row: 3 / span 1;
+
+        img {
+          width: 318px;
+        }
+
+        .join-us-donation-body {
+          padding: 0 32px 0 16px;
+
+          h2 {
+            font-size: 18px;
+          }
+
+          ol {
+            line-height: 24px;
+          }
+
+          li {
+            padding: 5px 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+/*---------
+| Desktop
+-----------*/
+
+@media #{$bp-desktop-up} {
+  .join-us-banner {
+    flex-direction: row;
+    max-width: 1200px;
+    margin: 37px auto 0;
+
+    .join-us-banner-text {
+      width: 500px;
+      min-width: 300px;
+      margin: auto 5rem auto 8rem;
+
+      h1 {
+        font-size: 48px;
+        padding-bottom: 0;
+      }
+
+      p {
+        font-size: 18px;
+        max-width: 508px;
+      }
+    }
+
+    img {
+      max-width: 385px;
+      margin: auto 1rem auto 0;
+      padding: 0 15px;
+    }
+  }
+}

_sass/main.scss

@@ -58,6 +58,7 @@
 @import 'components/guide-pages/2FA.scss';
 @import 'components/toolkit.scss';
 @import 'components/wins-page.scss';
+@import 'components/join-us.scss';
 @import 'components/sitemap.scss';
 
 //Guide Pages (Within Components)