Added support for announcement bar

src/assets/javascripts/components/header/_/index.ts

@@ -53,7 +53,7 @@ export function watchHeader(
 ): Observable<HeaderState> {
   return defer(() => {
     const sticky = getComputedStyle(el)
-      .getPropertyValue("position") === "fixed"
+      .getPropertyValue("position") === "sticky"
 
     /* Return header as hot observable */
     return of({

src/assets/stylesheets/layout/_base.scss

@@ -35,7 +35,7 @@ $md-toggle__drawer--checked:
 // Stretch container to viewport and set base font-size to 10px for simple
 // calculations base on relative ems (rems)
 html {
-  height: 100%;
+  min-height: 100%;
   // Hack: normally, we would set the base font-size to 62.5%, so we can base
   // all calculations on 10px, but Chromium and Chrome define a minimal font
   // size of 12 if the system language is set to Chinese. For this reason we
@@ -63,7 +63,7 @@ html {
 // Stretch body to container and leave room for footer
 body {
   position: relative;
-  height: 100%;
+  min-height: 100%;
   // Hack: reset font-size to 10px, so the spacing for all inline elements is
   // correct again. Otherwise the spacing would be based on 20px.
   font-size: 0.5rem; // stylelint-disable-line unit-whitelist
@@ -110,7 +110,6 @@ hr {
   display: table;
   width: 100%;
   height: 100%;
-  padding-top: px2rem(48px);
   table-layout: fixed;
 }
 

src/assets/stylesheets/layout/_header.scss

@@ -26,7 +26,7 @@
 
 // Application header (stays always on top)
 .md-header {
-  position: fixed;
+  position: sticky;
   top: 0;
   right: 0;
   left: 0;