mirror of
https://github.com/hashicorp/vault.git
synced 2025-08-27 01:21:08 +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 {
|
.bs-api-section dl, dl.api {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
line-height: 20px;
|
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;
|
color: #888;
|
||||||
text-transform: uppercase;
|
padding-right: 6px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,36 +2,37 @@
|
|||||||
// Button Styles
|
// Button Styles
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
.v-btn{
|
.v-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
color: $black;
|
color: $black;
|
||||||
border: 1px solid $black;
|
border: 1px solid $black;
|
||||||
|
text-decoration: none;
|
||||||
@include transition(color .3s ease-in-out);
|
@include transition(color .3s ease-in-out);
|
||||||
@include btn-shadow();
|
@include btn-shadow();
|
||||||
|
|
||||||
&.lrg{
|
&.lrg {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding: 10px 50px;
|
padding: 10px 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sml{
|
&.sml {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
padding: 8px 40px;
|
padding: 8px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.blue{
|
&.blue {
|
||||||
color: $blue;
|
color: $blue;
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.gray{
|
&.gray {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: $gray;
|
color: $gray;
|
||||||
border: 1px solid $light-gray;
|
border: 1px solid $light-gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.terminal{
|
&.terminal {
|
||||||
padding-left: 52px;
|
padding-left: 52px;
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
@ -39,23 +40,23 @@
|
|||||||
@include img-retina("icon-terminal.png", "icon-terminal@2x.png", 26px, 25px);
|
@include img-retina("icon-terminal.png", "icon-terminal@2x.png", 26px, 25px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.started{
|
&.started {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover{
|
&:hover, &:active, &:focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@include transition(color .3s ease-in-out);
|
@include transition(color .3s ease-in-out);
|
||||||
|
|
||||||
&.blue{
|
&.blue {
|
||||||
color: darken($blue, 8%);
|
color: darken($blue, 8%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.black{
|
&.black {
|
||||||
color: lighten($black, 50%);
|
color: lighten($black, 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.gray{
|
&.gray {
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,20 +1,16 @@
|
|||||||
.people {
|
.people {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
|
||||||
.person {
|
.person {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
|
||||||
h3 {
|
img {
|
||||||
text-transform: none;
|
width: 125px;
|
||||||
}
|
margin: auto auto;
|
||||||
|
|
||||||
img {
|
|
||||||
width: 125px;
|
|
||||||
margin: auto auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bio {
|
|
||||||
padding-left: 150px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bio {
|
||||||
|
padding-left: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,141 +1,134 @@
|
|||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-active {
|
.demo-active {
|
||||||
background: #000;
|
background: #000;
|
||||||
|
|
||||||
#demo-app {
|
#demo-app {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header,
|
#header,
|
||||||
#sidebar,
|
#sidebar,
|
||||||
#hero,
|
#hero,
|
||||||
#content,
|
#container,
|
||||||
#footer,
|
#footer,
|
||||||
.sidebar-overlay {
|
.sidebar-overlay {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo-overlay {
|
.demo-overlay {
|
||||||
background: black;
|
background: black;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: #DDDDDD;
|
color: #DDDDDD;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-family: 'Ubuntu Mono', 'Monaco', monospace;
|
font-family: $font-family-monospace;
|
||||||
@include box-shadow(0px -2px 30px 0px rgba(0, 0, 0, 0.40));
|
@include box-shadow(0px -2px 30px 0px rgba(0, 0, 0, 0.40));
|
||||||
z-index: 1000;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
.instruction-wrapper {
|
.instruction-wrapper {
|
||||||
background: #000;
|
background: #000;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 5;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.instruction {
|
.instruction {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
min-width: 400px;
|
min-width: 400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-color: darken($blue, 28%);
|
background-color: darken($blue, 28%);
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background: none;
|
background: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
p:last-child {
|
p:last-child {
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-terminal{
|
.close-terminal{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
color: #8B8A8F;
|
color: #8B8A8F;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
font-size: 30px;
|
font-size: 40px;
|
||||||
transition: all 250ms ease-in;
|
transition: all 250ms ease-in;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 10;
|
z-index: 100;
|
||||||
|
|
||||||
&:hover{
|
&:hover{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $white;
|
color: $white;
|
||||||
transition: all 250ms ease-in;
|
transition: all 250ms ease-in;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.demo-terminal {
|
.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;
|
background-color: black;
|
||||||
padding: 25px 65px 0 25px;
|
border: 0;
|
||||||
padding-top: 250px;
|
outline: 0;
|
||||||
padding-bottom: 50px;
|
|
||||||
min-height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
overflow: auto;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
&.fullscreen {
|
&.hidden {
|
||||||
min-height: 300px;
|
opacity: 0;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,277 +2,190 @@
|
|||||||
// Docs
|
// Docs
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
body.layout-atlas,
|
$docs-font-size: 15px;
|
||||||
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,
|
|
||||||
body.layout-docs,
|
body.layout-docs,
|
||||||
body.layout-inner,
|
body.layout-inner,
|
||||||
body.layout-downloads,
|
body.layout-downloads,
|
||||||
body.layout-intro{
|
body.layout-intro {
|
||||||
display: flex;
|
>.container{
|
||||||
flex-direction: column;
|
.col-md-8[role=main]{
|
||||||
|
min-height: 800px;
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
>.container{
|
>div{
|
||||||
flex: 1 0 auto;
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.col-md-8[role=main]{
|
*:focus {
|
||||||
background-color: white;
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
>div{
|
h1 > code,
|
||||||
position: relative;
|
h2 > code,
|
||||||
z-index: 10;
|
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{
|
.docs-sidebar {
|
||||||
position: relative;
|
margin-bottom: 30px;
|
||||||
z-index: 20;
|
margin-top: 50px;
|
||||||
margin-bottom: 30px;
|
|
||||||
margin-top: 50px;
|
|
||||||
margin-right: 4%;
|
|
||||||
@include open();
|
|
||||||
|
|
||||||
a{
|
ul.nav.docs-sidenav {
|
||||||
color: $dark-blue;
|
display: block;
|
||||||
}
|
padding-bottom: 15px;
|
||||||
|
|
||||||
.nav.docs-sidenav{
|
li {
|
||||||
padding-bottom: 15px;
|
a {
|
||||||
|
color: $sidebar-link-color;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 10px 0 10px 15px;
|
||||||
|
|
||||||
:last-child{
|
&:before {
|
||||||
border-bottom: none;
|
color: $dark-blue;
|
||||||
}
|
content: '\203A';
|
||||||
|
font-size: $docs-font-size;
|
||||||
|
left: 0;
|
||||||
|
line-height: 100%;
|
||||||
|
opacity: 0.4;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
//all li
|
height: 100%;
|
||||||
li{
|
width: 8px
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
&: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{
|
p, li, .alert {
|
||||||
padding-top: 10px;
|
font-size: $docs-font-size;
|
||||||
padding-left: 3%;
|
font-family: $font-family-open-sans;
|
||||||
padding-bottom: 80px;
|
font-weight: $font-weight-reg;
|
||||||
|
line-height: 1.84em;
|
||||||
|
margin: 0 0 $docs-font-size;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
.lead{
|
pre {
|
||||||
margin-bottom: 48px
|
font-size: ($docs-font-size - 3);
|
||||||
}
|
margin: 0 0 $docs-font-size;
|
||||||
|
|
||||||
.doc-sectional{
|
// This will force the code to scroll horizontally on small screens
|
||||||
margin-bottom: 48px;
|
// instead of wrapping.
|
||||||
}
|
code {
|
||||||
|
overflow-wrap: normal;
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
p, li, .alert {
|
a {
|
||||||
font-size: 18px;
|
color: $dark-blue;
|
||||||
font-family: $font-family-open-sans;
|
text-decoration: none;
|
||||||
font-weight: $font-weight-reg;
|
|
||||||
line-height: 1.5em;
|
|
||||||
margin: 0 0 18px;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre{
|
&:hover {
|
||||||
margin: 0 0 18px;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
a{
|
code {
|
||||||
color: $dark-blue;
|
background: inherit;
|
||||||
&:hover{
|
color: $dark-blue;
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img{
|
|
||||||
max-width: 650px;
|
|
||||||
margin-top: 25px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
h1{
|
img {
|
||||||
color: $black;
|
max-width: 650px;
|
||||||
font-weight: $font-weight-b;
|
margin-top: 25px;
|
||||||
font-size: 36px;
|
margin-bottom: 25px;
|
||||||
margin-top: 50px;
|
}
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2, h3, h4{
|
h1,
|
||||||
margin-bottom: 16px;
|
h2,
|
||||||
font-weight: $font-weight-b;
|
h3,
|
||||||
|
h4 {
|
||||||
}
|
color: $body-font-color;
|
||||||
|
margin-top: 54px;
|
||||||
#graph {
|
margin-bottom: $docs-font-size;
|
||||||
margin-top: 30px;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
@media (max-width: 992px) {
|
||||||
|
.bs-docs-section {
|
||||||
.bs-docs-section{
|
padding-left: 0;
|
||||||
padding-left: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.bs-docs-section{
|
.bs-docs-section {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
h1{
|
}
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
.bs-docs-section{
|
.bs-docs-section {
|
||||||
img{
|
img {
|
||||||
max-width: 450px;
|
max-width: 450px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
h1{
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,59 +1,59 @@
|
|||||||
.downloads {
|
.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;
|
margin-top: 20px;
|
||||||
|
|
||||||
.description {
|
img {
|
||||||
margin-bottom: 20px;
|
display: block;
|
||||||
}
|
margin: 0 auto;
|
||||||
|
width: 122px;
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,38 +1,38 @@
|
|||||||
body.page-sub{
|
body.page-sub {
|
||||||
#footer{
|
#footer {
|
||||||
padding: 0 0 40px 0;
|
padding: 0 0 40px 0;
|
||||||
.col-md-10{
|
.col-md-10 {
|
||||||
padding-top: 40px;
|
padding-top: 40px;
|
||||||
border-top: 1px solid $faint-gray;
|
border-top: 1px solid $faint-gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer{
|
#footer {
|
||||||
flex-shrink:0;
|
flex-shrink:0;
|
||||||
padding: 64px 0;
|
padding: 64px 0;
|
||||||
|
|
||||||
.hashicorp-project{
|
.hashicorp-project {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
@include project-by-hashicorp-style();
|
@include project-by-hashicorp-style();
|
||||||
|
|
||||||
&:hover{
|
&:hover {
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pull-right{
|
.pull-right {
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-page-link{
|
.edit-page-link {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -50px;
|
top: -50px;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
||||||
a{
|
a {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $black;
|
color: $black;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@ -44,12 +44,12 @@ body.page-sub{
|
|||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
ul{
|
ul {
|
||||||
display: inline-block;;
|
display: inline-block;;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-hashi{
|
.footer-hashi {
|
||||||
display: block;
|
display: block;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
}
|
}
|
||||||
@ -57,17 +57,17 @@ body.page-sub{
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 414px) {
|
@media (max-width: 414px) {
|
||||||
#footer{
|
#footer {
|
||||||
ul{
|
ul {
|
||||||
display: block;
|
display: block;
|
||||||
li{
|
li {
|
||||||
display: block;
|
display: block;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.external-links{
|
&.external-links {
|
||||||
li{
|
li {
|
||||||
svg{
|
svg {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
|
|||||||
@ -2,101 +2,94 @@
|
|||||||
// Global Site
|
// Global Site
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
/*html{
|
html {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
}*/
|
|
||||||
html{
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
min-height: 100%;
|
-webkit-font-smoothing: antialiased;
|
||||||
-webkit-font-smoothing: antialiased;
|
color: $body-font-color;
|
||||||
color: $black;
|
background-color: $white;
|
||||||
background-color: $white;
|
font-size: $font-size;
|
||||||
font-size: 16px;
|
font-family: $font-family-open-sans;
|
||||||
font-family: $font-family-open-sans;
|
font-weight: $font-weight-reg;
|
||||||
font-weight: 400;
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
h1, h2, h3, h4, h5 {
|
||||||
-webkit-font-smoothing: antialiased;
|
font-family: $font-family-klavika;
|
||||||
}
|
-webkit-font-smoothing: antialiased;
|
||||||
h1{
|
|
||||||
font-size: 42px;
|
|
||||||
line-height: 42px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3{
|
h1 {
|
||||||
font-size: 28px;
|
margin-bottom: 24px;
|
||||||
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 );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight{
|
.highlight{
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
background-color: $black;
|
background-color: $black;
|
||||||
color: $white;
|
color: $white;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
|
font-family: $font-family-monospace;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//fixed grid below 992 to prevent smaller responsive sizes
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.container{
|
|
||||||
max-width: 970px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//all below styles are overriding corrections for below (min-width: 992px)
|
//all below styles are overriding corrections for below (min-width: 992px)
|
||||||
//below (min-width: 992px) these styles change
|
//below (min-width: 992px) these styles change
|
||||||
.navbar-nav {
|
.navbar-nav {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-right {
|
.navbar-right {
|
||||||
float: right !important;
|
float: right !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav > li {
|
.navbar-nav > li {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-nav > li > a {
|
.navbar-nav > li > a {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hcaret{
|
.alert p:last-child {
|
||||||
display: inline-block;
|
margin-bottom: 0;
|
||||||
-moz-transform: translate(0, -1px) rotate(135deg);
|
}
|
||||||
-webkit-transform: translate(0, -1px) rotate(135deg);
|
|
||||||
transform: translate(0, -1px) rotate(135deg);
|
//Typekit utilites for hiding FOUC
|
||||||
width: 7px;
|
.wf-loading {
|
||||||
height: 7px;
|
visibility: hidden;
|
||||||
border-top: 1px solid $blue;
|
}
|
||||||
border-left: 1px solid $blue;
|
|
||||||
@include transition(all .1s ease-in);
|
.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;
|
flex-shrink:0;
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
.logo{
|
.logo {
|
||||||
width: $project-logo-width;
|
width: $project-logo-width;
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
@ -19,11 +19,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.by-hashicorp{
|
.by-hashicorp {
|
||||||
@include project-by-hashicorp-style();
|
@include project-by-hashicorp-style();
|
||||||
}
|
}
|
||||||
|
|
||||||
.buttons{
|
.buttons {
|
||||||
margin-top: 2px; //baseline everything
|
margin-top: 2px; //baseline everything
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -31,13 +31,8 @@
|
|||||||
@media (max-width: 414px) {
|
@media (max-width: 414px) {
|
||||||
#header {
|
#header {
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
.logo{
|
.logo {
|
||||||
width: $project-logo-width * .8;
|
width: $project-logo-width * .8;
|
||||||
|
|
||||||
img{
|
|
||||||
//width: 72px;
|
|
||||||
//height: 14px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,578 +1,109 @@
|
|||||||
//
|
#page-home {
|
||||||
// Home
|
#container {
|
||||||
// --------------------------------------------------
|
margin-top: 140px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
#hero{
|
#tag-line {
|
||||||
/* opacity: 0;
|
display: block;
|
||||||
@include translate3d(0, -10px, 0); */
|
font-size: 24px;
|
||||||
text-align: center;
|
font-weight: 300;
|
||||||
|
margin: 15px 0 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* &.showit{
|
#diagram {
|
||||||
opacity: 1;
|
background-image: image-url("hero@2x.png");
|
||||||
@include translate3d(0, 0px, 0);
|
background-origin: content-box;
|
||||||
transition: all 1s ease;
|
background-position: center center;
|
||||||
} */
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
display: block;
|
||||||
|
margin: 60px 0;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
#logo-lockup{
|
height: 193px;
|
||||||
position: relative;
|
width: 100%;
|
||||||
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);
|
|
||||||
|
|
||||||
.keys{
|
h2.features-header {
|
||||||
position: absolute;
|
color: $blue;
|
||||||
left: 15px;
|
display: inline-block;
|
||||||
top: 8px;
|
font-size: 44px;
|
||||||
width: 12px;
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
margin: 120px auto 40px auto;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
span{
|
h3.feature-header {
|
||||||
width: 3px;
|
color: $black;
|
||||||
height: 3px;
|
font-size: 36px;
|
||||||
border-radius: 2px;
|
font-weight: 300;
|
||||||
float: left;
|
margin: 30px 0;
|
||||||
margin-left: 1px;
|
text-transform: none;
|
||||||
margin-bottom: 1px;
|
}
|
||||||
background-color: $blue;
|
|
||||||
transition: all 250ms ease-in;
|
|
||||||
|
|
||||||
&:nth-child(1){
|
p {
|
||||||
opacity: .85;
|
font-size: 18px;
|
||||||
}
|
font-weight: 300;
|
||||||
|
line-height: 36px;
|
||||||
|
margin: 25px 0;
|
||||||
|
padding: 15px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
&:nth-child(2){
|
.feature {
|
||||||
opacity: .4;
|
margin-bottom: 150px;
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(3){
|
.graphic {
|
||||||
opacity: .8;
|
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){
|
height: 160px;
|
||||||
opacity: .9;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(5){
|
&#crud {
|
||||||
opacity: .8;
|
.graphic {
|
||||||
}
|
background-image: image-url("graphic-crud@2x.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:nth-child(6){
|
&#key {
|
||||||
opacity: .5;
|
.graphic {
|
||||||
}
|
background-image: image-url("graphic-key@2x.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:nth-child(7){
|
&#audit {
|
||||||
opacity: .65;
|
.graphic {
|
||||||
}
|
background-image: image-url("graphic-audit@2x.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:nth-child(8){
|
#cta {
|
||||||
opacity: .7;
|
@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){
|
p {
|
||||||
opacity: 1;
|
margin-top: 10px;
|
||||||
}
|
color: $black;
|
||||||
|
font-size: 14px;
|
||||||
&:nth-child(10){
|
font-weight: 600;
|
||||||
opacity: 1;
|
line-height: 1.5esm;
|
||||||
margin-left: 5px;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,17 +1,7 @@
|
|||||||
//
|
|
||||||
// Sidebar
|
|
||||||
// - Project Specific
|
|
||||||
// - Make sidebar edits here
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
// Links
|
|
||||||
//----------------
|
|
||||||
li {
|
li {
|
||||||
a {
|
a {
|
||||||
font-family: $header-font-family;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $black;
|
color: $black;
|
||||||
|
|
||||||
svg{
|
svg{
|
||||||
|
|||||||
@ -1,69 +1,39 @@
|
|||||||
//
|
|
||||||
// Variables
|
|
||||||
// --------------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
// Global values
|
// Global values
|
||||||
// --------------------------------------------------
|
$header-height: 90px;
|
||||||
|
$btn-border-radius: 4px;
|
||||||
|
$el-border-radius: 6px;
|
||||||
|
|
||||||
$header-height: 90px;
|
// Colors
|
||||||
$btn-border-radius: 4px;
|
$white: #FFFFFF;
|
||||||
$el-border-radius: 6px;
|
$black: #000000;
|
||||||
// colors
|
$gray: #929199;
|
||||||
// -------------------------
|
$light-gray: #C2C1C7;
|
||||||
|
$faint-gray: #E3E3EA;
|
||||||
$white: #fff;
|
$dark-blue: #00ABE0;
|
||||||
$black: #000;
|
$blue: #00BFE0;
|
||||||
$gray: #929199;
|
$light-black: #242424;
|
||||||
$light-gray: #C2C1C7;
|
$orange: #E78C5B;
|
||||||
$faint-gray: #E3E3EA;
|
$green: #5BE764;
|
||||||
$dark-blue: #00ABE0;
|
$gray-darker: #555555;
|
||||||
$blue: #00BFE0;
|
$gray: #777777;
|
||||||
$light-black: #242424;
|
$gray-light: #939393;
|
||||||
$orange: #e78c5b;
|
$gray-lighter: #979797;
|
||||||
$green: #5be764;
|
$red: #DD4E58;
|
||||||
$gray-darker: #555;
|
$red-dark: #C5454E;
|
||||||
$gray: #777;
|
$purple: #822FF7;
|
||||||
$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%);
|
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
// -------------------------
|
$font-family-klavika: 'klavika-web', 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
$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-open-sans: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
$font-family-monospace: 'Fira Mono', monospace;
|
||||||
$font-weight-xl: 300;
|
$font-size: 15px;
|
||||||
$font-weight-reg: 400;
|
$font-weight-reg: 400;
|
||||||
$font-weight-b: 600;
|
$font-weight-bold: 600;
|
||||||
|
|
||||||
$text-shadow: 1px 1px 1px #000;
|
// Body
|
||||||
$shadow: $text-shadow;
|
$body-font-color: $gray-darker;
|
||||||
|
|
||||||
|
// Sidebar
|
||||||
//
|
$sidebar-link-color: $body-font-color;
|
||||||
// ----
|
$sidebar-link-color-hover: $black;
|
||||||
$imagePath: "atlas/";
|
$sidebar-link-color-active: $dark-blue;
|
||||||
|
|
||||||
//margin + padding
|
|
||||||
$xsmall-pad: 20px;
|
|
||||||
$small-pad: 30px;
|
|
||||||
$med-pad: 70px;
|
|
||||||
$large-pad: 120px;
|
|
||||||
$xl-pad: 150px;
|
|
||||||
|
|
||||||
$light-outline: #f7f7f7;
|
|
||||||
|
|||||||
@ -1,7 +1,9 @@
|
|||||||
@import 'bootstrap-sprockets';
|
@import 'bootstrap-sprockets';
|
||||||
@import 'bootstrap';
|
@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
|
// Core variables and mixins
|
||||||
@import '_variables';
|
@import '_variables';
|
||||||
@ -19,7 +21,6 @@
|
|||||||
@import '_announcement-bnr';
|
@import '_announcement-bnr';
|
||||||
@import '_header';
|
@import '_header';
|
||||||
@import '_footer';
|
@import '_footer';
|
||||||
@import '_jumbotron';
|
|
||||||
@import '_buttons';
|
@import '_buttons';
|
||||||
@import '_sidebar';
|
@import '_sidebar';
|
||||||
|
|
||||||
|
|||||||
@ -47,9 +47,11 @@ $sidebar-icon-height: 20px;
|
|||||||
li > a {
|
li > a {
|
||||||
background-color: $link-bg;
|
background-color: $link-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:hover > a {
|
li:hover > a {
|
||||||
background-color: $link-hover-bg;
|
background-color: $link-hover-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:focus > a, li > a:focus {
|
li:focus > a, li > a:focus {
|
||||||
background-color: $link-bg;
|
background-color: $link-bg;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,114 +1,95 @@
|
|||||||
<%= partial "layouts/sidebar" %>
|
<%= 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="demo-app"></div>
|
||||||
|
|
||||||
<div id="content">
|
<div id="container" class="col-md-offset-3 col-md-6 col-sm-offset-2 col-sm-8">
|
||||||
<div class="container">
|
<div class="row">
|
||||||
<div class="row">
|
<img src="<%= image_path("logo-header.svg") %>" alt="Vault" height="80">
|
||||||
<div class="col-md-offset-3 col-md-6">
|
<span id="tag-line">A tool for managing secrets</span>
|
||||||
<h2 class="featuer-header">Features</h2>
|
|
||||||
|
|
||||||
<div id="crud" class="feature">
|
<div>
|
||||||
<div class="graphic"></div>
|
<a class="v-btn blue lrg started" href="/intro">Get Started</a>
|
||||||
<h3 class="">Secret Storage</h3>
|
<a class="v-btn black lrg terminal" href="/#/demo/0">Launch Interactive Tutorial</a>
|
||||||
<p>
|
</div>
|
||||||
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 id="key" class="feature">
|
<div id="diagram"></div>
|
||||||
<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="audit" class="feature">
|
<p>
|
||||||
<div class="graphic"></div>
|
<strong>Vault</strong> secures, stores, and tightly
|
||||||
<h3 class="">Audit Logs</h3>
|
controls access to tokens, passwords, certificates, API keys,
|
||||||
<p>
|
and other secrets in modern computing. Vault handles leasing,
|
||||||
Vault stores a detailed audit log of all authenticated
|
key revocation, key rolling, and auditing. Through a unified
|
||||||
client interaction: authentication, token creation, secret
|
API, users can access an encrypted Key/Value store and network
|
||||||
access, secret revocation, and more. Audit logs can be sent
|
encryption-as-a-service, or generate AWS IAM/STS credentials,
|
||||||
to multiple backends to ensure redundant copies. Paired
|
SQL/NoSQL databases, X.509 certificates, SSH credentials, and
|
||||||
with Vault's strict leasing policies, operators can easily
|
more.
|
||||||
trace the lifetime and origin of any secret.
|
</p>
|
||||||
</p>
|
</div>
|
||||||
<div class="feature-footer">
|
|
||||||
<a class="v-btn black sml" href="/docs/audit/index.html">Learn more</a>
|
|
||||||
</div>
|
|
||||||
</div> <!-- .feature -->
|
|
||||||
|
|
||||||
</div> <!-- .col -->
|
<div class="row">
|
||||||
</div> <!-- .row -->
|
<h2 class="features-header">Features</h2>
|
||||||
|
|
||||||
<div class="row">
|
<div id="crud" class="feature">
|
||||||
<div class="col-sm-offset-1 col-sm-10 col-xs-12">
|
<div class="graphic"></div>
|
||||||
<div id="cta">
|
<h3 class="feature-header">Secret Storage</h3>
|
||||||
<a class="v-btn black sml" href="/intro/index.html">Get Started with Vault</a>
|
<p>
|
||||||
<p class="cta-black">Completely free and open source.</p>
|
Vault can store your existing secrets, or it can
|
||||||
</div><!-- #cta -->
|
dynamically generate new secrets to control access to
|
||||||
</div> <!-- .col -->
|
third-party resources or provide time-limited credentials
|
||||||
</div> <!-- .row -->
|
for your infrastructure. All data that Vault stores is
|
||||||
</div> <!-- /container -->
|
encrypted. Any dynamically-generated secrets are associated
|
||||||
</div> <!-- #features -->
|
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