Improve empty states

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.4.3"
+  "version": "0.4.4"
 }

partials/header.hbs

@@ -15,6 +15,10 @@ This header template is shared across all the pages.
       <a href="{{@site.url}}" class="m-logo in-mobile-topbar">
         <img src="{{@site.logo}}" alt="{{@site.title}}">
       </a>
+    {{else}}
+      <a href="{{@site.url}}" class="m-site-name in-mobile-topbar">
+        {{@site.title}}
+      </a>
     {{/if}}
     <button class="m-icon-button in-mobile-topbar js-open-search" aria-label="Open search">
       <span class="icon-search"></span>

partials/hero.hbs

@@ -25,11 +25,7 @@ for it, and apply those styles to the <header> tag.
   {{/contentFor}}
 
   <header class="m-hero with-picture" data-aos="fade">
-    {{#is "post"}}
-      <div class="m-hero__picture in-post"></div>
-    {{else}}
-      <div class="m-hero__picture"></div>
-    {{/is}}
+    <div class="m-hero__picture in-post {{#is "post"}}in-post{{/is}}"></div>
 {{else}}
-  <header class="m-hero" data-aos="fade">
+  <header class="m-hero no-picture {{#is "post"}}in-post{{/is}}" data-aos="fade">
 {{/if}}

partials/navigation.hbs

@@ -10,6 +10,12 @@ Also it includes the big submenu.
       <img src="{{@site.logo}}" alt="{{@site.title}}">
     </a>
   </li>
+  {{else}}
+  <li class="only-desktop" role="menuitem">
+    <a href="{{@site.url}}" class="m-site-name in-desktop-menu">
+      {{@site.title}}
+    </a>
+  </li>
   {{/if}}
   {{#foreach navigation}}
     <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}">
@@ -30,7 +36,11 @@ Also it includes the big submenu.
                 <div>
                   <a href="{{url}}" class="m-recent-article">
                     <div class="m-recent-article__picture">
+                      {{#if feature_image}}
                         <div style="background-image: url({{img_url feature_image size="m"}});"></div>
+                      {{else}}
+                        <div style="background-image: url({{asset "images/no-image.png"}});" class="no-image"></div>
+                      {{/if}}
                     </div>
                     <h3 class="m-recent-article__title">{{title}}</h3>
                     <span class="m-recent-article__date">{{date published_at timeago="true"}}</span>

post.hbs

@@ -18,10 +18,10 @@ into the {body} of the default.hbs template --}}
   
   <main>
     <article>
-      <div class="l-content">
+      <div class="l-content in-post">
         {{!-- Everything inside the #post tags pulls data from the post --}}
         {{#post}}
-        <div class="l-wrapper in-post js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
+        <div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
           {{#if @labs.subscribers}}
           <div class="l-post-content has-subscribe-form js-progress-content">
           {{else}}

src/js/app.js

@@ -95,7 +95,7 @@ $(document).ready(() => {
     if (typeof ghostSearchApiKey !== 'undefined') {
       getAllPosts(ghostHost, ghostSearchApiKey)
     } else {
-      $openSearch.remove()
+      $openSearch.css('visibility', 'hidden')
       $closeSearch.remove()
       $search.remove()
     }

src/sass/app.scss

@@ -24,6 +24,7 @@
 @import "components/header/header";
 @import "components/header/mobile-topbar";
 @import "components/header/logo";
+@import "components/header/site-name";
 @import "components/header/nav";
 @import "components/header/menu";
 @import "components/header/submenu";

src/sass/components/header/_recent-article.scss

@@ -35,9 +35,14 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
+    background-color: $light-blue;
     -webkit-backface-visibility: visible !important;
     backface-visibility: visible !important;
     @include transition(transform .5s cubic-bezier(0.165, 0.84, 0.44, 1));
+
+    &.no-image {
+      background-size: 64px 64px;
+    }
   }
 }
 

src/sass/components/header/_site-name.scss

@@ -0,0 +1,10 @@
+.m-site-name {
+  &.in-mobile-topbar {
+    color: $titles;
+    font-weight: 600;
+  }
+
+  &.in-desktop-menu {
+    font-weight: 700;
+  }
+}

src/sass/components/hero/_hero.scss

@@ -28,6 +28,10 @@
       color: $white;
     }
   }
+
+  &.no-picture.in-post {
+    display: none;
+  }
 }
 
 .m-hero__picture {

src/sass/layouts/_wrapper.scss

@@ -28,6 +28,14 @@
     @include respond-to('medium') {
       max-width: 960px;
     }
+
+    &.no-image {
+      padding-top: 40px;
+
+      @include respond-to('medium') {
+        padding-top: 80px;
+      }
+    }
   }
 
   &.in-comments {