Add 1.0 block near the logo 🎉 (#1531)

* initial commit

* replace emoji character with the (same) image

* make the 1.0 block link to the blog

website/themes/uppy/layout/layout.ejs

@@ -49,10 +49,15 @@ if (page.series) {
       <header id="header" class="MainHeader js-MainHeader">
         <button class="MainHeader-menuBtn js-MenuBtn"></button>
 
-        <a id="logo" class="MainLogo" href="/">
-          <!-- <img class="MainLogo-img" src="<%- config.logo_medium %>"> -->
-          <%- config.title %>
-        </a>
+        <span id="logo" class="MainLogo">
+          <a class="MainLogo-link" href="/"><%- config.title %></a>
+          <a class="MainLogo-version" href="/blog/2019/04/1.0/">
+            1.0
+            <span class="MainLogo-emoji">
+              <img src="/images/party-popper.png" srcset="/images/party-popper@2x.png 2x" alt="🎉">
+            </span>
+          </a>
+        </span>
 
         <nav>
           <ul id="nav" class="MainMenu">

website/themes/uppy/source/css/_common.scss

@@ -223,12 +223,36 @@ hr {
 .MainLogo {
   display: inline-block;
   font-size: 27px;
-  color: $color-primary;
   font-family: $fontFamily-logo;
   font-weight: 700;
 
   @media #{$screen-medium} {
-    margin-right: 20px;
+    margin-right: 35px;
+  }
+
+  &-link {
+    color: $color-primary;
+  }
+
+  &-version {
+    display: inline-block;
+    padding: 0px 8px 1px;
+    background-color: $color-primary;
+    position: relative;
+    border-radius: 6px;
+    color: #fff;
+    font-size: 24px;
+
+    &:hover {
+      background-color: darken($color-primary, 7%);
+    }
+  }
+
+  &-emoji {
+    font-size: 16px;
+    position: absolute;
+    bottom: 3px;
+    right: -1em;
   }
 }