264 lines
4 KiB
SCSS
Executable file
264 lines
4 KiB
SCSS
Executable file
#page-home {
|
|
// Override the main header
|
|
#header {
|
|
background: $home-header-background-color;
|
|
|
|
.navbar-toggle {
|
|
.icon-bar {
|
|
border: 1px solid $home-header-link-color;
|
|
}
|
|
}
|
|
|
|
.navbar-brand {
|
|
a {
|
|
svg.logo {
|
|
@extend svg.logo.color;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.nav {
|
|
li {
|
|
a {
|
|
color: $home-header-link-color;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: transparent;
|
|
color: $home-header-link-color-hover;
|
|
|
|
svg {
|
|
fill: $home-header-link-color-hover;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
fill: $home-header-link-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
header {
|
|
.hero {
|
|
margin: 140px auto 160px auto;
|
|
text-align: center;
|
|
|
|
h1 {
|
|
margin: 24px 0 40px 0;
|
|
}
|
|
|
|
.button {
|
|
margin: 5px;
|
|
|
|
@media (max-width: 768px) {
|
|
display: block;
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
}
|
|
|
|
section {
|
|
background: $white;
|
|
padding: 100px 0;
|
|
}
|
|
|
|
section.marketing {
|
|
h3 {
|
|
color: $black;
|
|
margin: 50px 0 15px 0;
|
|
}
|
|
|
|
span.callout {
|
|
background: $black;
|
|
color: $white;
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 5px;
|
|
}
|
|
|
|
&.green {
|
|
background: $nomad;
|
|
|
|
h2,
|
|
h3 {
|
|
color: $white;
|
|
}
|
|
|
|
p {
|
|
color: $white;
|
|
}
|
|
|
|
a {
|
|
border-bottom: 1px solid $white;
|
|
color: $white;
|
|
|
|
&:hover,
|
|
&:active {
|
|
border-bottom: none;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
span.callout {
|
|
background: $white;
|
|
color: $nomad;
|
|
}
|
|
}
|
|
|
|
&.gray {
|
|
background: #ededed;
|
|
|
|
h2,
|
|
h3 {
|
|
color: $black;
|
|
}
|
|
|
|
p {
|
|
color: $black;
|
|
}
|
|
|
|
span.callout {
|
|
background: $white;
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
&.black {
|
|
background: $black;
|
|
|
|
h2,
|
|
h3 {
|
|
color: $white;
|
|
}
|
|
|
|
p {
|
|
color: $white;
|
|
}
|
|
|
|
a {
|
|
border-bottom: 1px solid $white;
|
|
color: $white;
|
|
|
|
&:hover,
|
|
&:active {
|
|
border-bottom: none;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
span.callout {
|
|
background: $white;
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
&#hybrid-multi-cloud {
|
|
svg {
|
|
display: block;
|
|
margin: 15px auto;
|
|
max-height: 115px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&#flexible-workloads {
|
|
svg {
|
|
display: block;
|
|
margin: 15px auto;
|
|
max-height: 100px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&#simplify {
|
|
svg {
|
|
display: block;
|
|
max-height: 150px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
@media (max-width: $screen-sm) {
|
|
svg {
|
|
margin: 60px auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
&#binpacking {
|
|
svg {
|
|
display: block;
|
|
margin: 60px auto;
|
|
max-height: 300px;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.get-started {
|
|
margin-top: 32px;
|
|
}
|
|
}
|
|
|
|
.terminal {
|
|
@extend .g-type-code;
|
|
border: 1px solid $white;
|
|
background: $black;
|
|
box-sizing: border-box;
|
|
color: $white;
|
|
margin: 20px auto auto auto;
|
|
padding: 10px 20px 20px 20px;
|
|
|
|
.terminal-content {
|
|
background: $black;
|
|
margin-top: 5px;
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
|
|
span {
|
|
display: block;
|
|
|
|
span {
|
|
display: inline;
|
|
}
|
|
|
|
&.pre {
|
|
white-space: pre;
|
|
}
|
|
|
|
&.text-bold {
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
&.text-green {
|
|
color: lighten($nomad, 20%);
|
|
}
|
|
|
|
&.text-blue {
|
|
color: #71a4f5;
|
|
}
|
|
|
|
&.text-orange {
|
|
color: #f5bf49;
|
|
}
|
|
}
|
|
}
|
|
|
|
span.circle {
|
|
svg {
|
|
height: 12px;
|
|
width: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|