resilien
/
terraform
2
0
Fork 0
Code Issues Pull Requests 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

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

@ -166,11 +166,48 @@ body.page-sub{
//at minimum 1200px
@media (min-width: 1200px) {
body.page-sub{
#header{
.main-links.navbar-nav{
margin-top: 28px;
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;
}
li > a {
//border-bottom: 2px solid rgba(255, 255, 255, .2);
line-height: 26px;
margin: 0 12px;
padding: 0 0 0 4px;
}
}
}
}
@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{
margin-top: 28px;
li + li{
padding-left: 6px;
}
@ -185,22 +222,40 @@ body.page-sub{
background-color: @purple;
.skewY(24deg);
padding-right: 8px;
}
li > a {
//border-bottom: 2px solid rgba(255, 255, 255, .2);
line-height: 26px;
margin: 0 12px;
padding: 0 0 0 4px;
}
}
}
}
}
}
}
}
@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
@media (max-width: 992px) {
#header {
.navbar-brand {
&.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;
}
@media (min-width: 1200px) {
body.page-sub #header .main-links.navbar-nav {
#header .main-links.navbar-nav {
margin-top: 28px;
}
body.page-sub #header .main-links.navbar-nav li + li {
#header .main-links.navbar-nav li + li {
padding-left: 6px;
}
body.page-sub #header .main-links.navbar-nav li + li::before {
#header .main-links.navbar-nav li + li::before {
content: "";
position: absolute;
left: 0;
@ -249,12 +249,49 @@ body.page-sub #header .main-links.navbar-nav li > a {
transform: skewY(24deg);
padding-right: 8px;
}
body.page-sub #header .main-links.navbar-nav li > a {
#header .main-links.navbar-nav li > a {
line-height: 26px;
margin: 0 12px;
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) {
#header .navbar-brand.logo span {
width: 120px;