From 7c71f70f036614f625312a3e8252b616b5d0e429 Mon Sep 17 00:00:00 2001
From: Alec Rust <me@alecrust.com>
Date: Wed, 2 Oct 2019 22:17:56 +0100
Subject: [PATCH] Improve header alignment and logo (#10376)

* Switch to SVG main header logo

* Improve header alignment

* Reduce border radius of logo
---
 sass/custom/_paulus.scss              |  8 +++++++-
 sass/oscailte/base/_navigation.scss   | 14 +++++++-------
 source/_includes/site/header.html     |  8 ++++----
 source/images/home-assistant-logo.svg | 16 ++++++++++++++++
 4 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 source/images/home-assistant-logo.svg

diff --git a/sass/custom/_paulus.scss b/sass/custom/_paulus.scss
index 8c1efdd4f9c..5db79363d7c 100644
--- a/sass/custom/_paulus.scss
+++ b/sass/custom/_paulus.scss
@@ -6,6 +6,8 @@ $primary-color: #049cdb;
   position: relative;
 
   .site-title {
+    display: flex;
+    align-items: center;
     font-weight: normal;
   }
 }
@@ -221,10 +223,14 @@ dt:hover a.title-link {
 }
 
 .ha-title {
+  display: inline-flex;
+  height: 100%;
   white-space: nowrap;
 
   img {
-    width: 40px;
+    border-radius: 3px;
+    width: 36px;
+    margin-right: 10px;
   }
 
   a > * {
diff --git a/sass/oscailte/base/_navigation.scss b/sass/oscailte/base/_navigation.scss
index 720884c5b62..acbda0859ae 100644
--- a/sass/oscailte/base/_navigation.scss
+++ b/sass/oscailte/base/_navigation.scss
@@ -101,24 +101,24 @@ header .grid {
     border-top:    1px solid $navigation-color;
     border-bottom: 4px solid $navigation-color;
   }
-  
+
   .menu, .menu li, .menu li a{
     height: auto;
   }
-  
+
   .menu li a{
     padding: 15px 15px !important;
   }
-  
+
   .menu li a:hover, .menu li a:focus{
     background: $grayLighter;
     box-shadow: inset 5px 0px $navigation-color;
     padding: 15px 15px 15px 25px;
   }
-  
+
   .toggle {
     position: absolute;
-    top: 17px;
+    top: 15px;
     right: 10px;
   }
 
@@ -137,11 +137,11 @@ header .grid {
     color: $white;
     white-space: nowrap;
   }
-  
+
   .toggle:hover::after{
     background: darken($navigation-color, 7%);
   }
-  
+
   #toggle:checked + .toggle::after{
     content: attr(data-close);
   }
diff --git a/source/_includes/site/header.html b/source/_includes/site/header.html
index 63708e5eb9d..7dfba15d6f6 100644
--- a/source/_includes/site/header.html
+++ b/source/_includes/site/header.html
@@ -2,11 +2,11 @@
   <div class="grid">
     <div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
       <a href="/" class="site-title">
-        <img width='40' src='/images/favicon-192x192-full.png' alt="Home Assistant">
+        <img src="/images/home-assistant-logo.svg" width="36" height="36" alt="Home Assistant">
         <span>{{ site.title }}</span>
       </a>
     </div>
-    
+
     <div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
       <nav>
         <input type="checkbox" id="toggle">
@@ -31,7 +31,7 @@
             <li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
         </ul>
       </nav>
-    
+
       <div class='search-container' style='display: none'>
         <div class='search'>
           <i class="icon-search"></i>
@@ -41,4 +41,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/source/images/home-assistant-logo.svg b/source/images/home-assistant-logo.svg
new file mode 100644
index 00000000000..9e25b23da52
--- /dev/null
+++ b/source/images/home-assistant-logo.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <path d="M44.041 343.222V209.58H9.288a9.333 9.333 0 0 1-6.655-15.876L189.639 3.497c4.517-4.594 11.903-4.657 16.498-.14l.12.12 97.601 98.794V83.974a7.778 7.778 0 0 1 7.778-7.778h32.41a7.778 7.778 0 0 1 7.779 7.778v67.138l41.568 42.618a9.333 9.333 0 0 1-6.682 15.85h-34.886v133.642a7.778 7.778 0 0 1-7.778 7.778H51.819a7.778 7.778 0 0 1-7.778-7.778zm206.393-163.26a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.044 14.99 15.044c2.314 0 4.505-.527 6.462-1.467l21.518 21.596v20.918l-26.981 27.078v-19.84a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v29.868l-24.983 25.073V144.464l20.519-20.592a14.886 14.886 0 0 0 6.462 1.466c8.279 0 14.99-6.735 14.99-15.044 0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043 0 2.323.524 4.522 1.46 6.486l-18.448 18.515-18.449-18.515a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043 0 8.309 6.711 15.044 14.99 15.044 2.314 0 4.505-.527 6.462-1.466l20.518 20.592v105.16l-35.974-36.104v-28.865a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v18.837l-27.98-28.081v-27.863a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v32.017l30.907 31.018h-17.77c-2.058-5.843-7.61-10.029-14.137-10.029-8.278 0-14.99 6.735-14.99 15.043 0 8.309 6.712 15.044 14.99 15.044 6.527 0 12.08-4.186 14.137-10.03h27.763l43.04 43.196v75.074l-22.983-23.066v-28.866a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.99 6.735-14.99 15.043 0 6.55 4.172 12.122 9.994 14.187v18.837l-33.439-33.558a15.029 15.029 0 0 0 1.461-6.486c0-8.308-6.71-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.043 14.99 15.043c2.314 0 4.506-.526 6.462-1.466l33.439 33.559h-17.77c-2.058-5.843-7.61-10.03-14.137-10.03-8.278 0-14.99 6.736-14.99 15.044s6.712 15.043 14.99 15.043c6.527 0 12.079-4.186 14.137-10.029h27.763l27.98 28.081h14.132l28.98-29.083h26.763c2.058 5.842 7.61 10.028 14.137 10.028 8.278 0 14.99-6.735 14.99-15.043s-6.712-15.043-14.99-15.043c-6.527 0-12.079 4.186-14.137 10.029H229.84l-26.91 27.006V305.93l32.049-32.164h51.746c2.058 5.843 7.61 10.029 14.136 10.029 8.279 0 14.99-6.735 14.99-15.043 0-8.309-6.711-15.044-14.99-15.044-6.526 0-12.078 4.186-14.136 10.03H244.97l29.908-30.016v-25.072l21.517-21.596a14.886 14.886 0 0 0 6.463 1.467c8.278 0 14.99-6.736 14.99-15.044s-6.712-15.043-14.99-15.043-14.99 6.735-14.99 15.043c0 2.323.525 4.522 1.461 6.486l-14.451 14.504V148.55a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v45.915l-14.452-14.504zM120.987 323.909c-3.311 0-5.996-2.694-5.996-6.017 0-3.323 2.685-6.017 5.996-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.323-2.684 6.017-5.996 6.017zm43.97-45.13c-3.312 0-5.997-2.694-5.997-6.017 0-3.323 2.685-6.017 5.996-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.323-2.684 6.017-5.996 6.017zm-51.964-7.02c-3.312 0-5.996-2.694-5.996-6.017 0-3.323 2.684-6.017 5.996-6.017 3.311 0 5.996 2.694 5.996 6.017 0 3.323-2.685 6.017-5.996 6.017zm-4.997-50.144c-3.311 0-5.995-2.694-5.995-6.018 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm124.912 7.02c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm67.952 46.133c-3.31 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-25.981 48.138c-3.312 0-5.996-2.694-5.996-6.017 0-3.323 2.684-6.017 5.996-6.017 3.311 0 5.996 2.694 5.996 6.017 0 3.323-2.685 6.017-5.996 6.017zm27.98-143.412c-3.311 0-5.996-2.695-5.996-6.018s2.685-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017 0 3.323-2.685 6.018-5.996 6.018zm-32.977-39.113c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-39.972-24.07c-3.311 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-63.955 0c-3.31 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-51.963 23.067c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018 3.311 0 5.996 2.694 5.996 6.018 0 3.323-2.685 6.017-5.996 6.017zm37.973 37.107c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm84.94 3.009c-3.31 0-5.995-2.695-5.995-6.018s2.684-6.017 5.995-6.017c3.312 0 5.996 2.694 5.996 6.017 0 3.323-2.684 6.018-5.996 6.018z" id="a"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <path d="M0 0h500v500H0z" fill="#41BDF5"/>
+    <g transform="translate(52 70)">
+      <mask id="b" fill="#fff">
+        <use xlink:href="#a"/>
+      </mask>
+      <g mask="url(#b)" fill="#FFF">
+        <path d="M0 0h396v351H0z"/>
+      </g>
+    </g>
+  </g>
+</svg>