diff options
| -rw-r--r-- | sass/parts/_header.scss | 43 | ||||
| -rw-r--r-- | source/_includes/header.html | 18 |
2 files changed, 37 insertions, 24 deletions
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index dca8a8f..0366a55 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,8 +1,10 @@ -header{ - height: 30px; +$header-height: 30px; + +#header{ + height: $header-height; padding: 30px 0; - line-height: 30px; border-bottom: 1px solid $color-gray04; + line-height: $header-height; @media screen and (max-width: 1040px){ height: auto; position: relative; @@ -14,25 +16,27 @@ header{ } } a{ - @include transition(0.3s); color: $color-gray01; + @include transition(color 0.3s); &:hover{ color: $color-main; } } h1{ + float: left; font-weight: 300; font-size: 30px; @media screen and (max-width: 1040px){ - float: none !important; + float: none; } } - nav{ + .menu{ + float: left; margin-left: 30px; @media screen and (max-width: 1040px){ + float: none; margin-left: 0; margin-top: 15px; - float: none !important; } >ul{ @media screen and (max-width: 600px){ @@ -59,7 +63,6 @@ header{ background: image-url('detail.png') right center no-repeat; @media screen and (max-width: 1040px){ padding: 18px 30px 18px 0; - /* Todo */ &:only-child{ padding-right: 0; } @@ -138,6 +141,15 @@ header{ } } .search{ + float: left; + margin-top: 1px; + @media screen and (max-width: 1040px){ + float: none; + margin-top: 15px; + } + @media screen and (max-width: 600px){ + margin-top: 40px; + } input[type="text"]{ background: image-url('search.png') 10px center no-repeat #f2f2f2; color: $color-gray02; @@ -147,23 +159,24 @@ header{ width: 100px; @include transition(0.3s); @include border-radius(15px); - @media screen and (max-width: 600px){ - width: 60px; - } &:focus, &:active{ background: image-url('search.png') 10px center no-repeat #fff; - width: 150px; border-top: 1px solid $color-gray03; color: $color-gray01; outline: none; - @media screen and (max-width: 600px){ - width: 100px; - } } } } .social{ + float: left; margin-right: 15px; + @media screen and (max-width: 1040px){ + float: none; + margin-right: 0; + a:last-of-type{ + margin-right: 0; + } + } @media screen and (max-width: 600px){ display: none; } diff --git a/source/_includes/header.html b/source/_includes/header.html index 2985d7f..28b5630 100644 --- a/source/_includes/header.html +++ b/source/_includes/header.html @@ -1,11 +1,7 @@ -<h1 class="left"><a href="{{ root_url }}/">{{ site.title }}</a></h1> -<nav class="menu left">{% include navigation.html %}</nav> -<div class="right"> - <form class="search right" action="{{ site.simple_search }}" method="get"> - <input class="left" type="text" name="q" results="0"> - <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}"> - </form> - <div class="social right"> +<h1><a href="{{ root_url }}/">{{ site.title }}</a></h1> +<nav class="menu">{% include navigation.html %}</nav> +<div class="alignright"> + <div class="social"> {% if site.facebook_user %} <a class="facebook" href="http://www.facebook.com/{{ site.facebook_user }}" title="Facebook">Facebook</a> {% endif %} @@ -28,5 +24,9 @@ <a class="rss" href="{{ site.subscribe_rss }}" title="RSS">RSS</a> {% endif %} </div> + <form class="search" action="{{ site.simple_search }}" method="get"> + <input class="alignright" type="text" name="q" results="0"> + <input type="hidden" name="q" value="site:{{ site.url | shorthand_url }}"> + </form> </div> -{% include custom/header.html %} +{% include custom/header.html %}
\ No newline at end of file |