fix(refactor header): use full logo / delete search / responsive

_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
 

_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>

_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>

_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;
+}

_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;
+    }
+}*/