Permalink
Browse files

Site header redesign (#6567)

Merge pull request 6567
  • Loading branch information...
ashmaroli authored and DirtyF committed Nov 19, 2017
1 parent 1391196 commit 0f354704804673331138706d8e1db5975733e665
View
@@ -1,19 +1,31 @@
<header>
<nav class="mobile-nav show-on-mobiles">
{% include primary-nav-items.html %}
{% include mobile-nav-items.html %}
</nav>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<div class="flexbox">
<div class="center-on-mobiles">
<h1>
<a href="/">
<a href="/" class="logo">
<span class="sr-only">Jekyll</span>
<img src="/img/logo-2x.png" width="249" height="115" alt="Jekyll Logo">
<img src="/img/logo-2x.png" width="140" height="65" alt="Jekyll Logo">
</a>
</h1>
</div>
<nav class="main-nav unit two-thirds hide-on-mobiles">
<nav class="main-nav hide-on-mobiles">
{% include primary-nav-items.html %}
{% include search/input.html %}
</nav>
<div class="search hide-on-mobiles">
{% include search/input.html %}
</div>
<div class="meta hide-on-mobiles">
<ul>
<li>
<a href="{{ site.repository }}/releases/tag/v{{ jekyll.version }}">v{{ jekyll.version }}</a>
</li>
<li>
<a href="{{ site.repository }}">GitHub</a>
</li>
</ul>
</div>
</div>
</header>
@@ -0,0 +1,17 @@
<ul>
<li class="{% if page.overview %}current{% endif %}">
<a href="/">Home</a>
</li>
<li class="{% if page.url contains '/docs/' %}current{% endif %}">
<a href="/docs/home/">Docs</a>
</li>
<li class="{% if page.author %}current{% endif %}">
<a href="/news/">News</a>
</li>
<li class="{% if page.url contains '/help/' %}current{% endif %}">
<a href="/help/">Help</a>
</li>
<li>
<a href="{{ site.repository }}">GitHub</a>
</li>
</ul>
@@ -11,7 +11,4 @@
<li class="{% if page.url contains '/help/' %}current{% endif %}">
<a href="/help/">Help</a>
</li>
<li>
<a href="{{ site.repository }}">GitHub</a>
</li>
</ul>
View
@@ -1,24 +1,34 @@
.searchbox {
padding-top: 1px;
.searchbox__input {
padding: 5px 5px 5px 29px;
padding: 6px 5px 5px 29px;
font-size: 0.75em;
border: none;
border-radius: 5px;
color: #444;
color: #555;
background-color: #333 !important;
box-shadow: 0 0 1px 0 #555;
&::-webkit-input-placeholder {
color: #aaa;
}
&:-ms-input-placeholder {
color: #aaa;
}
&::placeholder {
color: #aaa;
}
&:focus, &:active {
color: #eaeaea;
background-color: #252525 !important;
}
}
}
.searchbox__submit svg { fill: #fc0 }
.searchbox__reset svg { fill: #999 }
.algolia-autocomplete {
.ds-dropdown-menu {
font-size: 1rem;
View
@@ -14,7 +14,6 @@ body {
font: 300 21px Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #ddd;
background-color: #333;
border-top: 5px solid #fc0;
@include box-shadow(inset 0 3px 30px rgba(0,0,0,.3));
text-shadow: 0 1px 3px rgba(0,0,0,.5);
-webkit-font-feature-settings: "kern" 1;
@@ -50,13 +49,28 @@ footer {
/* Header */
header {
padding: 15px;
background: darken(#333, 3%);
h1,
nav { display: inline-block; }
.flexbox {
display: flex;
height: 50px;
& > * { margin: auto }
}
.logo {
display: block;
img { margin-top: -7px }
}
.search .svg-icons { display: none }
}
nav {
nav, .meta {
ul {
padding: 0;
@@ -68,16 +82,20 @@ nav {
li { display: inline-block; }
}
.main-nav {
margin-top: 52px;
.meta ul {
margin-left: 10px;
li { vertical-align: middle; }
}
.main-nav, .meta {
li {
margin-right: 10px;
a {
@include border-radius(5px);
font-weight: 900;
font-size: 14px;
font-size: 0.75em;
padding: 0.5em 1em;
text-shadow: none;
text-transform: uppercase;
@@ -101,7 +119,6 @@ nav {
}
}
}
.mobile-nav {
padding: 0 5px;
@@ -118,9 +135,9 @@ nav {
color: #fc0;
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-size: 0.625em;
font-weight: 900;
padding: 5px;
padding: 10px 5px;
@include border-radius(5px);
}
@@ -160,20 +177,29 @@ h6:hover .header-link {
opacity: 1;
}
@media (max-width: 768px) {
.main-nav ul {
text-align: right;
@media (max-width: 568px) {
header { padding-bottom: 0 }
}
@media (max-width: 580px) {
header {
.flexbox { height: auto }
.logo img { margin-top: 0 }
}
}
@media (max-width: 699px) {
.searchbox { display: none }
}
@media (max-width: 768px) {
.main-nav ul { text-align: right }
}
@media (max-width: 830px) {
.main-nav {
.show-on-mobiles { display: inline; }
.hide-on-mobiles { display: none; }
}
}
@media (max-width: 950px) {
.searchbox { display: none;}
@media (max-width: 890px) {
.meta { display: none; }
}
/* Footer */

0 comments on commit 0f35470

Please sign in to comment.