header styles complete + subpage
This commit is contained in:
parent
1269d2a156
commit
a5f8ecfdd8
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
Before Width: | Height: | Size: 556 B After Width: | Height: | Size: 556 B |
Before Width: | Height: | Size: 994 B After Width: | Height: | Size: 994 B |
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 );
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue