diff --git a/website/Gemfile.lock b/website/Gemfile.lock index 7034f311e..725b16df3 100644 --- a/website/Gemfile.lock +++ b/website/Gemfile.lock @@ -186,6 +186,3 @@ PLATFORMS DEPENDENCIES middleman-hashicorp! - -BUNDLED WITH - 1.10.6 diff --git a/website/source/assets/javascripts/app/Init.js b/website/source/assets/javascripts/app/Init.js index 074c95d8d..06e772beb 100644 --- a/website/source/assets/javascripts/app/Init.js +++ b/website/source/assets/javascripts/app/Init.js @@ -21,6 +21,12 @@ var Init = { if (this.Pages[id]) { this.Pages[id](); } + //always init sidebar + Init.initializeSidebar(); + }, + + initializeSidebar: function(){ + new Sidebar(); }, generateAnimatedLogo: function(){ diff --git a/website/source/assets/javascripts/app/Sidebar.js b/website/source/assets/javascripts/app/Sidebar.js new file mode 100644 index 000000000..bb5d4cc9e --- /dev/null +++ b/website/source/assets/javascripts/app/Sidebar.js @@ -0,0 +1,50 @@ +(function(){ + +Sidebar = Base.extend({ + + $body: null, + $overlay: null, + $sidebar: null, + $sidebarHeader: null, + $sidebarImg: null, + $toggleButton: null, + + constructor: function(){ + this.$body = $('body'); + this.$overlay = $('.sidebar-overlay'); + this.$sidebar = $('#sidebar'); + this.$sidebarHeader = $('#sidebar .sidebar-header'); + this.$toggleButton = $('.navbar-toggle'); + this.sidebarImg = this.$sidebarHeader.css('background-image'); + + this.addEventListeners(); + }, + + addEventListeners: function(){ + var _this = this; + + _this.$toggleButton.on('click', function() { + _this.$sidebar.toggleClass('open'); + if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) { + _this.$overlay.addClass('active'); + _this.$body.css('overflow', 'hidden'); + } else { + _this.$overlay.removeClass('active'); + _this.$body.css('overflow', 'auto'); + } + + return false; + }); + + _this.$overlay.on('click', function() { + $(this).removeClass('active'); + _this.$body.css('overflow', 'auto'); + _this.$sidebar.removeClass('open'); + }); + } + +}); + +window.Sidebar = Sidebar; + +})(); diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js index 9180016ef..15542d8dc 100644 --- a/website/source/assets/javascripts/application.js +++ b/website/source/assets/javascripts/application.js @@ -21,4 +21,5 @@ //= require app/Engine.Shape //= require app/Engine.Shape.Puller //= require app/Engine.Typewriter +//= require app/Sidebar //= require app/Init diff --git a/website/source/assets/stylesheets/_fonts.scss b/website/source/assets/stylesheets/_fonts.scss index 3f1d4aaed..c14cb7071 100755 --- a/website/source/assets/stylesheets/_fonts.scss +++ b/website/source/assets/stylesheets/_fonts.scss @@ -2,6 +2,7 @@ // Typography // -------------------------------------------------- + //light .rls-l{ font-family: $font-family-lato; diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index 408d11d78..192334442 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,382 +1,58 @@ // // Header +// - Project Specific +// - edits should be made here // -------------------------------------------------- -body.page-sub{ - - .terra-btn{ - background-color: rgba(130, 47, 247, 1); - } - - #header{ - height: 90px; - background-color: $purple; - - .navbar-collapse{ - background-color: rgba(255, 255, 255, 0.98); - } - - .nav-logo{ - height: 90px; - } - - .nav-white{ - height: 90px; - background-color: white; - } - - .main-links.navbar-nav{ - float: left !important; - li > a { - color: black; - @include transition( color 0.3s ease ); - } - } - - .buttons.nav > li > a, .buttons.nav > li > a { - //background-color: lighten($purple, 1%); - @include transition( background-color 0.3s ease ); - } - - .buttons.nav > li > a:hover, .buttons.nav > li > a:focus { - background-color: black; - @include transition( background-color 0.3s ease ); - } - - .main-links.nav > li > a:hover, .main-links.nav > li > a:focus { - color: $purple; - @include transition( color 0.3s ease ); - } - } -} - #header { - position: relative; - color: $white; - text-rendering: optimizeLegibility; - margin-bottom: 0; - - &.navbar-static-top{ - height:70px; - - -webkit-transform:translate3d(0,0,0); - -moz-transform:translate3d(0,0,0); - -ms-transform:translate3d(0,0,0); - -o-transform:translate3d(0,0,0); - transform:translate3d(0,0,0); - z-index: 1000; - } - - a{ - color: $white; - } - - .navbar-toggle{ - margin-top: 26px; - margin-bottom: 14px; - margin-right: 0; - border: 2px solid $white; - border-radius: 0; - .icon-bar{ - border: 1px solid $white; - border-radius: 0; - } - } - .navbar-brand { - &.logo{ - margin-top: 15px; - padding: 5px 0 0 68px; - height: 56px; - line-height: 56px; - font-size: 24px; - @include lato-light(); - text-transform: uppercase; - background: image-url('consul-header-logo.png') 0 0 no-repeat; - @include img-retina("header-logo.png", "header-logo@2x.png", 50px, 56px); - -webkit-font-smoothing: default; + .logo{ + color: $black; + font-size: 28px; + background: image-url('../images/logo-header.png') 0 0 no-repeat; + @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-size, $project-logo-size); + background-position: 0 center; + + &:hover{ + color: $orange; + } } - } - .navbar-nav{ - -webkit-font-smoothing: antialiased; - li{ - position: relative; - - > a { - font-size: 12px; - text-transform: uppercase; - letter-spacing: 3px; - padding-left: 22px; - @include transition( color 0.3s ease ); - } - - &.first{ - >a{ - padding-left: 15px; + .by{ + color: $black; + &:hover{ + svg{ + line{ + stroke: $purple; + } } } } } - .nav > li > a:hover, .nav > li > a:focus { - background-color: transparent; - color: lighten($purple, 15%); - @include transition( color 0.3s ease ); + .buttons{ + margin-top: 2px; //baseline everything + + ul.navbar-nav{ + li { + &:hover{ + svg path{ + fill: $purple; + } + } + + svg path{ + fill: $white; + } + } + } } - .main-links.navbar-nav{ - margin-top: 28px; - - li + li{ - padding-left: 6px; - } - - li + li::before { - content: ""; - position: absolute; - left: 0; - top: 7px; - width: 1px; - height: 12px; - background-color: $purple; - @include skewY(24deg); - padding-right: 0; - } - + .main-links, + .external-links { li > a { - //border-bottom: 2px solid rgba(255, 255, 255, .2); - line-height: 26px; - margin: 0 8px; - padding: 0 0 0 4px; - } - - } - - .buttons.navbar-nav{ - margin-top: 25px; - margin-left: 30px; - - li{ - &.first{ - margin-right: 13px; - } - - &.download{ - a{ - padding-left: 30px; - background: image-url("header-download-icon.png") 12px 8px no-repeat; - @include img-retina("header-download-icon.png", "header-download-icon@2x.png", 12px, 13px); - } - } - - &.github{ - a{ - background: image-url("header-github-icon.png") 12px 7px no-repeat; - @include img-retina("header-github-icon.png", "header-github-icon@2x.png", 12px, 13px); - } - } - } - - li > a { - color: white; - padding-top: 4px; - padding-bottom: 4px; - padding-left: 32px; - padding-right: 12px; - letter-spacing: 0.05em; + @include project-a-style(); + font-weight: 400; } } } - -@media (min-width: 1200px) { - - #header{ - .main-links.navbar-nav{ - margin-top: 28px; - - li + li{ - padding-left: 6px; - } - - li + li::before { - content: ""; - position: absolute; - left: 0; - top: 9px; - width: 6px; - height: 8px; - background-color: $purple; - @include skewY(24deg); - padding-right: 8px; - } - - li > a { - //border-bottom: 2px solid rgba(255, 255, 255, .2); - line-height: 26px; - margin: 0 12px; - padding: 0 0 0 4px; - } - - } - } -} - -@media (min-width: 992px) { - - .collapse{ - margin-top: 8px; - } - - //homepage has more space at this width to accommodate chevrons - .page-home{ - #header{ - .main-links.navbar-nav{ - li + li{ - padding-left: 6px; - } - - li + li::before { - content: ""; - position: absolute; - left: 0; - top: 9px; - width: 6px; - height: 8px; - background-color: $purple; - @include skewY(24deg); - padding-right: 8px; - } - } - } - } -} - - - -@media (min-width: 768px) and (max-width: 992px) { - - body.page-home{ - .nav-logo{ - width: 30%; - } - .nav-white{ - margin-top: 8px; - width: 70%; - } - .buttons.navbar-nav{ - li{ - > a{ - padding-right: 4px !important; - text-indent: -9999px; - white-space: nowrap; - } - } - } - } -} - - -@media (max-width: 992px) { - - #header { - .navbar-brand { - &.logo{ - span{ - width: 120px; - height: 39px; - margin-top: 12px; - background-size: 120px 39px; - } - } - } - } -} - -@media (max-width: 768px) { - - body.page-sub{ - #header{ - .nav-white{ - background-color: transparent; - } - } - } - - #header{ - .buttons.navbar-nav{ - float: none !important; - margin: 0; - padding-bottom: 0 !important; - - li{ - &.first{ - margin-right: 0; - } - } - } - } - - //#footer, - #header{ - .buttons.navbar-nav, - .main-links.navbar-nav{ - display: block; - padding-bottom: 15px; - li{ - display: block; - float: none; - margin-top: 15px; - } - - .li-under a::after, - li + li::before { - display: none; - } - } - } - - //#footer, - #header{ - .main-links.navbar-nav{ - float: left !important; - li > a { - padding: 0; - padding-left: 0; - line-height: 22px; - } - } - } -} - -@media (max-width: 763px) { - .navbar-static-top { - .nav-white { - background-color:rgba(0,0,0,0.5); - } - } -} - -@media (max-width: 320px) { - - #header{ - .navbar-brand { - &.logo{ - padding:0 0 0 54px !important; - font-size: 20px !important; - line-height:42px !important; - margin-top: 23px !important ; - @include img-retina("../images/header-logo.png", "../images/header-logo@2x.png", 39px, 44px); - } - } - - } - - #feature-auto{ - .terminal-text{ - line-height: 48px !important; - font-size: 20px !important; - } - } - -} diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss new file mode 100644 index 000000000..4c632d480 --- /dev/null +++ b/website/source/assets/stylesheets/_sidebar.scss @@ -0,0 +1,23 @@ +// +// Sidebar +// - Project Specific +// - Make sidebar edits here +// -------------------------------------------------- + +.sidebar { + .sidebar-nav { + // Links + //---------------- + li { + a { + color: $black; + + svg{ + path{ + fill: $black; + } + } + } + } + } +} diff --git a/website/source/assets/stylesheets/_utilities.scss b/website/source/assets/stylesheets/_utilities.scss index b01423f50..4f30e502b 100755 --- a/website/source/assets/stylesheets/_utilities.scss +++ b/website/source/assets/stylesheets/_utilities.scss @@ -2,27 +2,11 @@ // Utility classes // -------------------------------------------------- - -// -// ------------------------- - @mixin anti-alias() { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } -@mixin 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 */ - -} - @mixin lato-light() { font-family: $font-family-lato; font-weight: 300; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index 95ae64b73..3776f9056 100755 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -1,13 +1,12 @@ @import 'bootstrap-sprockets'; @import 'bootstrap'; -@import url("//fonts.googleapis.com/css?family=Lato:300,400,700"); +@import url("//fonts.googleapis.com/css?family=Lato:300,400,700|Open+Sans:300,400,600"); // Core variables and mixins @import '_variables'; -@import '_mixins'; -// Utility classes +// Utility @import '_utilities'; // Core CSS @@ -16,11 +15,18 @@ //Global Site @import '_global'; +// Hashicorp Shared Project Styles +@import 'hashicorp-shared/_project-utility'; +@import 'hashicorp-shared/_hashicorp-utility'; +@import 'hashicorp-shared/_hashicorp-header'; +@import 'hashicorp-shared/_hashicorp-sidebar'; + // Components @import '_header'; @import '_footer'; @import '_jumbotron'; @import '_buttons'; +@import '_sidebar'; // Pages @import '_home'; diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss new file mode 100755 index 000000000..915820c33 --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss @@ -0,0 +1,166 @@ +// +// Hashicorp header +// - Shared throughout projects +// - Edits should not be made here +// -------------------------------------------------- + +#header { + position: relative; + color: $white; + text-rendering: optimizeLegibility; + margin-bottom: 0; + transition: all 1s ease; + + &.white{ + .navbar-brand { + .by{ + svg{ + path, + polygon{ + fill: white; + } + line{ + stroke: white; + } + } + } + } + } + + .navbar-header{ + .navbar-toggle{ + height: $header-height; + margin: 0; + padding-right: 15px; + border-radius: 0; + .icon-bar{ + border: 1px solid $black; + border-radius: 0; + } + } + } + + .navbar-brand { + display: block; + height: $header-height; + padding: 0; + margin: 0 10px 0 0 ; + + .logo{ + display: inline-block; + height: $header-height; + vertical-align:top; + padding: 0; + line-height: $header-height; + padding-left: $project-logo-size + $project-logo-pad-left; + background-position: 0 center; + + &:hover{ + @include transition(all 300ms ease-in); + text-decoration: none; + } + } + + .by{ + display: inline-block; + vertical-align:top; + height: $header-height; + margin-left: 3px; + padding-top: 2px; + line-height: $header-height; + font-family: $header-font-family; + font-weight: 300; + font-size: 0; + text-decoration: none; + + .svg-wrap{ + font-size: 13px; + } + + svg{ + &.svg-by{ + width: $by-hashicorp-width; + height: $by-hashicorp-height; + margin-bottom: -4px; + margin-left: 4px; + } + + &.svg-logo{ + width: 16px; + height: 16px; + margin-bottom: -3px; + margin-left: 4px; + } + + path, + polygon{ + fill: black; + @include transition(all 300ms ease-in); + + &:hover{ + @include transition(all 300ms ease-in); + } + } + line{ + stroke: black; + + &:hover{ + @include transition(all 300ms ease-in); + } + } + } + } + } + + .external-links { + li { + position: relative; + + svg path{ + @include transition( all 0.3s ease ); + } + + &:hover{ + svg path{ + @include transition( all 0.3s ease ); + } + } + + &.download{ + margin-right: 10px; + } + + >a { + padding-left: 12px !important; + svg{ + position: absolute; + left: -12px; + top: 50%; + margin-top: -7px; + width: 14px; + height: 14px; + } + } + } + } + + .main-links{ + margin-right: $nav-margin-right * 2; + } + + .main-links, + .external-links { + li > a { + @include hashi-a-style(); + margin: 0 10px; + padding-top: 1px; + line-height: $header-height; + } + } + + .nav > li > a:hover, .nav > li > a:focus { + background-color: transparent; + color: $black; + @include transition( color 0.3s ease ); + } +} diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss new file mode 100644 index 000000000..4a5a6ae07 --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss @@ -0,0 +1,293 @@ +// +// Hashicorp Sidebar +// - Shared throughout projects +// - Edits should not be made here +// -------------------------------------------------- + +// Base variables +// -------------------------------------------------- +$screen-tablet: 768px; + +$gray-darker: #212121; // #212121 - text +$gray-secondary: #757575; // #757575 - secondary text, icons +$gray: #bdbdbd; // #bdbdbd - hint text +$gray-light: #e0e0e0; // #e0e0e0 - divider +$gray-lighter: #f5f5f5; // #f5f5f5 - background +$link-color: $gray-darker; +$link-bg: transparent; +$link-hover-color: $gray-lighter; +$link-hover-bg: $gray-lighter; +$link-active-color: $gray-darker; +$link-active-bg: $gray-light; +$link-disabled-color: $gray-light; +$link-disabled-bg: transparent; + +/* -- Sidebar style ------------------------------- */ + +// Sidebar variables +// -------------------------------------------------- +$zindex-sidebar-fixed: 1035; + +$sidebar-desktop-width: 280px; +$sidebar-width: 240px; + +$sidebar-padding: 16px; +$sidebar-divider: $sidebar-padding/2; + +$sidebar-icon-width: 40px; +$sidebar-icon-height: 20px; + +@mixin sidebar-nav-base { + text-align: center; + + &:last-child{ + border-bottom: none; + } + + li > a { + background-color: $link-bg; + } + li:hover > a { + background-color: $link-hover-bg; + } + li:focus > a, li > a:focus { + background-color: $link-bg; + } + + > .open > a { + &, + &:hover, + &:focus { + background-color: $link-hover-bg; + } + } + + > .active > a { + &, + &:hover, + &:focus { + background-color: $link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + background-color: $link-disabled-bg; + } + } + + // Dropdown menu items + > .dropdown { + // Remove background color from open dropdown + > .dropdown-menu { + background-color: $link-hover-bg; + + > li > a { + &:focus { + background-color: $link-hover-bg; + } + &:hover { + background-color: $link-hover-bg; + } + } + + > .active > a { + &, + &:hover, + &:focus { + color: $link-active-color; + background-color: $link-active-bg; + } + } + } + } +} + +// +// Sidebar +// -------------------------------------------------- + +// Sidebar Elements +// +// Basic style of sidebar elements +.sidebar { + position: relative; + display: block; + min-height: 100%; + overflow-y: auto; + overflow-x: hidden; + border: none; + @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1)); + @include clearfix(); + background-color: $white; + + ul{ + padding-left: 0; + list-style-type: none; + } + + .sidebar-divider, .divider { + width: 80%; + height: 1px; + margin: 8px auto; + background-color: lighten($gray, 20%); + } + + // Sidebar heading + //---------------- + .sidebar-header { + position: relative; + margin-bottom: $sidebar-padding; + @include transition(all .2s ease-in-out); + } + + .sidebar-image { + padding-top: 24px; + img { + display: block; + margin: 0 auto; + } + } + + + // Sidebar icons + //---------------- + .sidebar-icon { + display: inline-block; + height: $sidebar-icon-height; + margin-right: $sidebar-divider; + text-align: left; + font-size: $sidebar-icon-height; + vertical-align: middle; + + &:before, &:after { + vertical-align: middle; + } + } + + .sidebar-nav { + margin: 0; + padding: 0; + + @include sidebar-nav-base(); + + // Links + //---------------- + li { + position: relative; + list-style-type: none; + text-align: center; + + a { + position: relative; + cursor: pointer; + user-select: none; + @include hashi-a-style-core(); + + svg{ + top: 2px; + width: 14px; + height: 14px; + margin-bottom: -2px; + margin-right: 4px; + } + } + } + } +} + +// Sidebar toggling +// +// Hide sidebar +.sidebar { + width: 0; + @include translate3d(-$sidebar-desktop-width, 0, 0); + + &.open { + min-width: $sidebar-desktop-width; + width: $sidebar-desktop-width; + @include translate3d(0, 0, 0); + } +} + +// Sidebar positions: fix the left/right sidebars +.sidebar-fixed-left, +.sidebar-fixed-right, +.sidebar-stacked { + position: fixed; + top: 0; + bottom: 0; + z-index: $zindex-sidebar-fixed; +} +.sidebar-stacked { + left: 0; +} +.sidebar-fixed-left { + left: 0; + box-shadow: 2px 0px 25px rgba(0,0,0,0.15); + -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15); +} +.sidebar-fixed-right { + right: 0; + box-shadow: 0px 2px 25px rgba(0,0,0,0.15); + -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15); + + @include translate3d($sidebar-desktop-width, 0, 0); + &.open { + @include translate3d(0, 0, 0); + } + .icon-material-sidebar-arrow:before { + content: "\e614"; // icon-material-arrow-forward + } +} + +// Sidebar size +// +// Change size of sidebar and sidebar elements on small screens +@media (max-width: $screen-tablet) { + .sidebar.open { + min-width: $sidebar-width; + width: $sidebar-width; + } + + .sidebar .sidebar-header { + //height: $sidebar-width * 9/16; // 16:9 header dimension + } + + .sidebar .sidebar-image { + /* img { + width: $sidebar-width/4 - $sidebar-padding; + height: $sidebar-width/4 - $sidebar-padding; + } */ + } +} + +.sidebar-overlay { + visibility: hidden; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + background: $white; + z-index: $zindex-sidebar-fixed - 1; + + -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); + -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); + transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); +} + +.sidebar-overlay.active { + opacity: 0.3; + visibility: visible; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + transition-delay: 0; +} diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss new file mode 100755 index 000000000..be6c9f8fc --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss @@ -0,0 +1,86 @@ +// +// Hashicorp Nav (header/footer) Utiliy Vars and Mixins +// +// Notes: +// - Include this in Application.scss before header and feature-footer +// - Open Sans Google (Semibold - 600) font needs to be included if not already +// -------------------------------------------------- + +// Variables +$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$header-font-family: $font-family-open-sans; +$header-font-weight: 600; // semi-bold + +$header-height: 74px; +$by-hashicorp-width: 74px; +$by-hashicorp-height: 16px; +$nav-margin-right: 12px; + +// Mixins +@mixin hashi-a-style-core{ + font-family: $header-font-family; + font-weight: $header-font-weight; + font-size: 14px; + //letter-spacing: 0.0625em; +} + +@mixin hashi-a-style{ + margin: 0 15px; + padding: 0; + line-height: 22px; + @include hashi-a-style-core(); + @include transition( color 0.3s ease ); + + &:hover{ + @include transition( color 0.3s ease ); + background-color: transparent; + } +} + +//general shared project mixins +@mixin img-retina($image1x, $image, $width, $height) { + background-image: url($image1x); + background-size: $width $height; + background-repeat: no-repeat; + + @media (min--moz-device-pixel-ratio: 1.3), + (-o-min-device-pixel-ratio: 2.6/2), + (-webkit-min-device-pixel-ratio: 1.3), + (min-device-pixel-ratio: 1.3), + (min-resolution: 1.3dppx) { + /* on retina, use image that's scaled by 2 */ + background-image: url($image); + background-size: $width $height; + } +} + +// +// ------------------------- +@mixin anti-alias() { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; +} + +@mixin open-light() { + font-family: $font-family-open-sans; + font-weight: 300; +} + +@mixin open() { + font-family: $font-family-open-sans; + font-weight: 400; +} + +@mixin open-sb() { + font-family: $font-family-open-sans; + font-weight: 600; +} + +@mixin open-bold() { + font-family: $font-family-open-sans; + font-weight: 700; +} + +@mixin bez-1-transition{ + @include transition( all 300ms ease-in-out ); +} diff --git a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss new file mode 100755 index 000000000..42910526a --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss @@ -0,0 +1,17 @@ +// +// Mixins Specific to project +// - make edits to mixins here +// -------------------------------------------------- + +// Variables +$project-logo-size: 40px; +$project-logo-pad-left: 8px; + +// Mixins +@mixin project-a-style{ + color: $white; + + &:hover{ + color: $purple; + } +} diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb index fa6119a29..484f551b8 100644 --- a/website/source/layouts/_header.erb +++ b/website/source/layouts/_header.erb @@ -1,30 +1,37 @@ -
"> +
">
- - -
- -
-
+
+
+
+
+ + by<%= partial "layouts/svg/svg-by-hashicorp" %><%= partial "layouts/svg/svg-hashicorp-logo" %>Hashicorp +
+ +
+ +
+
+
diff --git a/website/source/layouts/_sidebar.erb b/website/source/layouts/_sidebar.erb new file mode 100644 index 000000000..5a906142f --- /dev/null +++ b/website/source/layouts/_sidebar.erb @@ -0,0 +1,26 @@ + +
+ + + diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb index 665a0a128..2b7a67363 100644 --- a/website/source/layouts/layout.erb +++ b/website/source/layouts/layout.erb @@ -1,4 +1,5 @@ <%= partial "layouts/meta" %> <%= partial "layouts/header" %> +<%= partial "layouts/sidebar" %> <%= yield %> <%= partial "layouts/footer" %> diff --git a/website/source/layouts/svg/_svg-by-hashicorp.erb b/website/source/layouts/svg/_svg-by-hashicorp.erb new file mode 100644 index 000000000..d89929590 --- /dev/null +++ b/website/source/layouts/svg/_svg-by-hashicorp.erb @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/website/source/layouts/svg/_svg-download.erb b/website/source/layouts/svg/_svg-download.erb new file mode 100644 index 000000000..6d8441fea --- /dev/null +++ b/website/source/layouts/svg/_svg-download.erb @@ -0,0 +1,4 @@ + + + diff --git a/website/source/layouts/svg/_svg-github.erb b/website/source/layouts/svg/_svg-github.erb new file mode 100644 index 000000000..f0264d5aa --- /dev/null +++ b/website/source/layouts/svg/_svg-github.erb @@ -0,0 +1,9 @@ + + + + diff --git a/website/source/layouts/svg/_svg-hashicorp-logo.erb b/website/source/layouts/svg/_svg-hashicorp-logo.erb new file mode 100644 index 000000000..60663e140 --- /dev/null +++ b/website/source/layouts/svg/_svg-hashicorp-logo.erb @@ -0,0 +1,7 @@ +