Add mobile images

css/index.scss

@@ -35,16 +35,15 @@
   }
 
   .hero {
-    img {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
-      -webkit-box-pack: center;
+
-      -ms-flex-pack: center;
+    div,
-      justify-content: center;
+    img {
       width: 100%;
     }
   }

css/main.scss

@@ -15,6 +15,28 @@
 /*** Vars ***/
 @import "vars";
 
+/* Add *-gt-hidden */
+@media (min-width: $lg-width) {
+  [class*="lg-gt-hidden"] {
+    display: none;
+  }
+}
+@media (min-width: $md-width) {
+  [class*="md-gt-hidden"] {
+    display: none;
+  }
+}
+@media (min-width: $sm-width) {
+  [class*="sm-gt-hidden"] {
+    display: none;
+  }
+}
+@media (min-width: $xs-width) {
+  [class*="xs-gt-hidden"] {
+    display: none;
+  }
+}
+
 @font-face {
   font-family: $body-font;
   src: url("../fonts/Avenir-Roman.woff") format("woff");

index.html

@@ -1,12 +1,13 @@
 ---
 stylesheet: index
 ---
+
 {% include values.inc %}
 
 <div id="jumbotron">
   <div>
     <div class="grid">
-      <div class="col col-5_md-12 main">
+      <div class="col-5_md-12 main">
         <div>
           <h1>The open source multicloud control plane.</h1>
           <p>
@@ -18,8 +19,11 @@ stylesheet: index
           </button>
         </div>
       </div>
-      <div class="col-7 hero md-hidden">
+      <div class="col-7_md-12_md-first hero">
-        <img class="img" src="/images/hero.svg" />
+        <div>
+          <img class="img md-hidden" src="/images/hero.svg" />
+          <img class="img md-gt-hidden" src="/images/hero-mobile.svg" />
+        </div>
       </div>
     </div>
   </div>
@@ -50,10 +54,14 @@ stylesheet: index
       </div>
       <div class="col-9_md-12 footer">
         <p>
-          Additional managed services including serverless, analytics, big data, machine
+          Additional managed services including serverless, analytics, big data,
-          learning and others are coming soon.
+          machine learning and others are coming soon.
+        </p>
+        <p>
+          <a href="{{githubLink}}"
+            >Help support these features and add new ones</a
+          >
         </p>
-        <p><a href="{{githubLink}}">Help support these features and add new ones</a></p>
       </div>
     </div>
   </div>
@@ -107,16 +115,16 @@ stylesheet: index
         <h3>Advanced workload scheduling.</h3>
         <p>
           Crossplane includes an extensible workload scheduler that can factor
-          availability, reliability, cost, and performance while deploying workloads and
+          availability, reliability, cost, and performance while deploying
-          their resources.
+          workloads and their resources.
         </p>
       </div>
       <div class="col-4_md-6_sm-12 feature">
         <h3>Open source that doesn’t have an agenda.</h3>
         <p>
           Crossplane is open source software released under the Apache 2.0
-          license. Crossplane is a community driven effort to define a
+          license. Crossplane is a community driven effort to define a control
-          control plane that can span multiple cloud providers, many regions and
+          plane that can span multiple cloud providers, many regions and
           offerings.
         </p>
       </div>
@@ -145,7 +153,12 @@ stylesheet: index
 <div id="use-cases">
   <div>
     <div class="grid">
-      <div class="col-6 md-hidden img"><img src="/images/feature-1.svg" /></div>
+      <div class="col-6_md-12 img">
+        <img class="md-hidden" src="/images/feature-1.svg" /><img
+          class="md-gt-hidden"
+          src="/images/feature-1-mobile.svg"
+        />
+      </div>
       <div class="col-6_md-12">
         <h2>Utilize multiple cloud providers at a single time.</h2>
         <p>
@@ -155,6 +168,8 @@ stylesheet: index
           <img src="/images/quad-white-medium.svg" />
         </p>
       </div>
+    </div>
+    <div class="grid">
       <div class="col-6_md-12">
         <h2>Migrate managed services across multiple clouds.</h2>
         <p>
@@ -165,8 +180,20 @@ stylesheet: index
           <img src="/images/quad-white-medium.svg" />
         </p>
       </div>
-      <div class="col-6 md-hidden img"><img src="/images/feature-2.svg" /></div>
+      <div class="col-6_md-12_md-first img">
-      <div class="col-6 md-hidden img"><img src="/images/feature-3.svg" /></div>
+        <img class="md-hidden" src="/images/feature-2.svg" /><img
+          class="md-gt-hidden"
+          src="/images/feature-2-mobile.svg"
+        />
+      </div>
+    </div>
+    <div class="grid">
+      <div class="col-6_md-12 img">
+        <img class="md-hidden" src="/images/feature-3.svg" /><img
+          class="md-gt-hidden"
+          src="/images/feature-3-mobile.svg"
+        />
+      </div>
       <div class="col-6_md-12">
         <h2>Automate all of your tasks across multiple clouds.</h2>
         <p>
@@ -185,8 +212,18 @@ stylesheet: index
   <div>
     <div class="grid-center">
       <div class="testimonial col-4_md-6_sm-12">
-        <h3>&ldquo;Crossplane has an opportunity to change the cloud industry as we know it&rdquo;</h3>
+        <h3>
-        <p>&ldquo;Our customers are increasingly looking for a way to deploy their code across multiple cloud environments. The choices available today are too complex and vendor driven but with Crossplane the ability to orchestrate clouds becomes simple. We look forward to collaborating with them on this vision and as the first complex app running on Crossplane.&rdquo;</p>
+          &ldquo;Crossplane has an opportunity to change the cloud industry as
+          we know it&rdquo;
+        </h3>
+        <p>
+          &ldquo;Our customers are increasingly looking for a way to deploy
+          their code across multiple cloud environments. The choices available
+          today are too complex and vendor driven but with Crossplane the
+          ability to orchestrate clouds becomes simple. We look forward to
+          collaborating with them on this vision and as the first complex app
+          running on Crossplane.&rdquo;
+        </p>
         <div class="signature">
           <div class="name">Sid Sijbrandij</div>
           <div class="title">CEO and Co-Founder of GitLab</div>
@@ -194,17 +231,38 @@ stylesheet: index
         </div>
       </div>
       <div class="testimonial col-4_md-6_sm-12">
-          <h3>&ldquo;We share the vision of having truly cloud agnostic, managed services and Crossplane is an important step forward in this direction&rdquo;</h3>
+        <h3>
-          <p>&ldquo;Crossplane will make it possible for organizations to take deeper ownership of where they want to run their services and how they manage their application data. Kudos to the Upbound team for architecting and delivering this critical, open source and community driven component of the cloud neutral future.&rdquo;</p>
+          &ldquo;We share the vision of having truly cloud agnostic, managed
+          services and Crossplane is an important step forward in this
+          direction&rdquo;
+        </h3>
+        <p>
+          &ldquo;Crossplane will make it possible for organizations to take
+          deeper ownership of where they want to run their services and how they
+          manage their application data. Kudos to the Upbound team for
+          architecting and delivering this critical, open source and community
+          driven component of the cloud neutral future.&rdquo;
+        </p>
         <div class="signature">
           <div class="name">Spencer Kimball</div>
           <div class="title">CEO and Founder of Cockroach Labs</div>
-            <a href="https://www.cockroachlabs.com/"><img src="/images/cockroachlabs.svg" /></a>
+          <a href="https://www.cockroachlabs.com/"
+            ><img src="/images/cockroachlabs.svg"
+          /></a>
         </div>
       </div>
       <div class="testimonial col-4_md-6_sm-12">
-            <h3>&ldquo;We created Crossplane to empower organizations to use the best of all the clouds.&rdquo;</h3>
+        <h3>
-            <p>&ldquo;Having a control plane that is able to schedule and orchestrate portable workloads across cloud providers, regions, and on-premises while still using best-of-breed managed services allows organizations to improve availability, geographic presence, as well as optimize for cost.&rdquo;</p>
+          &ldquo;We created Crossplane to empower organizations to use the best
+          of all the clouds.&rdquo;
+        </h3>
+        <p>
+          &ldquo;Having a control plane that is able to schedule and orchestrate
+          portable workloads across cloud providers, regions, and on-premises
+          while still using best-of-breed managed services allows organizations
+          to improve availability, geographic presence, as well as optimize for
+          cost.&rdquo;
+        </p>
         <div class="signature">
           <div class="name">Bassam Tabbara</div>
           <div class="title">CEO and Founder of Upbound</div>
@@ -220,7 +278,8 @@ stylesheet: index
       <div class="col-10_sm-12">
         <h2>Learn more and get involved with the community</h2>
         <p>
-            Join the conversation and help shape the evolution of crossplane.  Here are a few ways to get started.
+          Join the conversation and help shape the evolution of crossplane. Here
+          are a few ways to get started.
         </p>
       </div>
 
@@ -233,7 +292,12 @@ stylesheet: index
             <p>
               Join the Crossplane team and community members in our Slack group.
             </p>
-            <button class="grey" onclick="window.location.href= '{{slackLink}}';">Join Slack</button>
+            <button
+              class="grey"
+              onclick="window.location.href= '{{slackLink}}';"
+            >
+              Join Slack
+            </button>
           </div>
         </div>
       </div>
@@ -260,14 +324,21 @@ stylesheet: index
             <img src="/images/forum.svg" />
             <h3>Forum</h3>
             <p>Chat about your use case with others on the Crossplane forum.</p>
-            <button class="grey" onclick="window.location.href = '{{forumLink}}';">Visit Forum</button>
+            <button
+              class="grey"
+              onclick="window.location.href = '{{forumLink}}';"
+            >
+              Visit Forum
+            </button>
           </div>
         </div>
       </div>
     </div>
 
     <p class="join">
-        You can also join us every other week for our <a href="{{communityMeetingLink}}">community meeting</a> call to discuss Crossplane
+      You can also join us every other week for our
+      <a href="{{communityMeetingLink}}">community meeting</a> call to discuss
+      Crossplane
     </p>
   </div>
 </div>