From 18a7f8db6379d28eaa2604975ab4fd8f0065a05c Mon Sep 17 00:00:00 2001
From: Eduardo Gomez <eduardo@newsadoo.com>
Date: Thu, 3 Oct 2019 17:07:33 +0200
Subject: [PATCH] Improve empty states

---
 assets/images/no-image.png                      | Bin 0 -> 2884 bytes
 package.json                                    |   2 +-
 partials/header.hbs                             |   4 ++++
 partials/hero.hbs                               |   8 ++------
 partials/navigation.hbs                         |  12 +++++++++++-
 post.hbs                                        |   4 ++--
 src/js/app.js                                   |   2 +-
 src/sass/app.scss                               |   1 +
 src/sass/components/header/_recent-article.scss |   5 +++++
 src/sass/components/header/_site-name.scss      |  10 ++++++++++
 src/sass/components/hero/_hero.scss             |   4 ++++
 src/sass/layouts/_wrapper.scss                  |   8 ++++++++
 12 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 assets/images/no-image.png
 create mode 100644 src/sass/components/header/_site-name.scss

diff --git a/assets/images/no-image.png b/assets/images/no-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..d018898278ddad21dd76a99e23dc40880579f13d
GIT binary patch
literal 2884
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
RjQrXH00m<DpZ1N(`w#hmjFA8U

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index 82e1cf9..f5b4d04 100644
--- a/package.json
+++ b/package.json
@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.4.3"
+  "version": "0.4.4"
 }
diff --git a/partials/header.hbs b/partials/header.hbs
index faac863..dd7ef24 100644
--- a/partials/header.hbs
+++ b/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>
diff --git a/partials/hero.hbs b/partials/hero.hbs
index 7c132f2..bafbad4 100644
--- a/partials/hero.hbs
+++ b/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}}
diff --git a/partials/navigation.hbs b/partials/navigation.hbs
index f8937e2..bb8f97c 100644
--- a/partials/navigation.hbs
+++ b/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">
-                      <div style="background-image: url({{img_url feature_image size="m"}});"></div>
+                      {{#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>
diff --git a/post.hbs b/post.hbs
index cb5dedb..43ffb4b 100644
--- a/post.hbs
+++ b/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}}
diff --git a/src/js/app.js b/src/js/app.js
index 867f555..05443cb 100644
--- a/src/js/app.js
+++ b/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()
     }
diff --git a/src/sass/app.scss b/src/sass/app.scss
index 6f52842..1b76ded 100644
--- a/src/sass/app.scss
+++ b/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";
diff --git a/src/sass/components/header/_recent-article.scss b/src/sass/components/header/_recent-article.scss
index d381edd..5d491aa 100644
--- a/src/sass/components/header/_recent-article.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/src/sass/components/header/_site-name.scss b/src/sass/components/header/_site-name.scss
new file mode 100644
index 0000000..1ae9409
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/sass/components/hero/_hero.scss b/src/sass/components/hero/_hero.scss
index 48993fb..1723fde 100644
--- a/src/sass/components/hero/_hero.scss
+++ b/src/sass/components/hero/_hero.scss
@@ -28,6 +28,10 @@
       color: $white;
     }
   }
+
+  &.no-picture.in-post {
+    display: none;
+  }
 }
 
 .m-hero__picture {
diff --git a/src/sass/layouts/_wrapper.scss b/src/sass/layouts/_wrapper.scss
index 32c3a88..3ee82d1 100644
--- a/src/sass/layouts/_wrapper.scss
+++ b/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 {