Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
refactor(header): change header styles
  • Loading branch information
gael-boyenval committed Jun 16, 2017
1 parent 3c358aa commit 8a59194
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 10 deletions.
20 changes: 10 additions & 10 deletions _includes/header.html
@@ -1,16 +1,20 @@
<header class="site-header">
<a href="{{ site.baseurl }}/" class="branding">
<h1 class="site-title visually-hidden">
{{ site.theme_settings.title }}
</h1>
</a>
<div class="branding-container">
<a class="branding" class="no-link-style" href="{{ site.baseurl }}/">
<h1 class="site-title visually-hidden">
{{ site.theme_settings.title }}
</h1>
</a>
</div>

{% include search.html %}

<nav class="site-nav">
<ul>
{% for page in site.pages %}
{% if page.title and page.hide != true %}
<li>
<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">
<a class="page-link no-link-style" href="{{ page.url | prepend: site.baseurl }}">
{{ page.title }}
</a>
</li>
Expand All @@ -20,8 +24,4 @@ <h1 class="site-title visually-hidden">
{% include icons.html data=site.theme_settings %}
</ul>
</nav>

<!--<form class="search">
<input type="search" id="js-algolia__input" autocomplete="off" name="query" placeholder="Search in this site..." />
</form>-->
</header>
4 changes: 4 additions & 0 deletions _includes/search.html
@@ -0,0 +1,4 @@
<form class="search-bar">
<label class="search-bar-label" for="js-algolia__input">Search</label>
<input class="search-bar-input" type="search" id="js-algolia__input" autocomplete="off" name="query"/>
</form>
28 changes: 28 additions & 0 deletions _sass/objects/_layout.scss
@@ -0,0 +1,28 @@
.slice {
border-bottom: 1px solid $border-color;

@media (min-width: 480px) {
padding-top: 30px;
padding-bottom: 30px;
}

@media (max-width: 480px) {
padding-top: 25px;
padding-bottom: 25px;
}
}

.container {
max-width: $max-width-layout;
margin: 0 auto;

@media (min-width: 480px) {
padding-left: 45px;
padding-right: 45px;
}

@media (max-width: 480px) {
padding-left: 25px;
padding-right: 25px;
}
}
55 changes: 55 additions & 0 deletions _sass/objects/_search-bar.scss
@@ -0,0 +1,55 @@
.search-bar {
position: relative;
font-size: 1.4rem;

@media (min-width: 480px) {
margin-right: 25px;
}

@media (max-width: 480px) {
max-width: 120px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}

&-label {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}

&-input {
cursor: pointer;
display: block;
padding: 4px;
position: absolute;
z-index: 10;
top: 0;
bottom:0;
right: 0;
border: none;
opacity: 0;
min-width: 100%;
max-width: 100%;
background: white;
border-bottom: 2px solid transparent;
transition: all .2s ease;

&:focus {
opacity: 1;
outline: none;
border-bottom: 2px solid $brand-black;

@media (min-width: 480px) {
min-width: 120px;
}

@media (max-width: 480px) {
left: -30px;
right: -30px;
max-width: 1000px;
}
}
}
}
1 change: 1 addition & 0 deletions img/logo_eleven_lab.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8a59194

Please sign in to comment.