fix: landing and header

assets/sass/alert.scss

@@ -4,7 +4,6 @@
     color: white;
     border-radius: 3px;
     padding: 1rem 2rem;
-    margin: 1rem 0;
 
     width: 100%;
 

assets/sass/article.scss

@@ -14,6 +14,7 @@
     display: flex;
     background-color: rgba(0, 0, 0, 0.2);
     margin-bottom: 1rem;
+    border-radius: 3px;
 
     .article__image {
         display: block;

assets/sass/carousel.scss

@@ -338,12 +338,6 @@ $height: 30rem;
             padding-top: 1rem;
         }
 
-        .slide-content {
-            .page-container {
-                padding: 0 1.5rem;
-            }
-        }
-
         .slide-image {
             height: 20rem;
             img {

assets/sass/footer.scss

@@ -6,8 +6,6 @@ body {
     min-height: 100%;
     display: flex;
     flex-direction: column;
-
-    overflow-x: hidden;
 }
 
 .footer-push {

assets/sass/general.scss

@@ -4,7 +4,6 @@
     font-family: 'Bona Nova', serif;
 }
 
-
 body {
     // font-family: 'Trebuchet MS', Tahoma,sans-serif;
     // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

assets/sass/header.scss

@@ -1,3 +1,7 @@
+.after-header {
+    overflow-x: hidden;
+}
+
 $header-height: 6rem;
 
 .site-header {
@@ -6,6 +10,7 @@ $header-height: 6rem;
     height: $header-height;
 
     position: sticky;
+    // pay attention to not have overflow-x: hidden on one of the parent
     top: 0;
     z-index: 90;
 }
@@ -65,11 +70,12 @@ $header-height: 6rem;
     }
 }
 
+$burger-menu-size: 4rem;
 
 .burger-menu {
     display: none;
-    height: 5rem;
+    height: $burger-menu-size;
-    width: 5rem;
+    width: $burger-menu-size;
     position: relative;
     bottom: -50%;
     margin-right: 2em;
@@ -84,11 +90,11 @@ $header-height: 6rem;
         display: block;
         min-width: initial;
         background-color: white;
-        height: 5rem;
+        height: $burger-menu-size;
-        width: 5rem;
+        width: $burger-menu-size;
         padding: 1rem 1rem;
         border-radius: 50%;
-        box-shadow: 0 0rem 3.5rem rgba(0, 0, 0, 0.4);
+        box-shadow: 0 0rem ($burger-menu-size - 2rem) rgba(0, 0, 0, 0.5);
         text-align: center; 
         cursor: pointer;
         z-index: 1200;
@@ -97,8 +103,8 @@ $header-height: 6rem;
 
     .background {
         position: absolute;
-        height: 4rem;
+        height: $burger-menu-size - 1rem;
-        width: 4rem;
+        width: $burger-menu-size - 1rem;
         margin: .5rem;
         border-radius: 50%;
         background-image: radial-gradient($background, black);
@@ -176,7 +182,7 @@ $header-height: 6rem;
     .icon,
     .icon::before,
     .icon::after {
-        width: 3rem;
+        width: $burger-menu-size - 1.6rem;
         height: 2px;
         background-color: gray;
         display: inline-block;

assets/sass/landing.scss

@@ -1,6 +1,6 @@
 .cover__container {
     position: relative;
-    min-height: 50rem;
+    min-height: 40rem;
 }
 
 .cover__back {
@@ -11,7 +11,7 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position-x: center;
-    background-position-y: center;
+    background-position-y: 0;
     z-index: 1;
 
     // to center the video
@@ -345,6 +345,10 @@
 }
 
 @media (max-width: $md-breakpoint) {
+    .cover__back {
+        background-position-y: 0;
+    }
+
     .history-container {
     }
 
@@ -353,3 +357,20 @@
     }
 }
 
+@media (min-width: $md-breakpoint) {
+    .cover__back {
+        background-position-y: -5em;
+    }
+}
+
+@media (min-width: $lg-breakpoint) {
+    .cover__back {
+        background-position-y: -10em;
+    }
+}
+
+@media (min-width: $xl-breakpoint) {
+    .cover__back {
+        background-position-y: -15em;
+    }
+}

assets/sass/page_container.scss

@@ -39,12 +39,24 @@
 @media (max-width: $sm-breakpoint) {
     .page-container {
         width: 100%;
-        padding-left: .8rem;
+        padding-left: 2rem;
-        padding-right: .8rem;
+        padding-right: 2rem;
     }
     .page-full {
-        padding-left: .8rem;
+        padding-left: 2rem;
-        padding-right: .8rem;
+        padding-right: 2rem;
+    }
+}
+
+@media (max-width: $xs-breakpoint) {
+    .page-container {
+        width: 100%;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    .page-full {
+        padding-left: 1rem;
+        padding-right: 1rem;
     }
 }
 

layouts/_default/baseof.html

@@ -11,8 +11,10 @@
         {{ if or (not (isset .Params "with_header")) .Params.with_header }}
             {{ partial "header" . }}
         {{ end }}
+        <div class="after-header">
         {{ block "main" . }}{{ end }}
         </div>
+    </div>
     {{ if or (not (isset .Params "with_footer")) .Params.with_footer }}
         {{ partial "footer" . }}
     {{ end }}