mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-26 17:11:13 +02:00
Clean up scss
This commit is contained in:
Seth Vargo
parent
8bcf3b1741
commit
a49714546f
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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{
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,114 +1,95 @@
|
||||
<%= partial "layouts/sidebar" %>
|
||||
|
||||
<div id="hero">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-3 col-md-6">
|
||||
<div id="logo-lockup">
|
||||
<div class="keys">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="tag-line">A tool for managing secrets.</h2>
|
||||
<div>
|
||||
<a class="v-btn blue lrg started" href="/intro">Get Started</a>
|
||||
<a class="v-btn black lrg terminal" href="/#/demo/0">Launch Interactive Tutorial</a>
|
||||
</div>
|
||||
<div id="diagram"></div>
|
||||
<p>
|
||||
<span class="strong">Vault</span> 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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="demo-app"></div>
|
||||
|
||||
<div id="content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-3 col-md-6">
|
||||
<h2 class="featuer-header">Features</h2>
|
||||
<div id="container" class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
|
||||
<div class="row">
|
||||
<img src="<%= image_path("logo-header.svg") %>" alt="Vault" height="80">
|
||||
<span id="tag-line">A tool for managing secrets</span>
|
||||
|
||||
<div id="crud" class="feature">
|
||||
<div class="graphic"></div>
|
||||
<h3 class="">Secret Storage</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="feature-footer">
|
||||
<a class="v-btn black sml" href="/intro/use-cases.html">Learn more</a>
|
||||
</div>
|
||||
</div> <!-- .feature -->
|
||||
<div>
|
||||
<a class="v-btn blue lrg started" href="/intro">Get Started</a>
|
||||
<a class="v-btn black lrg terminal" href="/#/demo/0">Launch Interactive Tutorial</a>
|
||||
</div>
|
||||
|
||||
<div id="key" class="feature">
|
||||
<div class="graphic"></div>
|
||||
<h3 class="">Key Rolling</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="feature-footer">
|
||||
<a class="v-btn black sml" href="/docs/concepts/lease.html">Learn more</a>
|
||||
</div>
|
||||
</div> <!-- .feature -->
|
||||
<div id="diagram"></div>
|
||||
|
||||
<div id="audit" class="feature">
|
||||
<div class="graphic"></div>
|
||||
<h3 class="">Audit Logs</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="feature-footer">
|
||||
<a class="v-btn black sml" href="/docs/audit/index.html">Learn more</a>
|
||||
</div>
|
||||
</div> <!-- .feature -->
|
||||
<p>
|
||||
<strong>Vault</strong> 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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div> <!-- .col -->
|
||||
</div> <!-- .row -->
|
||||
<div class="row">
|
||||
<h2 class="features-header">Features</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-1 col-sm-10 col-xs-12">
|
||||
<div id="cta">
|
||||
<a class="v-btn black sml" href="/intro/index.html">Get Started with Vault</a>
|
||||
<p class="cta-black">Completely free and open source.</p>
|
||||
</div><!-- #cta -->
|
||||
</div> <!-- .col -->
|
||||
</div> <!-- .row -->
|
||||
</div> <!-- /container -->
|
||||
</div> <!-- #features -->
|
||||
<div id="crud" class="feature">
|
||||
<div class="graphic"></div>
|
||||
<h3 class="feature-header">Secret Storage</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="feature-footer">
|
||||
<a class="v-btn black sml" href="/intro/use-cases.html">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div id="key" class="feature">
|
||||
<div class="graphic"></div>
|
||||
<h3 class="feature-header">Key Rolling</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="feature-footer">
|
||||
<a class="v-btn black sml" href="/docs/concepts/lease.html">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div id="audit" class="feature">
|
||||
<div class="graphic"></div>
|
||||
<h3 class="feature-header">Audit Logs</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div class="feature-footer">
|
||||
<a class="v-btn black sml" href="/docs/audit/index.html">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div id="cta">
|
||||
<a class="v-btn black sml" href="/intro/index.html">Get Started with Vault</a>
|
||||
<p class="cta-black">Completely free and open source.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user