Merge pull request #21884 from sftim/20200618_reduce_header_sizes_announcement

Reduce header height when announcement shown

assets/scss/_custom.scss

@@ -1,3 +1,5 @@
+$announcement-size-adjustment: 8px;
+
 /* GLOBAL */
 .td-main {
   .row {
@@ -391,3 +393,31 @@ main.content {
     }
   }
 }
+
+/* ANNOUNCEMENTS */
+section#fp-announcement ~ .header-hero {
+    padding: $announcement-size-adjustment  0;
+
+    > div {
+       margin-top: $announcement-size-adjustment;
+       margin-bottom: $announcement-size-adjustment;
+    }
+
+    h1, h2, h3, h4, h5 {
+      margin: $announcement-size-adjustment 0;
+    }
+}
+
+section#announcement ~ .header-hero {
+    padding: #{$announcement-size-adjustment / 2} 0;
+
+    > div {
+       margin-top: #{$announcement-size-adjustment / 2};
+       margin-bottom: #{$announcement-size-adjustment / 2};
+       padding-bottom: #{$announcement-size-adjustment / 2};
+    }
+
+    h1, h2, h3, h4, h5 {
+      margin: #{$announcement-size-adjustment / 2} 0;
+    }
+}

assets/scss/_tablet.scss

@@ -23,7 +23,7 @@ $main-nav-left-button-size: 50px;
 $main-nav-left-button-font-size: 18px;
 
 // hero
-$hero-padding-top: 136px;
+$hero-padding-top: 116px;
 $headline-wrapper-margin-bottom: 40px;
 $quickstart-button-padding: 0 50px;
 $vendor-strip-font-size: 16px;

static/css/announcement.css

@@ -21,7 +21,7 @@
 }
 
 #announcement {
-  padding-top: 125px;
+  padding-top: 105px;
   padding-bottom: 25px;
 }
 
@@ -29,11 +29,14 @@
   padding-top: 40px;
 }
 
-#fp-announcement {
+/* Extra announcement height only for landscape viewports */
-  min-height: 30vh;
+@media (min-aspect-ratio: 8/9) {
+  #fp-announcement {
+    min-height: 25vh;
+  }
 }
 
 #fp-announcement aside {
-  padding-top: 125px;
+  padding-top: 115px;
-  padding-bottom: 35px;
+  padding-bottom: 25px;
 }