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
|
// - 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 {
|
#header {
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
.logo{
|
.logo{
|
||||||
color: $black;
|
font-size: 20px;
|
||||||
font-size: 28px;
|
text-transform: uppercase;
|
||||||
|
@include lato-light();
|
||||||
background: image-url('../images/logo-header.png') 0 0 no-repeat;
|
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);
|
@include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
|
||||||
background-position: 0 center;
|
background-position: 0 45%;
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
color: $orange;
|
color: $purple;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,11 +59,11 @@
|
||||||
|
|
||||||
ul.navbar-nav{
|
ul.navbar-nav{
|
||||||
li {
|
li {
|
||||||
&:hover{
|
// &:hover{
|
||||||
svg path{
|
// svg path{
|
||||||
fill: $purple;
|
// fill: $purple;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
svg path{
|
svg path{
|
||||||
fill: $white;
|
fill: $white;
|
||||||
|
@ -52,7 +76,6 @@
|
||||||
.external-links {
|
.external-links {
|
||||||
li > a {
|
li > a {
|
||||||
@include project-a-style();
|
@include project-a-style();
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,13 +6,18 @@
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
position: relative;
|
position: relative;
|
||||||
color: $white;
|
color: black;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
transition: all 1s ease;
|
transition: all 1s ease;
|
||||||
|
|
||||||
&.white{
|
&.white{
|
||||||
|
color: white;
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
|
.logo {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
.by{
|
.by{
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: 300;
|
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{
|
.navbar-header{
|
||||||
|
@ -54,8 +80,9 @@
|
||||||
vertical-align:top;
|
vertical-align:top;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: $header-height;
|
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;
|
background-position: 0 center;
|
||||||
|
@include transition(all 300ms ease-in);
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
@include transition(all 300ms ease-in);
|
@include transition(all 300ms ease-in);
|
||||||
|
@ -106,6 +133,7 @@
|
||||||
}
|
}
|
||||||
line{
|
line{
|
||||||
stroke: black;
|
stroke: black;
|
||||||
|
@include transition(all 300ms ease-in);
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
@include transition(all 300ms ease-in);
|
@include transition(all 300ms ease-in);
|
||||||
|
@ -120,12 +148,12 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
svg path{
|
svg path{
|
||||||
@include transition( all 0.3s ease );
|
@include transition( all 300ms ease-in );
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
svg path{
|
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 {
|
.nav > li > a:hover, .nav > li > a:focus {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: $black;
|
color: $black;
|
||||||
@include transition( color 0.3s ease );
|
@include transition( all 300ms ease-in );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,10 +29,10 @@ $nav-margin-right: 12px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
@include hashi-a-style-core();
|
@include hashi-a-style-core();
|
||||||
@include transition( color 0.3s ease );
|
@include transition( all 300ms ease-in );
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
@include transition( color 0.3s ease );
|
@include transition( all 300ms ease-in );
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,14 +4,17 @@
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
// Variables
|
// Variables
|
||||||
$project-logo-size: 40px;
|
$project-logo-width: 38px;
|
||||||
|
$project-logo-height: 40px;
|
||||||
$project-logo-pad-left: 8px;
|
$project-logo-pad-left: 8px;
|
||||||
|
|
||||||
// Mixins
|
// Mixins
|
||||||
@mixin project-a-style{
|
@mixin project-a-style{
|
||||||
color: $white;
|
color: $white;
|
||||||
|
font-weight: 300;
|
||||||
|
opacity: .75;
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
color: $purple;
|
color: $white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<div class="sidebar-header header-cover">
|
<div class="sidebar-header header-cover">
|
||||||
<!-- Sidebar brand image -->
|
<!-- Sidebar brand image -->
|
||||||
<div class="sidebar-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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue