#541171 [SXA] fixed styles for SXA initializer site (#1092)

Sitecore · Jul 6, 2022 · f661996 · f661996
1 parent ba02b84
commit f661996
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 16 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_container.scss
@@ -3,22 +3,45 @@
 
 * {
   font-family: Roboto;
+  color: $main-color;
 }
-h1 {
-  font-size: 36px;
-}
+
 .max-height {
-  .container {
-    margin-top: 60px;
+  &.container {
+    .rich-text {
+      h4 {
+        font-size: $text-size-24;
+        font-weight: 600;
+      }
+      h2 {
+        margin-top: 50px;
+        font-size: $text-size-36;
+        line-height: 43px;
+      }
+    }
   }
+
   position: relative;
-  min-height: calc(100vh - 388px);
+  min-height: calc(100vh - 347px);
   margin-bottom: 50px;
   padding-top: 50px;
 
   @include respond-to(all-mobile) {
     padding-top: 0;
     margin-bottom: 0;
-  }
 
+    &.container {
+      .rich-text {
+        h4 {
+          font-size: $text-size-16;
+          line-height: 32px;
+        }
+        h2 {
+          margin-top: 0;
+          font-size: $text-size-18;
+          line-height: 22px;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss
@@ -4,11 +4,15 @@
 footer {
   .rich-text {
     font-size: $text-size-14;
-    color: $text-white;
 
     a {
       color: $text-white;
     }
+    p {
+      span {
+        color: $text-white;
+      }
+    }
   }
 
   .indent-inner {

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss
@@ -29,11 +29,10 @@ header {
           text-align: center;
 
           h1 {
-            font-size: $text-size-24;
             font-weight: 600;
             line-height: 29px;
             padding-top: 0;
-            margin: 0;
+            margin-bottom: 10px;
           }
         }
       }

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss
@@ -36,8 +36,10 @@ $hamburger-margin: 18px;
     .level0, .level1 {
       >.navigation-title {
         >a {
+          color: $text-white;
           border-width: 0;
           font-size: $text-size-14;
+          font-weight: 400;
         }
       }
     }
@@ -75,8 +77,10 @@ $hamburger-margin: 18px;
         >.navigation-title {
           >a {
             font-size: $text-size-30;
-            color: $text-white;
             line-height: 90px;
+            >span {
+              color: $text-white;
+            }
           }
         }
       }

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss
@@ -29,7 +29,7 @@
         }
 
         .promo-text {
-          padding: 15px 10px 10px 25px;
+          padding: 15px 30px 10px 30px;
         }
       }
     }

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss
@@ -2,15 +2,14 @@
 @import "variables";
 
 .rich-text {
-  color: $text-gray;
   font-size: 16px;
-  
+
   h4 {
     line-height: 50px;
   }
 
   @include respond-to(all-mobile) {
-    padding: 15px 30px 10px 25px;
+    padding: 0 30px 10px 30px;
 
     h2 {
       font-size: $text-size-18;

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss
@@ -5,3 +5,5 @@ $text-size-24: 24px;
 $text-size-30: 30px;
 $text-size-36: 36px;
 $text-size-48: 48px;
+
+$main-color: #27272A;
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/main.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/main.scss
@@ -1,5 +1,5 @@
 @import "font-awesome/scss/font-awesome";
 @import "bootstrap/dist/css/bootstrap.css";
 @import "sass/main.scss";
-@import "basic/main.scss";
 @import "assets/app.css";
+@import "basic/main.scss";
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ @@
             }
             .promo-text {
-              padding: 15px 10px 10px 25px;
+              padding: 15px 30px 10px 30px;
             }
           }
         }
@@ Expand Down @@