From 1c3f39067600f86e817eb9d1e020be9082739a4d Mon Sep 17 00:00:00 2001 From: captainill Date: Fri, 6 Nov 2015 22:08:46 -0800 Subject: [PATCH 1/7] new header in progress; --- .../source/assets/stylesheets/_header.scss | 195 +++---- .../source/assets/stylesheets/_sidebar.scss | 477 +----------------- .../assets/stylesheets/application.scss | 6 + .../hashicorp-shared/_hashicorp-header.scss | 228 +++++++++ .../hashicorp-shared/_hashicorp-sidebar.scss | 293 +++++++++++ .../hashicorp-shared/_hashicorp-utility.scss | 87 ++++ .../hashicorp-shared/_project-utility.scss | 19 + website/source/layouts/_header.erb | 61 ++- .../source/layouts/svg/_svg-by-hashicorp.erb | 18 + website/source/layouts/svg/_svg-download.erb | 4 + website/source/layouts/svg/_svg-github.erb | 9 + .../layouts/svg/_svg-hashicorp-logo.erb | 7 + 12 files changed, 780 insertions(+), 624 deletions(-) create mode 100755 website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss create mode 100644 website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss create mode 100755 website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss create mode 100755 website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss create mode 100644 website/source/layouts/svg/_svg-by-hashicorp.erb create mode 100644 website/source/layouts/svg/_svg-download.erb create mode 100644 website/source/layouts/svg/_svg-github.erb create mode 100644 website/source/layouts/svg/_svg-hashicorp-logo.erb diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index 3fa5d421e..c7fa06fdf 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,148 +1,79 @@ // // Header +// - Project Specific +// - edits should be made here // -------------------------------------------------- #header { - position: relative; - height: 92px; - color: $white; - text-rendering: optimizeLegibility; - margin-bottom: 0; - /* opacity: 0; - @include translate3d(0, -10px, 0); */ - transition: all 1s ease; - background-color: $white; + .navbar-brand { + .logo{ + color: $gray-darker; + font-family: $font-family-blanc; + 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-width, $project-logo-height); + background-position: 0 center; - /* &.showit{ - opacity: 1; - @include translate3d(0, 0px, 0); - transition: all 1s ease; - } */ - - // &.navbar-static-top{ - // height:70px; - // z-index: 1000; - // } - - .navbar-header{ - - .navbar-toggle{ - padding-right: 15px; - margin-top: 26px; - margin-bottom: 14px; - margin-right: 0; - //border: 2px solid $white; - border-radius: 0; - .icon-bar{ - border: 1px solid $black; - border-radius: 0; - } - } + &:hover{ + color: $green-dark; + } } + .by{ + &:hover{ + svg{ + line{ + stroke: $orange; + } + } + } + } + } + .buttons{ + margin-top: 2px; //baseline everything + + ul.navbar-nav{ + li { + &:hover{ + svg path{ + fill: $black; + } + } + + svg path{ + fill: $blue-light; + } + } + } + } + + .main-links, + .external-links { + li > a { + @include project-a-style(); + } + } +} + +@media (max-width: 414px) { + #header { .navbar-brand { - display: inline-block; - padding: 0; - margin: 16px 10px 0 0 ; - - .logo{ - display: inline-block; - height: 56px; - padding: 0; - color: $gray-darker; - font-family: $font-family-blanc; - font-size: 28px; - line-height: 56px; - padding-left: 60px; - background: image-url('../images/logo-header.png') 0 0 no-repeat; - @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", 49px, 56px); - - &:hover{ - @include transition(all 300ms ease-in); - color: $green-dark; - text-decoration: none; - } - } - } - - .main-links.navbar-nav{ - margin-top: 36px; - margin-left: 120px; - - li > a { - @include v-nav-style(); - } - } - - .buttons{ - ul.navbar-nav{ - margin-top: 36px; - li { - padding-left: 12px; - - &.download{ - background: image-url('../images/icon-download.png') 0 0 no-repeat; - @include img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 18px, 18px); - margin-right: 22px; - background-position: 0 1px; - } - - &.github{ - background: image-url('../images/icon-github.png') 0 0 no-repeat; - @include img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 19px, 18px); - background-position: 0 1px; - } - - >a { - @include v-nav-style(); - } - } - } - } - - .nav > li > a:hover, .nav > li > a:focus { - background-color: transparent; - color: $black; - @include transition( color 0.3s ease ); + .logo{ + padding-left: 46px; + font-size: 22px; + } } + } } -@media (min-width: 992px) { - -} - -@media (max-width: 992px) { - -} - -@media (max-width: 992px) { - #header{ - .main-links.navbar-nav{ - margin-left: 20px; - } - - .buttons{ - ul.navbar-nav{ - li { - &.download{ - margin-right: 8px; - } - } - } - } - } - -} - -@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{ + // font-size: 0 !important; //hide terraform text + } + } + } } diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss index 1f6a94db0..45a4ee64f 100644 --- a/website/source/assets/stylesheets/_sidebar.scss +++ b/website/source/assets/stylesheets/_sidebar.scss @@ -1,474 +1,23 @@ - -// 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 - -/* -- Sidebar style ------------------------------- */ - -// Sidebar variables -// -------------------------------------------------- -$zindex-sidebar-fixed: 1035; - -$sidebar-desktop-width: 280px; -$sidebar-width: 240px; - - -$sidebar-padding: 16px; -$sidebar-divider: $sidebar-padding/2; - -$sidebar-nav-height: 48px; - -$sidebar-icon-width: 40px; -$sidebar-icon-height: 20px; - -$sidebar-badge-size: $sidebar-nav-height/2; -$sidebar-badge-font-size: 10px; - -$sidebar-brand-color: $gray-secondary; -$sidebar-icon-color: $gray-secondary; -$sidebar-menu-color: $gray-darker; - - -$sidebar-font-weight: 300; - -// Sidebar mixins -// -------------------------------------------------- - -// Sidebar horizontal block // -// This settings will extended by .sidebar-text, .sidebar-brand and .sidebar-nav>li>a -@mixin sidebar-block() -{ - display: block; - line-height: $sidebar-nav-height; - padding: 0; - //padding-left: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding; - //padding-right: ($sidebar-padding + $sidebar-badge-size) + $sidebar-padding; - text-decoration: none; - clear: both; - @include v-nav-style-core(); - //@include text-overflow(); - @include transition(all .2s ease-in-out); - color: $blue-dark; - - &:hover, &:focus { - @include box-shadow(none); - outline: none; - } - - // positioning caret in sidebar block - .caret { - position: absolute; - right: $sidebar-padding + $sidebar-badge-size/2 - 4px; // caret centered by badge position; 4px - caret width - top: $sidebar-nav-height/2; - } - // positioning badge in sidebar block - .sidebar-badge { - position: absolute; - right: $sidebar-padding; - top: ($sidebar-nav-height - $sidebar-badge-size)/2 ; - } -} - -// Sidebar design template -// -// You can make own sidebar style with this template -@mixin sidebar-template( - $color, - $bg, - $header-bg, - $brand-color, - $brand-bg, - $brand-hover-color, - $brand-hover-bg, - $divider, - $badge-color, - $badge-bg, - $icon-color, - $icon-hover-color, - $link-color, - $link-bg, - $link-hover-color, - $link-hover-bg, - $link-active-color, - $link-active-bg, - $link-disabled-color, - $link-disabled-bg -) { - - background-color: $bg; - - ul{ - padding-left: 0; - list-style-type: none; - } - - .sidebar-header { - background-color: $header-bg; - margin-bottom: 15px; - } - - .sidebar-divider, .sidebar-nav .divider { - background-color: $divider; - } - - .sidebar-text { - color: $color; - } - - .buttons-nav{ - margin-top: 10px; - text-align: center; - @include v-nav-style-core(); - - li{ - margin-bottom: 20px; - a{ - min-width: 148px; - color: $blue-dark; - &:hover{ - color: $green-dark; - } - } - } - } +// Sidebar +// - Project Specific +// - Make sidebar edits here +// -------------------------------------------------- +.sidebar { .sidebar-nav { - text-align: center; - //border-bottom: 1px solid $faint-gray; - padding-bottom: 8px; + // Links + //---------------- + li { + a { + color: $black; - &:last-child{ - border-bottom: none; - } - - li > a { - color: $link-color; - background-color: $link-bg; - - i { - color: $icon-color; - } - } - li:hover > a, li > a:hover { - color: $link-hover-color; - background-color: $link-hover-bg; - - i { - color: $icon-hover-color; - } - } - li:focus > a, li > a:focus { - color: $link-color; - background-color: $link-bg; - - i { - color: $icon-hover-color; - } - } - - > .open > a { - &, - &:hover, - &:focus { - color: $link-hover-color; - background-color: $link-hover-bg; - } - } - - > .active > a { - &, - &:hover, - &:focus { - color: $link-active-color; - background-color: $link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: $link-disabled-color; - background-color: $link-disabled-bg; - } - } - > li > .ink { - //background: #80d8ff; - //opacity: 0.5; - } - - // 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; - color: $link-hover-color; - } - &:hover { - background-color: darken($link-hover-bg, 7%); - color: $link-hover-color; - } - } - - > .active > a { - &, - &:hover, - &:focus { - color: $link-active-color; - background-color: $link-active-bg; + svg{ + path{ + fill: $black; } } } } } } - -// -// Sidebars -// -------------------------------------------------- - -// Wrapper and base class -// -// Provide a static sidebar from which we expand to create other sidebar variations. -.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(); -} - -// Sidebar Elements -// -// Basic style of sidebar elements -.sidebar { - - // Sidebar heading - //---------------- - .sidebar-header { - position: relative; - margin-bottom: $sidebar-divider; - @include transition(all .2s ease-in-out); - //border-bottom: 1px solid $faint-gray; - - .buttons{ - text-align: center; - padding: $xsmall-pad 0 $small-pad; - a{ - &.outline-btn{ - margin-right: 10px; - } - } - } - } - - .sidebar-image { - padding-top: 24px; - img { - display: block; - margin: 0 auto; - } - } - - // Brand/project name - // - // In google guideline used for email dropdown - .sidebar-brand { - position: absolute; - bottom: 0; - left: 0; - right: 0; - @include sidebar-block(); - - &:hover, - &:focus { - text-decoration: none; - } - } - - // Sidebar text - //---------------- - .sidebar-text { - @include sidebar-block(); - } - - // 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 navigation class -// ------------------------ -.sidebar .sidebar-nav { - margin: 0; - padding: 0; - - // Links - //---------------- - li { - position: relative; - list-style-type: none; - - a { - position: relative; - cursor: pointer; - user-select: none; - @include sidebar-block(); - - &:hover { - background: transparent; - } - } - } -} - -// Sidebar color theme variations -// -// ------------------------ -.sidebar-default { - @include sidebar-template( - $color: $gray-darker, - $bg: #fff, - $header-bg: $white, - $brand-color: $gray-dark, - $brand-bg: transparent, - $brand-hover-color: $gray-darker, - $brand-hover-bg: rgba(0, 0, 0, 0.10), - $divider: $gray, - $badge-color: #fff, - $badge-bg: $gray, - $icon-color: $gray-dark, - $icon-hover-color: $gray-dark, - $link-color: $gray-darker, - $link-bg: transparent, - $link-hover-color: $gray-darker, - $link-hover-bg: lighten($faint-gray, 6%), - $link-active-color: $gray-darker, - $link-active-bg: $gray-light, - $link-disabled-color: $gray-light, - $link-disabled-bg: transparent - ); -} - - -// 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/application.scss b/website/source/assets/stylesheets/application.scss index 723da895e..af16ae319 100755 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -16,6 +16,12 @@ //Global Site @import '_global'; +// Hashicorp Shared Project Styles +@import 'hashicorp-shared/_hashicorp-utility'; +@import 'hashicorp-shared/_project-utility'; +@import 'hashicorp-shared/_hashicorp-header'; +@import 'hashicorp-shared/_hashicorp-sidebar'; + // Components @import '_header'; @import '_footer'; 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..c9bc593b6 --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss @@ -0,0 +1,228 @@ +// +// Hashicorp header +// - Shared throughout projects +// - Edits should not be made here +// -------------------------------------------------- + +#header { + position: relative; + color: black; + text-rendering: optimizeLegibility; + margin-bottom: 0; + transition: all 1s ease; + + &.white{ + color: white; + .navbar-brand { + .logo { + color: white; + } + + .by{ + color: white; + font-weight: 300; + svg{ + path, + polygon{ + fill: white; + } + line{ + stroke: white; + } + } + } + } + + .main-links, + .external-links { + li > a { + &:hover{ + opacity: 1; + } + } + } + + .nav > li > a:hover, .nav > li > a:focus { + color: white; + } + + .navbar-header{ + .navbar-toggle{ + .icon-bar{ + border: 1px solid 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-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; + } + } + + .by{ + 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; + + .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); + } + } + } + } + } + + .external-links { + li { + position: relative; + + svg path{ + @include transition( all 300ms ease-in ); + } + + &:hover{ + svg path{ + @include transition( all 300ms ease-in ); + } + } + + &.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( all 300ms ease-in ); + } +} + +@media (max-width: 414px) { + #header { + .navbar-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{ + 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..1571a6291 --- /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( 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..d4d3f6304 --- /dev/null +++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss @@ -0,0 +1,19 @@ +// +// Mixins Specific to project +// - make edits to mixins here +// -------------------------------------------------- + +// Variables +$header-height: 92px; +$project-logo-width: 49px; +$project-logo-height: 56px; +$project-logo-pad-left: 8px; + +// Mixins +@mixin project-a-style{ + color: $blue-light; + + &:hover{ + color: $orange; + } +} diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb index bd2ca35c8..5a9f33172 100644 --- a/website/source/layouts/_header.erb +++ b/website/source/layouts/_header.erb @@ -1,32 +1,37 @@
"> -
-
-
-
-
- -
- - -
- -
+
+
+
+
+
+ + by<%= partial "layouts/svg/svg-by-hashicorp" %><%= partial "layouts/svg/svg-hashicorp-logo" %>Hashicorp +
+
+ +
+
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 @@ + From 7b4effe79b1dfcd500d6d0e44e84cd8a30bb8e3b Mon Sep 17 00:00:00 2001 From: captainill Date: Fri, 6 Nov 2015 22:28:42 -0800 Subject: [PATCH 2/7] remove hero translation --- website/source/assets/stylesheets/_home.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index 2f8fc5ed8..b3355e22e 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -4,10 +4,7 @@ #hero{ position: relative; - @include translate3d(0, -10px, 0); text-align: center; - //background: image-url('../images/nomad-bg.png') 0 0 repeat; - //@include img-retina("../images/nomad-bg.png", "../images/nomad-bg@2x.png", 624px, 358px); background: image-url('../images/nomad-giant.jpg') 0 0 no-repeat; @include img-retina("../images/nomad-giant.jpg", "../images/nomad-giant.jpg", 624px, 358px); background-size: cover !important; From dcb0c2cab78550683d5c375c715103b4dcc9595c Mon Sep 17 00:00:00 2001 From: captainill Date: Fri, 6 Nov 2015 22:49:03 -0800 Subject: [PATCH 3/7] style polish --- website/source/assets/stylesheets/_header.scss | 8 ++++---- .../stylesheets/hashicorp-shared/_project-utility.scss | 2 +- website/source/layouts/_sidebar.erb | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index c7fa06fdf..6ab4ad4e0 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -23,7 +23,7 @@ &:hover{ svg{ line{ - stroke: $orange; + stroke: $green-dark; } } } @@ -60,14 +60,14 @@ #header { .navbar-brand { .logo{ - padding-left: 46px; - font-size: 22px; + padding-left: 42px; + font-size: 18px; + @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75); } } } } - @media (max-width: 320px) { #header { .navbar-brand { diff --git a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss index d4d3f6304..13e1b6081 100755 --- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss +++ b/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss @@ -14,6 +14,6 @@ $project-logo-pad-left: 8px; color: $blue-light; &:hover{ - color: $orange; + color: $green-dark; } } diff --git a/website/source/layouts/_sidebar.erb b/website/source/layouts/_sidebar.erb index 85674fbdf..5f94a3787 100644 --- a/website/source/layouts/_sidebar.erb +++ b/website/source/layouts/_sidebar.erb @@ -12,15 +12,15 @@
-