Added support for announcement bar

material/assets/stylesheets/app.css

@@ -378,13 +378,13 @@ kbd {
       overflow: hidden; }
 
 html {
-  height: 100%;
+  min-height: 100%;
   font-size: 125%;
   overflow-x: hidden; }
 
 body {
   position: relative;
-  height: 100%;
+  min-height: 100%;
   font-size: 0.5rem; }
 
 hr {
@@ -406,7 +406,6 @@ hr {
   display: table;
   width: 100%;
   height: 100%;
-  padding-top: 2.4rem;
   table-layout: fixed; }
 
 .md-main {
@@ -563,7 +562,8 @@ hr {
     color: rgba(0, 0, 0, 0.26); }
 
 .md-header {
-  position: fixed;
+  position: -webkit-sticky;
+  position: sticky;
   top: 0;
   right: 0;
   left: 0;

material/base.html

@@ -95,6 +95,11 @@
         {{ lang.t('skip.link.title') }}
       </a>
     {% endif %}
+    {% if self.announcement() %}
+      <div class="md-announcement" data-md-component="announcement">
+        {% block announcement %}{% endblock %}
+      </div>
+    {% endif %}
     {% block header %}
       {% include "partials/header.html" %}
     {% endblock %}

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;