diff --git a/client/driver/driver_test.go b/client/driver/driver_test.go index 19f7eae3835..42fc842722a 100644 --- a/client/driver/driver_test.go +++ b/client/driver/driver_test.go @@ -180,6 +180,10 @@ func setupTaskEnv(t *testing.T, driver string) (*allocdir.TaskDir, map[string]st "NOMAD_ADDR_admin": "1.2.3.4:8081", "NOMAD_ADDR_web_main": "192.168.0.100:5000", "NOMAD_ADDR_web_http": "192.168.0.100:2000", + "NOMAD_IP_web_main": "192.168.0.100", + "NOMAD_IP_web_http": "192.168.0.100", + "NOMAD_PORT_web_http": "2000", + "NOMAD_PORT_web_main": "5000", "NOMAD_IP_admin": "1.2.3.4", "NOMAD_PORT_admin": "8081", "NOMAD_HOST_PORT_admin": "8081", diff --git a/website/Gemfile b/website/Gemfile index 08e6fe65e5a..64551b638e1 100644 --- a/website/Gemfile +++ b/website/Gemfile @@ -1,3 +1,3 @@ source "https://rubygems.org" -gem "middleman-hashicorp", "0.3.13" +gem "middleman-hashicorp", "0.3.14" diff --git a/website/Gemfile.lock b/website/Gemfile.lock index 0811f6d62e2..9807e2ee6ee 100644 --- a/website/Gemfile.lock +++ b/website/Gemfile.lock @@ -6,7 +6,7 @@ GEM minitest (~> 5.1) thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) - autoprefixer-rails (6.7.6) + autoprefixer-rails (6.7.7) execjs bootstrap-sass (3.3.7) autoprefixer-rails (>= 5.2.1) @@ -77,7 +77,7 @@ GEM rack (>= 1.4.5, < 2.0) thor (>= 0.15.2, < 2.0) tilt (~> 1.4.1, < 2.0) - middleman-hashicorp (0.3.13) + middleman-hashicorp (0.3.14) bootstrap-sass (~> 3.3) builder (~> 3.2) middleman (~> 3.4) @@ -151,7 +151,7 @@ PLATFORMS ruby DEPENDENCIES - middleman-hashicorp (= 0.3.13) + middleman-hashicorp (= 0.3.14) BUNDLED WITH 1.14.6 diff --git a/website/Makefile b/website/Makefile index 41fcf114ed8..eb05272f7a8 100644 --- a/website/Makefile +++ b/website/Makefile @@ -1,4 +1,4 @@ -VERSION?="0.3.13" +VERSION?="0.3.14" website: @echo "==> Starting website in Docker..." diff --git a/website/packer.json b/website/packer.json index b51f638015e..4487644a5ed 100644 --- a/website/packer.json +++ b/website/packer.json @@ -8,7 +8,7 @@ "builders": [ { "type": "docker", - "image": "hashicorp/middleman-hashicorp:0.3.13", + "image": "hashicorp/middleman-hashicorp:0.3.14", "discard": "true", "run_command": ["-d", "-i", "-t", "{{ .Image }}", "/bin/sh"] } diff --git a/website/source/assets/images/logo-header.svg b/website/source/assets/images/logo-text.svg similarity index 100% rename from website/source/assets/images/logo-header.svg rename to website/source/assets/images/logo-text.svg diff --git a/website/source/assets/images/logo.svg b/website/source/assets/images/logo.svg new file mode 100644 index 00000000000..6a015828b35 --- /dev/null +++ b/website/source/assets/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index e3bc7fe1e74..7d1e685c526 100755 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -22,13 +22,13 @@ } &.lrg{ - font-size: $font-size-reg; + font-size: $font-size; padding: 10px 24px; } &.sml{ padding: 8px 14px; - font-size: $font-size-reg - 2; + font-size: $font-size - 2; line-height: 14px; &.has-caret{ diff --git a/website/source/assets/stylesheets/_community.scss b/website/source/assets/stylesheets/_community.scss index 65b6ecceb25..11c98553262 100644 --- a/website/source/assets/stylesheets/_community.scss +++ b/website/source/assets/stylesheets/_community.scss @@ -4,11 +4,6 @@ .person { margin-bottom: 40px; - h3 { - color: $blue-dark; - text-transform: none; - } - img { width: 125px; margin: auto auto; diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss index a1b8733419c..11b6dd0725e 100755 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -2,25 +2,18 @@ // Docs // -------------------------------------------------- -$docs-font-size: 15px; - -body.layout-inner{ - // h2, h3, h4, h5 { - // font-family: $font-family-open-sans; - // text-transform: none; - // } -} - body.layout-docs, +body.layout-guides, body.layout-inner, body.layout-downloads, -body.layout-intro{ - >.container{ - .col-md-8[role=main]{ +body.layout-http, +body.layout-intro { + >.container { + .col-md-8[role=main] { min-height: 800px; background-color: white; - >div{ + >div { position: relative; z-index: 10; } @@ -42,182 +35,110 @@ body.layout-intro{ p code, tt, .alert code { - font-family: Menlo, Monaco, Consolas, "Courier New", monospace; - font-size: 90%; + font-family: $font-family-monospace; + font-size: $sidebar-font-size; background-color: transparent; color: inherit; padding: 0; } } -.docs-sidebar{ - position: relative; - z-index: 20; +.docs-sidebar { margin-bottom: 30px; margin-top: 50px; - @include open(); - .nav.docs-sidenav{ + ul.nav.docs-sidenav { + display: block; padding-bottom: 15px; - :last-child{ - border-bottom: none; - } - - //all li - li{ - position: relative; - - > a{ - padding: 10px 8px; - font-size: 13px; - color: $blue-dark; - - &:hover{ - background-color: transparent !important; - } - } - } - - $parent-active-state: -14px; - $parent-default-state: -14px; - $child-active-state: -4px; - $child-default-state: -4px; - - //first teir li li { - margin: 0 0 0 10px; + a { + color: $sidebar-link-color; + font-size: $sidebar-font-size; + padding: 10px 0 10px 15px; + + &:before { + color: $sidebar-link-color-active; + content: '\203A'; + font-size: $font-size; + left: 0; + line-height: 100%; + opacity: 0.4; + position: absolute; - > a { - -webkit-font-smoothing: antialiased; + height: 100%; + width: 8px + } - &:hover{ - color: #000; + &:focus, + &:hover { + background-color: transparent; + color: $sidebar-link-color-hover; - &:before{ + &:before { opacity: 1; } } + } - &:focus { - background-color: inherit; - } - - &:before{ - content: ''; - position: absolute; - width: 8px; - height: 12px; - top: 15px; - left: $parent-default-state; - overflow: hidden; - background: image-url("caret-light.png") 0 0 no-repeat; - opacity: .3; - @include img-retina("caret-light.png", "caret-light@2x.png", 6px, 9px); - } + // For forcing sub-navs to appear - in the long term, this should not + // be a thing anymore... + > ul.nav-visible { + display: block; } + } - &.active { - >a{ - color: $green-dark; + li.active { + > a { + color: $sidebar-link-color-active; - &:before{ - opacity: 1; - } + &:before { + opacity: 1; } + } - > .nav { - display: block; - } + // Open nested navigations + > ul.nav { + display: block; } } - //nested ul.nav - .nav { + // subnav + ul.nav { display: none; - padding-top: 10px; - padding-bottom: 10px; + margin: 10px; - > li{ + li { margin-left: 10px; - > a { - &:before{ - content: ''; - position: absolute; - width: 8px; - height: 12px; - top: 10px; - left: $child-default-state; - overflow: hidden; - background: image-url("caret-light.png") 0 0 no-repeat; - opacity: .3; - @include img-retina("caret-light.png", "caret-light@2x.png", 6px, 9px); - } - - &:focus { - background-color: inherit; - } - - &:hover { - color: #000; - - &:before { - opacity: 1; - } - } - } - - &.active{ - > a{ - color: $green-dark; - - &:before{ - opacity: 1; - } - } - } - - > a{ - -webkit-font-smoothing: antialiased; + a { padding: 6px 15px; } } } - - .nav-visible { - display: block; - } } } - -.bs-docs-section{ +.bs-docs-section { padding-top: 10px; padding-left: 3%; - padding-bottom: 160px; - - .lead{ - margin-bottom: 48px - } - - .doc-sectional{ - margin-bottom: 48px; - } + padding-bottom: 80px; p, li, .alert { - color: $blue-dark; - font-size: $docs-font-size; + font-size: $font-size; font-family: $font-family-open-sans; font-weight: $font-weight-reg; line-height: 1.84em; - margin: 0 0 $docs-font-size; + margin: 0 0 $font-size; -webkit-font-smoothing: antialiased; } pre { - font-size: ($docs-font-size - 3); - margin: 0 0 $docs-font-size; + font-family: $font-family-monospace; + font-size: ($font-size - 3); + font-weight: normal; + padding: 20px; + margin: 0 0 $font-size; // This will force the code to scroll horizontally on small screens // instead of wrapping. @@ -227,61 +148,57 @@ body.layout-intro{ } } - a{ - color: $green-dark; + a { + color: $body-link-color; text-decoration: none; - &:hover{ + &:hover { text-decoration: underline; } code { background: inherit; - color: $green-dark; + color: $body-link-color; } } - img{ + img { max-width: 650px; margin-top: 25px; margin-bottom: 25px; } - h1, h2, .h2, h3, .h3, h4, .h4{ - color: $gray-dark; + h1, + h2, + h3, + h4 { + color: $body-font-color; margin-top: 54px; - margin-bottom: $docs-font-size; + margin-bottom: $font-size; line-height: 1.3; - @include open-sb(); - text-transform: none; } h2 { padding-bottom: 3px; border-bottom: 1px solid $gray-light; } - - #graph { - margin-top: 30px; - } } @media (max-width: 992px) { - - .bs-docs-section{ + .bs-docs-section { padding-left: 0; } } @media (max-width: 768px) { - .bs-docs-section{ + .bs-docs-section { padding-top: 0; } } @media (max-width: 480px) { - .bs-docs-section{ - img{ + .bs-docs-section { + img { max-width: 450px; } } diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss index 46060f53ef8..c9e1f59633b 100644 --- a/website/source/assets/stylesheets/_footer.scss +++ b/website/source/assets/stylesheets/_footer.scss @@ -1,155 +1,21 @@ -body.page-sub{ - #footer{ - padding: 0 0 40px 0; - .col-md-5{ - padding-top: 40px; - border-top: 1px solid $faint-gray; - } - } -} - -#footer{ - position: relative; - padding: 64px 0; - color: $black; - - > .container{ - position: relative; - } - - .footer-links{ - li{ - a{ - @include hashi-a-style(); - @include project-a-style; - line-height: 30px; - } - } - } - - .pull-right{ - padding-right: 15px; - } - - .footer-hashi{ - font-size: 14px; - - color: $black; - - a{ - color: $black; - font-weight: 600; - } - - span{ - margin-right: 4px; - } - - .hashi-project{ - display: inline-block; - height: 30px; - line-height: 30px; - text-decoration: none; - - &:hover{ - svg{ - .svg-bg-line{ - fill: $green-dark; - } - } - } - - span{ - 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; +#footer { + ul.footer-links { + li { + a { + color: $footer-link-color; + font-size: $footer-font-size; + font-family: $font-family-open-sans; + text-decoration: none; + + &:hover, &:focus, &:active { + background-color: transparent; + color: $footer-link-color-hover; + outline: 0; } - &.svg-logo{ - width: 30px; - height: 30px; - margin-bottom: -10px; - margin-left: -1px; + @media (max-width: 992px) { + text-align: center; } - - path, - line{ - fill: $black; - @include transition(all 300ms ease-in); - - &:hover{ - @include transition(all 300ms ease-in); - } - } - - .svg-bg-line{ - @include transition(all 300ms ease-in); - - &:hover{ - @include transition(all 300ms ease-in); - } - } - } - } - } -} - -.edit-page-link{ - position: absolute; - top: -70px; - right: 30px;; - - a{ - text-transform: uppercase; - color: $black; - font-size: 13px; - } -} - -@media (max-width: 992px) { - -} - -@media (max-width: 768px) { - #footer{ - text-align: center; - - .footer-links{ - float: none; - display: inline-block; - margin-bottom: 36px; - } - - .footer-hashi { - float: none; - display: inline-block; - - .pull-right{ - float: none !important; - padding-right: 0; - } - } - } -} - -@media (max-width: 414px) { - #footer{ - .footer-links{ - li{ - display: block; - float: none; } } } diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index 53d817f9a3b..d9d7d3ffed3 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -9,7 +9,7 @@ text-rendering: optimizeLegibility; body { -webkit-font-smoothing: antialiased; - color: $black; + color: $body-font-color; background-color: $white; font-size: 15px; font-family: $font-family-open-sans; @@ -18,7 +18,6 @@ body { h1, h2, h3, h4, h5 { font-family: $font-family-klavika; - text-transform: uppercase; -webkit-font-smoothing: antialiased; } @@ -27,14 +26,6 @@ h1{ margin-bottom: 24px; } -//an alternative color for buttons in the doc body -.btn-serf{ - color: $white !important; - background-color: $btn-color; - border-radius: $btn-border-radius; - //@include box-shadow( $shadow ); -} - .highlight{ margin-bottom: 18px; } @@ -50,25 +41,6 @@ pre { margin-bottom: 0; } -//all below styles are overriding corrections for below (min-width: 992px) -//below (min-width: 992px) these styles change -.navbar-nav { - margin: 0; -} - -.navbar-right { - float: right !important; -} - -.navbar-nav > li { - float: left; -} - -.navbar-nav > li > a { - padding-top: 15px; - padding-bottom: 15px; -} - .center { text-align: center; } @@ -92,10 +64,3 @@ pre { width: 100%; } } - -//guarantees nav list fits at tablet viewport size -@media (min-width: 768px) and (max-width: 800px) { - #header .navbar-nav a { - font-size: 12px !important; - } -} diff --git a/website/source/assets/stylesheets/_header.scss b/website/source/assets/stylesheets/_header.scss index 968bf88ada7..4a985d7a8b1 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -1,57 +1,79 @@ -// -// Header -// - Project Specific -// - edits should be made here -// -------------------------------------------------- - #header { + // Hamburger menu + .navbar-toggle { + height: $header-height; + margin: 0; + padding-right: 15px; + border-radius: 0; + + .icon-bar { + border: 1px solid $black; + border-radius: 0; + } + } + + // Logo .navbar-brand { - .logo{ + display: block; + margin: 0; + padding: 0; + + .logo { + color: $header-link-color; display: inline-block; - height: 59px; - width: 153px; - margin-top: 15px; - background: image-url('logo-header.svg') 0 0 no-repeat; + font-family: $font-family-klavika; + font-weight: $font-weight-bold; font-size: 0; + height: $header-height; + line-height: $header-height; + width: 200px; + padding-left: 64px; + background: image-url('logo-text.svg') 0 0 no-repeat; + background-position: left center; - &:hover{ - opacity: .7; - } - } - - .by{ - &:hover{ - svg{ - .svg-bg-line{ - fill: $green-dark; - } - } + &:hover, &:focus, &:active { + outline: 0; + text-decoration: none; } } } - .buttons{ - margin-top: 2px; //baseline everything + // Nav + ul.nav { + li { + a { + color: $header-link-color; + font-size: $header-font-size; + font-family: $font-family-open-sans; + height: $header-height; + line-height: $header-height; + padding: 0 10px; + margin: 0; + text-decoration: none; + + &:hover, &:focus, &:active { + background-color: transparent; + color: $header-link-color-hover; + outline: 0; - ul.navbar-nav{ - li { - &:hover{ - svg path{ - fill: $black; + svg { + fill: $header-link-color-hover; } } - svg path{ - fill: $blue-light; + svg { + fill: $header-link-color; + position: relative; + top: 2px; + width: 14px; + height: 14px; + margin-right: 3px; } } } } - .main-links, - .external-links { - li > a { - @include project-a-style(); - } + .buttons { + margin-top: 2px; } } diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index a25782809f9..13d36445c32 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -2,6 +2,11 @@ // Home // -------------------------------------------------- +$font-size-xl: 44px; +$font-size-l: 36px; +$font-size-m: 28px; +$font-size-reg: 16px; + #hero{ position: relative; text-align: center; @@ -58,7 +63,7 @@ left: 248px; opacity: 0.01; @include transform( translate(0, 150px) ); - @include transition( all 1.5s $easeInOutBack ); + @include transition( all 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) ); &.in{ @include transform( translate(0, 0) ); @@ -100,14 +105,13 @@ h1{ margin-top: 0; - color: $blue-dark; + color: $body-font-color; font-size: $font-size-xl; } h4{ font-family: $font-family-open-sans; font-weight: 500; - text-transform: none; color: $blue-light; } @@ -164,7 +168,7 @@ } p{ - color: $blue-dark; + color: $body-font-color; } } @@ -321,7 +325,7 @@ h3{ margin: 30px 0 20px 0; - color: $blue-dark; + color: $body-font-color; letter-spacing: 1px; font-size: $font-size-l; line-height: 1.25em; @@ -342,7 +346,7 @@ p{ display: inline-block; - color: $blue-dark; + color: $body-font-color; font-size: $font-size-reg; line-height: 1.75em; max-width: 320px; @@ -470,7 +474,7 @@ } .feature-footer{ - margin-top: $small-pad; + margin-top: 30px; .docker-outline-logo{ width: 94px; @@ -483,7 +487,7 @@ &#maintain{ .feature-graphic{ - margin-top: $small-pad; + margin-top: 30px; width: 480px; height: 297px; background: image-url('feature-manage.png') 0 0 no-repeat; @@ -493,7 +497,7 @@ &#healing{ .feature-graphic{ - margin-top: $small-pad; + margin-top: 30px; width: 480px; height: 147px; background: image-url('feature-healing.png') 0 0 no-repeat; @@ -503,7 +507,7 @@ &#density{ .feature-graphic{ - margin-top: $small-pad; + margin-top: 30px; width: 480px; height: 189px; background: image-url('feature-density.png') 0 0 no-repeat; @@ -549,7 +553,7 @@ p{ display: block; margin-right: 0; - margin-bottom: $small-pad; + margin-bottom: 30px; } } } @@ -604,7 +608,7 @@ &#maintain{ .feature-graphic{ - margin-top: $small-pad; + margin-top: 30px; width: 280px; height: 173px; background: image-url('feature-manage.png') 0 0 no-repeat; diff --git a/website/source/assets/stylesheets/_mixins.scss b/website/source/assets/stylesheets/_mixins.scss index 7eb50d82ced..06b3f3825a4 100755 --- a/website/source/assets/stylesheets/_mixins.scss +++ b/website/source/assets/stylesheets/_mixins.scss @@ -330,7 +330,6 @@ } } - // Responsive image // // Keep images from scaling beyond the width of their parents. diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss index 45a4ee64fa1..c3d87293903 100644 --- a/website/source/assets/stylesheets/_sidebar.scss +++ b/website/source/assets/stylesheets/_sidebar.scss @@ -1,23 +1,106 @@ -// -// Sidebar -// - Project Specific -// - Make sidebar edits here -// -------------------------------------------------- +.sidebar-overlay { + background: $white; + opacity: 0; + position: fixed; + visibility: hidden; + z-index: 9999; + + top: 0; + left: 0; + right: 0; + bottom: 0; + + &.active { + opacity: 0.3; + visibility: visible; + } +} .sidebar { + background-color: $white; + border: none; + display: block; + position: relative; + min-height: 100%; + overflow-y: auto; + overflow-x: hidden; + @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1)); + @include clearfix(); + + .sidebar-divider, .divider { + width: 80%; + height: 1px; + margin: 8px auto; + background-color: #D7D7D7; + } + + .sidebar-header { + position: relative; + margin-bottom: 16px; + } + + .sidebar-image { + background: image-url('logo-text.svg') 0 0 no-repeat; + display: block; + margin: 24px auto 14px auto; + height: 56px; + width: 153px; + } + .sidebar-nav { - // Links - //---------------- + margin: 0; + padding: 0; + text-align: center; + li { + position: relative; + list-style-type: none; + text-align: center; + a { - color: $black; + color: $sidebar-link-color; + position: relative; + cursor: pointer; + user-select: none; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; + font-size: $sidebar-font-size; + + &:hover, &:focus, &:active { + background: transparent; + color: $sidebar-link-color-hover; + outline: 0; + text-decoration: none; - svg{ - path{ - fill: $black; + svg { + fill: $sidebar-link-color-hover; } } + + svg { + fill: $sidebar-link-color; + top: 2px; + width: 14px; + height: 14px; + margin-bottom: -2px; + margin-right: 4px; + } } } } } + +.sidebar { + box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.15); + position: fixed; + width: 0; + z-index: 10000; + + top: 0; + bottom: 0; + right: 0; + + &.open { + width: 280px; + } +} diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 3b343552dbd..9e4a1e79770 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -6,74 +6,57 @@ // Global values // -------------------------------------------------- -$header-height: 90px; +$header-height: 100px; $btn-border-radius: 4px; $el-border-radius: 6px; -// colors -// ------------------------- -$white: #fff; -$black: #000; -$gray: #929199; -$light-gray: #C2C1C7; -$faint-gray: #E3E3EA; -$green: #56cdad; -$green-dark: #449b82; -$green-light: #9bdb9c; -$green-faint: #E3F5E3; -$blue-dark: #4e5859; -$blue-light: #89999A; -$blue: #00BFE0; -$blue-faint: #E0E8E8; -$light-black: #242424; -$orange: #e78c5b; -$gray-dark: #3B4142; //#4e5859; -$gray: #777; -$gray-light: #939393; -$gray-lighter: #979797; -$red: #dd4e58; -$red-dark: #c5454e; -$purple: #822ff7; -$light-purple: #f7f3f9; -$btn-color: #4592C5; - - -// Scaffolding -// ------------------------- -$body-bg: #fff; -$text-color: $gray; - -// Links -// ------------------------- -$link-color: $red-dark; -$link-hover-color: darken($link-color, 15%); +// Colors +$white: #FFFFFF; +$black: #000000; +$green: #56CDAD; +$green-dark: #449B82; +$green-light: #9BDB9C; +$blue-dark: #4E5859; +$blue-light: #89999A; +$blue: #00BFE0; +$blue-faint: #E0E8E8; +$light-black: #242424; +$orange: #E78C5B; +$gray-dark: #3B4142; +$gray: #777777; +$gray-light: #939393; +$gray-lighter: #979797; +$gray: #929199; +$light-gray: #C2C1C7; +$faint-gray: #E3E3EA; +$red: #DD4E58; +$red-dark: #C5454E; +$purple: #822FF7; // Typography -// ------------------------- -$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-family-klavika: 'klavika-web', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$font-weight-xl: 300; +$font-family-klavika: 'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-monospace: 'Menlo', 'Monaco', 'Consolas', "Courier New", monospace; +$font-size: 15px; $font-weight-reg: 400; -$font-weight-sb: 600; -$font-weight-xb: 700; -$font-size-xl: 44px; -$font-size-l: 36px; -$font-size-m: 28px; -$font-size-reg: 16px; - -$text-shadow: 1px 1px 1px #000; -$shadow: $text-shadow; - - -//margin + padding -$xsmall-pad: 20px; -$small-pad: 30px; -$med-pad: 70px; -$large-pad: 120px; -$xl-pad: 150px; - -$light-outline: #f7f7f7; - -// -$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55); -$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275); +$font-weight-bold: 600; + +// Body +$body-font-color: $blue-dark; +$body-link-color: $green-dark; + +// Sidebar +$sidebar-font-size: $font-size - 2; +$sidebar-link-color: $body-font-color; +$sidebar-link-color-hover: $black; +$sidebar-link-color-active: $green-dark; + +// Header +$header-font-size: $font-size - 2; +$header-link-color: $body-font-color; +$header-link-color-hover: $black; + +// Footer +$footer-font-size: $font-size - 2; +$footer-link-color: $body-font-color; +$footer-link-color-hover: $black; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index f0476e5947f..7426a7ea311 100755 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -1,11 +1,14 @@ @import 'bootstrap-sprockets'; @import 'bootstrap'; -@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Ubuntu+Mono"); +@import url("//fonts.googleapis.com/css?family=Open+Sans:400,600"); // Mega Nav @import 'hashicorp/mega-nav'; +// Header anchors +@import 'hashicorp/anchor-links'; + // Core variables and mixins @import '_variables'; @import '_mixins'; @@ -16,12 +19,6 @@ //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 deleted file mode 100755 index 9695971f2a9..00000000000 --- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss +++ /dev/null @@ -1,219 +0,0 @@ -// -// 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; - } - } - } - } - - .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); - } - } - .svg-bg-line{ - @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; - - .by{ - height: $header-mobile-height; - line-height: $header-mobile-height; - } - } - .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 deleted file mode 100644 index 65231bfae3f..00000000000 --- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss +++ /dev/null @@ -1,280 +0,0 @@ -// -// 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 { - width: 153px; - height: 56px; - margin: 24px auto 14px 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-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 deleted file mode 100755 index d037d3ca878..00000000000 --- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss +++ /dev/null @@ -1,87 +0,0 @@ -// -// 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: 90px; -$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: 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: 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 deleted file mode 100755 index 13e1b608167..00000000000 --- a/website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// 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: $green-dark; - } -} diff --git a/website/source/assets/webfonts/2EFB01_0_0.eot b/website/source/assets/webfonts/2EFB01_0_0.eot deleted file mode 100644 index e840b2722c5..00000000000 Binary files a/website/source/assets/webfonts/2EFB01_0_0.eot and /dev/null differ diff --git a/website/source/assets/webfonts/2EFB01_0_0.ttf b/website/source/assets/webfonts/2EFB01_0_0.ttf deleted file mode 100644 index 7dc8a209867..00000000000 Binary files a/website/source/assets/webfonts/2EFB01_0_0.ttf and /dev/null differ diff --git a/website/source/assets/webfonts/2EFB01_0_0.woff b/website/source/assets/webfonts/2EFB01_0_0.woff deleted file mode 100644 index 368c7f26b7c..00000000000 Binary files a/website/source/assets/webfonts/2EFB01_0_0.woff and /dev/null differ diff --git a/website/source/assets/webfonts/2EFB01_0_0.woff2 b/website/source/assets/webfonts/2EFB01_0_0.woff2 deleted file mode 100644 index 0ed29aa9153..00000000000 Binary files a/website/source/assets/webfonts/2EFB01_0_0.woff2 and /dev/null differ diff --git a/website/source/assets/webfonts/2EFC68_0_0.eot b/website/source/assets/webfonts/2EFC68_0_0.eot deleted file mode 100644 index 29055325550..00000000000 Binary files a/website/source/assets/webfonts/2EFC68_0_0.eot and /dev/null differ diff --git a/website/source/assets/webfonts/2EFC68_0_0.ttf b/website/source/assets/webfonts/2EFC68_0_0.ttf deleted file mode 100644 index c3744c7945c..00000000000 Binary files a/website/source/assets/webfonts/2EFC68_0_0.ttf and /dev/null differ diff --git a/website/source/assets/webfonts/2EFC68_0_0.woff b/website/source/assets/webfonts/2EFC68_0_0.woff deleted file mode 100644 index c7bb7b63813..00000000000 Binary files a/website/source/assets/webfonts/2EFC68_0_0.woff and /dev/null differ diff --git a/website/source/assets/webfonts/2EFC68_0_0.woff2 b/website/source/assets/webfonts/2EFC68_0_0.woff2 deleted file mode 100644 index e9283976cf7..00000000000 Binary files a/website/source/assets/webfonts/2EFC68_0_0.woff2 and /dev/null differ diff --git a/website/source/community.html.erb b/website/source/community.html.erb index 3305d9eaf14..5273df22f26 100644 --- a/website/source/community.html.erb +++ b/website/source/community.html.erb @@ -27,13 +27,13 @@ active, dedicated users willing to help you through various mediums. on GitHub. Please only use this for reporting bugs. Do not ask for general help here. Use IRC or the mailing list for that. -

Community Tools:

+

Community Tools

These Nomad projects are created and managed by the amazing members of the Nomad community:

- +

People

The following people are some of the faces behind Nomad. They each diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb index e5c98ec6eaf..6bd649e88df 100644 --- a/website/source/layouts/_footer.erb +++ b/website/source/layouts/_footer.erb @@ -1,26 +1,17 @@