add layout class names and subpage class

This commit is contained in:
JT 2014-04-08 14:01:49 -07:00
parent 4567a4e220
commit 358b925efe
6 changed files with 63 additions and 19 deletions

View File

@ -39,7 +39,7 @@
</script>
</head>
<body class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>">
<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">

View File

@ -2,11 +2,23 @@
// Docs
// --------------------------------------------------
body.layout-docs,
body.layout-intro{
background: #f7f3f9;
>.container{
.col-md-8[role=main]{
min-height: 600px;
background-color: white;
}
}
}
.docs-sidebar{
margin-bottom: 30px;
margin-top: 50px;
margin-right: 4%;
background-color: @tan;
// background-color: @tan;
border-radius: @el-border-radius;
a{

View File

@ -2,6 +2,12 @@
// Header
// --------------------------------------------------
body.page-sub{
#header{
.consul-gradient-bg();
}
}
#footer,
#header {
.anti-alias();
@ -24,6 +30,7 @@
.navbar-toggle{
margin-top: 14px;
margin-bottom: 14px;
border: 2px solid @white;
.icon-bar{
border: 1px solid @white;
@ -200,14 +207,7 @@
@media (max-width: 768px) {
#header{
background: #694a9c; /* Old browsers */
background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */
.consul-gradient-bg();
.navbar-right{
float: none !important;

View File

@ -15,14 +15,7 @@
padding-bottom: 0;
margin-top: -92px;
color: @jumbotron-color;
background: #694a9c; /* Old browsers */
background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */
.consul-gradient-bg();
&.mobile-hero{
background: transparent url( ../images/node-hero-pattern.jpg ) center center;

View File

@ -10,3 +10,15 @@
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.consul-gradient-bg(){
background: #694a9c; /* Old browsers */
background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#694a9c), color-stop(100%,#cd2028)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #694a9c 0%,#cd2028 100%); /* IE10+ */
background: linear-gradient(to right, #694a9c 0%,#cd2028 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#694a9c', endColorstr='#cd2028',GradientType=1 ); /* IE6-9 */
}

View File

@ -70,6 +70,24 @@ pre {
padding-top: 15px;
padding-bottom: 15px;
}
body.page-sub #header {
background: #694a9c;
/* Old browsers */
background: -moz-linear-gradient(left, #694a9c 0%, #cd2028 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #694a9c), color-stop(100%, #cd2028));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #694a9c 0%, #cd2028 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #694a9c 0%, #cd2028 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #694a9c 0%, #cd2028 100%);
/* IE10+ */
background: linear-gradient(to right, #694a9c 0%, #cd2028 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#694a9c', endColorstr='#cd2028', GradientType=1);
/* IE6-9 */
}
#footer,
#header {
-webkit-font-smoothing: antialiased;
@ -93,6 +111,7 @@ pre {
#footer .navbar-toggle,
#header .navbar-toggle {
margin-top: 14px;
margin-bottom: 14px;
border: 2px solid #ffffff;
}
#footer .navbar-toggle .icon-bar,
@ -612,11 +631,19 @@ pre {
.people .person .bio {
padding-left: 150px;
}
body.layout-docs,
body.layout-intro {
background: #f7f3f9;
}
body.layout-docs > .container .col-md-8[role=main],
body.layout-intro > .container .col-md-8[role=main] {
min-height: 600px;
background-color: white;
}
.docs-sidebar {
margin-bottom: 30px;
margin-top: 50px;
margin-right: 4%;
background-color: #f0f0e5;
border-radius: 6px;
}
.docs-sidebar a {