From a49714546f0f1a83eef4aed5fa2b7578995e55cc Mon Sep 17 00:00:00 2001 From: Seth Vargo Date: Mon, 6 Mar 2017 14:53:00 -0500 Subject: [PATCH] Clean up scss --- website/source/assets/stylesheets/_api.scss | 86 +-- .../source/assets/stylesheets/_buttons.scss | 23 +- .../source/assets/stylesheets/_community.scss | 26 +- website/source/assets/stylesheets/_demo.scss | 217 +++--- website/source/assets/stylesheets/_docs.scss | 389 ++++------- .../source/assets/stylesheets/_downloads.scss | 108 +-- .../source/assets/stylesheets/_footer.scss | 34 +- .../source/assets/stylesheets/_global.scss | 117 ++-- .../source/assets/stylesheets/_header.scss | 13 +- website/source/assets/stylesheets/_home.scss | 657 +++--------------- .../source/assets/stylesheets/_sidebar.scss | 10 - .../source/assets/stylesheets/_variables.scss | 96 +-- .../assets/stylesheets/application.scss | 5 +- .../hashicorp-shared/_hashicorp-sidebar.scss | 2 + website/source/index.html.erb | 191 +++-- 15 files changed, 672 insertions(+), 1302 deletions(-) diff --git a/website/source/assets/stylesheets/_api.scss b/website/source/assets/stylesheets/_api.scss index c9c05c545d..5bc1dc2a19 100644 --- a/website/source/assets/stylesheets/_api.scss +++ b/website/source/assets/stylesheets/_api.scss @@ -3,48 +3,52 @@ // -------------------------------------------------- .bs-api-section dl, dl.api { - margin-top: 30px; - line-height: 20px; + margin-top: 30px; + line-height: 20px; - dt { + dt { + color: #888; + text-transform: uppercase; + font-weight: normal; + float: left; + width: 150px; + text-align: right; + } + + dd { + margin-left: 170px; + + pre.api-sample { + margin-top: 20px; + font-size: 14px; + padding: 10px; + } + } + + ul { + margin: 0; + padding: 0; + + li { + margin: 0; + list-style-type: none; + padding-bottom: 20px; + font-size: 15px; + font-family: $font-family-open-sans; + + &:last-child { + padding-bottom: 0; + } + + span.param { + font-weight: bold; + } + + span.param-flags { + font-style: italic; color: #888; - text-transform: uppercase; - font-weight: normal; - float: left; - width: 150px; - text-align: right; - } - - dd { - margin-left: 170px; - - pre.api-sample { - margin-top: 20px; - font-size: 14px; - padding: 10px; - } - } - - ul { - margin: 0; - padding: 0; - - li { - margin: 0; - list-style-type: none; - padding-bottom: 20px; - font-size: 15px; - font-family: $font-family-open-sans; - - span.param { - font-weight: bold; - } - - span.param-flags { - font-style: italic; - color: #888; - padding-right: 6px; - } - } + padding-right: 6px; + } } + } } diff --git a/website/source/assets/stylesheets/_buttons.scss b/website/source/assets/stylesheets/_buttons.scss index 3a635c5c0b..d663bfbd43 100755 --- a/website/source/assets/stylesheets/_buttons.scss +++ b/website/source/assets/stylesheets/_buttons.scss @@ -2,36 +2,37 @@ // Button Styles // -------------------------------------------------- -.v-btn{ +.v-btn { display: inline-block; background-color: $white; color: $black; border: 1px solid $black; + text-decoration: none; @include transition(color .3s ease-in-out); @include btn-shadow(); - &.lrg{ + &.lrg { font-size: 18px; padding: 10px 50px; } - &.sml{ + &.sml { font-size: 15px; padding: 8px 40px; } - &.blue{ + &.blue { color: $blue; border: 1px solid $blue; } - &.gray{ + &.gray { font-weight: 300; color: $gray; border: 1px solid $light-gray; } - &.terminal{ + &.terminal { padding-left: 52px; padding-right: 30px; margin-left: 12px; @@ -39,23 +40,23 @@ @include img-retina("icon-terminal.png", "icon-terminal@2x.png", 26px, 25px); } - &.started{ + &.started { margin-bottom: 12px; } - &:hover{ + &:hover, &:active, &:focus { text-decoration: none; @include transition(color .3s ease-in-out); - &.blue{ + &.blue { color: darken($blue, 8%); } - &.black{ + &.black { color: lighten($black, 50%); } - &.gray{ + &.gray { color: $black; } } diff --git a/website/source/assets/stylesheets/_community.scss b/website/source/assets/stylesheets/_community.scss index de945fa388..11c9855326 100644 --- a/website/source/assets/stylesheets/_community.scss +++ b/website/source/assets/stylesheets/_community.scss @@ -1,20 +1,16 @@ .people { - margin-top: 30px; + margin-top: 30px; - .person { - margin-bottom: 40px; + .person { + margin-bottom: 40px; - h3 { - text-transform: none; - } - - img { - width: 125px; - margin: auto auto; - } - - .bio { - padding-left: 150px; - } + img { + width: 125px; + margin: auto auto; } + + .bio { + padding-left: 150px; + } + } } diff --git a/website/source/assets/stylesheets/_demo.scss b/website/source/assets/stylesheets/_demo.scss index e7bd06b581..966caf0abc 100644 --- a/website/source/assets/stylesheets/_demo.scss +++ b/website/source/assets/stylesheets/_demo.scss @@ -1,141 +1,134 @@ -html, -body { - height: 100%; - min-height: 100%; -} - .demo-active { - background: #000; + background: #000; - #demo-app { - min-height: 100%; - } + #demo-app { + min-height: 100%; + } - #header, - #sidebar, - #hero, - #content, - #footer, - .sidebar-overlay { - display: none; - } + #header, + #sidebar, + #hero, + #container, + #footer, + .sidebar-overlay { + display: none; + } } .demo-overlay { - background: black; - width: 100%; - height: 100%; - min-height: 100%; - line-height: 1.3; - overflow: auto; - color: #DDDDDD; - display: block; - font-size: 15px; - font-family: 'Ubuntu Mono', 'Monaco', monospace; - @include box-shadow(0px -2px 30px 0px rgba(0, 0, 0, 0.40)); - z-index: 1000; + background: black; + width: 100%; + height: 100%; + min-height: 100%; + line-height: 1.3; + overflow: auto; + color: #DDDDDD; + display: block; + font-size: 15px; + font-family: $font-family-monospace; + @include box-shadow(0px -2px 30px 0px rgba(0, 0, 0, 0.40)); + z-index: 50; } .instruction-wrapper { - background: #000; - width: 100%; - padding: 20px; - position: fixed; - top: 0; - z-index: 5; + background: #000; + width: 100%; + padding: 20px; + position: fixed; + top: 0; + z-index: 100; } .instruction { - overflow: auto; - padding: 10px; - max-width: 800px; - min-width: 400px; - margin: 0 auto; - background-color: darken($blue, 28%); + overflow: auto; + padding: 10px; + max-width: 800px; + min-width: 400px; + margin: 0 auto; + background-color: darken($blue, 28%); - code { - background: none; - color: inherit; - font-weight: 700; - padding-left: 10px; - } + code { + background: none; + color: inherit; + font-weight: 700; + padding-left: 10px; + } - a { - color: white; - text-decoration: underline; - } + a { + color: white; + text-decoration: underline; + } - p:last-child { - margin-bottom: 0px; - } + p:last-child { + margin-bottom: 0px; + } - ul { - padding-left: 15px; - } - - li { - list-style-type: none; - } + ul { + padding-left: 15px; + } + li { + list-style-type: none; + } } .close-terminal{ - display: inline-block; - position: fixed; - top: 0; - right: 0; - width: 60px; - height: 60px; - color: #8B8A8F; - text-align: center; - line-height: 60px; - font-size: 30px; - transition: all 250ms ease-in; - cursor: pointer; - z-index: 10; + display: inline-block; + position: fixed; + top: 0; + right: 0; + width: 60px; + height: 60px; + color: #8B8A8F; + text-align: center; + line-height: 60px; + font-size: 40px; + transition: all 250ms ease-in; + cursor: pointer; + z-index: 100; - &:hover{ - text-decoration: none; - color: $white; - transition: all 250ms ease-in; - } + &:hover{ + text-decoration: none; + color: $white; + transition: all 250ms ease-in; + } } .demo-terminal { + background-color: black; + padding: 25px 65px 0 25px; + padding-top: 250px; + padding-bottom: 50px; + min-height: 100%; + width: 100%; + display: block; + overflow: auto; + position: relative; + z-index: 90; + + &.fullscreen { + min-height: 300px; + padding-top: 20px; + z-index: 6; + } + + .log { + white-space: pre; + } + + input.shell { + padding: 0; + margin: 0; + display: inline-block; + bottom: 0; + width: 90%; background-color: black; - padding: 25px 65px 0 25px; - padding-top: 250px; - padding-bottom: 50px; - min-height: 100%; - width: 100%; - display: block; - overflow: auto; - position: relative; - z-index: 1; + border: 0; + outline: 0; - &.fullscreen { - min-height: 300px; - padding-top: 20px; - z-index: 6; - } - - .log { - white-space: pre; - } - - input.shell { - padding: 0; - margin: 0; - display: inline-block; - bottom: 0; - width: 90%; - background-color: black; - border: 0; - outline: 0; - - &.hidden { - opacity: 0; - } + &.hidden { + opacity: 0; } + } } diff --git a/website/source/assets/stylesheets/_docs.scss b/website/source/assets/stylesheets/_docs.scss index 9c53993ba4..0cfe56e5e1 100755 --- a/website/source/assets/stylesheets/_docs.scss +++ b/website/source/assets/stylesheets/_docs.scss @@ -2,277 +2,190 @@ // Docs // -------------------------------------------------- -body.layout-atlas, -body.layout-consul, -body.layout-dnsimple, -body.layout-dme, -body.layout-cloudflare, -body.layout-cloudstack, -body.layout-google, -body.layout-heroku, -body.layout-mailgun, -body.layout-digitalocean, -body.layout-aws, +$docs-font-size: 15px; + body.layout-docs, body.layout-inner, body.layout-downloads, -body.layout-intro{ - display: flex; - flex-direction: column; +body.layout-intro { + >.container{ + .col-md-8[role=main]{ + min-height: 800px; + background-color: white; - >.container{ - flex: 1 0 auto; + >div{ + position: relative; + z-index: 10; + } + } + } - .col-md-8[role=main]{ - background-color: white; + *:focus { + outline: none; + } - >div{ - position: relative; - z-index: 10; - } - } - } + h1 > code, + h2 > code, + h3 > code, + h4 > code, + h5 > code + h6 > code, + li > code, + table code, + p code, + tt, + .alert code { + font-family: $font-family-monospace; + font-size: 90%; + background-color: transparent; + color: inherit; + padding: 0; + } } -.docs-sidebar{ - position: relative; - z-index: 20; - margin-bottom: 30px; - margin-top: 50px; - margin-right: 4%; - @include open(); +.docs-sidebar { + margin-bottom: 30px; + margin-top: 50px; - a{ - color: $dark-blue; - } + ul.nav.docs-sidenav { + display: block; + padding-bottom: 15px; - .nav.docs-sidenav{ - padding-bottom: 15px; + li { + a { + color: $sidebar-link-color; + font-size: 13px; + padding: 10px 0 10px 15px; - :last-child{ - border-bottom: none; - } + &:before { + color: $dark-blue; + content: '\203A'; + font-size: $docs-font-size; + left: 0; + line-height: 100%; + opacity: 0.4; + position: absolute; - //all li - li{ - position: relative; - - > a{ - padding: 10px 0 10px 8px; - font-size: 13px; - color: $dark-blue; - - &:before{ - @include bez-1-transition(); - } - - &:hover{ - background-color: transparent !important; - - &:before{ - @include bez-1-transition(); - } - } - } - } - - $parent-active-state: -14px; - $parent-default-state: -10px; - $child-active-state: -4px; - $child-default-state: 0px; - - //first teir li - > li { - margin: 0 0 0 10px; - - &.active { - >a{ - color: lighten($black, 4%); - - &:hover{ - &:before{ - left: $parent-default-state; - } - } - - &:before{ - background: image-url("triangle-sprite.png") 0 0 no-repeat; - @include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 7px, 25px); - } - } - - .nav { - display: block; - } - } - - > a { - -webkit-font-smoothing: antialiased; - - &:hover{ - &:before{ - left: $parent-active-state; - } - } - - &:before{ - content: ''; - position: absolute; - width: 7px; - height: 8px; - top: 15px; - left: $parent-default-state; - overflow: hidden; - background: image-url("triangle-sprite.png") 0 -9px no-repeat; - @include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 7px, 25px); - } - } - } - - //nested ul.nav - .nav { - display: none; - margin-bottom: 15px; - - > li{ - margin-left: 10px; - - &.active{ - > a{ - color: $black; - - &:hover{ - &:before{ - left: $child-default-state; - } - } - - &:before{ - background: image-url("triangle-sprite.png") 0 0 no-repeat; - @include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 5px, 19px); - } - } - } - - > a{ - -webkit-font-smoothing: antialiased; - padding: 6px 15px; - - &:hover{ - &:before{ - left: $child-active-state; - } - } - - &:before{ - opacity: .75; - content: ''; - position: absolute; - width: 5px; - height: 7px; - top: 12px; - left: $child-default-state; - overflow: hidden; - background: image-url("triangle-sprite.png") 0 -13px no-repeat; - @include img-retina("triangle-sprite.png", "triangle-sprite@2x.png", 5px, 19px); - } - } - } - } - - .nav-visible { - display: block; + height: 100%; + width: 8px } - } + + &:focus, + &:hover { + background-color: transparent; + color: $sidebar-link-color-hover; + + &:before { + opacity: 1; + } + } + } + } + + li.active { + > a { + color: $sidebar-link-color-active; + + &:before { + opacity: 1; + } + } + + // Open nested navigations + ul.nav { + display: block; + } + } + + // subnav + ul.nav { + display: none; + margin: 10px; + + li { + margin-left: 10px; + + a { + padding: 6px 15px; + } + } + } + } } +.bs-docs-section { + padding-top: 10px; + padding-left: 3%; + padding-bottom: 80px; -.bs-docs-section{ - padding-top: 10px; - padding-left: 3%; - padding-bottom: 80px; + p, li, .alert { + font-size: $docs-font-size; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; + line-height: 1.84em; + margin: 0 0 $docs-font-size; + -webkit-font-smoothing: antialiased; + } - .lead{ - margin-bottom: 48px - } + pre { + font-size: ($docs-font-size - 3); + margin: 0 0 $docs-font-size; - .doc-sectional{ - margin-bottom: 48px; - } + // This will force the code to scroll horizontally on small screens + // instead of wrapping. + code { + overflow-wrap: normal; + white-space: pre; + } + } - p, li, .alert { - font-size: 18px; - font-family: $font-family-open-sans; - font-weight: $font-weight-reg; - line-height: 1.5em; - margin: 0 0 18px; - -webkit-font-smoothing: antialiased; - } + a { + color: $dark-blue; + text-decoration: none; - pre{ - margin: 0 0 18px; + &:hover { + text-decoration: underline; } - a{ - color: $dark-blue; - &:hover{ - text-decoration: underline; - } - } - - img{ - max-width: 650px; - margin-top: 25px; - margin-bottom: 25px; + code { + background: inherit; + color: $dark-blue; } + } - h1{ - color: $black; - font-weight: $font-weight-b; - font-size: 36px; - margin-top: 50px; - margin-bottom: 24px; - } + img { + max-width: 650px; + margin-top: 25px; + margin-bottom: 25px; + } - h2, h3, h4{ - margin-bottom: 16px; - font-weight: $font-weight-b; - - } - - #graph { - margin-top: 30px; - } + h1, + h2, + h3, + h4 { + color: $body-font-color; + margin-top: 54px; + margin-bottom: $docs-font-size; + line-height: 1.3; + } } - @media (max-width: 992px) { - - .bs-docs-section{ - padding-left: 0; + .bs-docs-section { + padding-left: 0; } } @media (max-width: 768px) { - .bs-docs-section{ - padding-top: 0; - h1{ - margin-top: 0; - } - } + .bs-docs-section { + padding-top: 0; + } } - - - @media (max-width: 480px) { - .bs-docs-section{ - img{ - max-width: 450px; - } - - h1{ - font-size: 32px; - } - } + .bs-docs-section { + img { + max-width: 450px; + } + } } diff --git a/website/source/assets/stylesheets/_downloads.scss b/website/source/assets/stylesheets/_downloads.scss index be2187eafb..7150c6f407 100644 --- a/website/source/assets/stylesheets/_downloads.scss +++ b/website/source/assets/stylesheets/_downloads.scss @@ -1,59 +1,59 @@ .downloads { + margin-top: 20px; + + .description { + margin-bottom: 20px; + } + + .download { + border-bottom: 1px solid #b2b2b2; + padding-bottom: 15px; + margin-top: 10px; + margin-bottom: 10px; + + .details { + padding-left: 95px; + + h2 { + margin-top: 30px; + } + + ul { + padding-left: 0px; + } + + li { + display: inline-block; + + &:after { + content: " | "; + } + + &:last-child:after { + content: ""; + } + } + } + + .icon { + img { + width: 75px; + } + } + + .os-name { + font-size: 40px; + margin-bottom: -3px; + } + } + + .poweredby { margin-top: 20px; - .description { - margin-bottom: 20px; - } - - .download { - border-bottom: 1px solid #b2b2b2; - padding-bottom: 15px; - margin-top: 10px; - margin-bottom: 10px; - - .details { - padding-left: 95px; - - h2 { - margin-top: 30px; - } - - ul { - padding-left: 0px; - } - - li { - display: inline-block; - - &:after { - content: " | "; - } - - &:last-child:after { - content: ""; - } - } - } - - .icon { - img { - width: 75px; - } - } - - .os-name { - font-size: 40px; - margin-bottom: -3px; - } - } - - .poweredby { - margin-top: 20px; - - img { - display: block; - margin: 0 auto; - width: 122px; - } + img { + display: block; + margin: 0 auto; + width: 122px; } + } } diff --git a/website/source/assets/stylesheets/_footer.scss b/website/source/assets/stylesheets/_footer.scss index 45aaebe81d..dacbb27cda 100644 --- a/website/source/assets/stylesheets/_footer.scss +++ b/website/source/assets/stylesheets/_footer.scss @@ -1,38 +1,38 @@ -body.page-sub{ - #footer{ +body.page-sub { + #footer { padding: 0 0 40px 0; - .col-md-10{ + .col-md-10 { padding-top: 40px; border-top: 1px solid $faint-gray; } } } -#footer{ +#footer { flex-shrink:0; padding: 64px 0; - .hashicorp-project{ + .hashicorp-project { margin-top: 24px; @include project-by-hashicorp-style(); - &:hover{ + &:hover { color: $black; } } - .pull-right{ + .pull-right { padding-right: 15px; } } -.edit-page-link{ +.edit-page-link { position: absolute; top: -50px; right: 15px; z-index: 10; - a{ + a { text-transform: uppercase; color: $black; font-size: 13px; @@ -44,12 +44,12 @@ body.page-sub{ display: block; text-align: center; - ul{ + ul { display: inline-block;; float: none !important; } - .footer-hashi{ + .footer-hashi { display: block; float: none !important; } @@ -57,17 +57,17 @@ body.page-sub{ } @media (max-width: 414px) { - #footer{ - ul{ + #footer { + ul { display: block; - li{ + li { display: block; float: none; } - &.external-links{ - li{ - svg{ + &.external-links { + li { + svg { position: relative; left: 0; top: 2px; diff --git a/website/source/assets/stylesheets/_global.scss b/website/source/assets/stylesheets/_global.scss index 4738683b03..9a1cd37c94 100755 --- a/website/source/assets/stylesheets/_global.scss +++ b/website/source/assets/stylesheets/_global.scss @@ -2,101 +2,94 @@ // Global Site // -------------------------------------------------- -/*html{ +html { + height: 100%; + min-height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -}*/ -html{ - min-height: 100%; } body { - min-height: 100%; - -webkit-font-smoothing: antialiased; - color: $black; - background-color: $white; - font-size: 16px; - font-family: $font-family-open-sans; - font-weight: 400; + -webkit-font-smoothing: antialiased; + color: $body-font-color; + background-color: $white; + font-size: $font-size; + font-family: $font-family-open-sans; + font-weight: $font-weight-reg; + height: 100%; + min-height: 100%; } - h1, h2, h3, h4, h5 { - -webkit-font-smoothing: antialiased; -} -h1{ - font-size: 42px; - line-height: 42px; - margin-bottom: 24px; + font-family: $font-family-klavika; + -webkit-font-smoothing: antialiased; } -h3{ - font-size: 28px; - line-height: 28px; -} - -//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 ); +h1 { + margin-bottom: 24px; } .highlight{ - margin-bottom: 18px; + margin-bottom: 18px; } pre { - background-color: $black; - color: $white; - font-size: 14px; - font-weight: normal; - font-family: "Courier New", Monaco, Menlo, Consolas, monospace; - border: none; - padding: 20px; - margin-bottom: 0; -} - - -//fixed grid below 992 to prevent smaller responsive sizes -@media (max-width: 992px) { - .container{ - max-width: 970px; - } + background-color: $black; + color: $white; + font-size: 14px; + font-weight: normal; + font-family: $font-family-monospace; + border: none; + padding: 20px; + 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; + margin: 0; } .navbar-right { - float: right !important; + float: right !important; } .navbar-nav > li { - float: left; + float: left; } .navbar-nav > li > a { - padding-top: 15px; - padding-bottom: 15px; + padding-top: 15px; + padding-bottom: 15px; } .center { - text-align: center; + text-align: center; } -.hcaret{ - display: inline-block; - -moz-transform: translate(0, -1px) rotate(135deg); - -webkit-transform: translate(0, -1px) rotate(135deg); - transform: translate(0, -1px) rotate(135deg); - width: 7px; - height: 7px; - border-top: 1px solid $blue; - border-left: 1px solid $blue; - @include transition(all .1s ease-in); +.alert p:last-child { + margin-bottom: 0; +} + +//Typekit utilites for hiding FOUC +.wf-loading { + visibility: hidden; +} + +.wf-active, .wf-inactive { + visibility: visible; +} + +//fixed grid below 992 to prevent smaller responsive sizes +@media (min-width: 768px) and (max-width: 992px) { + .container{ + 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 93b4dc42d2..4127280fec 100755 --- a/website/source/assets/stylesheets/_header.scss +++ b/website/source/assets/stylesheets/_header.scss @@ -8,7 +8,7 @@ flex-shrink:0; .navbar-brand { - .logo{ + .logo { width: $project-logo-width; padding-left: 50px; font-size: 0; @@ -19,11 +19,11 @@ } } - .by-hashicorp{ + .by-hashicorp { @include project-by-hashicorp-style(); } - .buttons{ + .buttons { margin-top: 2px; //baseline everything } } @@ -31,13 +31,8 @@ @media (max-width: 414px) { #header { .navbar-brand { - .logo{ + .logo { width: $project-logo-width * .8; - - img{ - //width: 72px; - //height: 14px; - } } } } diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index 47568daf2c..5409715d85 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -1,578 +1,109 @@ -// -// Home -// -------------------------------------------------- +#page-home { + #container { + margin-top: 140px; + position: relative; + text-align: center; + z-index: 1; -#hero{ - /* opacity: 0; - @include translate3d(0, -10px, 0); */ - text-align: center; + #tag-line { + display: block; + font-size: 24px; + font-weight: 300; + margin: 15px 0 40px 0; + } - /* &.showit{ - opacity: 1; - @include translate3d(0, 0px, 0); - transition: all 1s ease; - } */ + #diagram { + background-image: image-url("hero@2x.png"); + background-origin: content-box; + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + display: block; + margin: 60px 0; + padding: 15px; - #logo-lockup{ - position: relative; - display: inline-block; - width: 228px; - height: 43px; - margin-top: 120px; - background: image-url('logo-lockup.png') 0 0 no-repeat; - @include img-retina("logo-lockup.png", "logo-lockup@2x.png", 228px, 43px); + height: 193px; + width: 100%; + } - .keys{ - position: absolute; - left: 15px; - top: 8px; - width: 12px; + h2.features-header { + color: $blue; + display: inline-block; + font-size: 44px; + font-weight: 600; + letter-spacing: 2px; + margin: 120px auto 40px auto; + text-transform: uppercase; + } - span{ - width: 3px; - height: 3px; - border-radius: 2px; - float: left; - margin-left: 1px; - margin-bottom: 1px; - background-color: $blue; - transition: all 250ms ease-in; + h3.feature-header { + color: $black; + font-size: 36px; + font-weight: 300; + margin: 30px 0; + text-transform: none; + } - &:nth-child(1){ - opacity: .85; - } + p { + font-size: 18px; + font-weight: 300; + line-height: 36px; + margin: 25px 0; + padding: 15px; + text-align: left; + } - &:nth-child(2){ - opacity: .4; - } + .feature { + margin-bottom: 150px; - &:nth-child(3){ - opacity: .8; - } + .graphic { + background-origin: content-box; + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + display: block; + margin: 60px 0; + padding: 15px; - &:nth-child(4){ - opacity: .9; - } + height: 160px; + width: 100%; + } - &:nth-child(5){ - opacity: .8; - } + &#crud { + .graphic { + background-image: image-url("graphic-crud@2x.png"); + } + } - &:nth-child(6){ - opacity: .5; - } + &#key { + .graphic { + background-image: image-url("graphic-key@2x.png"); + } + } - &:nth-child(7){ - opacity: .65; - } + &#audit { + .graphic { + background-image: image-url("graphic-audit@2x.png"); + } + } + } - &:nth-child(8){ - opacity: .7; - } + #cta { + @include img-retina("bg-icons.png", "bg-icons@2x.png", 669px, 260px); + background: image-url("bg-icons.png") center center no-repeat; + background-position: center center; + border-top: 1px solid $faint-gray; + border-bottom: 1px solid $faint-gray; + padding: 140px 0; - &:nth-child(9){ - opacity: 1; - } - - &:nth-child(10){ - opacity: 1; - margin-left: 5px; - } - - &.full{ - opacity: 1; - transition: all 250ms ease-in; - } - - &.full.off{ - opacity: .55; - transition: all 250ms ease-in; - } - - &.full.press{ - - animation-name: press; - -webkit-animation-name: press; - - animation-duration: 600ms; - -webkit-animation-duration: 600ms; - - animation-timing-function: ease; - -webkit-animation-timing-function: ease; - } - } - } - } - - #tag-line{ - margin: 15px 0 20px 0; - font-size: 24px; - font-weight: 300; - } - - #diagram{ - display: inline-block; - width: 490px; - height: 193px; - margin-top: 120px; - background: image-url('hero.png') 0 0 no-repeat; - @include img-retina("hero.png", "hero@2x.png", 490px, 193px); - } - - p{ - margin-top: 60px; - text-align: left; - line-height: 2em; - - .strong{ - font-size: 20px; - font-weight: 600; - } - } -} - -#content{ - margin-top: 180px; - text-align: center; - - h2{ - margin-bottom: 120px; - color: $blue; - font-family: $font-family-klavika; - font-size: 44px; - text-transform: uppercase; - letter-spacing: 2px; - } - - .feature{ - margin-bottom: 150px; - - &#crud{ - .graphic{ - width: 335px; - height: 128px; - background: image-url('graphic-crud.png') 0 0 no-repeat; - @include img-retina("graphic-crud.png", "graphic-crud@2x.png", 335px, 128px); - } - } - - &#key{ - .graphic{ - width: 243px; - height: 140px; - background: image-url('graphic-key.png') 0 0 no-repeat; - @include img-retina("graphic-key.png", "graphic-key@2x.png", 243px, 140px); - } - } - - &#audit{ - .graphic{ - width: 491px; - height: 129px; - background: image-url('graphic-audit.png') 0 0 no-repeat; - @include img-retina("graphic-audit.png", "graphic-audit@2x.png", 491px, 129px); - } - } - - .graphic{ - display: inline-block; - } - - h3{ - font-family: $font-family-klavika; - margin: 30px 0; - color: $black; - font-size: 34px; - font-weight: 600; - line-height: 34px; - text-transform: uppercase; - } - - p{ - margin-bottom: 30px; - text-align: left; - font-size: 16px; - line-height: 1.75em; - } - - .feature-footer{ - a{ - margin-bottom: 15px; - margin-left: 15px; - - &:first-child{ - margin-left: 0; - } - } - } - } - - #cta { - position: relative; - padding: 160px 0; - background: image-url('bg-icons.png') center center no-repeat; - @include img-retina("bg-icons.png", "bg-icons@2x.png", 669px, 260px); - background-position: center center; - border-top: 1px solid $faint-gray; - border-bottom: 1px solid $faint-gray; - - a{ - margin-bottom: 5px; - } - - p{ - margin-top: 10px; - color: $black; - font-size: 14px; - font-weight: 600; - line-height: 1.5esm; - - &.cta-gray{ - color: $gray; - } - } - - .outline-btn { - padding: 16px 40px; - display: inline-block; - &:focus { - outline: 0; - } - } - } -} - -#demos{ - position: relative; - padding: 180px 0 60px; - margin-top: -80px; - - >.container{ - z-index: 31; - } - - #demo-bg{ - background-color: #000; - @include skewY(-3deg); - z-index: 30; - } - - .explantion { - margin: 40px 0 60px 15px; - border-left: 8px solid #1e1e1e; - - h2 { - margin-top: 0; - font-size: 28px; - color: lighten($purple, 8%); - } - - p{ - margin-bottom: 0; - font-size: 16px; - letter-spacing: 1px; - line-height: 1.5em; - color: $gray-light; - font-weight: 400; - } - } - - .terminals{ - margin-bottom: 80px; - - .terminal-item{ - margin-bottom: 120px; - - &.last{ - border-bottom: none; - } - >header{ - .left{ - span.icn{ - display: inline-block; - width: 83px; - height: 74px; - } - } - - .right{ - padding-left: 25px; - - h2{ - margin-top: 0; - font-size: 28px; - text-transform: uppercase; - } - - p{ - font-size: 16px; - } - } - } - - .terminal{ - border: 2px solid #1e1e1e; - //border-radius: 4px; - - header{ - position: relative; - text-align: center; - padding: 3px; - //background-color: #1e1e1e; - border-bottom: 2px solid #1e1e1e; - - h4{ - font-size: 14px; - letter-spacing: 1px; - color: white; - } - - ul.shell-dots{ - position: absolute; - top: 10px; - left: 8px; - padding-left: 0; - - li{ - &.d1{ - background-color: #4a08a7; - } - &.d2{ - background-color: #6517cf; - } - &.d3{ - background-color: #7b29ee; - } - - display: inline-block; - width: 12px; - height: 12px; - border-radius: 6px; - margin-left: 6px; - } - } - } - - .terminal-window{ - min-height: 140px; - padding: 20px; - font-size: 15px; - font-family: "Courier New", Monaco, Menlo, Consolas, monospace; - color: $white; - background-color: transparent; - overflow:auto; - font-weight: 500; - -webkit-font-smoothing: antialiased; - - .txt-spe { - color: lighten($blue, 5%); - font-weight: 600; - } - - .txt-var { - color: lighten($purple, 8%); - font-weight: 600; - } - - .txt-str { - color: lighten($green, 2%); - } - - .txt-int { - color: lighten($orange, 2%); - font-weight: 600; - } - - p{ - margin-bottom: 2px; - white-space: pre-wrap; - } - .cursor { - background-color: lighten($purple, 5%); - } - } - } - - .feature-bullets{ - list-style-type: none; - padding-left: 35px; - - li{ - padding: 5px 0 5px 45px; - } - } - } - } -} - - -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - #demos{ - .terminals{ - .terminal-item{ - .feature-bullets{ - li{ - background-size: 12px 12px; - } - } - } - } - } -} - - -@media (min-width: 1200px) { - -} - - -@media (max-width: 1200px) { - -} - -@media (min-width: 992px) and (max-width:1200px) { - #cta a { - margin-top: 15px; - font-size: 18px; - } -} - -@media (min-width: 768px) and (max-width:992px) { - #cta a { - margin-top: 10px; - } -} - -@media (max-width: 992px) { - - #demos{ - .terminals{ - .terminal-item{ - >header{ - .left{ - span.icn{ - } - } - - .right{ - padding-left: 54px; - } - } - } - } - } -} - -@media (max-width: 768px) { - - #demos{ - .explantion { - margin: 40px 0 60px 0; - } - - .terminals{ - .terminal-item{ - >header{ - .left{ - span.icn{ - padding-bottom: 15px; - } - } - - .right{ - padding-left: 15px; - } - } - } - } - } - - #cta{ - .intro{ - text-align: center; - p{ - text-align: center; - margin-bottom: 15px; - } - } - } -} - - -@media (max-width: 480px) { - - - #hero{ - #diagram{ - width: 100%; - height: 132px; - background: image-url('hero.png') center 0 no-repeat; - @include img-retina("hero.png", "hero@2x.png", 320px, 132px); - } - } - - #content{ - .feature{ - &#audit{ - .graphic{ - width: 100%; - height: 84px; - background: image-url('graphic-audit.png') center 0 no-repeat; - @include img-retina("graphic-audit.png", "graphic-audit@2x.png", 320px, 84px); - } - } - } - } - - .feature-footer{ - text-align: center; - a{ - margin-bottom: 15px; - margin-left: 0 !important; - } - } -} - - -@media (max-width: 320px) { - - #hero{ - #diagram{ - width: 100%; - height: 132px; - background: image-url('hero.png') center 0 no-repeat; - @include img-retina("hero.png", "hero@2x.png", 320px, 132px); - } - } - - #content{ - .feature{ - &#crud{ - .graphic{ - width: 100%; - height: 111px; - background: image-url('graphic-crud.png') center 0 no-repeat; - @include img-retina("graphic-crud.png", "graphic-crud@2x.png", 290px, 111px); - } - } - - &#audit{ - .graphic{ - width: 100%; - height: 76px; - background: image-url('graphic-audit.png') center 0 no-repeat; - @include img-retina("graphic-audit.png", "graphic-audit@2x.png", 290px, 76px); - } - } - } - } - - #demos .explantion{ - border-left: 8px solid transparent; - } - - #cta a { - font-size: 14px; - font-weight: 400; - } + p { + margin-top: 10px; + color: $black; + font-size: 14px; + font-weight: 600; + line-height: 1.5esm; + text-align: center; + } + } + } } diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss index 360db6b0d7..198142edd3 100644 --- a/website/source/assets/stylesheets/_sidebar.scss +++ b/website/source/assets/stylesheets/_sidebar.scss @@ -1,17 +1,7 @@ -// -// Sidebar -// - Project Specific -// - Make sidebar edits here -// -------------------------------------------------- - .sidebar { .sidebar-nav { - // Links - //---------------- li { a { - font-family: $header-font-family; - font-weight: 400; color: $black; svg{ diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 96d76108c3..71edbdfbac 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -1,69 +1,39 @@ -// -// Variables -// -------------------------------------------------- - - // Global values -// -------------------------------------------------- +$header-height: 90px; +$btn-border-radius: 4px; +$el-border-radius: 6px; -$header-height: 90px; -$btn-border-radius: 4px; -$el-border-radius: 6px; -// colors -// ------------------------- - -$white: #fff; -$black: #000; -$gray: #929199; -$light-gray: #C2C1C7; -$faint-gray: #E3E3EA; -$dark-blue: #00ABE0; -$blue: #00BFE0; -$light-black: #242424; -$orange: #e78c5b; -$green: #5be764; -$gray-darker: #555; -$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; +$gray: #929199; +$light-gray: #C2C1C7; +$faint-gray: #E3E3EA; +$dark-blue: #00ABE0; +$blue: #00BFE0; +$light-black: #242424; +$orange: #E78C5B; +$green: #5BE764; +$gray-darker: #555555; +$gray: #777777; +$gray-light: #939393; +$gray-lighter: #979797; +$red: #DD4E58; +$red-dark: #C5454E; +$purple: #822FF7; // Typography -// ------------------------- -$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-weight-xl: 300; -$font-weight-reg: 400; -$font-weight-b: 600; +$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: 'Fira Mono', monospace; +$font-size: 15px; +$font-weight-reg: 400; +$font-weight-bold: 600; -$text-shadow: 1px 1px 1px #000; -$shadow: $text-shadow; +// Body +$body-font-color: $gray-darker; - -// -// ---- -$imagePath: "atlas/"; - -//margin + padding -$xsmall-pad: 20px; -$small-pad: 30px; -$med-pad: 70px; -$large-pad: 120px; -$xl-pad: 150px; - -$light-outline: #f7f7f7; +// Sidebar +$sidebar-link-color: $body-font-color; +$sidebar-link-color-hover: $black; +$sidebar-link-color-active: $dark-blue; diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss index ccfe4b20cf..5d16a0e996 100755 --- a/website/source/assets/stylesheets/application.scss +++ b/website/source/assets/stylesheets/application.scss @@ -1,7 +1,9 @@ @import 'bootstrap-sprockets'; @import 'bootstrap'; -@import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,700|Open+Sans:300,600,400|Ubuntu+Mono"); +// Remote fonts +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600'); +@import url('https://fonts.googleapis.com/css?family=Fira+Mono'); // Core variables and mixins @import '_variables'; @@ -19,7 +21,6 @@ @import '_announcement-bnr'; @import '_header'; @import '_footer'; -@import '_jumbotron'; @import '_buttons'; @import '_sidebar'; diff --git a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss index a8564f209f..904d942804 100644 --- a/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss +++ b/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss @@ -47,9 +47,11 @@ $sidebar-icon-height: 20px; li > a { background-color: $link-bg; } + li:hover > a { background-color: $link-hover-bg; } + li:focus > a, li > a:focus { background-color: $link-bg; } diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 10dd4531ad..d5f1d54109 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -1,114 +1,95 @@ <%= partial "layouts/sidebar" %> -
-
-
-
-
-
- - - - - - - - - - -
-
-

A tool for managing secrets.

- -
-

- Vault secures, stores, and tightly - controls access to tokens, passwords, certificates, API keys, - and other secrets in modern computing. Vault handles leasing, - key revocation, key rolling, and auditing. Through a unified - API, users can access an encrypted Key/Value store and network - encryption-as-a-service, or generate AWS IAM/STS credentials, - SQL/NoSQL databases, X.509 certificates, SSH credentials, and - more. -

-
-
-
-
-
-
-
-
-
-

Features

+
+
+ " alt="Vault" height="80"> + A tool for managing secrets -
-
-

Secret Storage

-

- Vault can store your existing secrets, or it can - dynamically generate new secrets to control access to - third-party resources or provide time-limited credentials - for your infrastructure. All data that Vault stores is - encrypted. Any dynamically-generated secrets are associated - with leases, and Vault will automatically revoke these - secrets after the lease period ends. Access control - policies provide strict control over who can access what - secrets. -

-
- Learn more -
-
+ -
-
-

Key Rolling

-

- Secrets you store within Vault can be updated at any time. - If using Vault's encryption-as-a-service functionality, the - keys used can be rolled to a new key version at any time, - while retaining the ability to decrypt values encrypted - with past key versions. For dynamically-generated secrets, - configurable maximum lease lifetimes ensure that key - rolling is easy to enforce. -

-
- Learn more -
-
+
-
-
-

Audit Logs

-

- Vault stores a detailed audit log of all authenticated - client interaction: authentication, token creation, secret - access, secret revocation, and more. Audit logs can be sent - to multiple backends to ensure redundant copies. Paired - with Vault's strict leasing policies, operators can easily - trace the lifetime and origin of any secret. -

-
- Learn more -
-
+

+ Vault secures, stores, and tightly + controls access to tokens, passwords, certificates, API keys, + and other secrets in modern computing. Vault handles leasing, + key revocation, key rolling, and auditing. Through a unified + API, users can access an encrypted Key/Value store and network + encryption-as-a-service, or generate AWS IAM/STS credentials, + SQL/NoSQL databases, X.509 certificates, SSH credentials, and + more. +

+
-
-
+
+

Features

-
-
-
- Get Started with Vault -

Completely free and open source.

-
-
-
-
-
+
+
+

Secret Storage

+

+ Vault can store your existing secrets, or it can + dynamically generate new secrets to control access to + third-party resources or provide time-limited credentials + for your infrastructure. All data that Vault stores is + encrypted. Any dynamically-generated secrets are associated + with leases, and Vault will automatically revoke these + secrets after the lease period ends. Access control + policies provide strict control over who can access what + secrets. +

+
+ Learn more +
+
+
+ +
+
+
+

Key Rolling

+

+ Secrets you store within Vault can be updated at any time. + If using Vault's encryption-as-a-service functionality, the + keys used can be rolled to a new key version at any time, + while retaining the ability to decrypt values encrypted + with past key versions. For dynamically-generated secrets, + configurable maximum lease lifetimes ensure that key + rolling is easy to enforce. +

+
+ Learn more +
+
+
+ +
+
+
+

Audit Logs

+

+ Vault stores a detailed audit log of all authenticated + client interaction: authentication, token creation, secret + access, secret revocation, and more. Audit logs can be sent + to multiple backends to ensure redundant copies. Paired + with Vault's strict leasing policies, operators can easily + trace the lifetime and origin of any secret. +

+
+ Learn more +
+
+
+ +
+
+ Get Started with Vault +

Completely free and open source.

+
+
+