major whitespace cleanup!

This commit is contained in:
captainill 2015-11-14 17:12:59 -08:00
parent b61dae9142
commit 7d1aac6079
13 changed files with 1111 additions and 1114 deletions

View File

@ -1,58 +1,58 @@
// add dropshadow to nav on scroll // add dropshadow to nav on scroll
$(document).ready(function(){ $(document).ready(function(){
$(document).scroll(function() { $(document).scroll(function() {
var top = $(document).scrollTop(); var top = $(document).scrollTop();
if (top > 0) $('#header').addClass("drop-shadow"); if (top > 0) $('#header').addClass("drop-shadow");
if (top === 0) $('header').removeClass("drop-shadow"); if (top === 0) $('header').removeClass("drop-shadow");
}); });
}); });
// open/close documentation side nav on small screens // open/close documentation side nav on small screens
$(document).ready(function(){ $(document).ready(function(){
$(".toggle").click(function() { $(".toggle").click(function() {
$(".sidebar-nav ul").slideToggle('slow'); $(".sidebar-nav ul").slideToggle('slow');
}); });
}); });
// Redirect to the proper checkout screen for quantity // Redirect to the proper checkout screen for quantity
$(document).ready(function() { $(document).ready(function() {
var selectedProduct = ""; var selectedProduct = "";
function setSelectedProduct() { function setSelectedProduct() {
selectedProduct = $("input[name=product]:checked").val(); selectedProduct = $("input[name=product]:checked").val();
}
$(".buy-form input[name=product]").change(function() {
setSelectedProduct();
var text = selectedProduct.charAt(0).toUpperCase() + selectedProduct.slice(1);
$("#buy-fusion").text("Buy " + text + " Licenses Now");
});
$("#buy-fusion").click(function() {
var seats = parseInt($("#seats").val(), 10);
if (isNaN(seats)) {
alert("The number of seats you want to purchase must be a number.");
return;
} else if (seats <= 0) {
alert("The number of seats you want must be greater than zero.");
return;
} }
$(".buy-form input[name=product]").change(function() { var productId = "";
setSelectedProduct(); if (selectedProduct == "fusion") {
productId = "279661674";
var text = selectedProduct.charAt(0).toUpperCase() + selectedProduct.slice(1); } else if (selectedProduct == "workstation") {
$("#buy-fusion").text("Buy " + text + " Licenses Now"); productId = "302167489";
}); } else {
alert("Unknown product selected. Please refresh and try again.");
$("#buy-fusion").click(function() { return;
var seats = parseInt($("#seats").val(), 10);
if (isNaN(seats)) {
alert("The number of seats you want to purchase must be a number.");
return;
} else if (seats <= 0) {
alert("The number of seats you want must be greater than zero.");
return;
}
var productId = "";
if (selectedProduct == "fusion") {
productId = "279661674";
} else if (selectedProduct == "workstation") {
productId = "302167489";
} else {
alert("Unknown product selected. Please refresh and try again.");
return;
}
window.location = "http://shopify.hashicorp.com/cart/" + productId + ":" + seats;
});
if ($("#buy-fusion").length > 0) {
setSelectedProduct();
} }
window.location = "http://shopify.hashicorp.com/cart/" + productId + ":" + seats;
});
if ($("#buy-fusion").length > 0) {
setSelectedProduct();
}
}); });

View File

@ -1,28 +1,28 @@
html { html {
font-size: 100%; font-size: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
body { body {
font-family: @sans-serif-stack; font-family: @sans-serif-stack;
font-size: @base-font-size; font-size: @base-font-size;
line-height: @base-line-height; line-height: @base-line-height;
color: @black; color: @black;
background-color: @white; background-color: @white;
letter-spacing: 2px; letter-spacing: 2px;
.museo-sans-regular; .museo-sans-regular;
} }
.wrapper { .wrapper {
margin-top: 80px; margin-top: 80px;
} }
.container { .container {
z-index: 999; //keep content on top z-index: 999; //keep content on top
position: relative; position: relative;
} }
h1, h1,
@ -31,96 +31,96 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: inherit; color: inherit;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
.museo-sans-bold; .museo-sans-bold;
} }
h1 { h1 {
@font-size: 70px; @font-size: 70px;
font-size: @font-size; font-size: @font-size;
line-height: 80px; line-height: 80px;
letter-spacing: 3px; letter-spacing: 3px;
span { span {
font-size: @headline-span-size; font-size: @headline-span-size;
display: block; display: block;
} }
&.all-caps { &.all-caps {
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
font-size: 40px; font-size: 40px;
} }
} }
h2 { h2 {
@font-size: 30px; @font-size: 30px;
font-size: @font-size; font-size: @font-size;
line-height: 35px; line-height: 35px;
} }
h3 { h3 {
@font-size: 30px; @font-size: 30px;
font-size: @font-size; font-size: @font-size;
line-height: @font-size; line-height: @font-size;
} }
h4 { h4 {
@font-size: 24px; @font-size: 24px;
font-size: @font-size; font-size: @font-size;
line-height: @font-size; line-height: @font-size;
} }
h5 { h5 {
@font-size: 20px; @font-size: 20px;
font-size: @font-size; font-size: @font-size;
line-height: @font-size; line-height: @font-size;
} }
h6 { h6 {
@font-size: 12px; @font-size: 12px;
font-size: @font-size; font-size: @font-size;
line-height: @font-size; line-height: @font-size;
} }
p { p {
letter-spacing: normal; letter-spacing: normal;
line-height: 32px; line-height: 32px;
a { a {
color: @docs-blue; color: @docs-blue;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid @docs-blue; border-bottom: 1px solid @docs-blue;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: darken(@blue, 10%); color: darken(@blue, 10%);
border-bottom: 1px solid darken(@blue, 10%); border-bottom: 1px solid darken(@blue, 10%);
}
} }
}
} }
a { a {
color: inherit; color: inherit;
text-decoration: none;
&:hover {
text-decoration: none; text-decoration: none;
color: @purple;
.animate-text-color;
}
&:active {
color: @blue;
}
&:hover { &:visited {
text-decoration: none;
color: @purple;
.animate-text-color;
}
&:active { }
color: @blue;
}
&:visited {
}
} }
ul { ul {
@ -128,53 +128,53 @@ ul {
} }
li { li {
line-height: @base-line-height; line-height: @base-line-height;
} }
blockquote { blockquote {
border: none; border: none;
margin: 60px; margin: 60px;
p { // blockquote p p { // blockquote p
font-size: @base-font-size * 2; font-size: @base-font-size * 2;
line-height: @base-line-height * 2; line-height: @base-line-height * 2;
font-style: italic; font-style: italic;
} }
} }
strong { strong {
.museo-sans-bold; .museo-sans-bold;
} }
em { em {
.museo-sans-regular-italic; .museo-sans-regular-italic;
} }
br { br {
display:block; display:block;
line-height: (@baseline * 2); line-height: (@baseline * 2);
} }
pre, pre,
code { code {
font-family: @mono-stack; font-family: @mono-stack;
} }
code { code {
font-size: inherit; font-size: inherit;
} }
pre { pre {
border: none; border: none;
font-size: @code-font-size; font-size: @code-font-size;
background: @black; background: @black;
color: @light-gray-text; color: @light-gray-text;
padding: 20px; padding: 20px;
line-height: @code-line-height; line-height: @code-line-height;
span { span {
color: @code-highlight-text; color: @code-highlight-text;
} }
} }
hr { hr {
@ -182,8 +182,8 @@ hr {
} }
.vr { .vr {
width: 2px; width: 2px;
height: 100%; height: 100%;
} }
form { form {
@ -191,23 +191,23 @@ form {
} }
input { input {
letter-spacing: 3px; letter-spacing: 3px;
&:focus { &:focus {
outline: none; outline: none;
} }
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
overflow: visible; overflow: visible;
padding-top: 3px; padding-top: 3px;
color: @light-gray-text; color: @light-gray-text;
} }
input:-moz-placeholder { input:-moz-placeholder {
overflow: visible; overflow: visible;
padding-top: 3px; padding-top: 3px;
color: @light-gray-text; color: @light-gray-text;
} }
@ -215,116 +215,116 @@ input:-moz-placeholder {
.meta, .meta,
.legal, .legal,
.date { .date {
color: @medium-gray-text; color: @medium-gray-text;
line-height: @base-line-height; line-height: @base-line-height;
.museo-sans-regular; .museo-sans-regular;
} }
.date { .date {
text-transform: uppercase; text-transform: uppercase;
} }
.button { .button {
color: @white; color: @white;
text-align: center; text-align: center;
background-color: @primary-button-color; background-color: @primary-button-color;
display: block; display: block;
padding: 15px 0; padding: 15px 0;
margin-top: 20px !important; margin-top: 20px !important;
text-transform: uppercase; text-transform: uppercase;
font-size: 25px; font-size: 25px;
letter-spacing: 5px; letter-spacing: 5px;
.museo-sans-light; .museo-sans-light;
.rounded;
.hover;
&.inline-button {
background-color: @vagrant-blue;
padding: 5px 20px;
color: @white !important;
font-size: 15px;
letter-spacing: 1px;
.rounded; .rounded;
.hover;
&.inline-button { a,
background-color: @vagrant-blue; a:hover {
padding: 5px 20px; color: @white;
color: @white !important;
font-size: 15px;
letter-spacing: 1px;
.rounded;
a,
a:hover {
color: @white;
}
} }
}
&.white-button { &.white-button {
background: fade(@white, 20%); background: fade(@white, 20%);
&:hover {
background: fade(@white, 30%);
}
}
&.secondary-button {
background: @light-gray;
&:hover {
background: @purple;
}
}
&.with-carat span {
margin-right: -10px; //recenter text if there's a carat after text
}
span {
// button text styles can go here
}
&:hover { &:hover {
background-color: @purple; background: fade(@white, 30%);
.animate-background-color;
} }
}
&:active { &.secondary-button {
background: @light-gray;
&:hover {
background: @purple;
} }
}
&.disabled { &.with-carat span {
background-color: @light-gray-background; margin-right: -10px; //recenter text if there's a carat after text
}
}
span {
// button text styles can go here
}
&:hover {
background-color: @purple;
.animate-background-color;
}
&:active {
}
&.disabled {
background-color: @light-gray-background;
}
} }
a.read-more { a.read-more {
color: @blue; color: @blue;
&:hover { &:hover {
color: darken(@blue, 10%); color: darken(@blue, 10%);
} }
} }
// misc. styles // misc. styles
.loading { .loading {
text-align: center; text-align: center;
font-size: @base-font-size; font-size: @base-font-size;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 5px; letter-spacing: 5px;
color: @medium-gray-text; color: @medium-gray-text;
padding: 30px 0 20px; padding: 30px 0 20px;
} }
.pinned { .pinned {
position:fixed; position:fixed;
} }
.footnote { .footnote {
font-size: 14px; font-size: 14px;
} }
.anchor { .anchor {
display: block; display: block;
position: relative; position: relative;
top: -80px; top: -80px;
visibility: hidden; visibility: hidden;
} }
.center { .center {
text-align: center; text-align: center;
} }

View File

@ -15,14 +15,14 @@
.search { .search {
//.debug; //.debug;
background: @white; background: @white;
height: 60px; height: 60px;
input, input,
button, button,
form { form {
.kill-effects; .kill-effects;
border: none; border: none;
height: 60px; height: 60px;
font-size: 20px; font-size: 20px;
.museo-sans-light-italic; .museo-sans-light-italic;
@ -35,7 +35,7 @@
&:focus { &:focus {
} //focus }
} }
button { button {
@ -44,8 +44,8 @@
} }
} //search }
} //search bar }
//pagination //pagination
.pagination { .pagination {
@ -75,71 +75,71 @@
//downloads //downloads
.downloads { .downloads {
.description { .description {
margin-bottom: 20px; margin-bottom: 20px;
}
.download {
border-bottom: 1px solid #b2b2b2;
padding-bottom: 15px;
margin-bottom: 15px;
.details {
padding-left: 95px;
ul {
margin: 0;
}
li {
display: inline-block;
&:after {
content: " | ";
}
&:last-child:after {
content: "";
}
}
a {
font-size: 22px;
color: @docs-blue;
text-decoration: none;
border-bottom: 1px solid @docs-blue;
margin-left: 3px;
&:hover {
color: darken(@blue, 10%);
border-bottom: 1px solid darken(@blue, 10%);
}
&:active {
}
}
} }
.download { .icon {
border-bottom: 1px solid #b2b2b2; img {
padding-bottom: 15px; width: 75px;
margin-bottom: 15px; }
.details {
padding-left: 95px;
ul {
margin: 0;
}
li {
display: inline-block;
&:after {
content: " | ";
}
&:last-child:after {
content: "";
}
}
a {
font-size: 22px;
color: @docs-blue;
text-decoration: none;
border-bottom: 1px solid @docs-blue;
margin-left: 3px;
&:hover {
color: darken(@blue, 10%);
border-bottom: 1px solid darken(@blue, 10%);
}
&:active {
}
}
}
.icon {
img {
width: 75px;
}
}
.os-name {
font-size: 40px;
margin-bottom: 3px;
}
} }
.poweredby { .os-name {
margin-top: 20px; font-size: 40px;
margin-bottom: 20px; margin-bottom: 3px;
img {
display: block;
margin: 0 auto;
width: 122px;
}
} }
}
.poweredby {
margin-top: 20px;
margin-bottom: 20px;
img {
display: block;
margin: 0 auto;
width: 122px;
}
}
} }

View File

@ -1,101 +1,101 @@
// footer // footer
footer { footer {
padding: 80px 0; padding: 80px 0;
background: @black url(/images/footer_background.png) center center; background: @black url(/images/footer_background.png) center center;
text-align: center; text-align: center;
color: @white; color: @white;
z-index: 999; z-index: 999;
position: relative; //z-index needs position! position: relative; //z-index needs position!
ul.footer-nav { ul.footer-nav {
color: @blue; color: @blue;
text-transform: uppercase; text-transform: uppercase;
font-size: 15px; font-size: 15px;
.museo-sans-light; .museo-sans-light;
li { li {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
a { a {
color: @blue; color: @blue;
&:hover { &:hover {
color: @purple; color: @purple;
} //li a:hover } //li a:hover
} // li a } // li a
} //li } //li
} //ul } //ul
ul.logos { ul.logos {
margin: (@baseline * 2) 0; margin: (@baseline * 2) 0;
li { li {
display: inline-block; display: inline-block;
} }
span { span {
color: @dark-gray-text; color: @dark-gray-text;
.museo-sans-light; .museo-sans-light;
text-transform: uppercase; text-transform: uppercase;
font-size: 40px; font-size: 40px;
margin: 0 10px; margin: 0 10px;
} }
.vagrant-logo-monochrome, .vagrant-logo-monochrome,
.hashi-logo-monochrome { .hashi-logo-monochrome {
&:hover { &:hover {
-khtml-opacity: .85; -khtml-opacity: .85;
-moz-opacity: .85; -moz-opacity: .85;
opacity: .85; opacity: .85;
filter: alpha(opacity=85); filter: alpha(opacity=85);
.animate-opacity; .animate-opacity;
} }
} }
.vagrant-logo-monochrome { .vagrant-logo-monochrome {
height: 80px; height: 80px;
width: 80px; width: 80px;
background: url(/images/footer_vagrant_logo.png) no-repeat center center; background: url(/images/footer_vagrant_logo.png) no-repeat center center;
margin-bottom: -25px; margin-bottom: -25px;
} }
.hashi-logo-monochrome { .hashi-logo-monochrome {
height: 80px; height: 80px;
width: 80px; width: 80px;
background: url(/images/footer_hashi_logo.png) no-repeat center center; background: url(/images/footer_hashi_logo.png) no-repeat center center;
margin-bottom: -25px; margin-bottom: -25px;
} }
} }
a.contact-link { a.contact-link {
color: @dark-gray-text; color: @dark-gray-text;
line-height: @base-line-height * 2; line-height: @base-line-height * 2;
font-size: 30px; font-size: 30px;
&:hover { &:hover {
color: @white; color: @white;
} }
&:visited { &:visited {
color: inherit; color: inherit;
} }
&:active { &:active {
color: @blue; color: @blue;
} }
} //contact link } //contact link
} //footer } //footer

View File

@ -16,7 +16,7 @@
z-index: 1001; z-index: 1001;
&.docs { &.docs {
background: @gray-background; background: @gray-background;
} }
.navbar-toggle{ .navbar-toggle{
@ -75,7 +75,7 @@
margin-top: 2px; //baseline everything margin-top: 2px; //baseline everything
.navigation-links{ .navigation-links{
float: right; float: right;
} }
} }

View File

@ -1,50 +1,50 @@
@media (max-width: 480px) { @media (max-width: 480px) {
// nav { nav {
// height: auto; height: auto;
// font-size: 13px; font-size: 13px;
// padding: 10px 0; padding: 10px 0;
// .drop-shadow; .drop-shadow;
//
// a.vagrant-docs-logo { a.vagrant-docs-logo {
// background: url(/images/logo_docs_small.png) no-repeat center center !important; background: url(/images/logo_docs_small.png) no-repeat center center !important;
// display: inline-block !important; display: inline-block !important;
// float: none !important; float: none !important;
// position: relative; position: relative;
// width: 200px !important; width: 200px !important;
// left: 50%; left: 50%;
// padding: 10px 0; padding: 10px 0;
// .reset; .reset;
// margin-left: -100px !important; margin-left: -100px !important;
// } }
//
// a.vagrant-logo { a.vagrant-logo {
// background: url(/images/logo_vagrant.png) no-repeat center center !important; background: url(/images/logo_vagrant.png) no-repeat center center !important;
// display: inline-block !important; display: inline-block !important;
// float: none !important; float: none !important;
// position: relative; position: relative;
// width: 80% !important; width: 80% !important;
// left: 50%; left: 50%;
// padding: 10px 0; padding: 10px 0;
// .reset; .reset;
// margin-left: -130px !important; margin-left: -130px !important;
// } }
//
// ul { ul {
// position: relative; position: relative;
// margin: 0 auto; margin: 0 auto;
// width: 100%; width: 100%;
// text-align: center; text-align: center;
// padding: 10px 0 0; padding: 10px 0 0;
// } }
// } }
//
// a.brand { a.brand {
// display: none !important; display: none !important;
// position: static !important; position: static !important;
// width: 200px !important; width: 200px !important;
// margin: 0 0 0 0 !important; margin: 0 0 0 0 !important;
// background-position: center center !important; background-position: center center !important;
// } }
.search { .search {
input { input {

View File

@ -65,15 +65,15 @@
.transition(@transition) { .transition(@transition) {
-webkit-transition: @transition; -webkit-transition: @transition;
-o-transition: @transition; -o-transition: @transition;
transition: @transition; transition: @transition;
} }
.translate3d (@x, @y: 0, @z: 0) { .translate3d (@x, @y: 0, @z: 0) {
-webkit-transform: translate3d(@x, @y, @z); -webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z); -moz-transform: translate3d(@x, @y, @z);
-ms-transform: translate3d(@x, @y, @z); -ms-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z); -o-transform: translate3d(@x, @y, @z);
} }
.clearfix{ .clearfix{
@ -149,15 +149,15 @@
/* /*
.sidebar-nav-selected { .sidebar-nav-selected {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(71,101,118,1) 100%); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(71,101,118,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(71,101,118,1))); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(71,101,118,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(71,101,118,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#476576',GradientType=1 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#476576',GradientType=1 );
} }
*/ */
// helpers // helpers

View File

@ -44,6 +44,6 @@
@media (max-width: 768px) { @media (max-width: 768px) {
#header { #header {
position: relative; position: relative;
} }
} }

View File

@ -1,72 +1,72 @@
.Modules { .Modules {
&.blog-archives { &.blog-archives {
span.meta.date { span.meta.date {
font-size: 12px; font-size: 12px;
}
} }
}
&.blog-landing, &.blog-post { &.blog-landing, &.blog-post {
article { article {
letter-spacing: normal; letter-spacing: normal;
margin-bottom: 30px; margin-bottom: 30px;
.meta { .meta {
font-size: 16px; font-size: 16px;
} }
img {
margin-top: 15px;
margin-bottom: 15px;
}
img { h2 {
margin-top: 15px; font-size: 45px;
margin-bottom: 15px; font-weight: bold;
} margin-top: 2px;
text-transform: none;
}
h2 { h3 {
font-size: 45px;
font-weight: bold;
margin-top: 2px;
text-transform: none;
}
h3 {
color: #476576;
font-size: 32px;
font-weight: bold;
border-bottom: 1px solid #476576;
padding-bottom: 15px;
margin-bottom: 20px;
margin-top: 20px;
}
li a {
color: @docs-blue;
text-decoration: none;
border-bottom: 1px solid @docs-blue;
&:hover {
color: darken(@blue, 10%);
border-bottom: 1px solid darken(@blue, 10%);
}
}
}
}
&.blog-sidebar {
color: #476576; color: #476576;
font-size: 18px; font-size: 32px;
line-height: 26px; font-weight: bold;
} border-bottom: 1px solid #476576;
padding-bottom: 15px;
margin-bottom: 20px;
margin-top: 20px;
}
&.sponsors { li a {
margin-top: 50px; color: @docs-blue;
text-decoration: none;
border-bottom: 1px solid @docs-blue;
ul { &:hover {
list-style-type: none; color: darken(@blue, 10%);
border-bottom: 1px solid darken(@blue, 10%);
li {
float: left;
text-align: center;
width: 50%;
height: 250px;
}
} }
}
} }
}
&.blog-sidebar {
color: #476576;
font-size: 18px;
line-height: 26px;
}
&.sponsors {
margin-top: 50px;
ul {
list-style-type: none;
li {
float: left;
text-align: center;
width: 50%;
height: 250px;
}
}
}
} }

View File

@ -1,118 +1,118 @@
// roll your own nav // roll your own nav
nav { nav {
width: 100%; width: 100%;
font-size: 15px; font-size: 15px;
text-transform: uppercase; text-transform: uppercase;
.museo-sans-light; .museo-sans-light;
color: @medium-gray-text; color: @medium-gray-text;
height: 80px; height: 80px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
background-color: @white; background-color: @white;
z-index: 9999999999; z-index: 9999999999;
&.docs {
background: @gray-background;
}
&.docs { .logo {
background: @gray-background; font-size: 0;
.img-retina('/images/logo-header.png', @project-logo-width, @project-logo-height, no-repeat);
background-position: 0, center;
height: @project-logo-height;
width: @project-logo-width;
margin-left: 15px;
&:hover{
opacity: .6;
} }
}
.logo { .by-hashicorp{
font-size: 0; &:hover{
.img-retina('/images/logo-header.png', @project-logo-width, @project-logo-height, no-repeat); svg{
background-position: 0, center; line{
height: @project-logo-height; opacity: .4;
width: @project-logo-width;
margin-left: 15px;
&:hover{
opacity: .6;
}
}
.by-hashicorp{
&:hover{
svg{
line{
opacity: .4;
}
} }
} }
} }
}
.by-hashicorp{ .by-hashicorp{
color: @project-link-color; color: @project-link-color;
&:hover{
color: black;
svg{
path,
polygon{
fill: black;
}
line{
stroke: black;
}
}
}
.svg-wrap{
font-weight: 400;
}
&:hover{
color: black;
svg{ svg{
path, path,
polygon{ polygon{
fill: @project-link-color; fill: black;
} }
line{ line{
stroke: @project-link-color; stroke: black;
} }
} }
} }
.vagrant-docs-logo { .svg-wrap{
display: block; font-weight: 400;
text-indent: -999999px;
background: url(/images/logo_docs.png) no-repeat 0 0;
height: 70px;
width: 350px;
float: left;
margin: 10px 20px;
} }
ul { svg{
margin: 25px 20px; path,
polygon{
fill: @project-link-color;
}
line{
stroke: @project-link-color;
}
}
}
li { .vagrant-docs-logo {
display: inline; display: block;
margin-left: 15px; text-indent: -999999px;
font-size: 15px; background: url(/images/logo_docs.png) no-repeat 0 0;
} height: 70px;
width: 350px;
float: left;
margin: 10px 20px;
}
li.pill { ul {
background-color: #48b4fb; margin: 25px 20px;
border-radius: 50px;
color: #FFF; li {
padding: 10px 18px; display: inline;
} margin-left: 15px;
font-size: 15px;
} }
.active-nav { li.pill {
color: @blue; background-color: #48b4fb;
border-radius: 50px;
color: #FFF;
padding: 10px 18px;
}
}
.active-nav {
color: @blue;
}
.contact {
&:hover {
background-color: @light-gray-background;
padding: 10px;
margin-right: -10px;
margin-left: 5px;
.rounded;
} }
.contact { &:active {
background-color: darken(@light-gray-background, 5%);
&:hover {
background-color: @light-gray-background;
padding: 10px;
margin-right: -10px;
margin-left: 5px;
.rounded;
}
&:active {
background-color: darken(@light-gray-background, 5%);
}
} }
}
} }

View File

@ -1,467 +1,464 @@
/* page */ /* page */
.page { //style all pages .page { //style all pages
.page-background { //page background color .page-background {
width: 100%; width: 100%;
height: 100%; height: 100%;
left:50%; left:50%;
top: 0; top: 0;
position: fixed; position: fixed;
z-index: 1; //keep it in the back z-index: 1; //keep it in the back
} //.background }
.page-contents {
h1,
h2 {
text-transform: uppercase;
text-align: left;
.museo-sans-light;
}
h1 {
font-size: 60px;
line-height: 70px;
margin: (@baseline * 2) 0 @baseline;
&:first-child {
margin-top: 0;
}
}
h2 {
font-size: 40px;
line-height: 45px;
margin: (@baseline * 2) 0 @baseline;
&:first-child {
margin-top: @baseline * .5;
}
}
}
/* home */
&.home {
h1 {
text-align: center;
}
.hero {
.padded;
background: @gray-background url(/images/vagrant_header_background.png) no-repeat center -80px;
text-align: center;
border-bottom: 1px solid #c6e0f0;
.hero-content {
top: 50%;
hgroup {
margin: (@baseline * 4) 0 20px 0;
text-shadow: 0 1px 10px rgba(255, 255, 255, 0.4);
h1 {
color: @purple-text;
margin-bottom: (@baseline * 4);
font-size: 60px;
line-height: 60px;
}
h2 {
.museo-sans-light;
color: @blue-text;
font-size: 30px;
line-height: 40px;
}
}
}
}
.why-vagrant {
.padded;
background: @light-blue-background url(/images/steps_background.png) center -120px;
h1 {
color: @blue-text;
text-transform: uppercase;
text-align: center;
font-size: 40px;
line-height: 40px;
}
hgroup {
margin: (@baseline * 3) 0;
width: 530px;
h3 {
text-align: center;
text-transform: uppercase;
font-size: 40px;
margin-bottom: @baseline;
color: @purple-text;
.museo-sans-light;
}
h4 {
font-size: 20px;
line-height: @baseline * 1.5;
.museo-sans-light;
}
}
}
.get-started {
.padded;
.get-started-bg;
h1 {
color: @white;
}
pre {
padding: 60px 80px 40px;
margin: 40px auto;
background: fade(@black, 60%);
}
.button {
//background: fade(@white, 20%);
}
}
.customers {
.padded;
background-color: @black;
border-bottom: 1px solid #333;
h1 {
color: @dark-gray-text;
.museo-sans-light
}
.customer-logos {
margin-top: @baseline * 3;
img {
width:100%;
height: auto;
-khtml-opacity: .5;
-moz-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
}
}
ul.customer-logos {
li {
img {
}
}
}
}
}
/* inner */
&.inner {
.inner-bg-large; //sidebar background
.page-background {
background-color: @gray-background; //page background
}
.page-contents { .page-contents {
background-color: @gray-background;
.padded;
}
h1, h2 {
h2 { color: @dark-blue-text;
text-transform: uppercase;
text-align: left; }
p {
}
}
/* docs */
&.docs {
.docs-bg-large; //sidebar background
.page-background {
background: @white; //page background
}
.page-contents {
.padded;
background-color: @white;
}
h1,
h2 {
color: @docs-blue;
}
h2.steps img {
margin-top: -7px;
}
&.docs-home {
}
&.docs-inner {
h3 {
color: @docs-blue;
text-transform: uppercase;
margin: @baseline 0;
.museo-sans-light;
}
h4 {
line-height: 30px;
}
h5.subhead {
.museo-sans-light;
color: @purple-text;
line-height: @baseline;
margin: -10px 0 @baseline;
}
h6.subhead {
.museo-sans-regular-italic;
color: @dark-gray-text;
line-height: @baseline;
margin: -10px 0 @baseline;
font-size: 15px;
//text-transform: uppercase;
}
}
}
&.vmware {
h1 {
text-align: center;
}
.hero {
background: @gray-background url(/images/vagrant_vmware_background.png) no-repeat center -20px;
text-align: center;
border-bottom: 1px solid #c6e0f0;
height: 690px;
.hero-content {
top: 50%;
hgroup {
margin: 375px 0 20px 0;
h1 {
color: #FFFFFF;
font-weight: normal;
margin-bottom: 10px;
font-size: 50px;
line-height: 52px;
}
h2 {
.museo-sans-light; .museo-sans-light;
color: #48b4fb;
font-size: 22px;
line-height: 28px;
}
} }
h1 { .button {
font-size: 60px; font-size: 18px;
line-height: 70px; margin-top: 0px !important;
margin: (@baseline * 2) 0 @baseline; padding: 10px 0;
&:first-child {
margin-top: 0;
} //h1 first child
} }
#buy-now-button.button {
background-color: #F26C4F;
}
}
}
.why {
.padded;
background: @light-blue-background;
h1 {
color: @blue-text;
text-transform: uppercase;
text-align: center;
font-size: 40px;
line-height: 40px;
margin-bottom: 20px;
}
.reasons {
h2 { h2 {
font-size: 40px; font-size: 20px;
line-height: 45px; letter-spacing: 1px;
margin: (@baseline * 2) 0 @baseline;
&:first-child {
margin-top: @baseline * .5;
} //h2 first child
} //h2
} //page-contents
/* home */
&.home { //style homepage
h1 {
text-align: center;
}
.hero {
.padded;
background: @gray-background url(/images/vagrant_header_background.png) no-repeat center -80px;
text-align: center;
border-bottom: 1px solid #c6e0f0;
.hero-content {
top: 50%;
hgroup {
margin: (@baseline * 4) 0 20px 0;
text-shadow: 0 1px 10px rgba(255, 255, 255, 0.4);
h1 {
color: @purple-text;
margin-bottom: (@baseline * 4);
font-size: 60px;
line-height: 60px;
}
h2 {
.museo-sans-light;
color: @blue-text;
font-size: 30px;
line-height: 40px;
}
} //hero hgroup
} //hero-content
} //homepage hero
.why-vagrant {
.padded;
background: @light-blue-background url(/images/steps_background.png) center -120px;
h1 {
color: @blue-text;
text-transform: uppercase;
text-align: center;
font-size: 40px;
line-height: 40px;
} //h1
hgroup {
margin: (@baseline * 3) 0;
width: 530px;
h3 {
text-align: center;
text-transform: uppercase;
font-size: 40px;
margin-bottom: @baseline;
color: @purple-text;
.museo-sans-light;
} //h3
h4 {
font-size: 20px;
line-height: @baseline * 1.5;
.museo-sans-light;
} //h4
} //hgroup
} //why-vagrant
.get-started {
.padded;
.get-started-bg;
h1 {
color: @white;
}
pre {
padding: 60px 80px 40px;
margin: 40px auto;
background: fade(@black, 60%);
}
.button {
//background: fade(@white, 20%);
}
} //get-started
.customers {
.padded;
background-color: @black;
border-bottom: 1px solid #333;
h1 {
color: @dark-gray-text;
.museo-sans-light
}
.customer-logos {
margin-top: @baseline * 3;
img {
width:100%;
height: auto;
-khtml-opacity: .5;
-moz-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
}
}
ul.customer-logos {
li {
img {
} //img
} //li
} //ul.cusotmer-logos
}
} //home
/* inner */
&.inner { //style inner pages
.inner-bg-large; //sidebar background
.page-background { //change inner background color!
background-color: @gray-background; //page background
}
.page-contents {
background-color: @gray-background;
.padded;
}
h2 {
color: @dark-blue-text;
} }
p { p {
line-height: 28px;
} }
}
} //inner .row {
margin-bottom: 20px;
}
/* docs */ .row.footnotes {
&.docs { //style all docs font-size: 12px;
.docs-bg-large; //sidebar background margin-bottom: 0px;
}
.page-background { //change the sidebar background color!
background: @white; //page background
}
.page-contents {
.padded;
background-color: @white;
}
h1,
h2 {
color: @docs-blue;
}
h2.steps img {
margin-top: -7px;
}
&.docs-home { //style docs-home
} //documentation-home
&.docs-inner { //style docs-inner
h3 {
color: @docs-blue;
text-transform: uppercase;
margin: @baseline 0;
.museo-sans-light;
}
h4 {
line-height: 30px;
}
h5.subhead {
.museo-sans-light;
color: @purple-text;
line-height: @baseline;
margin: -10px 0 @baseline;
}
h6.subhead {
.museo-sans-regular-italic;
color: @dark-gray-text;
line-height: @baseline;
margin: -10px 0 @baseline;
font-size: 15px;
//text-transform: uppercase;
}
} //documentation-inner
} //documentation
&.vmware {
h1 {
text-align: center;
}
.hero {
background: @gray-background url(/images/vagrant_vmware_background.png) no-repeat center -20px;
text-align: center;
border-bottom: 1px solid #c6e0f0;
height: 690px;
.hero-content {
top: 50%;
hgroup {
margin: 375px 0 20px 0;
h1 {
color: #FFFFFF;
font-weight: normal;
margin-bottom: 10px;
font-size: 50px;
line-height: 52px;
}
h2 {
.museo-sans-light;
color: #48b4fb;
font-size: 22px;
line-height: 28px;
}
} //hero hgroup
.button {
font-size: 18px;
margin-top: 0px !important;
padding: 10px 0;
}
#buy-now-button.button {
background-color: #F26C4F;
}
} //hero-content
} //vmware hero
.why {
.padded;
background: @light-blue-background;
h1 {
color: @blue-text;
text-transform: uppercase;
text-align: center;
font-size: 40px;
line-height: 40px;
margin-bottom: 20px;
} //h1
.reasons {
h2 {
font-size: 20px;
letter-spacing: 1px;
} //h2
p {
line-height: 28px;
} //p
}
.row {
margin-bottom: 20px;
}
.row.footnotes {
font-size: 12px;
margin-bottom: 0px;
}
} //why
.pricing {
.padded;
.get-started-bg;
color: @white;
h1 {
color: @white;
}
pre {
padding: 60px 80px 40px;
margin: 40px auto;
background: fade(@black, 60%);
}
.button {
//background: fade(@white, 20%);
}
.buy-form {
margin: 0 auto;
width: 500px;
p {
line-height: 28px;
}
.form {
margin-top: 20px;
.products {
margin-bottom: 15px;
}
label {
font-size: 18px;
margin-bottom: 15px;
}
input.text {
border: none;
color: #000000;
letter-spacing: 0px;
height: 40px;
width: 60px;
padding: 5px;
text-align: center;
font-size: 28px;
font-weight: bold;
-webkit-box-shadow:
inset 0 3px 5px rgba(0, 0, 0, 0.4);
}
button {
color: @white;
font-size: 22px;
font-weight: bold;
height: 50px;
background-color: #07B15F;
background-image: none;
border: none;
text-shadow: none;
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
padding-right: 15px;
}
}
}
.subtext {
margin-top: 20px;
font-size: 12px;
line-height: 16px;
}
} //.pricing
.customers {
.padded;
background-color: @black;
border-bottom: 1px solid #333;
h1 {
color: @dark-gray-text;
.museo-sans-light
}
.customer-logos {
margin-top: @baseline * 3;
img {
width:100%;
height: auto;
-khtml-opacity: .5;
-moz-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
}
}
ul.customer-logos {
li {
img {
} //img
} //li
} //ul.cusotmer-logos
}
} }
} //page
.pricing {
.padded;
.get-started-bg;
color: @white;
h1 {
color: @white;
}
pre {
padding: 60px 80px 40px;
margin: 40px auto;
background: fade(@black, 60%);
}
.button {
//background: fade(@white, 20%);
}
.buy-form {
margin: 0 auto;
width: 500px;
p {
line-height: 28px;
}
.form {
margin-top: 20px;
.products {
margin-bottom: 15px;
}
label {
font-size: 18px;
margin-bottom: 15px;
}
input.text {
border: none;
color: #000000;
letter-spacing: 0px;
height: 40px;
width: 60px;
padding: 5px;
text-align: center;
font-size: 28px;
font-weight: bold;
-webkit-box-shadow:
inset 0 3px 5px rgba(0, 0, 0, 0.4);
}
button {
color: @white;
font-size: 22px;
font-weight: bold;
height: 50px;
background-color: #07B15F;
background-image: none;
border: none;
text-shadow: none;
-webkit-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
padding-right: 15px;
}
}
}
.subtext {
margin-top: 20px;
font-size: 12px;
line-height: 16px;
}
}
.customers {
.padded;
background-color: @black;
border-bottom: 1px solid #333;
h1 {
color: @dark-gray-text;
.museo-sans-light
}
.customer-logos {
margin-top: @baseline * 3;
img {
width:100%;
height: auto;
-khtml-opacity: .5;
-moz-opacity: .5;
opacity: .5;
filter: alpha(opacity=50);
}
}
ul.customer-logos {
li {
img {
}
}
}
}
}
}

View File

@ -56,82 +56,82 @@
a { a {
display: block; display: block;
} //li a } //li a
&:hover { &:hover {
}
} //li
ul.sub { //subnav list styles
border-top: none;
list-style-type: none;
margin:0 0 5px 0;
li {
padding: 5px 0 5px 20px;
font-size: 15px;
border: none;
border-bottom: none !important;
} //ul.sub li
} //ul.sub
} //ul
.inner & { //styles for the inner-page sidebar
.padded;
position:fixed;
li.current a {
color: @purple;
}
ul { //style inner list
li { //style inner list item
color: @dark-blue-text;
padding: 20px 0;
border-top: 1px solid fade(@white, 40%);
&:last-child {
border-bottom: 1px solid fade(@white, 40%);
} }
} //li
&.current { //style the current selected list item ul.sub { //subnav list styles
} //current
} //li
} //ul
} //.inner .sidebar
.docs & { //styles for the documentation sidebar
li.current a {
color: @blue;
}
ul { //style documentation list
margin-top: 60px;
li { //style documentation list items
text-transform: capitalize;
color: @white;
padding: 12px 0;
border-top: 1px solid fade(@white, 20%);
&:first-child {
border-top: none; border-top: none;
} list-style-type: none;
margin:0 0 5px 0;
&:last-child { li {
border-bottom: 1px solid fade(@white, 20%); padding: 5px 0 5px 20px;
} font-size: 15px;
border: none;
border-bottom: none !important;
} //ul.sub li
} //ul.sub
&.current { //style the current selected list item } //ul
} //current
} //li .inner & { //styles for the inner-page sidebar
} //ul .padded;
} //.documentation .sidebar position:fixed;
} //sidebar
li.current a {
color: @purple;
}
ul { //style inner list
li { //style inner list item
color: @dark-blue-text;
padding: 20px 0;
border-top: 1px solid fade(@white, 40%);
&:last-child {
border-bottom: 1px solid fade(@white, 40%);
}
&.current { //style the current selected list item
} //current
} //li
} //ul
} //.inner .sidebar
.docs & { //styles for the documentation sidebar
li.current a {
color: @blue;
}
ul { //style documentation list
margin-top: 60px;
li { //style documentation list items
text-transform: capitalize;
color: @white;
padding: 12px 0;
border-top: 1px solid fade(@white, 20%);
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: 1px solid fade(@white, 20%);
}
&.current { //style the current selected list item
} //current
} //li
} //ul
} //.documentation .sidebar
} //sidebar

View File

@ -1,36 +1,36 @@
//typogrpahy //typogrpahy
.museo-sans-light { .museo-sans-light {
font-family: "museo-sans", helvetica, arial, sans-serif; font-family: "museo-sans", helvetica, arial, sans-serif;
font-style: normal; font-style: normal;
font-weight: 100; font-weight: 100;
} }
.museo-sans-regular { .museo-sans-regular {
font-family: "museo-sans", helvetica, arial, sans-serif; font-family: "museo-sans", helvetica, arial, sans-serif;
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
} }
.museo-sans-bold { .museo-sans-bold {
font-family: "museo-sans", helvetica, arial, sans-serif; font-family: "museo-sans", helvetica, arial, sans-serif;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
} }
.museo-sans-light-italic { .museo-sans-light-italic {
font-family: "museo-sans", helvetica, arial, sans-serif; font-family: "museo-sans", helvetica, arial, sans-serif;
font-style: italic; font-style: italic;
font-weight: 100; font-weight: 100;
} }
.museo-sans-regular-italic { .museo-sans-regular-italic {
font-family: "museo-sans", helvetica, arial, sans-serif; font-family: "museo-sans", helvetica, arial, sans-serif;
font-style: italic; font-style: italic;
font-weight: 300; font-weight: 300;
} }
.museo-sans-bold-italic { .museo-sans-bold-italic {
font-family: "museo-sans", helvetica, arial, sans-serif; font-family: "museo-sans", helvetica, arial, sans-serif;
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
} }