From db6bc18dc544b991f4220d139a26c64531628e3f Mon Sep 17 00:00:00 2001
From: Gael BOYENVAL <gaelboyenval@icloud.com>
Date: Fri, 16 Jun 2017 11:18:31 +0200
Subject: [PATCH] fix(refactor header): use full logo / delete search /
 responsive

---
 _config.yml                 |  4 ---
 _includes/header.html       | 24 +++++--------
 _layouts/default.html       |  4 +--
 _sass/base/_utility.scss    | 11 ++++++
 _sass/includes/_header.scss | 67 +++++++++++++++++++++++++++++--------
 about.md                    | 12 -------
 6 files changed, 75 insertions(+), 47 deletions(-)
 delete mode 100644 about.md

diff --git a/_config.yml b/_config.yml
index eb1d6fe27..cf9fb54c1 100644
--- a/_config.yml
+++ b/_config.yml
@@ -20,7 +20,6 @@ baseurl:
 theme_settings:
     # Meta
     title: Eleven Labs
-    avatar: avatar.png
     gravatar:
     description: A website with blog posts and pages
 
@@ -68,9 +67,6 @@ theme_settings:
     str_prev: Précédent
     str_continue_reading: Lire l'article
 
-    # Colours, typography and padding
-    google_fonts: Cabin
-
     # Post navigation
     post_navigation: false
 
diff --git a/_includes/header.html b/_includes/header.html
index b222132f4..ddc38c320 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,18 +1,10 @@
 <header class="site-header">
-    <div class="branding">
-        {% if site.theme_settings.gravatar %}
-        <a href="{{ site.baseurl }}/">
-            <img class="avatar" src="https://secure.gravatar.com/avatar/{{ site.theme_settings.gravatar }}?s=100" alt=""/>
-        </a>
-        {% elsif site.theme_settings.avatar %}
-        <a href="{{ site.baseurl }}/">
-            <img class="avatar" src="{{ site.baseurl }}/img/{{ site.theme_settings.avatar }}" alt=""/>
-        </a>
-        {% endif %}
-        <h1 class="site-title">
-            <a href="{{ site.baseurl }}/">{{ site.theme_settings.title }}</a>
+    <a href="{{ site.baseurl }}/" class="branding">
+        <h1 class="site-title visually-hidden">
+            {{ site.theme_settings.title }}
         </h1>
-    </div>
+    </a>
+
     <nav class="site-nav">
         <ul>
             {% for page in site.pages %}
@@ -26,8 +18,10 @@ <h1 class="site-title">
             {% endfor %}
             <!-- Social icons from Font Awesome, if enabled -->
             {% include icons.html data=site.theme_settings %}
-
-            <input type="text" id="js-algolia__input" autocomplete="off" name="query" placeholder="Search in this site..." />
         </ul>
     </nav>
+
+    <!--<form class="search">
+        <input type="search" id="js-algolia__input" autocomplete="off" name="query" placeholder="Search in this site..." />
+    </form>-->
 </header>
diff --git a/_layouts/default.html b/_layouts/default.html
index 07b865ca6..f0d85a066 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -7,8 +7,8 @@
             {{ content }}
         </div>
         <div class="content">
-          <div class="posts" id="js-content-search">
-          </div>
+            <div class="posts" id="js-content-search">
+            </div>
         </div>
         {% include footer.html %}
     </body>
diff --git a/_sass/base/_utility.scss b/_sass/base/_utility.scss
index c3e2c6288..52a9e3d50 100644
--- a/_sass/base/_utility.scss
+++ b/_sass/base/_utility.scss
@@ -33,3 +33,14 @@ a.button:hover {
 .disabled {
     opacity: 0.7;
 }
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    margin: -1px;
+    clip: rect(0 0 0 0);
+    border: 0;
+}
diff --git a/_sass/includes/_header.scss b/_sass/includes/_header.scss
index 5ef579d34..7773e3150 100644
--- a/_sass/includes/_header.scss
+++ b/_sass/includes/_header.scss
@@ -1,11 +1,35 @@
 .site-header {
-    @extend %padding-small;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    padding: 20px 45px;
     background: $brand-color;
     border-bottom: 1px solid $border-color;
-    display: inline-block;
     float: left;
     width: 100%;
 
+    .branding {
+        flex: auto;
+        display: block;
+
+        @media (max-width: 480px) {
+            margin-bottom: 10px;
+        }
+
+        &:before {
+            display: block;
+            content: "";
+            width: 160px;
+            height: 60px;
+            background: url('../img/logo_eleven_lab.svg') top left no-repeat;
+            background-size: contain;
+
+            @media (max-width: 480px) {
+                margin: 0 auto;
+            }
+        }
+    }
+
     a {
         color: $header-link-color;
     }
@@ -28,26 +52,41 @@
 
     .site-nav {
         ul {
+            display: inline-block;
+            text-align: center;
             margin: 0;
             padding: 0;
             list-style: none;
             line-height: 1.5;
-            float: right;
-            text-align: right;
         }
+
         li {
-            display: inline;
-            float: left;
+            display: inline-block;
             margin-right: 0.4em;
         }
-        @media (max-width: 1100px) {
-            ul {
-                display: inline-block;
-                float: left;
-                padding-top: $padding-small;
-                text-align: left;
-                width: 100%;
-            }
+    }
+
+    .branding,
+    .site-nav {
+        @media (max-width: 480px) {
+            flex: 0 0 100%;
+            text-align: center;
         }
     }
 }
+
+
+/*
+.search {
+    display: block;
+    background: $brand-black;
+    color: #F5F5F5;
+
+    @media (min-width: 480px) {
+        margin-left: 15px;
+    }
+
+    @media (max-width: 480px) {
+        margin-top: 10px;
+    }
+}*/
diff --git a/about.md b/about.md
deleted file mode 100644
index 0e26e9c3b..000000000
--- a/about.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-layout: page
-title: About
-permalink: /about/
-feature-img: "img/sample_feature_img_2.png"
----
-
-Type Theme is a free and open-source theme for [Jekyll](http://jekyllrb.com/), licensed under the MIT License.
-
-Head over to the [theme's documentation](https://rohanchandra.github.io/project/type/) for much more information about Type Theme or to install this theme on your own Jekyll site.
-
-This file is an example of a page in Jekyll, that automatically shows up in the header navigation, you can delete or modify this file freely.