From 8dc0106ac34bff782a9b36bc50547cf3a9f2f7cf Mon Sep 17 00:00:00 2001
From: Tim Bannister <tim@scalefactory.com>
Date: Thu, 18 Jun 2020 13:10:24 +0100
Subject: [PATCH] Reduce header height when announcement shown

If there's an announcement showing, adjust the page header to use less
vertical space.

Also reduce the height of the announcement itself.
---
 assets/scss/_custom.scss    | 32 +++++++++++++++++++++++++++++++-
 assets/scss/_tablet.scss    |  2 +-
 static/css/announcement.css | 13 ++++++++-----
 3 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
index 1921e19067..cbba337409 100644
--- a/assets/scss/_custom.scss
+++ b/assets/scss/_custom.scss
@@ -1,3 +1,5 @@
+$announcement-size-adjustment: 8px;
+
 /* GLOBAL */
 .td-main {
   .row {
@@ -382,4 +384,32 @@ main.content {
       }
     }
   }
-}
\ No newline at end of file
+}
+
+/* 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;
+    }
+}
diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss
index 54ead8319c..2ab381a813 100644
--- a/assets/scss/_tablet.scss
+++ b/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;
diff --git a/static/css/announcement.css b/static/css/announcement.css
index 96d1065133..9b15f9407a 100644
--- a/static/css/announcement.css
+++ b/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 {
-  min-height: 30vh;
+/* Extra announcement height only for landscape viewports */
+@media (min-aspect-ratio: 8/9) {
+  #fp-announcement {
+    min-height: 25vh;
+  }
 }
 
 #fp-announcement aside {
-  padding-top: 125px;
-  padding-bottom: 35px;
+  padding-top: 115px;
+  padding-bottom: 25px;
 }