ResiLien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lock down mobile header for homepage

This commit is contained in:
JT 2014-07-23 17:55:55 -07:00
parent 3f2c88e2a8
commit 8b2c80504e
2 changed files with 110 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
website/source/stylesheets/_header.less
View File

@ -166,7 +166,7 @@ body.page-sub{
//at minimum 1200px //at minimum 1200px
@media (min-width: 1200px) { @media (min-width: 1200px) {
body.page-sub{
#header{ #header{
.main-links.navbar-nav{ .main-links.navbar-nav{
margin-top: 28px; margin-top: 28px;
@ -197,10 +197,65 @@ body.page-sub{
} }
} }
} }
@media (min-width: 992px) {
.collapse{
margin-top: 8px;
} }
//homepage has more space at this width to accomodate chevrons
.page-home{
#header{
.main-links.navbar-nav{
li + li{
padding-left: 6px;
}
li + li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 8px;
background-color: @purple;
.skewY(24deg);
padding-right: 8px;
}
}
}
}
}
@media (min-width: 768px) and (max-width: 992px) {
body.page-home{
.nav-logo{
width: 30%;
}
.nav-white{
margin-top: 8px;
width: 70%;
}
.buttons.navbar-nav{
li{
> a{
padding-right: 4px !important;
text-indent: -9999px;
white-space: nowrap;
}
}
}
}
}
//at greatest width 992px //at greatest width 992px
@media (max-width: 992px) { @media (max-width: 992px) {
#header { #header {
.navbar-brand { .navbar-brand {
&.logo{ &.logo{

45
website/source/stylesheets/main.css
View File

@ -228,13 +228,13 @@ body.page-sub #header .main-links.navbar-nav li > a {
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
body.page-sub #header .main-links.navbar-nav { #header .main-links.navbar-nav {
margin-top: 28px; margin-top: 28px;
} }
body.page-sub #header .main-links.navbar-nav li + li { #header .main-links.navbar-nav li + li {
padding-left: 6px; padding-left: 6px;
} }
body.page-sub #header .main-links.navbar-nav li + li::before { #header .main-links.navbar-nav li + li::before {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
@ -249,12 +249,49 @@ body.page-sub #header .main-links.navbar-nav li > a {
transform: skewY(24deg); transform: skewY(24deg);
padding-right: 8px; padding-right: 8px;
} }
body.page-sub #header .main-links.navbar-nav li > a { #header .main-links.navbar-nav li > a {
line-height: 26px; line-height: 26px;
margin: 0 12px; margin: 0 12px;
padding: 0 0 0 4px; padding: 0 0 0 4px;
} }
} }
@media (min-width: 992px) {
.collapse {
margin-top: 8px;
}
.page-home #header .main-links.navbar-nav li + li {
padding-left: 6px;
}
.page-home #header .main-links.navbar-nav li + li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 8px;
background-color: #822ff7;
-webkit-transform: skewY(24deg);
-moz-transform: skewY(24deg);
-ms-transform: skewY(24deg);
-o-transform: skewY(24deg);
transform: skewY(24deg);
padding-right: 8px;
}
}
@media (min-width: 768px) and (max-width: 992px) {
body.page-home .nav-logo {
width: 30%;
}
body.page-home .nav-white {
margin-top: 8px;
width: 70%;
}
body.page-home .buttons.navbar-nav li > a {
padding-right: 4px !important;
text-indent: -9999px;
white-space: nowrap;
}
}
@media (max-width: 992px) { @media (max-width: 992px) {
#header .navbar-brand.logo span { #header .navbar-brand.logo span {
width: 120px; width: 120px;