style(about-page): updates to responsive for screen sizes

Author: PottertheJavaOtter

src/assets/i18n/en.ts

@@ -56,11 +56,13 @@ export const translations = {
 
     about: {
       header: {
-        title: 'We Are Passionate About Technology & Design',
+        title: 'We Are Passionate About Technology and Design',
+        titleSmall: 'We Are Passionate About Technology & Design',
         text: "We believe that your success is our success. We're here to challenge your assumptions and help you discover your web or mobile applications full potential.",
         action: 'LEARN MORE',
       },
       mission: {
+        title: 'Our Mission',
         statement: 'Our mission is to forge a bond between people and technology through digital experiences.',
       },
       values: {

src/pages/app-about/app-about.scss

@@ -1,20 +1,50 @@
 .about {
   font-family: 'Muli', sans-serif;
+  height: 100%;
   overflow-x: hidden;
-
+  .container {
+    @include media-breakpoint-down(sm) {
+      padding: 0 2rem;
+    }
+    padding: 0;
+  }
   .hero {
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(lg) {
       background-position: right bottom;
     }
+    @include media-breakpoint-down(md) {
+      background-size: 80% 80%;
+      width: calc(100% + 4rem);
+    }
+    @include media-breakpoint-down(sm) {
+      background-size: auto;
+      width: calc(100% + 2rem);
+    }
     background: url('/assets/svg/about-graphic-header.svg') right top no-repeat;
+    background-size: auto;
+    height: 100%;
 
     .row {
       @include media-breakpoint-down(md) {
-        height: 780px;
+        padding: 0 0 50px;
+      }
+      @include media-breakpoint-down(sm) {
+        padding: 0 0 150px;
       }
       height: 700px;
 
       p {
+        @include media-breakpoint-down(md) {
+          width: 320px;
+        }
+        @include media-breakpoint-down(sm) {
+          letter-spacing: 0.5px;
+          line-height: 32px;
+          margin: 0 0 1rem;
+          text-align: left;
+          width: 263px;
+        }
+
         color: $gray-brown;
         font-size: 1rem;
         font-weight: 400;
@@ -25,24 +55,58 @@
       }
 
       h1 {
+        @include media-breakpoint-down(md) {
+          font-size: 2.625rem;
+          letter-spacing: 2.1px;
+          line-height: 47px;
+          width: 421px;
+        }
+        @include media-breakpoint-down(sm) {
+          font-size: 1.75rem;
+          letter-spacing: 1.05px;
+          line-height: 34px;
+          margin: 0 0 1rem;
+          width: 278px;
+        }
+
         font-size: 3rem;
         font-weight: 600;
         letter-spacing: 1.6px;
         line-height: 58px;
         margin: 0 0 2rem;
-        width: 632px;
+        max-width: 632px;
       }
 
-      .text-container {
+      button {
         @include media-breakpoint-down(md) {
-          margin-bottom: 10rem;
+          display: none;
+        }
+      }
+
+      .text-container {
+        @include media-breakpoint-down(sm) {
+          margin-bottom: 2rem;
+        }
+      }
+
+      .title {
+        @include media-breakpoint-down(sm) {
+          display: none;
         }
       }
+
+      .title-small {
+        @include media-breakpoint-down(sm) {
+          display: block;
+        }
+        display: none;
+      }
     }
   }
 
   .team-photo {
     @include media-breakpoint-down(sm) {
+      margin: 0;
       min-height: 240px;
     }
     background-image: url('/assets/about-photo-team.jpg');
@@ -69,17 +133,30 @@
     }
     background: linear-gradient(-160deg, #f99a2a 0%, #f9902a 100%);
     display: none;
-    height: 100px;
+    height: 100%;
+
+    h1 {
+      font-size: 1rem;
+      font-weight: 700;
+      letter-spacing: 1.02px;
+      line-height: 19px;
+      margin: 1rem 0;
+    }
 
     p {
-      line-height: 24px;
-      margin: 0;
+      font-size: 0.8125rem;
+      font-weight: 400;
+      line-height: 22px;
+      margin: 0 0 2rem;
     }
   }
 
   .values,
   .members {
     padding: 3rem 0;
+    .container {
+      padding: 0 0.5rem;
+    }
 
     h2 {
       font-size: 2.625rem;
@@ -91,6 +168,12 @@
     }
 
     p {
+      @include media-breakpoint-down(sm) {
+        font-size: 1rem;
+        margin: 0 auto;
+        text-align: center;
+        width: 85%;
+      }
       color: $gray-dark;
       font-size: 1.125rem;
       font-weight: 400;
@@ -122,6 +205,24 @@
     }
   }
 
+  .values {
+    h2 {
+      @include media-breakpoint-down(sm) {
+        font-size: 1.5rem;
+        margin: 0 0 1rem;
+      }
+    }
+  }
+
+  .members {
+    h2 {
+      @include media-breakpoint-down(sm) {
+        font-size: 2rem;
+        margin: 0;
+      }
+    }
+  }
+
   .value-text {
     color: $gray-dark;
     font-size: 1.5rem;

src/pages/app-about/app-about.tsx

@@ -214,7 +214,8 @@ export class AppAbout {
             <div class="row align-items-center">
               <div class="col-md-8 col-sm-10 text-container">
                 <h1>
-                  <app-translate keyword="about.header.title" />
+                  <app-translate class="title" keyword="about.header.title" />
+                  <app-translate class="title-small" keyword="about.header.titleSmall" />
                 </h1>
                 <p>
                   <app-translate keyword="about.header.text" />
@@ -240,7 +241,10 @@ export class AppAbout {
 
         {/* section - mission statement */}
         <section id="mission-statement" class="mission-statement">
-          <div class="mission-statement d-flex text-center">
+          <div class="mission-statement d-flex flex-column text-center">
+            <h1 class="text-white">
+              <app-translate keyword="about.mission.title" />
+            </h1>
             <p class="text-white align-self-center">
               <app-translate keyword="about.mission.statement" />
             </p>