Participate P2 Revisions (#1785)

network-api/networkapi/wagtailpages/templates/wagtailpages/static/participate_page2.html

@@ -6,12 +6,13 @@
 {% block content %}
 
 {% image page.ctaHero format-jpeg as big_hero %}
-<div class="bottom-line mb-4" style="background-image: url({{ big_hero.url }}); background-repeat:no-repeat; background-position: top center; background-size: cover;">
+<div id="participate-hero" class="bottom-line mb-4" style="background-image: url({{ big_hero.url }});">
+  <img class="w-100 d-sm-none" src="{{ big_hero.url }}"/>
   <div class="container">
     <div class="row py-5">
       <div class="col-12 col-md-10 col-xl-5 mb-2">
         <h1 class="h1-heading">{{ page.ctaHeroHeader }}</h1>
-        <p class="body-large">{{ page.ctaHeroSubhead | richtext }}</p>
+        <div class="body-large">{{ page.ctaHeroSubhead | richtext }}</div>
         <p class="commitment">{{ page.ctaCommitment }}</p>
         <a class="btn btn-normal" href={{ page.ctaButtonURL }}>{{ page.ctaButtonTitle }}</a>
       </div>
@@ -21,7 +22,7 @@ <h1 class="h1-heading">{{ page.ctaHeroHeader }}</h1>
 
 <div class="container">
   <div class="row">
-    <div class="col-12 col-md-8 mb-1">
+    <div class="col-12 col-lg-8 mb-1">
       <h2 class="h3-heading">{{ page.h2 }}</h2>
       <p class="body-large">{{ page.h2Subheader }}</p>
     </div>
@@ -53,7 +54,13 @@ <h2 class="h3-heading">{{ page.h2 }}</h2>
 
   <div class="my-5">
     {% for cta in page.cta4.all %}
+      <div class="d-block d-sm-none">
+      {% image cta.hero width-320 as temp %}
+      {% card temp.url cta.header cta.subhead cta.buttonURL cta.buttonTitle cta.commitment %}
+      </div>
+      <div class="d-none d-sm-block">
       {% cardLarge cta.hero cta.header cta.subhead cta.buttonURL cta.buttonTitle cta.commitment %}
+      </div>
     {% endfor %}
   </div>
 </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-cta.html

@@ -1,9 +1,9 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="row card-cta" style="background: #F5F5F5;">
-  <div class="col-12 col-md-6 p-5">
+<div class="row flex-column-reverse flex-md-row card-cta" style="background: #F5F5F5;">
+  <div class="col-12 col-md-6 px-5 pt-4 pb-5 p-sm-5">
     <h3 class="">{{ title }}</h3>
-    <p>{{ description | richtext }}</p>
+    <div class="body-large">{{ description | richtext }}</div>
 
     {% if commitment %}
     <div class="commitment mb-3">{{ commitment }}</div>

network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card-large.html

@@ -1,13 +1,16 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="row card-cta-large my-3">
-  <div class="col-12 col-md-6 mb-3">
+<div class="row card-cta-large my-3 align-items-center my-4">
+  <div class="col-12 col-md-6 mb-3 mb-md-0">
     {% image image fill-1080x600-c100 format-jpeg as hero %}
-    <img src="{{ hero.url }}" class="w-100"/>
+    <img class="full-bleed-xs d-block d-md-none d-lg-block" src="{{ hero.url }}" class="w-100"/>
+
+    {% image image fill-600x600-c100 format-jpeg as hero2 %}
+    <img class="d-none d-md-block d-lg-none" src="{{ hero2.url }}" class="w-100"/>
   </div>
   <div class="col-12 col-md-6">
     <h3 class="h3-heading">{{ title }}</h3>
-    <p class="body-large">{{ description | richtext }}</p>
+    <div class="body-large">{{ description | richtext }}</div>
     <p class="commitment">{{ commitment }}</p>
     <a href="{{ link_url }}" class="btn btn-ghost">{{ link_label }}</a>
   </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/tags/card.html

@@ -1,4 +1,6 @@
-<div class="pb-5 card-regular">
+{% load wagtailcore_tags wagtailimages_tags %}
+
+<div class="card-regular">
 
   {% if commitment %}
   <div class="commitment">{{ commitment }}</div>
@@ -9,7 +11,7 @@
   <div class="full-bleed-xs">
     <div class="key-item mx-2 mx-md-3 p-3">
       <h5 class="h4-heading mb-2">{{ title }}</h5>
-      <p>{{ description }}</p>
+      <p>{{ description | richtext }}</p>
       <a class="cta-link mb-2" href="{{ link_url }}">{{ link_label }}</a>
     </div>
   </div>

source/sass/components/commitment.scss

@@ -7,6 +7,7 @@
   text-transform: uppercase;
   display: flex;
   align-items: center;
+  z-index: 1;
 
   &::before {
     content: "";

source/sass/main.scss

@@ -60,5 +60,6 @@ $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px
 @import './views/contact';
 @import './views/projects';
 @import './views/initiatives';
+@import './views/participate';
 @import './views/fellowships/shared';
 @import './views/style-guide';

source/sass/type.scss

@@ -143,7 +143,8 @@ h6,
   @include scaleText(12px, 16px);
 }
 
-.body-large {
+.body-large,
+.body-large p {
   font-weight: 300;
   letter-spacing: 0;
   line-height: 1.333;

source/sass/views/participate.scss

@@ -0,0 +1,11 @@
+#participate-hero {
+  @media (min-width: $bp-sm) {
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: cover;
+  }
+
+  @media (max-width: $bp-sm) {
+    background: none;
+  }
+}