header styles complete + subpage

This commit is contained in:
captainill 2015-11-06 15:41:23 -08:00
parent 1269d2a156
commit a5f8ecfdd8
8 changed files with 75 additions and 21 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 556 B

After

Width:  |  Height:  |  Size: 556 B

View File

Before

Width:  |  Height:  |  Size: 994 B

After

Width:  |  Height:  |  Size: 994 B

View File

@ -4,17 +4,41 @@
// - edits should be made here
// --------------------------------------------------
body.page-sub{
#header{
background-color: $purple;
.navbar-brand {
.logo{
&:hover{
color: $black;
}
}
.by{
&:hover{
svg{
line{
stroke: $black;
}
}
}
}
}
}
}
#header {
.navbar-brand {
.logo{
color: $black;
font-size: 28px;
font-size: 20px;
text-transform: uppercase;
@include lato-light();
background: image-url('../images/logo-header.png') 0 0 no-repeat;
@include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-size, $project-logo-size);
background-position: 0 center;
@include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
background-position: 0 45%;
&:hover{
color: $orange;
color: $purple;
}
}
@ -35,11 +59,11 @@
ul.navbar-nav{
li {
&:hover{
svg path{
fill: $purple;
}
}
// &:hover{
// svg path{
// fill: $purple;
// }
// }
svg path{
fill: $white;
@ -52,7 +76,6 @@
.external-links {
li > a {
@include project-a-style();
font-weight: 400;
}
}
}

View File

@ -6,13 +6,18 @@
#header {
position: relative;
color: $white;
color: black;
text-rendering: optimizeLegibility;
margin-bottom: 0;
transition: all 1s ease;
&.white{
color: white;
.navbar-brand {
.logo {
color: white;
}
.by{
color: white;
font-weight: 300;
@ -27,6 +32,27 @@
}
}
}
.main-links,
.external-links {
li > a {
&:hover{
opacity: 1;
}
}
}
.nav > li > a:hover, .nav > li > a:focus {
color: white;
}
.navbar-header{
.navbar-toggle{
.icon-bar{
border: 1px solid white;
}
}
}
}
.navbar-header{
@ -54,8 +80,9 @@
vertical-align:top;
padding: 0;
line-height: $header-height;
padding-left: $project-logo-size + $project-logo-pad-left;
padding-left: $project-logo-width + $project-logo-pad-left;
background-position: 0 center;
@include transition(all 300ms ease-in);
&:hover{
@include transition(all 300ms ease-in);
@ -106,6 +133,7 @@
}
line{
stroke: black;
@include transition(all 300ms ease-in);
&:hover{
@include transition(all 300ms ease-in);
@ -120,12 +148,12 @@
position: relative;
svg path{
@include transition( all 0.3s ease );
@include transition( all 300ms ease-in );
}
&:hover{
svg path{
@include transition( all 0.3s ease );
@include transition( all 300ms ease-in );
}
}
@ -164,6 +192,6 @@
.nav > li > a:hover, .nav > li > a:focus {
background-color: transparent;
color: $black;
@include transition( color 0.3s ease );
@include transition( all 300ms ease-in );
}
}

View File

@ -29,10 +29,10 @@ $nav-margin-right: 12px;
padding: 0;
line-height: 22px;
@include hashi-a-style-core();
@include transition( color 0.3s ease );
@include transition( all 300ms ease-in );
&:hover{
@include transition( color 0.3s ease );
@include transition( all 300ms ease-in );
background-color: transparent;
}
}

View File

@ -4,14 +4,17 @@
// --------------------------------------------------
// Variables
$project-logo-size: 40px;
$project-logo-width: 38px;
$project-logo-height: 40px;
$project-logo-pad-left: 8px;
// Mixins
@mixin project-a-style{
color: $white;
font-weight: 300;
opacity: .75;
&:hover{
color: $purple;
color: $white;
}
}

View File

@ -7,7 +7,7 @@
<div class="sidebar-header header-cover">
<!-- Sidebar brand image -->
<div class="sidebar-image">
<img src="<%= image_path('logo-header@2x.png') %>" width="50px" height="50px">
<img src="<%= image_path('logo-header-black@2x.png') %>" width="50px" height="56px">
</div>
</div>