twitter fix
home page
This commit is contained in:
scotty
@@ -55,7 +55,7 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<h5 class="github-invite">Explore the community</h5>
|
<h5 class="github-invite">Explore the community</h5>
|
||||||
<div class="social">
|
<div class="social">
|
||||||
<a href="https://twitter.com/kubernetesio" class="Twitter"><span>twitter</span></a>
|
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
|
||||||
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
|
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
|
||||||
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
|
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
|
||||||
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>stackoverflow</span></a>
|
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>stackoverflow</span></a>
|
||||||
|
|||||||
@@ -49,7 +49,7 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<h5 class="github-invite">Explore the community</h5>
|
<h5 class="github-invite">Explore the community</h5>
|
||||||
<div class="social">
|
<div class="social">
|
||||||
<a href="https://twitter.com/kubernetesio" class="Twitter"><span>twitter</span></a>
|
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
|
||||||
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
|
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
|
||||||
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
|
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
|
||||||
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>stackoverflow</span></a>
|
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>stackoverflow</span></a>
|
||||||
|
|||||||
@@ -0,0 +1,252 @@
|
|||||||
|
<!Doctype html>
|
||||||
|
<html id="home">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
|
||||||
|
<link rel="stylesheet" href="/css/styles.css"/>
|
||||||
|
<script src="/js/jquery-2.2.0.min.js"></script>
|
||||||
|
<script src="/js/script.js"></script>
|
||||||
|
<!-- header footer test -->
|
||||||
|
<title>Kubernetes - {{ page.title }}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="cellophane" onclick="kub.toggleMenu()"></div>
|
||||||
|
<header>
|
||||||
|
<a href="/" class="logo"></a>
|
||||||
|
<div class="nav-buttons" data-auto-burger="primary">
|
||||||
|
<a href="/docs/" class="button" id="tryKubernetes">Try Kubernetes</a>
|
||||||
|
<button id="hamburger" onclick="kub.toggleMenu()" data-auto-burger-exclude><div></div></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav id="mainNav">
|
||||||
|
<main data-auto-burger="primary">
|
||||||
|
<div class="nav-box">
|
||||||
|
<h3><a href="">Get Started</a></h3>
|
||||||
|
<p>Built for a multi-cloud world, public, private or hybrid. Seamlessly roll out new features.</p>
|
||||||
|
</div>
|
||||||
|
<div class="nav-box">
|
||||||
|
<h3><a href="">Documentation</a></h3>
|
||||||
|
<p>Pellentesque in ipsum id orci porta dapibus. Nulla porttitor accumsan tincidunt. </p>
|
||||||
|
</div>
|
||||||
|
<div class="nav-box">
|
||||||
|
<h3><a href="">Community</a></h3>
|
||||||
|
<p>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. </p>
|
||||||
|
</div>
|
||||||
|
<div class="nav-box">
|
||||||
|
<h3><a href="">Blog</a></h3>
|
||||||
|
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in. </p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<main data-auto-burger="primary">
|
||||||
|
<div class="left">
|
||||||
|
<h5 class="github-invite">Interested in hacking on the core Kubernetes code base?</h5>
|
||||||
|
<a href="" class="button">View On Github</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<h5 class="github-invite">Explore the community</h5>
|
||||||
|
<div class="social">
|
||||||
|
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
|
||||||
|
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
|
||||||
|
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
|
||||||
|
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>stackoverflow</span></a>
|
||||||
|
<a href="https://groups.google.com/forum/#!forum/google-containers" class="mailing-list"><span>Mailing List</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clear" style="clear: both"></div>
|
||||||
|
</main>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section id="hero" class="light-text">
|
||||||
|
<main>
|
||||||
|
<div id="headlineWrapper">
|
||||||
|
<h1>Accelerate Your Development</h1>
|
||||||
|
<h5>Manage a cluster of containers as a single system to simplify operations</h5>
|
||||||
|
</div>
|
||||||
|
<a href="get-started" id="quickstartButton" class="button">5 Minute Quick Start</a>
|
||||||
|
</main>
|
||||||
|
<div id="vendorStrip" class="light-text">
|
||||||
|
<div>Join the growing community already using Kubernetes</div>
|
||||||
|
<div>
|
||||||
|
<img src="images/logos/viacom_logo.png">
|
||||||
|
<img src="images/logos/soundcloud_logo.png">
|
||||||
|
<img src="images/logos/redhat_logo.png">
|
||||||
|
<img src="images/logos/wepay_logo.png">
|
||||||
|
<img src="images/logos/verizon_logo.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- OCEAN NODES -->
|
||||||
|
<section id="oceanNodes">
|
||||||
|
<main>
|
||||||
|
<div class="image-wrapper"><img src="images/flower.png"></div>
|
||||||
|
<div class="content">
|
||||||
|
<h3>Kubernetes is an open source system for automating deployment, operations, and scaling of applications.</h3>
|
||||||
|
<p>It groups containers that make up an application into logical units for easy management and discovery.
|
||||||
|
Kubernetes builds upon a decade and a half of experience of running production workloads at Google,
|
||||||
|
combined with best-of-breed ideas and practices from the community.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<main>
|
||||||
|
<div class="image-wrapper"><img src="images/suitcase.png"></div>
|
||||||
|
<div class="content">
|
||||||
|
<h4>Run Anywhere</h4>
|
||||||
|
<p>Kubernetes is open source giving you the flexibility to take advantage of on-premise, hybrid, or public
|
||||||
|
cloud infrastructure allowing you to easily move workloads to where it matters to you.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<main>
|
||||||
|
<div class="image-wrapper"><img src="images/self-heal.png"></div>
|
||||||
|
<div class="content">
|
||||||
|
<h4>Self-healing</h4>
|
||||||
|
<p>Pager wakeup calls are a thing of the past, when a hardware failure occurs Kubernetes is able to scale-up
|
||||||
|
services and distribute the load among your existing infrastructure. It automates tasks with
|
||||||
|
auto-placement, auto-restart, and auto-replication making your operations run smoothly.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<main>
|
||||||
|
<div class="image-wrapper"><img src="images/blocks.png"></div>
|
||||||
|
<div class="content">
|
||||||
|
<h4>Modular</h4>
|
||||||
|
<p>Energistically build reliable deliverables with interactive core competencies. Enthusiastically fashion
|
||||||
|
accurate "outside the box" thinking for accurate e-markets. Dramatically evolve mission-critical
|
||||||
|
scenarios rather than fully tested experiences. Dynamically embrace effective potentialities vis-a-vis
|
||||||
|
installed base process improvements. </p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<main>
|
||||||
|
<div class="image-wrapper"><img src="images/scalable.png"></div>
|
||||||
|
<div class="content">
|
||||||
|
<h4>Planet Scale</h4>
|
||||||
|
<p>Designed on the same principles that allows Google to run billions of containers a week, Kubernetes can
|
||||||
|
scale without increasing your ops team. From testing locally to running a global enterprise, your
|
||||||
|
application scales consistently and easily.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="video">
|
||||||
|
<div class="light-text">
|
||||||
|
<h2>A techincal overview<br>of Kubernetes</h2>
|
||||||
|
<p>Kubernetes is an open source system for managing containerized applications across multiple hosts,
|
||||||
|
providing mechanisms for deployment, maintenance, and scaling of applications.</p>
|
||||||
|
<button id="desktopShowVideoButton" onclick="kub.showVideo()">Watch Video</button>
|
||||||
|
</div>
|
||||||
|
<button id="mobileShowVideoButton"></button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="features">
|
||||||
|
<main>
|
||||||
|
<h3 class="center">Kubernetes Features</h3>
|
||||||
|
|
||||||
|
<div class="feature-box">
|
||||||
|
<div>
|
||||||
|
<h4>Feature</h4>
|
||||||
|
<p>Energistically transform quality total linkage whereas go forward interfaces. Assertively
|
||||||
|
conceptualize open-source best practices via mission-critical potentialities. Competently
|
||||||
|
grow proactive ideas via 24/7 communities. </p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Feature</h4>
|
||||||
|
<p>Energistically transform quality total linkage whereas go forward interfaces. Assertively
|
||||||
|
conceptualize open-source best practices via mission-critical potentialities. Competently
|
||||||
|
grow proactive ideas via 24/7 communities. </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-box">
|
||||||
|
<div>
|
||||||
|
<h4>Feature</h4>
|
||||||
|
<p>Energistically transform quality total linkage whereas go forward interfaces. Assertively
|
||||||
|
conceptualize open-source best practices via mission-critical potentialities. Competently
|
||||||
|
grow proactive ideas via 24/7 communities. </p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Feature</h4>
|
||||||
|
<p>Energistically transform quality total linkage whereas go forward interfaces. Assertively
|
||||||
|
conceptualize open-source best practices via mission-critical potentialities. Competently
|
||||||
|
grow proactive ideas via 24/7 communities. </p>
|
||||||
|
<p>Quickly envisioneer customized initiatives without proactive intellectual capital. Intrinsicly
|
||||||
|
predominate focused innovation whereas clicks-and-mortar initiatives.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-box">
|
||||||
|
<div>
|
||||||
|
<h4>Feature</h4>
|
||||||
|
<p>Energistically transform quality total linkage whereas go forward interfaces. Assertively
|
||||||
|
conceptualize open-source best practices via mission-critical potentialities. Competently
|
||||||
|
grow proactive ideas via 24/7 communities. </p>
|
||||||
|
<p>Quickly envisioneer customized initiatives without proactive intellectual capital. Intrinsicly
|
||||||
|
predominate focused innovation whereas clicks-and-mortar initiatives.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Feature</h4>
|
||||||
|
<p>Energistically transform quality total linkage whereas go forward interfaces. Assertively
|
||||||
|
conceptualize open-source best practices via mission-critical potentialities. Competently
|
||||||
|
grow proactive ideas via 24/7 communities. </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="talkToUs">
|
||||||
|
<main>
|
||||||
|
<h3>Talk to Us!</h3>
|
||||||
|
<h4>We would love to hear from you, how you are using Kubernetes,<br> and what we can do to make it better.</h4>
|
||||||
|
<div id="bigSocial">
|
||||||
|
<div>
|
||||||
|
<a href="https://twitter.com/kubernetesio">@kubernetesio</a>
|
||||||
|
<p>Get the latest news and updates.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="https://github.com/kubernetes/kubernetes">Github Project</a>
|
||||||
|
<p>Check out the project and consider contributing.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="http://slack.k8s.io/">#kubernetes-users</a>
|
||||||
|
<p>Our Slack channel is the best way to contact our engineers and share your ideas with them.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a href="http://stackoverflow.com/questions/tagged/kubernetes">Stackoverflow</a>
|
||||||
|
<p>Our user forum is a great place to go for community support.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<main class="light-text">
|
||||||
|
<nav>
|
||||||
|
<a href="/getting-started.html">Getting Started</a>
|
||||||
|
<a href="/docs.html">Documentation</a>
|
||||||
|
<a href="http://blog.kubernetes.io/">Blog</a>
|
||||||
|
<a href="/foobang.html">Community</a>
|
||||||
|
</nav>
|
||||||
|
<div class="social">
|
||||||
|
<a href="https://twitter.com/kubernetesio" class="twitter"><span>twitter</span></a>
|
||||||
|
<a href="https://github.com/kubernetes/kubernetes" class="github"><span>Github</span></a>
|
||||||
|
<a href="http://slack.k8s.io/" class="slack"><span>Slack</span></a>
|
||||||
|
<a href="http://stackoverflow.com/questions/tagged/kubernetes" class="stack-overflow"><span>stackoverflow</span></a>
|
||||||
|
<a href="https://groups.google.com/forum/#!forum/google-containers" class="mailing-list"><span>Mailing List</span></a>
|
||||||
|
<label for="wishField">I wish this page <input type="text" id="wishField" name="wishField" placeholder="enter your wish"></label>
|
||||||
|
</div>
|
||||||
|
<div class="center">© {{ 'now' | date: "%Y" }} Kubernetes</div>
|
||||||
|
</main>
|
||||||
|
</footer>
|
||||||
|
<style>
|
||||||
|
.cse .gsc-control-cse, .gsc-control-cse {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
+245
-12
@@ -1,6 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
@import "reset"
|
@import "reset"
|
||||||
|
|
||||||
// TEXT
|
// TEXT
|
||||||
@@ -56,6 +53,10 @@ $quickstart-button-padding: 0 50px
|
|||||||
$vendor-strip-height: 44px
|
$vendor-strip-height: 44px
|
||||||
$vendor-strip-font-size: 16px
|
$vendor-strip-font-size: 16px
|
||||||
|
|
||||||
|
|
||||||
|
// video
|
||||||
|
$video-section-height: 200px
|
||||||
|
|
||||||
@import "size"
|
@import "size"
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
@@ -68,13 +69,13 @@ body
|
|||||||
section
|
section
|
||||||
position: relative
|
position: relative
|
||||||
background-color: white
|
background-color: white
|
||||||
min-width: 1024px
|
//min-width: 1024px
|
||||||
|
|
||||||
section, header, footer
|
section, header, footer
|
||||||
main
|
main
|
||||||
position: relative
|
position: relative
|
||||||
margin: auto
|
margin: auto
|
||||||
min-width: 850px
|
//min-width: 850px
|
||||||
|
|
||||||
.button
|
.button
|
||||||
display: inline-block
|
display: inline-block
|
||||||
@@ -181,7 +182,7 @@ header
|
|||||||
z-index: 9998
|
z-index: 9998
|
||||||
|
|
||||||
header
|
header
|
||||||
background-color: $light-grey
|
background-color: #e8e8e8
|
||||||
z-index: 9999
|
z-index: 9999
|
||||||
|
|
||||||
#hamburger
|
#hamburger
|
||||||
@@ -232,6 +233,7 @@ header
|
|||||||
text-align: center
|
text-align: center
|
||||||
padding-left: 0
|
padding-left: 0
|
||||||
padding-right: 0
|
padding-right: 0
|
||||||
|
margin-bottom: 60px
|
||||||
|
|
||||||
// VENDOR STRIP
|
// VENDOR STRIP
|
||||||
#vendorStrip
|
#vendorStrip
|
||||||
@@ -255,13 +257,12 @@ footer
|
|||||||
padding: 40px 0
|
padding: 40px 0
|
||||||
|
|
||||||
nav
|
nav
|
||||||
white-space: nowrap
|
|
||||||
|
|
||||||
a
|
a
|
||||||
width: 25%
|
width: 100%
|
||||||
text-align: center
|
text-align: center
|
||||||
display: inline-block
|
display: inline-block
|
||||||
font-size: 32px
|
margin: 10px 0
|
||||||
|
font-size: 24px
|
||||||
font-weight: 300
|
font-weight: 300
|
||||||
color: white
|
color: white
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
@@ -463,7 +464,8 @@ section
|
|||||||
height: 100%
|
height: 100%
|
||||||
|
|
||||||
#docsToc
|
#docsToc
|
||||||
float: left
|
position: absolute
|
||||||
|
left: -400px
|
||||||
width: 350px
|
width: 350px
|
||||||
padding: 0 20px 0 0
|
padding: 0 20px 0 0
|
||||||
|
|
||||||
@@ -618,7 +620,8 @@ section
|
|||||||
#docsContent
|
#docsContent
|
||||||
position: relative
|
position: relative
|
||||||
float: right
|
float: right
|
||||||
width: calc(100% - 400px)
|
//width: calc(100% - 400px)
|
||||||
|
width: 100%
|
||||||
|
|
||||||
$toc-margin: 15px
|
$toc-margin: 15px
|
||||||
$header-clearance: 40px
|
$header-clearance: 40px
|
||||||
@@ -666,10 +669,13 @@ section
|
|||||||
margin-top: 10px
|
margin-top: 10px
|
||||||
|
|
||||||
code
|
code
|
||||||
|
display: inline-block
|
||||||
|
box-sizing: border-box
|
||||||
background-color: $light-grey
|
background-color: $light-grey
|
||||||
color: $dark-grey
|
color: $dark-grey
|
||||||
font-family: $mono-font
|
font-family: $mono-font
|
||||||
overflow-x: auto
|
overflow-x: auto
|
||||||
|
vertical-align: bottom
|
||||||
font-size: 14px
|
font-size: 14px
|
||||||
font-weight: bold
|
font-weight: bold
|
||||||
padding: 2px 4px
|
padding: 2px 4px
|
||||||
@@ -1028,3 +1034,230 @@ html.search #docsContent
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ocean nodes
|
||||||
|
$ocean-nodes-padding-Y: 60px
|
||||||
|
$ocean-nodes-main-margin-bottom: 60px
|
||||||
|
$ocean-nodes-h3-margin-bottom: 30px
|
||||||
|
|
||||||
|
// video
|
||||||
|
$video-section-height: 200px
|
||||||
|
|
||||||
|
// features
|
||||||
|
$features-h3-margin-bottom: 20px
|
||||||
|
$feature-box-div-width: 100%
|
||||||
|
$feature-box-margin-bottom: 0
|
||||||
|
$feature-box-div-margin-bottom: 40px
|
||||||
|
|
||||||
|
|
||||||
|
// Home-specific
|
||||||
|
|
||||||
|
#home
|
||||||
|
section
|
||||||
|
min-width: 320px
|
||||||
|
|
||||||
|
section, header, footer
|
||||||
|
main
|
||||||
|
min-width: 320px
|
||||||
|
|
||||||
|
|
||||||
|
#home #hero
|
||||||
|
margin-bottom: 0
|
||||||
|
|
||||||
|
main
|
||||||
|
margin-bottom: 30px
|
||||||
|
|
||||||
|
#vendorStrip img
|
||||||
|
max-height: 24px
|
||||||
|
vertical-align: middle
|
||||||
|
margin: 0 30px
|
||||||
|
|
||||||
|
|
||||||
|
// OCEAN NODES
|
||||||
|
#oceanNodes
|
||||||
|
padding-top: $ocean-nodes-padding-Y
|
||||||
|
padding-bottom: $ocean-nodes-padding-Y
|
||||||
|
|
||||||
|
main
|
||||||
|
margin-bottom: $ocean-nodes-padding-Y
|
||||||
|
|
||||||
|
.image-wrapper
|
||||||
|
max-width: 75%
|
||||||
|
margin: 0 auto 20px
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
img
|
||||||
|
width: 100%
|
||||||
|
max-width: 160px
|
||||||
|
|
||||||
|
main:first-child
|
||||||
|
.image-wrapper
|
||||||
|
max-width: 100%
|
||||||
|
|
||||||
|
img
|
||||||
|
max-width: 491px
|
||||||
|
|
||||||
|
h3
|
||||||
|
margin-bottom: $ocean-nodes-h3-margin-bottom
|
||||||
|
|
||||||
|
|
||||||
|
// Video thingy
|
||||||
|
#video
|
||||||
|
height: $video-section-height
|
||||||
|
|
||||||
|
#video
|
||||||
|
width: 100%
|
||||||
|
position: relative
|
||||||
|
background-image: url(../images/kub_video_thm.jpg)
|
||||||
|
background-position: center center
|
||||||
|
background-size: cover
|
||||||
|
|
||||||
|
|
||||||
|
& > .light-text
|
||||||
|
display: none
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
left: 75%
|
||||||
|
width: 50%
|
||||||
|
max-width: 600px
|
||||||
|
min-width: 500px
|
||||||
|
padding-right: 10%
|
||||||
|
transform: translate(-50%, -50%)
|
||||||
|
color: white
|
||||||
|
|
||||||
|
h2
|
||||||
|
font-size: 32px
|
||||||
|
line-height: 44px
|
||||||
|
margin-bottom: 20px
|
||||||
|
|
||||||
|
p
|
||||||
|
margin-bottom: 20px
|
||||||
|
|
||||||
|
#desktopShowVideoButton
|
||||||
|
position: relative
|
||||||
|
font-size: 24px
|
||||||
|
background-color: white
|
||||||
|
border-radius: 8px
|
||||||
|
color: $blue
|
||||||
|
padding: 15px 30px 15px 80px
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content: ""
|
||||||
|
position: absolute
|
||||||
|
@include pureCenter(40px)
|
||||||
|
width: 0
|
||||||
|
height: 0
|
||||||
|
border-style: solid
|
||||||
|
border-width: 10px 0 10px 20px
|
||||||
|
border-color: transparent transparent transparent $blue
|
||||||
|
|
||||||
|
#mobileShowVideoButton
|
||||||
|
@include pureCenter
|
||||||
|
width: 80px
|
||||||
|
height: 80px
|
||||||
|
border-radius: 50%
|
||||||
|
background-color: transparent
|
||||||
|
border: 5px solid rgba(255, 255, 255, 0.2)
|
||||||
|
overflow: visible
|
||||||
|
|
||||||
|
&:after
|
||||||
|
@include pureCenter
|
||||||
|
left: 40px
|
||||||
|
content: ""
|
||||||
|
width: 0
|
||||||
|
height: 0
|
||||||
|
border-style: solid
|
||||||
|
border-width: 20px 0 20px 30px
|
||||||
|
border-color: transparent transparent transparent #ffffff
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Features
|
||||||
|
#features
|
||||||
|
padding-top: 140px
|
||||||
|
background-color: $light-grey
|
||||||
|
background-image: url(../../images/wheel.png)
|
||||||
|
background-position: center 60px
|
||||||
|
background-repeat: no-repeat
|
||||||
|
background-size: auto
|
||||||
|
|
||||||
|
.feature-box
|
||||||
|
//padding: 50px 0
|
||||||
|
width: 100%
|
||||||
|
overflow: hidden
|
||||||
|
clear: both
|
||||||
|
|
||||||
|
h4
|
||||||
|
line-height: normal
|
||||||
|
margin-bottom: 15px
|
||||||
|
|
||||||
|
& > div:first-child
|
||||||
|
float: left
|
||||||
|
|
||||||
|
& > div:last-child
|
||||||
|
float: right
|
||||||
|
|
||||||
|
#features
|
||||||
|
h3
|
||||||
|
margin-bottom: $features-h3-margin-bottom
|
||||||
|
|
||||||
|
.feature-box
|
||||||
|
margin-bottom: $feature-box-margin-bottom
|
||||||
|
|
||||||
|
& > div
|
||||||
|
width: $feature-box-div-width
|
||||||
|
margin-bottom: $feature-box-div-margin-bottom
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Talk to us
|
||||||
|
#talkToUs
|
||||||
|
main
|
||||||
|
padding: 50px 0
|
||||||
|
|
||||||
|
h3, h4
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
h3
|
||||||
|
margin-bottom: 15px
|
||||||
|
|
||||||
|
h4
|
||||||
|
line-height: normal
|
||||||
|
margin-bottom: 50px
|
||||||
|
|
||||||
|
#bigSocial
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
div
|
||||||
|
width: 100%
|
||||||
|
float: left
|
||||||
|
padding: 30px
|
||||||
|
padding-top: 110px
|
||||||
|
background-position: center top
|
||||||
|
background-size: auto
|
||||||
|
background-repeat: no-repeat
|
||||||
|
|
||||||
|
div:nth-child(1)
|
||||||
|
background-image: url(../../images/twitter_icon.png)
|
||||||
|
|
||||||
|
div:nth-child(2)
|
||||||
|
background-image: url(../../images/github_icon.png)
|
||||||
|
|
||||||
|
div:nth-child(3)
|
||||||
|
background-image: url(../../images/slack_icon.png)
|
||||||
|
|
||||||
|
div:nth-child(4)
|
||||||
|
background-image: url(../../images/stackoverflow_icon.png)
|
||||||
|
|
||||||
|
div + div
|
||||||
|
margin-top: 20px
|
||||||
|
margin-left: 0
|
||||||
|
|
||||||
|
a
|
||||||
|
display: inline-block
|
||||||
|
color: $blue
|
||||||
|
font-size: 24px
|
||||||
|
font-weight: 400
|
||||||
|
text-decoration: none
|
||||||
|
margin-bottom: 15px
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,89 @@
|
|||||||
|
$main-max-width: 1200px
|
||||||
|
$video-section-height: 550px
|
||||||
|
|
||||||
|
@media screen and (min-width: 1025px)
|
||||||
|
#docsToc
|
||||||
|
position: relative
|
||||||
|
float: left
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
#docsContent
|
||||||
|
width: calc(100% - 400px)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#home
|
||||||
|
section, header, footer
|
||||||
|
main
|
||||||
|
max-width: $main-max-width
|
||||||
|
|
||||||
|
#oceanNodes
|
||||||
|
main
|
||||||
|
position: relative
|
||||||
|
max-width: $main-max-width
|
||||||
|
|
||||||
|
&:nth-child(1)
|
||||||
|
|
||||||
|
.image-wrapper
|
||||||
|
position: absolute
|
||||||
|
max-width: 48%
|
||||||
|
transform: translateY(-50%)
|
||||||
|
|
||||||
|
.content
|
||||||
|
width: 50%
|
||||||
|
|
||||||
|
|
||||||
|
#video
|
||||||
|
height: $video-section-height
|
||||||
|
position: relative
|
||||||
|
background-image: url(../../images/kub_video_thm.jpg)
|
||||||
|
background-position: center center
|
||||||
|
background-size: cover
|
||||||
|
height: 550px
|
||||||
|
|
||||||
|
|
||||||
|
#talkToUs
|
||||||
|
#bigSocial
|
||||||
|
div
|
||||||
|
width: calc(25% - 15px)
|
||||||
|
|
||||||
|
div + div
|
||||||
|
margin-left: 20px
|
||||||
|
|
||||||
|
//
|
||||||
|
//// FOOTER
|
||||||
|
//footer
|
||||||
|
// width: 100%
|
||||||
|
// background-image: url(../images/texture.png)
|
||||||
|
// background-color: $dark-grey
|
||||||
|
//
|
||||||
|
// main
|
||||||
|
// padding: 40px 0
|
||||||
|
//
|
||||||
|
// nav
|
||||||
|
// white-space: nowrap
|
||||||
|
//
|
||||||
|
// a
|
||||||
|
// width: 25%
|
||||||
|
// text-align: center
|
||||||
|
// display: inline-block
|
||||||
|
// font-size: 32px
|
||||||
|
// font-weight: 300
|
||||||
|
// color: white
|
||||||
|
// text-decoration: none
|
||||||
|
//
|
||||||
|
// .social
|
||||||
|
// position: relative
|
||||||
|
// margin: 80px 0 60px
|
||||||
|
//
|
||||||
|
// label
|
||||||
|
// float: right
|
||||||
|
// display: inline-block
|
||||||
|
// height: 50px
|
||||||
|
// line-height: 50px
|
||||||
|
// font-weight: 100
|
||||||
|
// white-space: nowrap
|
||||||
|
//
|
||||||
|
// input
|
||||||
|
// margin-left: 8px
|
||||||
|
// width: 300px
|
||||||
|
|||||||
@@ -51,6 +51,16 @@ $quickstart-button-padding: 0 50px
|
|||||||
$vendor-strip-height: 44px
|
$vendor-strip-height: 44px
|
||||||
$vendor-strip-font-size: 16px
|
$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%
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
////////////////////////////////////////////////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
@@ -68,3 +78,120 @@ $vendor-strip-font-size: 16px
|
|||||||
|
|
||||||
#vendorStrip
|
#vendorStrip
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
|
|
||||||
|
#oceanNodes
|
||||||
|
h3
|
||||||
|
text-align: left
|
||||||
|
|
||||||
|
main
|
||||||
|
position: relative
|
||||||
|
clear: both
|
||||||
|
|
||||||
|
.image-wrapper
|
||||||
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
max-width: 25%
|
||||||
|
max-height: 100%
|
||||||
|
transform: translateY(-50%)
|
||||||
|
|
||||||
|
&:nth-child(odd)
|
||||||
|
.content
|
||||||
|
padding-right: 30%
|
||||||
|
|
||||||
|
.image-wrapper
|
||||||
|
right: 0
|
||||||
|
|
||||||
|
&:nth-child(even)
|
||||||
|
.content
|
||||||
|
padding-left: 30%
|
||||||
|
|
||||||
|
.image-wrapper
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
&:nth-child(1)
|
||||||
|
.content
|
||||||
|
padding-right: 0
|
||||||
|
|
||||||
|
.image-wrapper
|
||||||
|
position: relative
|
||||||
|
max-width: 100%
|
||||||
|
transform: none
|
||||||
|
|
||||||
|
img
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
|
||||||
|
#video
|
||||||
|
height: $video-section-height
|
||||||
|
|
||||||
|
#video
|
||||||
|
display: block
|
||||||
|
|
||||||
|
& > .light-text
|
||||||
|
display: block
|
||||||
|
|
||||||
|
#mobileShowVideoButton
|
||||||
|
display: none
|
||||||
|
|
||||||
|
#features
|
||||||
|
padding-bottom: 60px
|
||||||
|
|
||||||
|
.feature-box
|
||||||
|
&:last-child
|
||||||
|
margin-bottom: 0
|
||||||
|
|
||||||
|
h3
|
||||||
|
margin-bottom: $features-h3-margin-bottom
|
||||||
|
|
||||||
|
.feature-box
|
||||||
|
margin-bottom: $feature-box-margin-bottom
|
||||||
|
|
||||||
|
& > div
|
||||||
|
width: $feature-box-div-width
|
||||||
|
margin-bottom: $feature-box-div-margin-bottom
|
||||||
|
|
||||||
|
#talkToUs
|
||||||
|
#bigSocial
|
||||||
|
div
|
||||||
|
width: calc(50% - 15px)
|
||||||
|
|
||||||
|
div:nth-child(2)
|
||||||
|
margin-left: 20px
|
||||||
|
|
||||||
|
div:nth-child(4)
|
||||||
|
margin-left: 20px
|
||||||
|
|
||||||
|
a
|
||||||
|
display: inline-block
|
||||||
|
color: $blue
|
||||||
|
font-size: 24px
|
||||||
|
font-weight: 400
|
||||||
|
text-decoration: none
|
||||||
|
margin-bottom: 15px
|
||||||
|
|
||||||
|
// FOOTER
|
||||||
|
footer
|
||||||
|
nav
|
||||||
|
white-space: nowrap
|
||||||
|
|
||||||
|
a
|
||||||
|
width: 25%
|
||||||
|
font-size: 22px
|
||||||
|
|
||||||
|
//
|
||||||
|
// .social
|
||||||
|
// position: relative
|
||||||
|
// margin: 80px 0 60px
|
||||||
|
//
|
||||||
|
// label
|
||||||
|
// float: right
|
||||||
|
// display: inline-block
|
||||||
|
// height: 50px
|
||||||
|
// line-height: 50px
|
||||||
|
// font-weight: 100
|
||||||
|
// white-space: nowrap
|
||||||
|
//
|
||||||
|
// input
|
||||||
|
// margin-left: 8px
|
||||||
|
// width: 300px
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
+4
-4
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Index test
|
title: Accelerate Your Development
|
||||||
abstract: Cool content goes here
|
abstract:
|
||||||
layout: marketing
|
layout: home
|
||||||
---
|
---
|
||||||
|
|
||||||
<a href="/docs/" class="button">View the Docs</a>
|
<!--<a href="/docs/" class="button">View the Docs</a>-->
|
||||||
|
|||||||
+1
-2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user