diff --git a/website/source/stylesheets/_header.less b/website/source/stylesheets/_header.less index 2dbf88225..be69f1250 100755 --- a/website/source/stylesheets/_header.less +++ b/website/source/stylesheets/_header.less @@ -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{ diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index 85a8f3e80..c301b2698 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -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;