-
-
-
+
+
<%= partial "layouts/mobile_nav" %>
diff --git a/website/www/source/svg/_svg-by-hashicorp.erb b/website/www/source/layouts/svg/_svg-by-hashicorp.erb
similarity index 100%
rename from website/www/source/svg/_svg-by-hashicorp.erb
rename to website/www/source/layouts/svg/_svg-by-hashicorp.erb
diff --git a/website/www/source/svg/_svg-download.erb b/website/www/source/layouts/svg/_svg-download.erb
similarity index 100%
rename from website/www/source/svg/_svg-download.erb
rename to website/www/source/layouts/svg/_svg-download.erb
diff --git a/website/www/source/svg/_svg-github.erb b/website/www/source/layouts/svg/_svg-github.erb
similarity index 100%
rename from website/www/source/svg/_svg-github.erb
rename to website/www/source/layouts/svg/_svg-github.erb
diff --git a/website/www/source/svg/_svg-hashicorp-logo.erb b/website/www/source/layouts/svg/_svg-hashicorp-logo.erb
similarity index 100%
rename from website/www/source/svg/_svg-hashicorp-logo.erb
rename to website/www/source/layouts/svg/_svg-hashicorp-logo.erb
diff --git a/website/www/source/stylesheets/_header.less b/website/www/source/stylesheets/_header.less
new file mode 100644
index 000000000..b83d9e6a6
--- /dev/null
+++ b/website/www/source/stylesheets/_header.less
@@ -0,0 +1,126 @@
+//
+// Header
+// - Project Specific
+// - edits should be made here
+// --------------------------------------------------
+
+#header {
+ width: 100%;
+ // font-size: 15px;
+ text-transform: uppercase;
+ height: @header-height;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: @white;
+ z-index: 9999999999;
+
+ &.docs {
+ background: @gray-background;
+ }
+
+ .navbar-brand {
+ float: left;
+ .logo{
+ padding-left: 36px;
+ font-size: 0;
+ line-height: 77px;
+ width: @project-logo-width;
+ padding-left: 0;
+ .img-retina('/images/logo-header.png', @project-logo-width, @project-logo-height, no-repeat);
+ background-position: 0 center;
+
+ &:hover{
+ opacity: .6;
+ }
+ }
+
+ .by-hashicorp{
+ color: @project-link-color;
+
+ svg{
+ path,
+ polygon{
+ fill: @project-link-color;
+ }
+ line{
+ stroke: @project-link-color;
+ }
+ }
+
+ &:hover{
+ color: black;
+ svg{
+ path,
+ polygon{
+ fill: black;
+ }
+ line{
+ stroke: black;
+ }
+ }
+ }
+
+ .svg-wrap{
+ font-weight: 400;
+ }
+ }
+ }
+
+ .buttons{
+ margin-top: 2px; //baseline everything
+
+ .navigation-links{
+ float: right;
+ }
+ }
+
+ .main-links,
+ .external-links {
+ li > a {
+ .project-a-style();
+ }
+ }
+
+ .main-links {
+ li > a {
+ color: white;
+
+ &:hover{
+ color: @project-link-color;
+ }
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ #header {
+ .navbar-brand {
+
+ }
+ }
+}
+
+@media (max-width: 414px) {
+ #header {
+ .navbar-brand {
+ .logo{
+ padding-left: 37px;
+ font-size: 18px;
+ .img-retina('/images/logo-header.png', @project-logo-width * .75, @project-logo-height * .75, no-repeat);
+ //background-position: 0 45%;
+ }
+ }
+ }
+}
+
+
+@media (max-width: 320px) {
+ #header {
+ .navbar-brand {
+ .logo{
+ font-size: 0 !important; //hide terraform text
+ }
+ }
+ }
+}
diff --git a/website/www/source/stylesheets/_nav.less b/website/www/source/stylesheets/_nav.less
index 9c2d5c1bd..05d570861 100644
--- a/website/www/source/stylesheets/_nav.less
+++ b/website/www/source/stylesheets/_nav.less
@@ -17,14 +17,57 @@ nav {
background: @gray-background;
}
- .vagrant-logo {
- display: block;
- text-indent: -999999px;
- background: url(/images/logo_vagrant.png) no-repeat 0 0;
- height: 70px;
- width: 275px;
- float: left;
- margin: 10px 20px;
+ .logo {
+ 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;
+ }
+ }
+
+ .by-hashicorp{
+ &:hover{
+ svg{
+ line{
+ opacity: .4;
+ }
+ }
+ }
+ }
+
+ .by-hashicorp{
+ color: @project-link-color;
+
+ &:hover{
+ color: black;
+ svg{
+ path,
+ polygon{
+ fill: black;
+ }
+ line{
+ stroke: black;
+ }
+ }
+ }
+
+ .svg-wrap{
+ font-weight: 400;
+ }
+
+ svg{
+ path,
+ polygon{
+ fill: @project-link-color;
+ }
+ line{
+ stroke: @project-link-color;
+ }
+ }
}
.vagrant-docs-logo {
diff --git a/website/www/source/stylesheets/hashicorp-shared/_hashicorp-header.less b/website/www/source/stylesheets/hashicorp-shared/_hashicorp-header.less
index abb94012c..53f561ab6 100755
--- a/website/www/source/stylesheets/hashicorp-shared/_hashicorp-header.less
+++ b/website/www/source/stylesheets/hashicorp-shared/_hashicorp-header.less
@@ -2,11 +2,6 @@
// Hashicorp nav
// --------------------------------------------------
-#header{
- position: relative;
- margin-bottom: 0;
-}
-
.navigation {
color: black;
text-rendering: optimizeLegibility;
@@ -115,7 +110,6 @@
vertical-align:top;
padding: 0;
line-height: @header-height;
- padding-left: @project-logo-width + @project-logo-pad-left;
background-position: 0 center;
.transition(all 300ms ease-in);
@@ -145,7 +139,9 @@
font-family: @header-font-family;
font-weight: 600;
font-size: 0;
+ letter-spacing: 0;
text-decoration: none;
+ text-transform: none;
&.white{
color: white;
@@ -166,8 +162,13 @@
text-decoration: none;
}
+ &:hover{
+ .transition(all 300ms ease-in);
+ }
+
.svg-wrap{
font-size: 13px;
+ .transition(all 300ms ease-in);
}
svg{
diff --git a/website/www/source/stylesheets/hashicorp-shared/_hashicorp-utility.less b/website/www/source/stylesheets/hashicorp-shared/_hashicorp-utility.less
index f94100b1b..8ecb75ee6 100755
--- a/website/www/source/stylesheets/hashicorp-shared/_hashicorp-utility.less
+++ b/website/www/source/stylesheets/hashicorp-shared/_hashicorp-utility.less
@@ -11,7 +11,7 @@
@header-font-family: @font-family-open-sans;
@header-font-weight: 600; // semi-bold
-@header-height: 74px;
+@header-height: 80px;
@header-mobile-height: 60px;
@by-hashicorp-width: 74px;
@by-hashicorp-height: 16px;
@@ -38,6 +38,25 @@
}
}
+.img-retina(@image, @width, @height, @repeat: no-repeat) {
+ @filename : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
+ @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
+ background-image: ~`"url(@{filename}.@{extension})"`;
+ background-repeat: @repeat;
+
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 2),
+ only screen and ( min--moz-device-pixel-ratio: 2),
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
+ only screen and ( min-device-pixel-ratio: 2),
+ only screen and ( min-resolution: 192dpi),
+ only screen and ( min-resolution: 2dppx) {
+ /* on retina, use image that's scaled by 2 */
+ background-image: ~`"url(@{filename}@2x.@{extension})"`;
+ background-size: @width @height;
+ }
+}
+
//
// -------------------------
.anti-alias() {
diff --git a/website/www/source/stylesheets/hashicorp-shared/_project-utility.less b/website/www/source/stylesheets/hashicorp-shared/_project-utility.less
index f27a6baaa..03d7eca54 100755
--- a/website/www/source/stylesheets/hashicorp-shared/_project-utility.less
+++ b/website/www/source/stylesheets/hashicorp-shared/_project-utility.less
@@ -4,14 +4,16 @@
// --------------------------------------------------
// Variables
-@project-logo-width: 40px;
-@project-logo-height: 40px;
+@project-logo-width: 169px;
+@project-logo-height: 46px;
@project-logo-pad-left: 0px;
+@project-link-color: #8d9ba8;
// Mixins
.project-a-style{
font-weight: 300;
opacity: .75;
+ color: @project-link-color;
&:hover{
color: $white;
diff --git a/website/www/source/stylesheets/vagrantup.less b/website/www/source/stylesheets/vagrantup.less
index be37466e9..de14b3c71 100644
--- a/website/www/source/stylesheets/vagrantup.less
+++ b/website/www/source/stylesheets/vagrantup.less
@@ -14,7 +14,8 @@ v a g r a n t u p
@import 'hashicorp-shared/_hashicorp-header';
@import 'hashicorp-shared/_hashicorp-mobile-nav';
-@import '_nav';
+// @import '_nav';
+@import '_header';
@import '_components';
@import '_modules';
@import '_sidebar';