#545161: [SXA] fixed styles for Basic Site

Sitecore · Aug 18, 2022 · f5778bc · f5778bc
1 parent eeeeaba
commit f5778bc
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 94 deletions.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_component.scss
@@ -1,27 +1,12 @@
-.not-empty-placholder {
-  .row {
-    height: 100%;
-  }
-  .sc-jss-empty-placeholder {
-    > div {
-      background: transparent;
-      height: 100%;
-      margin: 0;
-    }
-    > span {
-      display: none;
-    }
-  }
-}
 .component-content {
-  @include respond-to(all-mobile) {
+  @include respond-to(mobile-large) {
     .row {
       padding: 0;
       margin: 0;
     }
   }
 }
-@include respond-to(all-mobile) {
+@include respond-to(mobile-large) {
   .row {
     margin: 0;
     padding: 0;

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
@@ -6,72 +6,94 @@ body {
   color: $main-color;
 }
 
-/**** START STYLE MAX HEIGHT ****/
-.prod-mode {
-  &#wrapper {
-    height: 100vh;
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1250px;
   }
 }
 
+/**** START STYLE MAX HEIGHT ****/
 .prod-mode {
-  &#wrapper {
-    display: flex;
-    flex-direction: column;
-
-    main {
-      flex: 1 0 auto;
-    }
-
-    footer {
-      flex-shrink: 0;
-    }
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  main {
+    flex: 1 0 auto;
+  }
+
+  footer {
+    flex-shrink: 0;
   }
 }
 /**** END STYLE MAX HEIGHT ****/
 
 main {
-  .rich-text {
+  .main-header {
+    margin-top: 55px;
+
     h4 {
-      font-size: $text-size-24;
-      font-weight: 600;
-      line-height: 50px;
+      font-size: $text-size-50;
+      font-weight: 500;
+      line-height: 70px;
     }
+  }
+
+  .main-news-header {
+    margin-top: 60px;
 
     h2 {
-      margin-top: 50px;
       font-size: $text-size-36;
       line-height: 43px;
     }
   }
 
-  .cover-background {
-    padding-top: 50px;
-    @include respond-to(all-mobile) {
+  .banner-background {
+    padding-top: 30px;
+
+    @include respond-to(mobile-large) {
       padding-top: 0;
-      padding-bottom: 20px;
+      padding-bottom: 0;
     }
-    > .component-content {
+    > .component-content .row {
       height: 800px;
-      background-position: center;
-      background-repeat: no-repeat;
+      overflow: hidden;
+      position: relative;
+
+      img {
+        position: absolute;
+        top: -50%;
+      }
     }
   }
 
-  @include respond-to(all-mobile) {
+  @include respond-to(mobile-large) {
     padding-top: 0;
     margin-bottom: 0;
 
-    .cover-background {
-      > .component-content {
+    .banner-background {
+      > .component-content .row {
         height: 300px;
+
+        img {
+          max-width: 120%;
+          top: 0;
+        }
       }
     }
 
-    .rich-text {
+    .main-header {
+      margin-top: 10px;
+
       h4 {
-        font-size: $text-size-16;
+        font-size: $text-size-24;
         line-height: 32px;
       }
+    }
+    .main-news-header {
+      padding-bottom: 35px;
+
       h2 {
         margin-top: 0;
         font-size: $text-size-18;

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
@@ -3,24 +3,29 @@
 
 .prod-mode {
   #footer {
-    padding-top: 30px;
+    padding-top: 80px;
+
+    @include respond-to(mobile-large) {
+      padding-top: 0;
+    }
   }
 }
 
 footer {
-  @include respond-to(all-mobile) {
+  @include respond-to(mobile-large) {
     padding-top: 0;
   }
   .container-dark-background {
     background-color: #262626;
   }
 
-  .rich-text {
+  .contacts {
     font-size: $text-size-14;
 
     a {
       color: $text-white;
     }
+
     p {
       span {
         color: $text-white;
@@ -31,7 +36,7 @@ footer {
   .indent-inner {
     padding: 65px;
 
-    @include respond-to(all-mobile) {
+    @include respond-to(mobile-large) {
       padding: 40px 0;
     }
   }

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
@@ -6,13 +6,17 @@
   #header {
     display: flex;
     flex-direction: column;
-    padding-bottom: 50px;
+
+    @include respond-to(mobile-large) {
+      padding-bottom: 0;
+      flex-direction: column-reverse;
+    }
   }
 }
 
 header {
   #header {
-    .rich-text {
+    .title {
       padding-left: 50px;
 
       h1 {
@@ -24,14 +28,15 @@ header {
       }
     }
 
-    @include respond-to(all-mobile) {
+    @include respond-to(mobile-large) {
       padding-bottom: 0;
       padding-top: 0;
       flex-direction: column-reverse;
 
-      .rich-text {
+      .title {
         padding-left: 0;
         text-align: center;
+        margin-top: -5px;
 
         h1 {
           font-weight: 500;

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
@@ -1,7 +1,7 @@
 @import "@sass/abstracts/vars";
 @import "variables";
 
-$hamburger-width: 30px;
+$hamburger-width: 28px;
 $hamburger-height: 18px;
 $border-size: 6px;
 $hamburger-margin: 18px;
@@ -21,14 +21,14 @@ $hamburger-margin: 18px;
     display: none;
   }
 
-  @include respond-to(all-mobile) {
+  @include respond-to(mobile-large) {
     padding-right: 0;
   }
 
   .component-content {
     display: inline-block;
 
-    @include respond-to(all-mobile) {
+    @include respond-to(mobile-large) {
       display: none;
     }
 
@@ -50,7 +50,7 @@ $hamburger-margin: 18px;
     }
   }
 
-  @include respond-to(all-mobile) {
+  @include respond-to(mobile-large) {
     .component-content {
       display: none;
       position: fixed;
@@ -98,8 +98,8 @@ $hamburger-margin: 18px;
         position: absolute;
         right: $hamburger-margin;
         top: $hamburger-margin;
-        height: 30px;
-        width: 30px;
+        height: $hamburger-width;
+        width: $hamburger-width;
         opacity: 0;
 
         &:checked ~ {

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
@@ -3,33 +3,47 @@
 /**PROMO**/
 
 .promo {
-  &.promo-no-border {
+  &.main-promo-no-border {
     padding-left: 0;
     padding-right: 0;
+    padding-bottom: 0;
 
     >.component-content {
       border: 0;
+      max-width: 583px;
+
+      > div {
+        padding-bottom: 0;
+      }
+
+      @include respond-to(mobile-large) {
+        max-width: 100%;
+      }
 
       .promo-text {
         .field-promotext {
           font-size: 14px;
 
           h3 {
-            font-size: 18px;
-            margin: 10px 0;
+            font-size: $text-size-18;
+            margin: 15px 0;
+
+            @include respond-to(mobile-large) {
+              margin: 10px 0;
+            }
           }
           p {
             margin: 10px 0;
           }
         }
       }
-      @include respond-to(all-mobile) {
+      @include respond-to(mobile-large) {
         > div {
           padding: 0;
         }
 
         .promo-text {
-          padding: 15px 30px 10px 30px;
+          padding: 15px 30px 5px 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,31 +2,10 @@
 @import "variables";
 
 .rich-text {
-  font-size: 16px;
+  font-size: $text-size-16;
 
-  h4 {
-    line-height: 50px;
-  }
-
-  @include respond-to(all-mobile) {
+  @include respond-to(mobile-large) {
     padding: 0 30px 10px 30px;
-
-    h2 {
-      font-size: $text-size-18;
-    }
-
-    h4 {
-      font-size: $text-size-18;
-      line-height: 35px;
-      font-weight: 600;
-    }
-
-    h6 {
-      font-size: $text-size-14;
-      strong {
-        font-weight: normal;
-        line-height: 24px;
-      }
-    }
+    font-size: $text-size-14;
   }
 }
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,5 +5,6 @@ $text-size-24: 24px;
 $text-size-30: 30px;
 $text-size-36: 36px;
 $text-size-48: 48px;
+$text-size-50: 50px;
 
 $main-color: #27272A;
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_mixins.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/sass/abstracts/_mixins.scss
@@ -2,10 +2,10 @@
 
 /* breakpoints */
 
-$break-desktop: 960px;
+$break-desktop: 1100px;
 $break-mobile: 380px;
 $break-mobile-horizontal: 640px;
-$break-mobile-large: 786px;
+$break-mobile-large: 992px;
 @mixin wrapper() {
     max-width: 960px;
     margin: 0 auto !important;