diff options
Diffstat (limited to 'sass/parts/_header.scss')
| -rw-r--r-- | sass/parts/_header.scss | 85 |
1 files changed, 49 insertions, 36 deletions
diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index b22b1e0..41cd977 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -1,38 +1,42 @@ -header{ - height: 30px; +$header-height: 30px; + +#header{ + height: $header-height; padding: 30px 0; - border-bottom: 1px solid $gray04; - line-height: 30px; + border-bottom: 1px solid $color-gray04; + line-height: $header-height; @media screen and (max-width: 1040px){ height: auto; position: relative; padding-bottom: 10px; - >.right{ + >.alignright{ position: absolute; top: 30px; right: 0; } } a{ - color: $gray01; - @include transition(0.3s); + color: $color-gray01; + @include transition(color 0.3s); &:hover{ - color: $main; + 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){ @@ -50,7 +54,7 @@ header{ } &:hover{ >a{ - color: $main; + color: $color-main; } } >a{ @@ -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; } @@ -76,8 +79,8 @@ header{ left: -15px; z-index: 10; white-space: nowrap; - background: $gray04; - border: 1px solid $gray03; + background: $color-gray04; + border: 1px solid $color-gray03; list-style: none; display: none; @media screen and (max-width: 1040px){ @@ -89,7 +92,7 @@ header{ @include border-radius(0 5px 5px 5px); } li{ - @include border-shadow($background, $gray03); + @include border-shadow($color-background, $color-gray03); &:hover{ background: #d5d5d5; } @@ -107,7 +110,7 @@ header{ display: block; padding: 5px 30px 5px 15px; &:hover{ - color: $gray01; + color: $color-gray01; } &:only-child{ background: none; @@ -138,32 +141,42 @@ 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: $gray02; - border: 1px solid $gray04; - font: 13px $default; + color: $color-gray02; + border: 1px solid $color-gray04; + font: 13px $font-default; padding: 6px 15px 6px 35px; 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 $gray03; - color: $gray01; + 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; } @@ -179,49 +192,49 @@ header{ opacity: 1; } &.facebook{ - background: image-url('facebook.png') center no-repeat #3B5998; + background: image-url('social/facebook.png') center no-repeat #3B5998; border: 1px solid #3B5998; &:hover{ border: 1px solid darken(#3B5998, 10%); } } &.google{ - background: image-url('google.png') center no-repeat #C83D20; + background: image-url('social/google.png') center no-repeat #C83D20; border: 1px solid #C83D20; &:hover{ border: 1px solid darken(#C83D20, 10%); } } &.twitter{ - background: image-url('twitter.png') center no-repeat #55CFF8; + background: image-url('social/twitter.png') center no-repeat #55CFF8; border: 1px solid #55CFF8; &:hover{ border: 1px solid darken(#55CFF8, 10%); } } &.github{ - background: image-url('github.png') center no-repeat rgb(175,182,202); + background: image-url('social/github.png') center no-repeat rgb(175,182,202); border: 1px solid rgb(175,182,202); &:hover{ border: 1px solid darken(rgb(175,182,202), 10%); } } &.pinterest{ - background: image-url('pinterest.png') center no-repeat rgb(190,64,55); + background: image-url('social/pinterest.png') center no-repeat rgb(190,64,55); border: 1px solid rgb(190,64,55); &:hover{ border: 1px solid darken(rgb(190,64,55), 10%); } } &.delicious{ - background: image-url('delicious.png') center no-repeat rgb(50,113,203); + background: image-url('social/delicious.png') center no-repeat rgb(50,113,203); border: 1px solid rgb(50,113,203); &:hover{ border: 1px solid darken(rgb(50,113,203), 10%); } } &.rss{ - background: image-url('rss.png') center no-repeat #EF7522; + background: image-url('social/rss.png') center no-repeat #EF7522; border: 1px solid #EF7522; &:hover{ border: 1px solid darken(#EF7522, 10%); |