diff --git a/website/source/assets/stylesheets/_columns.scss b/website/source/assets/stylesheets/_columns.scss index 71f1a099e..17b9ce69e 100644 --- a/website/source/assets/stylesheets/_columns.scss +++ b/website/source/assets/stylesheets/_columns.scss @@ -1,50 +1,50 @@ -.container-xs-height { - display:table; - padding-left:0px; - padding-right:0px; -} - - -.col-xs-height { - display:table-cell; - float:none; -} - -@media (min-width: 768px) { - .container-sm-height { - display:table; - padding-left:0px; - padding-right:0px; - } - - .col-sm-height { - display:table-cell; - float:none; - } -} - -@media (min-width: 992px) { - .container-md-height { - display:table; - padding-left:0px; - padding-right:0px; - } - - .col-md-height { - display:table-cell; - float:none; - } -} - -@media (min-width: 1200px) { - .container-lg-height { - display:table; - padding-left:0px; - padding-right:0px; - } - - .col-lg-height { - display:table-cell; - float:none; - } -} +// .container-xs-height { +// display:table; +// padding-left:0px; +// padding-right:0px; +// } +// +// +// .col-xs-height { +// display:table-cell; +// float:none; +// } +// +// @media (min-width: 768px) { +// .container-sm-height { +// display:table; +// padding-left:0px; +// padding-right:0px; +// } +// +// .col-sm-height { +// display:table-cell; +// float:none; +// } +// } +// +// @media (min-width: 992px) { +// .container-md-height { +// display:table; +// padding-left:0px; +// padding-right:0px; +// } +// +// .col-md-height { +// display:table-cell; +// float:none; +// } +// } +// +// @media (min-width: 1200px) { +// .container-lg-height { +// display:table; +// padding-left:0px; +// padding-right:0px; +// } +// +// .col-lg-height { +// display:table-cell; +// float:none; +// } +// } diff --git a/website/source/assets/stylesheets/_components.scss b/website/source/assets/stylesheets/_components.scss index 72af67f90..f7cf9945d 100644 --- a/website/source/assets/stylesheets/_components.scss +++ b/website/source/assets/stylesheets/_components.scss @@ -167,11 +167,11 @@ header .header { .docs-wrapper { .docs-body { + max-width: 960px; @extend .white-background; .docs-content { padding: $docs-top-margin 80px; - max-width: 960px; display: block; code { diff --git a/website/source/assets/stylesheets/_helpers.scss b/website/source/assets/stylesheets/_helpers.scss index 8c20db3fc..9b9818a37 100644 --- a/website/source/assets/stylesheets/_helpers.scss +++ b/website/source/assets/stylesheets/_helpers.scss @@ -174,13 +174,6 @@ $break-lg: 980px; transform: scale($value); } -@mixin transition($type, $speed, $easing) { - -webkit-transition: $type $speed $easing; - -moz-transition: $type $speed $easing; - -o-transition: $type $speed $easing; - transition: $type $speed $easing; -} - @mixin rounded($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; diff --git a/website/source/assets/stylesheets/_nav.scss b/website/source/assets/stylesheets/_nav.scss index 13acc3ff2..733a6c1ce 100644 --- a/website/source/assets/stylesheets/_nav.scss +++ b/website/source/assets/stylesheets/_nav.scss @@ -1,70 +1,87 @@ -nav { - height: $nav-height; - height: $nav-height; - padding: 0; - margin: 0; - min-width: 940px; - text-transform: uppercase; - color: $white; - font-family: $sans; - font-size: 16px; - border-bottom: 1px solid $border-dark; +// +// Header +// - Project Specific +// - edits should be made here +// -------------------------------------------------- - ul { - margin-top: ($baseline * 2); - margin-left: $nav-height; +#header { + background-color: $black; + .navbar-brand { + .logo{ + font-size: 20px; + text-transform: uppercase; + 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-width, $project-logo-height); + background-position: 0 45%; - li { - display: inline-block; - margin-right: 50px; + &:hover{ + opacity: .6; + } } - } - .packer-logo { - background: image-url('logo_nav.png') no-repeat center top; - height: 80px; - width: 80px; - background-size: 34px 50px; - text-indent: -999999px; - display: inline-block; - margin-top: 25px; - } - - @media (min-width: $screen-md-min) { - ul { - li { - &.featured { - margin: -20px 0 0 10px; - float: right; - - a { - @include button; - font-weight: bold; + .by-hashicorp{ + &:hover{ + svg{ + line{ + opacity: .4; } } } } } - @media (max-width: $screen-sm-max) { - height: auto; - padding: 0; - min-width: auto; + .buttons{ + margin-top: 2px; //baseline everything - ul { - margin: 1em 0 1em 80px; + .navigation-links{ + float: right; + } + ul.navbar-nav{ li { - display: block; - margin: 0; - padding: 1em; + svg path{ + fill: $white; + } } } } - @media (max-width: $screen-xs-max) { - button { + .main-links, + .external-links { + li > a { + @include project-a-style(); + } + } +} + +@media (max-width: 768px) { + #header { + .navbar-brand { } } } + +@media (max-width: 414px) { + #header { + .navbar-brand { + .logo{ + padding-left: 37px; + font-size: 18px; + @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75); + //background-position: 0 45%; + } + } + } +} + + +@media (max-width: 320px) { + #header { + .navbar-brand { + .logo{ + font-size: 0 !important; //hide terraform text + } + } + } +} diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss index 0814efdcf..95af1c7f1 100644 --- a/website/source/assets/stylesheets/_sidebar.scss +++ b/website/source/assets/stylesheets/_sidebar.scss @@ -1,4 +1,4 @@ -.sidebar { +#sidebar { $border: 1px solid $gray-dark; font-size: 16px; font-family: $mono; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index 581c8c217..7b6e99ff3 100644 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -1,7 +1,7 @@ @import "bootstrap-sprockets"; @import "bootstrap"; -@import url("//fonts.googleapis.com/css?family=Inconsolata"); +@import url("//fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400,600"); @import "_helpers"; @import "_reset"; @@ -9,6 +9,13 @@ @import "_columns"; @import "_buttons"; @import "_styles"; + +// Hashicorp Shared Project Styles +@import 'hashicorp-shared/_project-utility'; +@import 'hashicorp-shared/_hashicorp-utility'; +@import 'hashicorp-shared/_hashicorp-header'; +@import 'hashicorp-shared/_hashicorp-sidebar'; + @import "_nav"; @import "_footer"; @import "_components"; 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..b88467e8e --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss @@ -0,0 +1,333 @@ +// +// Hashicorp header +// - Shared throughout projects +// - Edits should not be made here +// -------------------------------------------------- + +#header{ + position: relative; + margin-bottom: 0; +} + +.navigation { + color: black; + text-rendering: optimizeLegibility; + transition: all 1s ease; + + &.white{ + .navbar-brand { + .logo { + color: white; + } + } + + .main-links, + .external-links { + li > a { + &:hover{ + opacity: 1; + } + } + } + } + + &.black{ + .navbar-brand { + .logo { + color: black; + } + } + + .main-links, + .external-links { + li > a { + color: black; + } + } + } + + .navbar-toggle{ + height: $header-height; + margin: 0; + border-radius: 0; + .icon-bar{ + border: 1px solid $black; + border-radius: 0; + } + } + + .external-links { + &.white{ + svg path{ + fill: $white; + } + } + + li { + position: relative; + + svg path{ + @include transition( all 300ms ease-in ); + } + + &:hover{ + svg path{ + @include transition( all 300ms ease-in ); + } + } + + @include project-svg-external-links-style(); + + &.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 { + &.white{ + li > a { + color: white; + } + } + li > a { + @include hashi-a-style(); + margin: 0 10px; + padding-top: 1px; + line-height: $header-height; + @include project-a-style(); + } + } + + .nav > li > a:hover, .nav > li > a:focus { + background-color: transparent; + @include transition( all 300ms ease-in ); + } +} + +.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-width + $project-logo-pad-left; + background-position: 0 center; + @include transition(all 300ms ease-in); + + &:hover{ + @include transition(all 300ms ease-in); + text-decoration: none; + } + } +} + +.navbar-toggle{ + &.white{ + .icon-bar{ + border: 1px solid white; + } + } +} + +.by-hashicorp{ + display: inline-block; + vertical-align:top; + height: $header-height; + margin-left: 3px; + padding-top: 2px; + color: black; + line-height: $header-height; + font-family: $header-font-family; + font-weight: 600; + font-size: 0; + text-decoration: none; + + &.white{ + color: white; + font-weight: 300; + svg{ + path, + polygon{ + fill: white; + } + line{ + stroke: white; + } + } + + &:focus, + &:hover{ + text-decoration: none; + color: white; + } + } + + &:focus, + &:hover{ + 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; + @include transition(all 300ms ease-in); + + &:hover{ + @include transition(all 300ms ease-in); + } + } + } +} + +.hashicorp-project{ + display: inline-block; + height: 30px; + line-height: 30px; + text-decoration: none; + font-size: 14px; + color: $black; + font-weight: 600; + + &.white{ + color: white; + svg{ + path, + polygon{ + fill: white; + } + line{ + stroke: white; + } + } + } + + &:focus, + &:hover{ + text-decoration: none; + } + + span{ + margin-right: 4px; + font-family: $header-font-family; + font-weight: 500; + } + + span, + svg{ + display: inline-block; + } + + svg{ + &.svg-by{ + width: $by-hashicorp-width; + height: $by-hashicorp-height; + margin-bottom: -4px; + margin-left: -3px; + } + + &.svg-logo{ + width: 30px; + height: 30px; + margin-bottom: -10px; + margin-left: -1px; + } + + path, + line{ + fill: $black; + @include transition(all 300ms ease-in); + + &:hover{ + @include transition(all 300ms ease-in); + } + } + } +} + +@media (max-width: 480px) { + .navigation { + .main-links{ + margin-right: 0; + } + } +} + +@media (max-width: 414px) { + #header { + .navbar-toggle{ + padding-top: 10px; + height: $header-mobile-height; + } + + .navbar-brand { + height: $header-mobile-height; + + .logo{ + height: $header-mobile-height; + line-height: $header-mobile-height; + } + .by-hashicorp{ + height: $header-mobile-height; + line-height: $header-mobile-height; + padding-top: 0; + } + } + .main-links, + .external-links { + li > a { + line-height: $header-mobile-height; + } + } + } +} 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..99f77f6c5 --- /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..de17e9815 --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss @@ -0,0 +1,87 @@ +// +// 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; +$header-mobile-height: 60px; +$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( all 300ms ease-in ); + + &:hover{ + @include transition( all 300ms ease-in ); + 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..114a3da24 --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss @@ -0,0 +1,71 @@ +// +// Mixins Specific to project +// - make edits to mixins here +// -------------------------------------------------- + +// Variables +$project-logo-width: 38px; +$project-logo-height: 40px; +$project-logo-pad-left: 8px; + +// Mixins +@mixin project-a-style{ + color: $white; + font-weight: 300; + opacity: .75; + + &:hover{ + color: $white; + opacity: 1; + } +} + +@mixin project-footer-a-style{ + color: $black; + font-weight: 400; + + &:hover{ + color: $green; + + svg path{ + fill: $green; + } + } +} + +@mixin project-footer-a-subpage-style{ + color: $white; + font-weight: 300; + + svg path{ + fill: $white; + } + + &:hover{ + color: $green; + + svg path{ + fill: $green; + } + } +} + +@mixin project-svg-external-links-style{ + svg path{ + fill: $black; + } + + &:hover{ + svg path{ + fill: $green; + } + } +} + +@mixin project-by-hashicorp-style{ + &:hover{ + line{ + stroke: $green; + } + } +} diff --git a/website/source/layouts/inner.erb b/website/source/layouts/inner.erb index 0706d1f9d..e45fe3cea 100644 --- a/website/source/layouts/inner.erb +++ b/website/source/layouts/inner.erb @@ -1,10 +1,10 @@ <% wrap_layout :layout do %> -
-
-
+
+
+ -
+
<%= yield %>
diff --git a/website/source/layouts/layout.erb b/website/source/layouts/layout.erb index c809b6b55..3e69631bf 100644 --- a/website/source/layouts/layout.erb +++ b/website/source/layouts/layout.erb @@ -21,26 +21,40 @@ - + + +
+
+
+ <%= yield %>