Version 2.1.5

package.json

@@ -87,5 +87,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "2.1.3"
+  "version": "2.1.5"
 }

partials/header.hbs

@@ -2,8 +2,8 @@
 This header template is shared across all the pages.
 --}}
 
-<header class="m-header {{#if background}}with-picture{{/if}} js-header">
-  <div class="m-mobile-topbar" data-animate="fade-down">
+<header class="m-header {{#if background}}with-picture{{/if}} js-header"  data-animate="fade-down">
+  <div class="m-mobile-topbar">
     <button class="m-icon-button in-mobile-topbar js-open-menu" aria-label="{{t "Open menu"}}">
       <span class="icon-menu" aria-hidden="true"></span>
     </button>
@@ -28,7 +28,7 @@ This header template is shared across all the pages.
     <button class="m-icon-button outlined as-close-menu js-close-menu" aria-label="{{t "Close menu"}}">
       <span class="icon-close"></span>
     </button>
-    <div class="m-menu__main" data-animate="fade-down">
+    <div class="m-menu__main">
       <div class="l-wrapper">
         <div class="m-nav js-main-nav">
           <nav class="m-nav__left js-main-nav-left" role="navigation" aria-label="{{t "Main menu"}}">

src/docker-compose.yml

@@ -2,7 +2,7 @@ version: "3"
 
 services:
   ghost:
-    image: ghost:5.33.8
+    image: ghost:5.49.0
     container_name: ghost
     volumes:
       - ./..:/var/lib/ghost/content/themes/liebling:Z

src/js/app.js

@@ -18,6 +18,7 @@ $(() => {
 
   const $body = $('body');
   const $header = $('.js-header');
+  const $announcementBar = $('#announcement-bar-root');
   const $openMenu = $('.js-open-menu');
   const $closeMenu = $('.js-close-menu');
   const $menu = $('.js-menu');
@@ -264,6 +265,28 @@ $(() => {
     headroom.init();
   }
 
+  if ($announcementBar.length > 0) {
+    $announcementBar.detach().prependTo($header);
+    $header.addClass('with-announcement-bar');
+
+    setTimeout(() => {
+      $body.css('padding-top', $announcementBar.height());
+      $header.removeAttr('data-animate');
+    }, 500);
+
+    const barObserver = new MutationObserver((e) => {
+      if (e[0].removedNodes.length) {
+        $body.css('padding-top', 0);
+      }
+    })
+
+    barObserver.observe($announcementBar[0], { childList: true });
+  } else {
+    setTimeout(() => {
+      $header.removeAttr('data-animate');
+    }, 500);
+  }
+
   if ($recentSlider.length > 0) {
     const recentSwiper = new Swiper('.js-recent-slider', {
       modules: [FreeMode, A11y],

src/sass/app.scss

@@ -29,6 +29,7 @@
 @import "components/header/recent-article";
 @import "components/header/tags";
 @import "components/header/toggle-darkmode";
+@import "components/header/announcement-bar";
 @import "components/hero/hero";
 @import "components/hero/avatar";
 @import "components/hero/title";

src/sass/common/_global.scss

@@ -13,6 +13,7 @@ body {
   background-color: var(--background-color);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  @include transition(padding-top linear 0.2s);
 
   &.share-menu-displayed {
     padding-bottom: 45px;

src/sass/components/header/_announcement-bar.scss

@@ -0,0 +1,11 @@
+div.gh-announcement-bar {
+  line-height: 1.3;
+  font-size: 1rem;
+  padding: 16px 48px;
+  min-height: auto;
+  z-index: auto;
+
+  @include respond-to("medium") {
+    font-size: 1.125rem;
+  }
+}

src/sass/components/header/_header.scss

@@ -4,14 +4,26 @@
   left: 0;
   width: 100%;
   z-index: 4;
-  background-color: var(--background-color);
   will-change: transform;
+  background-color: var(--background-color);
   @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
 
   @include respond-to('medium') {
     padding: 15px 0;
   }
 
+  &.with-announcement-bar {
+    @include respond-to('medium') {
+      padding: 0;
+    }
+
+    .m-menu {
+      @include respond-to('medium') {
+        padding: 15px 0;
+      }
+    }
+  }
+
   &.mobile-menu-opened {
     height: 100%;
 

src/sass/components/header/_logo.scss

@@ -1,6 +1,6 @@
 .m-logo {
   display: inline-block;
-  height: 25px;
+  height: 32px;
 
   img {
     width: auto;
@@ -18,7 +18,6 @@
   }
 
   &.in-mobile-topbar {
-    height: 20px;
     margin: 0 $mobile-space;
   }
 }