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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
website/source/layouts/_header.erb
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}" %>"> <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 id="header" class="<%= current_page.data.page_title == "home" ? "" : "navbar-static-top" %>">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="col-xs-12 col-md-4">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <div class="navbar-header">
<span class="sr-only">Toggle navigation</span> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="icon-bar"></span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <span class="icon-bar"></span>
<a class="navbar-brand logo" href="/">Terraform</a> </button>
</div> <a class="navbar-brand logo" href="/">Terraform</a>
</div>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <div class="col-xs-12 col-md-8 nav-white">
<ul class="buttons nav navbar-nav navbar-right rls-sb"> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<li class="first download terra-btn"><a href="/downloads.html">Download</a></li> <ul class="buttons nav navbar-nav navbar-right rls-sb">
<li class="github terra-btn"><a href="https://github.com/hashicorp/terraform">Github</a></li> <li class="first download terra-btn"><a href="/downloads.html">Download</a></li>
</ul> <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"> <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="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="/docs/index.html">Docs</a></li>
<li class="li-under"><a href="/community.html">Community</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> <li class="li-under"><a href="http://demo.terraform.io/">Demo</a></li>
</ul> </ul>
</nav> </nav>
</div>
</div> </div>
</div> </div>

4
website/source/stylesheets/_docs.less
View File

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

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

@ -4,7 +4,40 @@
body.page-sub{ body.page-sub{
#header{ #header{
height: 90px;
background-color: @purple; 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{ .navbar-collapse{
box-shadow: none; box-shadow: none;
margin-top: 10px;
} }
&.navbar-static-top{ &.navbar-static-top{
@ -70,10 +104,6 @@ body.page-sub{
} }
} }
.nav.li-under a::after {
}
.nav > li > a:hover, .nav > li > a:focus { .nav > li > a:hover, .nav > li > a:focus {
background-color: transparent; background-color: transparent;
/*color: @p; /*color: @p;
@ -83,16 +113,6 @@ body.page-sub{
.main-links.navbar-nav{ .main-links.navbar-nav{
margin-top: 26px; 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{ /*li + li.li-under a::after{
left: 15px; left: 15px;
}*/ }*/

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

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