Update of Veterans community - Step #2

Home page, mobile - done

Author: birdofpreyru

src/shared/components/tc-communities/communities/veterans/Home/index.jsx

@@ -90,11 +90,13 @@ export default function Home({ baseUrl }) {
       </div>
 
       <div styleName="style.quoteBlock">
-        <img
-          alt="Qoute avatar"
-          src={qouteAvatar}
-          styleName="style.qouteAvatar"
-        />
+        <div styleName="style.qouteAvatar">
+          <img alt="Qoute avatar" src={qouteAvatar} />
+          <div styleName="style.qouteNote">
+            <strong>Jarah Meador</strong> Innovation Crowdsourcing Lead at the
+            VA
+          </div>
+        </div>
         <div>
           <div styleName="style.qouteText">
             <span styleName="style.qouteCommas style.left">&ldquo;</span>
@@ -117,7 +119,8 @@ export default function Home({ baseUrl }) {
           <div>
             <h1>Learn & Explore</h1>
             <p>
-              Grow your skills and get Topcoder-certified &mdash; all for free
+              Grow your skills and get Topcoder-certified&nbsp;&mdash; all for
+              free
             </p>
             <Button to={`${baseUrl}/learn`}>Learn More</Button>
           </div>

src/shared/components/tc-communities/communities/veterans/Home/style.scss

@@ -7,6 +7,7 @@
   justify-content: center;
   margin: 0 2px;
   min-height: 281px;
+  padding: 40px;
   text-align: center;
 
   h1 {
@@ -21,6 +22,12 @@
     color: $white;
     margin-bottom: 40px;
   }
+
+  @include xxs-to-xs {
+    flex: none;
+    margin: 5px 0;
+    width: 100%;
+  }
 }
 
 .card-01 {
@@ -33,8 +40,10 @@
 
 .cardsBlock {
   display: flex;
+  flex-wrap: wrap;
   margin: 0 auto;
   max-width: $screen-lg;
+  padding: 0 15px;
 }
 
 .header {
@@ -44,6 +53,7 @@
   flex-direction: column;
   height: 500px;
   justify-content: center;
+  padding: 40px 24px 16px;
   text-align: center;
   width: 100%;
 
@@ -60,11 +70,16 @@
     margin: 0 auto;
     max-width: 720px;
   }
+
+  @include xxs-to-xs {
+    height: auto;
+  }
 }
 
 .imageTextBlock {
   margin: 0 auto;
   max-width: $screen-lg;
+  padding: 0 15px;
 }
 
 .joinButtonInHeader {
@@ -77,20 +92,53 @@
   color: $black;
   margin: 100px auto;
   max-width: 890px;
-  padding: 0 24px;
+  padding: 0 40px;
   text-align: center;
+
+  @include xxs-to-xs {
+    margin: 50px auto;
+  }
 }
 
 .qouteAvatar {
-  height: 150px;
-  margin-right: 40px;
-  width: 150px;
+  display: flex;
+
+  img {
+    height: 150px;
+    margin-right: 40px;
+    width: 150px;
+
+    @include xxs-to-xs {
+      height: 50px;
+      margin-right: 15px;
+      width: 50px;
+    }
+  }
+
+  .qouteNote {
+    display: none;
+
+    strong {
+      display: block;
+    }
+
+    @include xxs-to-xs {
+      display: block;
+    }
+  }
 }
 
 .quoteBlock {
   display: flex;
   margin: 200px auto;
   max-width: $screen-lg;
+  padding: 0 40px;
+
+  @include xxs-to-xs {
+    flex-direction: column-reverse;
+    margin: 50px auto;
+    padding: 0 25px;
+  }
 }
 
 .qouteCommas {
@@ -117,6 +165,10 @@
   strong {
     font-weight: bold;
   }
+
+  @include xxs-to-xs {
+    display: none;
+  }
 }
 
 .qouteText {

src/shared/components/tc-communities/communities/veterans/themes/image-text.scss

@@ -31,7 +31,13 @@
   h1 {
     @include h2;
 
-    color: white;
+    color: $white;
+
+    @include xxs-to-xs {
+      @include h3;
+
+      color: $white;
+    }
   }
 
   p {
@@ -45,8 +51,17 @@
       margin-bottom: 0;
     }
   }
+
+  @include xxs-to-xs {
+    padding: 25px 30px;
+    width: 100%;
+  }
 }
 
 .image {
   width: 49.1%;
+
+  @include xxs-to-xs {
+    width: 100%;
+  }
 }

src/shared/components/tc-communities/communities/veterans/themes/mixins.scss

@@ -15,22 +15,38 @@ $white: white;
   font: 300 42px/1.19 Roboto;
   margin-bottom: 10px;
   text-transform: uppercase;
+
+  @include xxs-to-xs {
+    font: 300 36px/1.25 Roboto;
+  }
 }
 
 @mixin h2 {
   color: $black;
   font: 300 36px/1.25 Roboto;
   margin-bottom: 10px;
+
+  @include xxs-to-xs {
+    font: 300 28px/1.25 Roboto;
+  }
 }
 
 @mixin h3 {
   color: $black;
   font: 300 28px/1.25 Roboto;
+
+  @include xxs-to-xs {
+    font: 300 20px/1.5 Roboto;
+  }
 }
 
 @mixin large-text {
   color: $black;
   font: 20px/1.25 Roboto;
+
+  @include xxs-to-xs {
+    font: 15px/1.67 Roboto;
+  }
 }
 
 @mixin regular-text {