| // header |
| $full-width-paddingX: 20px; |
| |
| $main-width: 100%; |
| $main-max-width: 100%; |
| |
| $header-height: 80px; |
| |
| $logo-width: 180px; |
| |
| $nav-buttons-margin-left: 30px; |
| |
| $hamburger-size: 50px; |
| |
| // main nav |
| $main-nav-padding: 140px 0 30px; |
| $main-nav-h5-margin-bottom: 1em; |
| $main-nav-h3-margin-bottom: 0.6em; |
| $nav-box-width: 20%; |
| $nav-box-sibling-margin-left: calc(20% / 3); |
| $main-nav-main-sibling-margin-top: 60px; |
| $main-nav-left-button-size: 50px; |
| $main-nav-left-button-font-size: 18px; |
| |
| // hero |
| $hero-padding-top: 116px; |
| $headline-wrapper-margin-bottom: 40px; |
| $quickstart-button-padding: 0 50px; |
| $vendor-strip-font-size: 16px; |
| |
| //video |
| $video-section-height: 400px; |
| |
| //features |
| $features-h3-margin-bottom: 40px; |
| $feature-box-margin-bottom: 60px; |
| $feature-box-div-margin-bottom: 0; |
| $feature-box-div-width: 45%; |
| |
| //////////////////////////////////////////////////////////////////////////////////////////////////// |
| //////////////////////////////////////////////////////////////////////////////////////////////////// |
| //////////////////////////////////////////////////////////////////////////////////////////////////// |
| |
| @media screen and (min-width: 768px) { |
| @import "size"; |
| |
| #hamburger { |
| display: none; |
| } |
| |
| .td-home { |
| #viewDocs, |
| #tryKubernetes { |
| display: inline-block; |
| } |
| } |
| |
| #vendorStrip { |
| display: block; |
| text-align: center; |
| |
| img { |
| max-height: 24px; |
| vertical-align: middle; |
| margin: 0 30px; |
| } |
| } |
| |
| #oceanNodes { |
| h3 { |
| text-align: left; |
| margin-bottom: 18px; |
| } |
| |
| main, |
| .main-section { |
| position: relative; |
| clear: both; |
| display: table; |
| |
| .content { |
| display: table-cell; |
| position: relative; |
| vertical-align: middle; |
| } |
| |
| .image-wrapper { |
| position: absolute; |
| top: 50%; |
| max-width: 25%; |
| max-height: 100%; |
| transform: translateY(-50%); |
| width: 100%; |
| } |
| |
| &:nth-child(odd) { |
| padding-right: 210px; |
| |
| .image-wrapper { |
| right: 0; |
| text-align: right; |
| } |
| } |
| |
| &:nth-child(even) { |
| padding-left: 210px; |
| |
| .image-wrapper { |
| left: 0; |
| text-align: left; |
| } |
| } |
| |
| &:nth-child(1) { |
| padding-right: 0; |
| |
| h3, |
| p { |
| text-align: center; |
| } |
| |
| .image-wrapper { |
| position: relative; |
| display: block; |
| float: none; |
| text-align: center; |
| max-width: 100%; |
| transform: none; |
| } |
| |
| .content { |
| display: block; |
| } |
| } |
| |
| img { |
| width: 100%; |
| } |
| } |
| } |
| |
| #video { |
| height: $video-section-height; |
| display: block; |
| height: 500px; |
| |
| & > .light-text { |
| display: block; |
| float: right; |
| text-align: left; |
| margin-right: 5%; |
| } |
| } |
| |
| #mobileShowVideoButton { |
| display: none; |
| } |
| |
| #features { |
| padding-bottom: 60px; |
| |
| .feature-box { |
| margin-bottom: 30px; |
| |
| &:last-child { |
| margin-bottom: 0; |
| } |
| } |
| |
| h3 { |
| margin-bottom: $features-h3-margin-bottom; |
| } |
| |
| .feature-box { |
| & > div { |
| width: $feature-box-div-width; |
| margin-bottom: $feature-box-div-margin-bottom; |
| } |
| } |
| } |
| |
| #talkToUs { |
| #bigSocial { |
| div { |
| width: calc(50% - 15px); |
| } |
| |
| div + div { |
| margin-top: 0; |
| } |
| |
| div:nth-child(2) { |
| margin-left: 20px; |
| } |
| |
| div:nth-child(4) { |
| margin-left: 20px; |
| } |
| |
| a { |
| display: inline-block; |
| color: $blue; |
| font-weight: 400; |
| text-decoration: none; |
| } |
| } |
| } |
| |
| .td-home #caseStudiesWrapper { |
| div { |
| width: 48%; |
| } |
| } |
| } |