header css

This commit is contained in:
JT 2014-07-23 00:23:05 -07:00
parent 8717099774
commit 2da6524e41
4 changed files with 102 additions and 59 deletions

View File

@ -37,29 +37,32 @@
<body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
<div id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="/">Terraform</a>
</div>
<div class="col-xs-12 col-md-4">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="/">Terraform</a>
</div>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="buttons nav navbar-nav navbar-right rls-sb">
<li class="first download terra-btn"><a href="/downloads.html">Download</a></li>
<li class="github terra-btn"><a href="https://github.com/hashicorp/terraform">Github</a></li>
</ul>
<div class="col-xs-12 col-md-8 nav-white">
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="buttons nav navbar-nav navbar-right rls-sb">
<li class="first download terra-btn"><a href="/downloads.html">Download</a></li>
<li class="github terra-btn"><a href="https://github.com/hashicorp/terraform">Github</a></li>
</ul>
<ul class="main-links nav navbar-nav navbar-right rls-sb">
<li class="first li-under"><a href="/intro/index.html">Intro</a></li>
<li class="li-under"><a href="/docs/index.html">Docs</a></li>
<li class="li-under"><a href="/community.html">Community</a></li>
<li class="li-under"><a href="http://demo.terraform.io/">Demo</a></li>
</ul>
</nav>
</div>
<ul class="main-links nav navbar-nav navbar-right rls-sb">
<li class="first li-under"><a href="/intro/index.html">Intro</a></li>
<li class="li-under"><a href="/docs/index.html">Docs</a></li>
<li class="li-under"><a href="/community.html">Community</a></li>
<li class="li-under"><a href="http://demo.terraform.io/">Demo</a></li>
</ul>
</nav>
</div>
</div>
</div>

View File

@ -11,7 +11,7 @@ body.layout-intro{
min-height: 800px;
background-color: white;
&::before {
/* &::before {
content: "";
position: absolute;
top: 0;
@ -20,7 +20,7 @@ body.layout-intro{
right: 0;
border-left: none;
box-shadow: 9999px 0 0 white;
}
}*/
>div{
position: relative;

View File

@ -4,7 +4,40 @@
body.page-sub{
#header{
height: 90px;
background-color: @purple;
.navbar-brand {
}
.nav-white{
height: 90px;
background-color: white;
}
.main-links.navbar-nav{
float: left !important;
li > a {
color: black;
}
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;
}
}
}
}
@ -17,6 +50,7 @@ body.page-sub{
.navbar-collapse{
box-shadow: none;
margin-top: 10px;
}
&.navbar-static-top{
@ -70,10 +104,6 @@ body.page-sub{
}
}
.nav.li-under a::after {
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: transparent;
/*color: @p;
@ -83,16 +113,6 @@ body.page-sub{
.main-links.navbar-nav{
margin-top: 26px;
li + li::before {
content: "";
position: absolute;
left: 0;
top: 35px;
width: 4px;
height: 23px;
padding-right: 15px;
}
/*li + li.li-under a::after{
left: 15px;
}*/

View File

@ -78,8 +78,37 @@ pre {
text-align: center;
}
body.page-sub #header {
height: 90px;
background-color: #822ff7;
}
body.page-sub #header .nav-white {
height: 90px;
background-color: white;
}
body.page-sub #header .main-links.navbar-nav {
float: left !important;
}
body.page-sub #header .main-links.navbar-nav li > a {
color: black;
}
body.page-sub #header .main-links.navbar-nav li + li {
padding-left: 6px;
}
body.page-sub #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;
}
#header {
-webkit-font-smoothing: antialiased;
position: relative;
@ -89,6 +118,7 @@ body.page-sub #header {
}
#header .navbar-collapse {
box-shadow: none;
margin-top: 10px;
}
#header.navbar-static-top {
z-index: 1000;
@ -150,15 +180,6 @@ body.page-sub #header {
left: 15px;
}*/
}
#header .main-links.navbar-nav li + li::before {
content: "";
position: absolute;
left: 0;
top: 35px;
width: 4px;
height: 23px;
padding-right: 15px;
}
#header .main-links.navbar-nav li > a {
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
line-height: 26px;
@ -923,17 +944,16 @@ body.layout-docs > .container .col-md-8[role=main],
body.layout-intro > .container .col-md-8[role=main] {
min-height: 800px;
background-color: white;
}
body.layout-docs > .container .col-md-8[role=main]::before,
body.layout-intro > .container .col-md-8[role=main]::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: none;
box-shadow: 9999px 0 0 white;
/* &::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: none;
box-shadow: 9999px 0 0 white;
}*/
}
body.layout-docs > .container .col-md-8[role=main] > div,
body.layout-intro > .container .col-md-8[role=main] > div {