refactor(app-team-landing): remove unused code, add breakpoints and styles for mobile

Author: PaulPaulDevelops

src/pages/app-team-landing/app-team-landing.scss

@@ -1,16 +1,12 @@
 // section - team-landing
 section.team-landing {
   font-family: 'Muli', sans-serif;
-  // hero
+
   .hero {
     background-position: top center;
     background-size: cover;
     height: 100vh;
 
-    @include media-breakpoint-down(sm) {
-      background-position: left top;
-    }
-
     .overlay {
       background-color: rgba(0, 0, 0, 0.5);
       position: absolute;
@@ -28,108 +24,90 @@ section.team-landing {
       font-size: 4rem;
       margin-bottom: 1rem;
       text-align: right;
+      
       @include media-breakpoint-down(lg) {
         font-size: 3rem;
       }
+      
       @include media-breakpoint-down(sm) {
         font-size: 2.2rem;
+        text-align: center;
       }
     }
+    
     h4 {
       color: $orange;
       margin-bottom: 3rem;
       text-align: right;
+      
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
     }
+
     p {
       color: $white;
       font-size: 1.2rem;
       font-weight: 300;
       margin-bottom: 3rem;
       text-align: right;
+      
       @include media-breakpoint-down(lg) {
         font-size: 1rem;
       }
-    }
-  }
 
-  .text-img-container {
-    margin-top: 6rem;
-    margin-bottom: 6rem;
-    h2 {
-      text-align: center;
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
     }
-    p {
-      padding: 2rem;
+
+    @include media-breakpoint-down(sm) {
+      background-position: left top;
     }
   }
 
-  .text-img-container {
+
+  .bio {
     display: grid;
+    grid-template-columns: 0.5fr 1fr;
+    padding: 4rem;
+
+    .text {
+      margin-left: 35px;
 
-    app-img {
-      align-self: center;
-      img {
-        object-fit: cover;
+      h2, h4 {
+        color: $orange;
+        text-align: left;
       }
-    }
 
-    &.right-side {
-      grid-template-columns: 0.5fr 1fr;
+      p {
+        text-align: left;
+        padding: 0;
+        margin-bottom: 1rem;
 
-      .text-img-container-text {
-        margin-left: 35px;
-        h2,
-        h4 {
+        &.check-link {
+          font-size: 26px;
           color: $orange;
-          text-align: left;
-        }
-        p {
-          text-align: left;
-          padding: 0;
-          margin-bottom: 1rem;
-          &.check-link {
-            font-size: 26px;
-            color: $orange;
-            margin-bottom: 0;
-          }
-        }
-
-        @include media-breakpoint-down(sm) {
-          text-align: center;
-
-          h2,
-          h4,
-          p {
-            text-align: center;
-          }
+          margin-bottom: 0;
         }
       }
 
       @include media-breakpoint-down(sm) {
-        grid-template-columns: none;
-      }
-    }
-    &.left-side {
-      grid-template-columns: 1fr 0.5fr;
+        margin-left: 0;
+        text-align: center;
 
-      .text-img-container-text {
-        margin-right: 10px;
-        h2 {
-          color: $orange;
-          text-align: right;
-        }
+        h2,
+        h4,
         p {
-          text-align: right;
-          padding: 0;
-          margin-bottom: 1rem;
-          &.check-link {
-            font-size: 26px;
-            color: $orange;
-            margin-bottom: 0;
-          }
+          text-align: center;
         }
       }
     }
+
+    @include media-breakpoint-down(sm) {
+      grid-template-columns: none;
+      padding: 2rem;
+    }
   }
 
   .skill-chip {
@@ -148,10 +126,6 @@ section.team-landing {
     background: linear-gradient(-160deg, #f99a2a 0%, #f9902a 100%);
     height: 114px;
 
-    @include media-breakpoint-down(sm) {
-      height: 140px;
-    }
-
     .cta-container {
       height: inherit;
       line-height: 2.5rem;
@@ -165,5 +139,9 @@ section.team-landing {
         margin-right: 2rem;
       }
     }
+
+    @include media-breakpoint-down(sm) {
+      height: 140px;
+    }
   }
 }

src/pages/app-team-landing/app-team-landing.tsx

@@ -461,29 +461,27 @@ export class AppTeamLanding {
                   </div>
                 </div>
               </header>,
-              <div class="container">
-                <section class="text-img-container right-side">
-                  <app-img
-                    class="img-fluid d-none d-md-inline"
-                    src={`/assets/team-landing-graphic-${
-                      this.data[this.match.params.member].team
-                    }-badge.png`}
-                    alt="Job Title Badge - Design, Development, Management"
-                  />
-                  <div class="text-img-container-text">
-                    <h2>
-                      <app-translate key="about.landing.container.title1" /> 
-                      &nbsp;{this.data[this.match.params.member].firstname}&nbsp; 
-                      <app-translate key="about.landing.container.title2" /> 
-                    </h2>
-                    <p>{this.data[this.match.params.member].bodyText}</p>
-                    <h4>
-                      <app-translate key="about.landing.container.skills" /> 
-                    </h4>
-                    {this.chips}
-                  </div>
-                </section>
-              </div>,
+              <section class="bio">
+                <app-img
+                  class="img-fluid d-none d-md-inline"
+                  src={`/assets/team-landing-graphic-${
+                    this.data[this.match.params.member].team
+                  }-badge.png`}
+                  alt="Job Title Badge - Design, Development, Management"
+                />
+                <div class="text">
+                  <h2>
+                    <app-translate key="about.landing.container.title1" /> 
+                    &nbsp;{this.data[this.match.params.member].firstname}&nbsp; 
+                    <app-translate key="about.landing.container.title2" /> 
+                  </h2>
+                  <p>{this.data[this.match.params.member].bodyText}</p>
+                  <h4>
+                    <app-translate key="about.landing.container.skills" /> 
+                  </h4>
+                  {this.chips}
+                </div>
+              </section>,
 
               <aside class="cta text-white">
                 <div class="cta-container d-flex flex-row justify-content-center">