[SXA] #539379 check and fix comments from Rob (#1070)

(cherry picked from commit 618161c)

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_about.scss

@@ -0,0 +1,18 @@
+@import "variables";
+
+.about-page {
+  padding-bottom: 20px;
+
+  .title {
+    display: block;
+    font-size:$text-size-36;
+    font-weight: 600;
+    line-height: 72px;
+  }
+  .text {
+    display: block;
+    font-size: $text-size-16;
+    font-weight: 500;
+    line-height: 32px;
+  }
+}

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_common.scss

@@ -1,8 +1,75 @@
+@import "@sass/abstracts/mixins";
+@import "variables";
+
 * {
   font-family: Roboto;
 }
 
 main {
   position: relative;
-  min-height: calc(100vh - 333px);
+  min-height: calc(100vh - 352px);
+  margin-bottom: 50px;
+  padding-top: 50px;
+
+  @include respond-to(all-mobile) {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+
+  #container {
+    margin-top: 60px;
+  }
+
+  .rich-text {
+    .main-header {
+      margin-bottom: 30px;
+
+      @include respond-to(all-mobile) {
+        margin-bottom: 0px;
+      }
+
+      .title {
+        font-size: $text-size-24;
+        font-weight: 500;
+        line-height: 50px;
+        margin-bottom: 30px;
+
+        @include respond-to(all-mobile) {
+          font-size: $text-size-16;
+          line-height: 32px;
+        }
+      }
+    }
+  }
+
+  .main-news {
+    padding-top: 50px;
+
+    @include respond-to(all-mobile) {
+      padding-top: 0;
+    }
+
+    .title {
+      display: block;
+      font-size: $text-size-36;
+      font-weight: 500;
+      line-height: 62px;
+
+      @include respond-to(all-mobile) {
+        font-size: $text-size-18;
+        line-height: 22px;
+      }
+    }
+
+    .text {
+      font-size: $text-size-16;
+      font-weight: 500;
+
+      @include respond-to(all-mobile) {
+        font-size: $text-size-14;
+        line-height: 24px;
+        font-weight: 400;
+      }
+    }
+  }
 }

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss

@@ -1,12 +1,13 @@
 @import "@sass/abstracts/mixins";
+@import "variables";
 
 footer {
     position: absolute;
     width: 100%;
     height: 231px;
 
   .rich-text {
-    font-size: 14px;
+    font-size: $text-size-14;
     color: $text-white;
   }
 

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss

@@ -1,37 +1,41 @@
 @import "@sass/abstracts/vars/colors";
 @import "@sass/abstracts/mixins";
+@import "variables";
 
 header {
   .container {
     .row {
       display: flex;
       flex-direction: column;
-      padding-top: 10px;
 
+      .rich-text {
+        padding-left: 50px;
+
+        h1 {
+          font-size: $text-size-24;
+          font-weight: 500;
+          line-height: 18px;
+          padding-top: 40px;
+          margin: 0;
+        }
+      }
+
       @include respond-to(all-mobile) {
         padding-top: 0;
         flex-direction: column-reverse;
-      }
-    }
-  }
 
-  .title {
-    padding-left: 50px;
-
-    @include respond-to(all-mobile) {
-      padding-left: 0;
-    }
-
-    .field-title {
-      @include respond-to(all-mobile) {
-        text-align: center;
-      }
-      a {
-        font-size: 24px;
-        font-weight: bold;
-        border: none;
-        margin-bottom: 0;
-        color: $bg-black;
+        .rich-text {
+          padding-left: 0;
+          text-align: center;
+
+          h1 {
+            font-size: $text-size-24;
+            font-weight: 600;
+            line-height: 29px;
+            padding-top: 0;
+            margin: 0;
+          }
+        }
       }
     }
   }

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss

@@ -1,13 +1,15 @@
 @import "@sass/abstracts/vars";
+@import "variables";
 
 $hamburger-width: 30px;
 $hamburger-height: 18px;
 $border-size: 6px;
-$hamburger-margin: 1.5rem;
+$hamburger-margin: 18px;
 
 .navigation.navigation-horizontal {
   width: 100%;
-  padding-right: 50px;
+  padding-right: 70px;
+  margin-top: -15px;
 
   .menu-mobile-navigate {
     display: none;
@@ -23,6 +25,22 @@ $hamburger-margin: 1.5rem;
     @include respond-to(all-mobile) {
       display: none;
     }
+
+    ul.clearfix {
+      list-style: none;
+    }
+    .level0 {
+      display: flex;
+    }
+
+    .level0, .level1 {
+      >.navigation-title {
+        >a {
+          border-width: 0;
+          font-size: $text-size-14;
+        }
+      }
+    }
   }
 
   @include respond-to(all-mobile) {
@@ -47,15 +65,19 @@ $hamburger-margin: 1.5rem;
           display: block;
         }
       }
-
+      
       ul {
         margin: 0;
         padding: 0;
+      }
 
-        a {
-          font-size: 30px;
-          color: $text-white;
-          line-height: 90px;
+      .level0, .level1 {
+        >.navigation-title {
+          >a {
+            font-size: $text-size-30;
+            color: $text-white;
+            line-height: 90px;
+          }
         }
       }
     }
@@ -67,8 +89,8 @@ $hamburger-margin: 1.5rem;
         display: inline-block;
         z-index: 2;
         position: absolute;
-        right: 1.5rem;
-        top: 1rem;
+        right: $hamburger-margin;
+        top: $hamburger-margin;
         height: 30px;
         width: 30px;
         opacity: 0;
@@ -78,12 +100,12 @@ $hamburger-margin: 1.5rem;
             &::before {
               content: "\00d7";
               color: $text-basic-active;
-              font-size: 48px;
+              font-size: $text-size-48;
               position: absolute;
               top: 0;
               right: 0;
-              margin-top: 2rem;
-              margin-right: 1.5rem;
+              margin-top: calc($hamburger-margin + ($hamburger-margin / 2));
+              margin-right: $hamburger-margin;
               line-height: 0;
               border: 0;
             }
@@ -101,7 +123,7 @@ $hamburger-margin: 1.5rem;
           width: $hamburger-width;
           height: $hamburger-height;
           margin-right: $hamburger-margin;
-          margin-top: $hamburger-margin;
+          margin-top: calc($hamburger-margin + ($hamburger-margin / 2)) + 8px;
           display: block;
           border-top: 6px solid $bg-black;
           border-bottom: 6px solid $bg-black;
@@ -112,20 +134,4 @@ $hamburger-margin: 1.5rem;
       }
     }
   }
-
-  ul.clearfix {
-    list-style: none;
-  }
-  .level0 {
-    display: flex;
-  }
-
-  .level0, .level1 {
-    >.navigation-title {
-      >a {
-        border-width: 0;
-        font-size: 14px;
-      }
-    }
-  }
 }

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss

@@ -18,6 +18,14 @@
           padding: 15px 10px 10px 25px;
         }
       }
+
+      .promo-text {
+        .field-promotext {
+          p {
+            margin: 10px 0;
+          }
+        }
+      }
     }
   }
 }

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss

@@ -1,22 +1,23 @@
 @import "@sass/abstracts/vars";
+@import "variables";
 
 .rich-text {
   color: $text-gray;
   @include respond-to(all-mobile) {
     padding: 15px 10px 10px 25px;
 
     h2 {
-      font-size: 18px;
+      font-size: $text-size-18;
     }
 
     h4 {
-      font-size: 18px;
+      font-size: $text-size-18;
       line-height: 35px;
       font-weight: 600;
     }
 
     h6 {
-      font-size: 14px;
+      font-size: $text-size-14;
       strong {
         font-weight: normal;
         line-height: 24px;

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss

@@ -0,0 +1,7 @@
+$text-size-14: 14px;
+$text-size-16: 16px;
+$text-size-18: 18px;
+$text-size-24: 24px;
+$text-size-30: 30px;
+$text-size-36: 36px;
+$text-size-48: 48px;

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss

@@ -5,3 +5,6 @@
 @import "component";
 @import "rich-text";
 @import "footer";
+
+/**pages**/
+@import "about";