diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 00000000000..b76244d3b5e
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "themes/docsy"]
+ path = themes/docsy
+ url = https://github.com/google/docsy.git
diff --git a/assets/images/nav_logo.svg b/assets/images/nav_logo.svg
new file mode 100644
index 00000000000..982c04f4aa2
--- /dev/null
+++ b/assets/images/nav_logo.svg
@@ -0,0 +1,110 @@
+
+
+
diff --git a/assets/images/nav_logo2.svg b/assets/images/nav_logo2.svg
new file mode 100644
index 00000000000..92b8d19ac4e
--- /dev/null
+++ b/assets/images/nav_logo2.svg
@@ -0,0 +1,108 @@
+
+
+
diff --git a/assets/js/search.js b/assets/js/search.js
new file mode 100644
index 00000000000..3d6e9d94478
--- /dev/null
+++ b/assets/js/search.js
@@ -0,0 +1,36 @@
+/*
+Copyright 2018 Google LLC
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+ https://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+(function ($) {
+ "use strict";
+
+ var Search = {
+ init: function () {
+ $(document).ready(function () {
+ $(document).on("keypress", ".td-search-input", function (e) {
+ if (e.keyCode !== 13) {
+ return;
+ }
+
+ var query = $(this).val();
+ var searchPage = "{{ "docs/search/" | absURL }}?q=" + query;
+ document.location = searchPage;
+
+ return false;
+ });
+ });
+ },
+ };
+
+ Search.init();
+})(jQuery);
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
new file mode 100644
index 00000000000..ddfee424444
--- /dev/null
+++ b/assets/scss/_base.scss
@@ -0,0 +1,834 @@
+@import "reset";
+
+// 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: 80px;
+$headline-wrapper-margin-bottom: 40px;
+$quickstart-button-padding: 0 50px;
+$vendor-strip-height: 88px;
+$vendor-strip-font-size: 16px;
+
+// video
+$video-section-height: 200px;
+
+@import "size";
+
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////////////////
+
+body {
+ background-color: white;
+}
+
+section {
+ position: relative;
+ background-color: white;
+}
+
+section,
+header,
+footer {
+ .main-section {
+ position: relative;
+ margin: auto;
+ }
+
+ p {
+ font-size: 14px;
+ font-weight: 400;
+ }
+
+ .button {
+ display: inline-block;
+ border-radius: 6px;
+ padding: 0 20px;
+ line-height: 40px;
+ color: white;
+ background-color: $blue;
+ text-decoration: none;
+ font-size: 1rem;
+ }
+
+ #cellophane {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: none;
+ }
+}
+
+// HEADER
+
+#hamburger {
+ display: inline-block;
+ position: relative;
+ margin-left: auto;
+ vertical-align: middle;
+ padding: 0;
+ border: 0;
+ background: none;
+
+ div,
+ &:before,
+ &:after {
+ position: absolute;
+ left: 15%;
+ width: 70%;
+ height: 2px;
+ background-color: $blue;
+ transition: 0.3s;
+ content: "";
+ }
+
+ div {
+ top: calc(50% - 1px);
+ }
+
+ &:before {
+ top: 24%;
+ }
+
+ &:after {
+ bottom: 24%;
+ }
+
+ &:hover {
+ div,
+ &:before,
+ &:after {
+ background-color: white;
+ }
+ }
+}
+
+// HERO
+.header-hero {
+ background-image: url(/images/texture.png);
+ background-color: $dark-grey;
+ text-align: center;
+ padding-left: 0;
+ padding-right: 0;
+ margin-bottom: 0;
+ position: relative;
+
+ &.bot-bar:after {
+ display: block;
+ margin-bottom: -24px;
+ height: 8px;
+ width: 100%;
+ background-color: transparentize(white, 0.9);
+ content: "";
+ }
+
+ &.no-sub {
+ h5 {
+ display: none;
+ }
+
+ h1 {
+ margin-bottom: 20px;
+ }
+ }
+}
+
+.td-home .header-hero:after {
+ display: none;
+}
+
+.header-hero {
+ background-color: $dark-grey;
+
+ h5 {
+ margin: 20px 0;
+ line-height: 28px;
+ }
+}
+
+#vendorStrip {
+ position: relative;
+
+ ul {
+ float: left;
+ }
+
+ li {
+ display: inline-block;
+ height: 100%;
+ }
+
+ a {
+ display: block;
+ height: 100%;
+ color: white;
+ font-size: 0.75em;
+ font-weight: bold;
+ }
+
+ li + li {
+ margin-left: 0;
+ }
+}
+
+.pi-accordion {
+ & > .container:first-child > .item:first-child > .title:first-child {
+ padding-left: 0;
+ font-size: 1.5em;
+ font-weight: 700;
+ }
+
+ & > .container:first-child > .item.yah:first-child > .title:first-child {
+ margin-left: -20px !important;
+ }
+
+ .item {
+ overflow: hidden;
+ }
+
+ .title {
+ color: $dark-grey;
+ position: relative;
+ padding: 7.5px 10px 7.5px 18px;
+ cursor: pointer;
+ transition: 0.3s;
+
+ &:hover {
+ color: $blue;
+ }
+ }
+
+ a.item > .title {
+ color: black;
+
+ &:hover {
+ color: $blue;
+ }
+ }
+
+ div.item > .title {
+ &:before {
+ content: "";
+ position: absolute;
+ top: 12px;
+ left: 2px;
+ border-style: solid;
+ border-width: 5px 0 5px 8px;
+ border-color: transparent transparent transparent $blue;
+ transform: rotate(0deg);
+ transition: 0.3s;
+ }
+ }
+
+ .wrapper {
+ position: relative;
+ width: 100%;
+ transition: height 0.3s;
+ }
+
+ .content {
+ padding-left: 20px;
+ opacity: 0;
+ transition: 0.3s;
+ }
+
+ .item.on {
+ & > .title:before {
+ transform: rotate(90deg);
+ }
+
+ & > .wrapper > .content {
+ opacity: 1;
+ }
+ }
+}
+
+dt {
+ margin-bottom: 8px;
+}
+
+dd {
+ margin-bottom: 16px;
+}
+
+.pi-pushmenu {
+ display: none;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 0.3s;
+
+ &.on {
+ opacity: 1;
+ }
+
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.4);
+ }
+
+ .sled {
+ position: absolute;
+ top: 0;
+ width: 0;
+ height: 100%;
+ background-color: white;
+ overflow: auto;
+ transition: 0.3s;
+ }
+
+ &.on .sled {
+ width: 400px;
+ max-width: 100vw;
+ }
+
+ .top-bar {
+ height: 0;
+ line-height: 60px;
+ background-color: #444;
+ }
+
+ ul {
+ margin-top: 25px;
+ }
+
+ li {
+ position: relative;
+ display: block;
+ width: 100%;
+ min-height: 45px;
+ padding: 0 60px 0 20px;
+ border-bottom: 1px solid #cccccc;
+ }
+
+ a {
+ display: inline-block;
+ width: 100%;
+ height: 45px;
+ line-height: 45px;
+ font-family: "Roboto", sans-serif;
+ font-size: 20px;
+ color: $blue;
+ }
+
+ .button {
+ background: none;
+ padding: 0;
+ }
+
+ ul ul {
+ padding: 0 20px;
+
+ li {
+ min-height: 40px;
+ }
+
+ a {
+ height: 40px;
+ line-height: 40px;
+ font-size: 18px;
+ color: lighten(#222222, 20%);
+ }
+ }
+}
+
+.push-menu-close-button {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 50px;
+ height: 50px;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ top: calc(50% - 1px);
+ left: 25%;
+ width: 50%;
+ height: 2px;
+ background-color: black;
+ }
+
+ &:before {
+ transform: rotate(45deg);
+ }
+
+ &:after {
+ transform: rotate(-45deg);
+ }
+}
+
+// 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
+
+.td-home {
+ &.flip-nav,
+ &.open-nav {
+ .logo {
+ background-image: url(/images/nav_logo2.svg);
+ }
+ }
+}
+
+.header-hero {
+ margin-bottom: 0;
+ padding-bottom: 1px;
+
+ .main-section {
+ padding: 0 10px;
+ margin-bottom: 30px;
+ }
+
+ #vendorStrip {
+ display: none;
+ }
+}
+
+// Add logo to CNCF section
+section#cncf {
+ padding-top: 60px;
+ padding-bottom: 140px;
+ background-image: url(/images/cncf-color.svg);
+ background-position: center 100px;
+ background-repeat: no-repeat;
+ background-size: 300px;
+}
+
+// OCEAN NODES
+#oceanNodes {
+ padding-top: $ocean-nodes-padding-Y;
+ padding-bottom: $ocean-nodes-padding-Y;
+
+ a {
+ color: $blue;
+ }
+
+ .main-section {
+ margin-bottom: $ocean-nodes-padding-Y;
+ min-height: 160px;
+ }
+
+ .image-wrapper {
+ max-width: 75%;
+ margin: 0 auto 20px;
+ text-align: center;
+
+ img {
+ width: 100%;
+ max-width: 160px;
+ }
+ }
+
+ .main-section: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-position: center center;
+ background-size: cover;
+
+ & > .light-text {
+ display: none;
+ // position: absolute;
+ // top: 50%;
+ // left: 75%;
+ width: 500px;
+ padding-top: 2rem;
+ // transform: translate(-50%, -50%);
+ color: white;
+ }
+
+ h2 {
+ font-size: 32px;
+ line-height: 44px;
+ margin-bottom: 20px;
+ }
+
+ p {
+ margin-bottom: 20px;
+ }
+
+ #desktopKCButton {
+ position: relative;
+ font-size: 18px;
+ background-color: $dark-grey;
+ border-radius: 8px;
+ color: $white;
+ padding: 20px 10px 20px 10px;
+ }
+
+ #desktopShowVideoButton {
+ position: relative;
+ font-size: 24px;
+ background-color: white;
+ border-radius: 8px;
+ color: $blue;
+ padding: 15px 30px 15px 80px;
+ margin-bottom: 15px;
+
+ &: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;
+ }
+ }
+}
+
+#videoPlayer {
+ @include fullScreen;
+ background-color: rgba(0, 0, 0, 0.9);
+ display: none;
+
+ iframe {
+ @include pureCenter;
+ @include maintain-aspect-ratio;
+ }
+
+ #closeButton {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 50px;
+ height: 50px;
+ border: 2px solid transparent;
+ transition: 0.3s;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ top: calc(50% - 1px);
+ left: 10%;
+ width: 80%;
+ height: 2px;
+ background-color: white;
+ }
+
+ &:before {
+ transform: rotate(45deg);
+ }
+
+ &:after {
+ transform: rotate(-45deg);
+ }
+
+ &:hover {
+ border-color: white;
+ }
+ }
+}
+
+// KubeWeekly
+#kubeweekly {
+ background-color: $light-grey;
+ padding-top: 30px;
+ padding-bottom: 80px;
+ background-size: auto;
+ // font-family: "Roboto Mono", monospace !important;
+ font-size: 24px;
+ // font-weight: bold;
+
+ h5 {
+ font-size: 20px;
+ }
+}
+
+.subscribe-button {
+ border-radius: 6px;
+ padding: 0 20px;
+ line-height: 31px;
+ color: white;
+ background-color: blue;
+ text-decoration: none;
+ font-size: 14px;
+}
+
+// Features
+#features {
+ padding-top: 140px;
+ background-color: $light-grey;
+ background-image: url(/images/wheel.svg);
+ background-position: center 60px;
+ background-repeat: no-repeat;
+ background-size: 60px;
+}
+
+.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 {
+ h3,
+ h4 {
+ text-align: center;
+ }
+
+ h3 {
+ margin-bottom: 15px;
+ }
+
+ h4 {
+ line-height: normal;
+ margin-bottom: 50px;
+
+ br {
+ display: none;
+ }
+ }
+
+ #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;
+ }
+
+ a,
+ p {
+ text-align: center;
+ width: 100%;
+ }
+ }
+}
+
+.td-home {
+ #talkToUs {
+ .main-section {
+ padding: 30px 0;
+ }
+
+ h5 {
+ font-size: 20px;
+ }
+ }
+
+ #caseStudiesWrapper {
+ position: relative;
+ text-align: center;
+ margin-bottom: 30px;
+
+ img {
+ padding-bottom: 1rem;
+ }
+
+ div {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ width: 100%;
+ min-height: 230px;
+ margin-bottom: 60px;
+ padding-right: 1rem;
+ background-position: top center;
+ }
+
+ p {
+ font-size: 20px;
+ }
+
+ a {
+ position: absolute;
+ bottom: -30px;
+ left: 50%;
+ transform: translateX(-50%);
+ color: $blue;
+ font-weight: 400;
+ }
+ }
+}
+
+// Docs specific
+
+#editPageButton {
+ position: absolute;
+ top: 50px;
+ right: 25px;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ border-radius: 50%;
+ white-space: nowrap;
+ text-indent: 50px;
+ overflow: hidden;
+ background: $blue url(/images/icon-pencil.svg) no-repeat;
+ background-position: 12px 10px;
+ background-size: 29px 29px;
+}
+
+.feedback--response__hidden {
+ display: none;
+}
+
+// GitHub info/edit buttons
+#pre-footer {
+ margin-top: 2rem;
+
+ .button {
+ font-size: 1.1rem;
+
+ &:first-of-type {
+ margin-right: 0.75rem;
+ }
+ }
+
+ .lastedit {
+ margin-top: 1rem;
+ font-size: 1rem;
+ }
+}
diff --git a/assets/scss/_case-studies.scss b/assets/scss/_case-studies.scss
new file mode 100644
index 00000000000..d61d24189c2
--- /dev/null
+++ b/assets/scss/_case-studies.scss
@@ -0,0 +1,142 @@
+// SASS for Case Studies pages go here:
+
+hr {
+ background-color: #999999;
+}
+
+h2 {
+ margin-bottom: 15px !important;
+}
+
+.subhead {
+ padding-bottom: 2% !important;
+ padding-top: 0% !important;
+}
+
+.details {
+ margin-left: 1.9%;
+ padding-right: 5%;
+ font-size: 16px !important;
+ padding-bottom: 2% !important;
+}
+
+.section1 {
+ margin-bottom: 3%;
+
+ .cols {
+ width: 80% !important;
+ margin-left: 6.8%;
+ padding-top: 1.5%;
+
+ .col1 {
+ width: 52% !important;
+ font-weight: 300 !important;
+ }
+
+ .col2 {
+ width: 46% !important;
+ }
+ }
+}
+
+.banner2text {
+ width: 63%;
+ padding-top: 10%;
+ padding-left: 0% !important;
+ float: initial !important;
+ text-align: center;
+ margin: 0 auto;
+ position: relative;
+}
+
+.banner3text,
+.banner4text,
+.banner5text {
+ width: 63%;
+ padding-left: 0% !important;
+ float: initial !important;
+ text-align: center;
+ margin: 0 auto;
+ position: relative;
+}
+
+.fullcol {
+ float: initial !important;
+}
+
+body footer {
+ background-color: #585858 !important;
+}
+
+.section1 {
+ float: left !important;
+}
+
+.banner1 {
+ padding-left: 11.9% !important;
+}
+
+.banner2 {
+ float: initial !important;
+ padding-bottom: 2% !important;
+}
+
+footer {
+ padding: 0% 7%;
+}
+
+.banner4,
+.banner3,
+.banner5 {
+ float: initial !important;
+}
+
+@media screen and (max-width: 910px) {
+ .banner2text {
+ width: 47%;
+ padding-top: 45%;
+ }
+
+ .details {
+ margin-left: 0%;
+ margin-bottom: 3%;
+ }
+
+ .subhead {
+ padding-bottom: 0% !important;
+ padding-top: 0% !important;
+ }
+
+ .banner3 {
+ width: 100% !important;
+ }
+}
+
+@media screen and (max-width: 780px) {
+ .section1 .cols {
+ width: 100% !important;
+ margin-left: 0%;
+ padding-top: 5%;
+
+ .col1,
+ .col2 {
+ width: 100% !important;
+ margin-left: 0% !important;
+
+ .fullcol {
+ width: 90% !important;
+ margin-left: 5% !important;
+
+ .banner1 {
+ padding-left: 10% !important;
+ margin-bottom: 6% !important;
+
+ .banner2text {
+ padding-top: 60% !important;
+ padding-bottom: 2% !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
new file mode 100644
index 00000000000..52364b0a8a8
--- /dev/null
+++ b/assets/scss/_custom.scss
@@ -0,0 +1,386 @@
+/* GLOBAL */
+.td-main {
+ .row {
+ margin: 0;
+ }
+
+ main {
+ img {
+ max-width: 100%;
+ }
+
+ table {
+ margin-bottom: 1rem;
+ display: initial;
+ }
+
+ @media only screen and (min-width: 768px) {
+ padding-top: 2rem !important;
+ }
+ }
+}
+
+section {
+ .main-section {
+ @media only screen and (min-width: 1024px) {
+ max-width: 1200px;
+ }
+ }
+}
+
+.td-outer {
+ padding: 0 !important;
+}
+
+#desktopShowVideoButton {
+ border: none
+}
+
+#videoPlayer {
+ #closeButton {
+ background: transparent;
+ }
+}
+
+/* HEADER */
+
+.td-navbar {
+ position: fixed !important;
+ width: 100%;
+ padding-bottom: 1rem !important;
+ background: transparent !important;
+ transition: 0.3s;
+
+ .navbar-brand {
+ position: absolute;
+ width: 45px;
+ height: 44px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-image: url("/images/favicon.png");
+ }
+
+ #hamburger {
+ &:focus {
+ outline: none;
+ }
+ }
+
+ @media only screen and (min-width: 768px) {
+ .navbar-brand {
+ background-image: url("/images/nav_logo.svg");
+ top: 1.5rem;
+ width: 180px;
+ margin-left: 1rem;
+ }
+ }
+}
+
+.td-navbar-nav-scroll {
+ overflow: visible !important;
+ display: none;
+
+ .navbar-nav {
+ overflow: visible !important;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+
+ .nav-item {
+ position: relative;
+ height: 10%;
+
+ .active::after {
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ content: "";
+ bottom: -4px;
+ left: 0;
+ background: #fff;
+ }
+
+ .dropdown-menu {
+ left: -80px;
+ }
+
+ &.dropdown:hover {
+ color: $medium-grey;
+ }
+ }
+ }
+
+ @media only screen and (min-width: 768px) {
+ display: block;
+ margin-top: 3.5rem !important;
+ }
+
+ @media only screen and (min-width: 1075px) {
+ margin-top: 1.5rem !important;
+ }
+}
+
+// Flip-Nav
+.flip-nav .td-navbar {
+ background-color: white !important;
+ box-shadow: 0 1px 2px $medium-grey;
+
+ .navbar-nav {
+ .nav-item {
+ &.show .nav-link,
+ .nav-link {
+ color: $dark-grey;
+
+ &:hover {
+ color: $medium-grey;
+ }
+ }
+
+ .dropdown {
+ &:hover {
+ color: $medium-grey;
+ }
+ }
+ }
+ }
+
+ .navbar-nav .nav-item .active {
+ color: $dark-grey;
+
+ &::after {
+ background: $dark-grey;
+ }
+ }
+
+ #hamburger:hover {
+ div,
+ &:before,
+ &:after {
+ background-color: $dark-grey;
+ }
+ }
+
+ @media only screen and (min-width: 768px) {
+ .navbar-brand {
+ background-image: url("/images/nav_logo2.svg");
+ }
+ }
+}
+
+/* FOOTER */
+footer {
+ background-color: #303030;
+ background-image: url("/images/texture.png");
+ padding: 1rem !important;
+ min-height: initial !important;
+
+ .footer__links {
+ width: 100%;
+ margin: auto;
+ padding-bottom: 1rem;
+
+ nav a {
+ display: block;
+ text-align: center;
+ }
+
+ @media only screen and (min-width: 768px) {
+ nav {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ }
+ }
+ }
+
+ small {
+ color: $light-grey;
+ font-size: 0.64rem;
+
+ a {
+ text-decoration: inherit;
+ color: inherit;
+
+ &:hover {
+ color: inherit;
+ }
+ }
+ }
+}
+
+/* SIDE-DRAWER MENU */
+
+.pi-pushmenu .sled {
+ .content ul {
+ padding: 0;
+
+ li {
+ &:first-child {
+ display: none;
+ }
+
+ a.nav-link {
+ padding: 0;
+ }
+ }
+ }
+ .push-menu-close-button {
+ background: transparent;
+ border: none;
+
+ &:focus {
+ outline: none;
+ }
+ }
+}
+
+/* DOCS */
+
+.launch-cards {
+ button {
+ cursor: pointer;
+ box-sizing: border-box;
+ background: none;
+ margin: 0;
+ border: 0;
+ }
+
+ ul,
+ li {
+ list-style: none;
+ padding-left: 0;
+ }
+}
+
+// table of contents
+.td-toc {
+ padding-top: 1.5rem !important;
+ top: 5rem !important;
+
+ #TableOfContents {
+ padding-top: 1rem;
+ }
+}
+
+// blockquotes and callouts
+
+blockquote {
+ padding: 0.4rem 0.4rem 0.4rem 1rem !important;
+}
+
+// callouts are contained in static CSS as well. these require override.
+
+.caution {
+ border-left-color: #f0ad4e !important;
+}
+
+.note {
+ border-left-color: #428bca !important;
+}
+
+.warning {
+ border-left-color: #d9534f !important;
+}
+
+// search & sidebar
+.td-sidebar {
+ @media only screen and (min-width: 768px) {
+ padding-top: 1.5rem !important;
+
+ .td-sidebar__inner {
+ top: 8.5rem;
+
+ @media only screen and (min-width: 1075px) {
+ top: 6.5rem;
+ }
+ }
+ }
+}
+
+.td-sidebar__inner {
+ form.td-sidebar__search {
+
+ button.td-sidebar__toggle {
+ &:hover {
+ color: $white;
+ }
+
+ color: $blue;
+ }
+ }
+}
+
+.no-underline {
+ text-decoration: none !important;
+}
+
+.hide {
+ display: none !important;
+}
+
+.td-sidebar-link__page {
+ &#m-docs-search {
+ display: none;
+ }
+
+ &#m-docs-test {
+ display: none;
+ }
+}
+
+//Tutorials
+main.content {
+ position: inherit;
+}
+
+/* BLOG */
+
+.td-blog {
+
+ .td-sidebar-nav {
+ max-height: calc(100vh - 8rem);
+ }
+
+ .widget-link {
+ margin-bottom: 1rem;
+
+ .svg-inline--fa {
+ width: 25px;
+ }
+
+ span {
+ margin-left: 0.5rem;
+ }
+ }
+}
+
+/* COMMUNITY */
+
+.newcommunitywrapper {
+ .news {
+ margin-left: 0;
+
+ @media screen and (min-width: 768px) {
+ margin-left: 10%;
+ }
+ }
+}
+
+/* CASE-STUDIES */
+
+// Many of the case studies have small variations in markup and styles;
+// some issues cannot be addressed due to inlined !important rules.
+#caseStudies {
+ section .cols {
+ margin-left: 11%;
+
+ div {
+ width: initial !important;
+ h2 {
+ margin-top: 1rem;
+ }
+ }
+ }
+}
diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss
new file mode 100644
index 00000000000..abff764d2ff
--- /dev/null
+++ b/assets/scss/_desktop.scss
@@ -0,0 +1,99 @@
+$main-max-width: 1200px;
+$vendor-strip-height: 44px;
+$video-section-height: 550px;
+
+@media screen and (min-width: 1024px) {
+
+ .td-home {
+ .header-hero {
+ #vendorStrip {
+ display: block;
+ }
+ }
+ }
+
+ .td-home {
+
+ section,
+ header,
+ footer {
+ .main-section {
+ max-width: 1000px;
+ }
+ }
+ }
+
+ #oceanNodes {
+ .main-section {
+ position: relative;
+
+ &:nth-child(1) {
+ max-width: 1000px;
+ padding-right: 475px;
+
+ h3,
+ p {
+ text-align: left
+ }
+
+ .image-wrapper {
+ position: absolute;
+ max-width: 48%;
+ transform: translateY(-50%);
+ }
+
+ img {
+ width: 425px;
+ }
+ }
+ }
+ }
+
+ #video {
+ height: $video-section-height;
+ position: relative;
+ background-position: center center;
+ background-size: cover;
+
+ &>.light-text {
+ margin-right: 10%;
+ }
+ }
+
+
+
+ #talkToUs {
+ h4 {
+ br {
+ display: block;
+ }
+ }
+
+ #bigSocial {
+ div {
+ width: calc(25% - 18px);
+ }
+
+ div+div {
+ margin-left: 20px;
+ }
+ }
+
+ .td-home #bigSocial {
+ div {
+ width: calc(33% - 15px);
+ }
+
+ div:nth-child(3) {
+ margin-top: inherit;
+ }
+ }
+ }
+
+ .td-home #caseStudiesWrapper {
+ div {
+ width: 24%;
+ min-height: 260px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/assets/scss/_reset.scss b/assets/scss/_reset.scss
new file mode 100755
index 00000000000..7e3c0bbd3ac
--- /dev/null
+++ b/assets/scss/_reset.scss
@@ -0,0 +1,49 @@
+// CONVENIENCE
+.clear {
+ display: block;
+ clear: both;
+}
+
+.light-text {
+ color: white;
+}
+
+.right {
+ float: right;
+}
+
+.left {
+ float: left;
+}
+
+.center {
+ text-align: center;
+}
+
+//mixins
+@mixin fullScreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+}
+
+@mixin pureCenter($left: 50%, $top: 50%) {
+ position: absolute;
+ top: $top;
+ left: $left;
+ transform: translate(-50%, -50%);
+}
+
+@mixin maintain-aspect-ratio(
+ $width-factor: 16,
+ $height-factor: 9,
+ $target-width: 80vw,
+ $target-height: 80vh
+) {
+ width: $target-width;
+ height: $target-width * ($height-factor / $width-factor);
+ max-width: $target-height * ($width-factor / $height-factor);
+ max-height: $target-height;
+}
diff --git a/assets/scss/_size.scss b/assets/scss/_size.scss
new file mode 100644
index 00000000000..9f0b7f655fc
--- /dev/null
+++ b/assets/scss/_size.scss
@@ -0,0 +1,20 @@
+section,
+#vendorStrip {
+ padding-left: $full-width-paddingX;
+ padding-right: $full-width-paddingX;
+}
+
+#hamburger {
+ width: $hamburger-size;
+ height: $hamburger-size;
+}
+
+.header-hero {
+ padding-top: $hero-padding-top;
+}
+
+#vendorStrip {
+ height: $vendor-strip-height;
+ line-height: $vendor-strip-height;
+ font-size: $vendor-strip-font-size;
+}
diff --git a/assets/scss/_skin.scss b/assets/scss/_skin.scss
new file mode 100755
index 00000000000..32c94b9dc52
--- /dev/null
+++ b/assets/scss/_skin.scss
@@ -0,0 +1,5 @@
+$blue: #3371e3;
+$light-grey: #f7f7f7;
+$dark-grey: #303030;
+$medium-grey: #4c4c4c;
+$white: #ffffff;
diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss
new file mode 100644
index 00000000000..54ead8319c8
--- /dev/null
+++ b/assets/scss/_tablet.scss
@@ -0,0 +1,211 @@
+// 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: 136px;
+$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;
+ height: 160px;
+
+ .content {
+ display: table-cell;
+ position: relative;
+ vertical-align: middle;
+ }
+
+ .image-wrapper {
+ position: absolute;
+ top: 50%;
+ max-width: 25%;
+ max-height: 100%;
+ transform: translateY(-50%);
+ }
+
+ &:nth-child(odd) {
+ padding-right: 210px;
+
+ .image-wrapper {
+ right: 0;
+ }
+ }
+
+ &:nth-child(even) {
+ padding-left: 210px;
+
+ .image-wrapper {
+ left: 0;
+ }
+ }
+
+ &:nth-child(1) {
+ padding-right: 0;
+
+ h3,
+ p {
+ text-align: center;
+ }
+
+ .image-wrapper {
+ position: relative;
+ display: block;
+ float: none;
+ 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%;
+ }
+ }
+}
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
new file mode 100644
index 00000000000..da42c073673
--- /dev/null
+++ b/assets/scss/_variables_project.scss
@@ -0,0 +1,13 @@
+/* This file is provided by Docsy as an entry point to styling.
+Add styles or override variables from the theme here. */
+
+@import "reset";
+@import "skin";
+
+//K8S-Docsy integration
+@import "custom";
+
+//Media queries
+@import "base";
+@import "tablet";
+@import "desktop";
diff --git a/config.toml b/config.toml
index 772c160e1f4..423562ee81d 100644
--- a/config.toml
+++ b/config.toml
@@ -1,6 +1,11 @@
baseURL = "https://kubernetes.io"
title = "Kubernetes"
+# Hugo allows theme composition (and inheritance). The precedence is from left to right.
+theme = ["docsy"]
+
+# Language settings
+contentDir = "content/en"
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = false
enableRobotsTXT = true
@@ -10,10 +15,17 @@ disableKinds = ["taxonomy", "taxonomyTerm"]
ignoreFiles = [ "^OWNERS$", "README[-]+[a-z]*\\.md", "^node_modules$", "content/en/docs/doc-contributor-tools" ]
-contentDir = "content/en"
-
timeout = 3000
+# Highlighting config.
+pygmentsCodeFences = true
+pygmentsUseClasses = false
+# Use the new Chroma Go highlighter in Hugo.
+pygmentsUseClassic = false
+#pygmentsOptions = "linenos=table"
+# See https://help.farbox.com/pygments.html
+pygmentsStyle = "emacs"
+
# Enable Git variables like commit, lastmod
enableGitInfo = true
@@ -44,7 +56,7 @@ disableLanguages = ["hi", "no"]
style = "emacs"
tabWidth = 4
[markup.tableOfContents]
- endLevel = 2
+ endLevel = 3
ordered = false
startLevel = 2
@@ -76,7 +88,28 @@ baseName = "_headers"
isPlainText = true
notAlternative = true
+# Image processing configuration.
+[imaging]
+resampleFilter = "CatmullRom"
+quality = 75
+anchor = "smart"
+
+[services]
+[services.googleAnalytics]
+# Comment out the next line to disable GA tracking. Also disables the feature described in [params.ui.feedback].
+id = "UA-00000000-0"
+
[params]
+copyright_k8s = "The Kubernetes Authors"
+copyright_linux = "Copyright © 2020 The Linux Foundation ®."
+# privacy_policy = "https://policies.google.com/privacy"
+
+# First one is picked as the Twitter card image if not set on page.
+# images = ["images/project-illustration.png"]
+
+# Menu title if your navbar has a versions selector to access old versions of your site.
+# This menu appears only if you have at least one [params.versions] set.
+version_menu = "Versions"
time_format_blog = "Monday, January 02, 2006"
description = "Production-Grade Container Orchestration"
@@ -99,6 +132,20 @@ githubWebsiteRaw = "raw.githubusercontent.com/kubernetes/website"
announcement = true
announcement_bg = "#000000" #choose a dark color – text is white
+#Searching
+k8s_search = true
+
+#The following search parameters are specific to Docsy's implementation. Kubernetes implementes its own search-related partials and scripts.
+
+# Google Custom Search Engine ID. Remove or comment out to disable search.
+#gcs_engine_id = "011737558837375720776:fsdu1nryfng"
+
+# Enable Algolia DocSearch
+algolia_docsearch = false
+
+# Enable Lunr.js offline search
+offlineSearch = false
+
[params.pushAssets]
css = [
"callouts",
@@ -145,6 +192,80 @@ githubbranch = "v1.14.10"
docsbranch = "release-1.14"
url = "https://v1-14.docs.kubernetes.io"
+# User interface configuration
+[params.ui]
+# Enable to show the side bar menu in its compact state.
+sidebar_menu_compact = false
+# Set to true to disable breadcrumb navigation.
+breadcrumb_disable = false
+# Set to true to hide the sidebar search box (the top nav search box will still be displayed if search is enabled)
+sidebar_search_disable = false
+# Set to false if you don't want to display a logo (/assets/icons/logo.svg) in the top nav bar
+navbar_logo = true
+# Set to true to disable the About link in the site footer
+footer_about_disable = false
+
+# Adds a H2 section titled "Feedback" to the bottom of each doc. The responses are sent to Google Analytics as events.
+# This feature depends on [services.googleAnalytics] and will be disabled if "services.googleAnalytics.id" is not set.
+# If you want this feature, but occasionally need to remove the "Feedback" section from a single page,
+# add "hide_feedback: true" to the page's front matter.
+[params.ui.feedback]
+enable = true
+# The responses that the user sees after clicking "yes" (the page was helpful) or "no" (the page was not helpful).
+yes = 'Glad to hear it! Please tell us how we can improve.'
+no = 'Sorry to hear that. Please tell us how we can improve.'
+
+[params.links]
+# End user relevant links. These will show up on left side of footer and in the community page if you have one.
+[[params.links.user]]
+ name = "User mailing list"
+ url = "https://discuss.kubernetes.io"
+ icon = "fa fa-envelope"
+ desc = "Discussion and help from your fellow users"
+
+[[params.links.user]]
+ name = "Twitter"
+ url = "https://twitter.com/kubernetesio"
+ icon = "fab fa-twitter"
+ desc = "Follow us on Twitter to get the latest news!"
+
+[[params.links.user]]
+ name = "Calendar"
+ url = "https://calendar.google.com/calendar/embed?src=nt2tcnbtbied3l6gi2h29slvc0%40group.calendar.google.com"
+ icon = "fas fa-calendar-alt"
+ desc = "Google Calendar for Kubernetes"
+
+[[params.links.user]]
+ name = "Youtube"
+ url = "https://youtbue.com/kubernetescommunity"
+ icon = "fab fa-youtube"
+ desc = "Youtube community videos"
+
+# Developer relevant links. These will show up on right side of footer and in the community page if you have one.
+[[params.links.developer]]
+ name = "GitHub"
+ url = "https://github.com/kubernetes/kubernetes"
+ icon = "fab fa-github"
+ desc = "Development takes place here!"
+
+[[params.links.developer]]
+ name = "Slack"
+ url = "https://slack.k8s.io"
+ icon = "fab fa-slack"
+ desc = "Chat with other project developers"
+
+[[params.links.developer]]
+ name = "Contribute"
+ url = "https://git.k8s.io/community/contributors/guide"
+ icon = "fas fa-edit"
+ desc = "Contribute to the Kubernetes website"
+
+[[params.links.developer]]
+ name = "Stack Overflow"
+ url = "https://stackoverflow.com/questions/tagged/kubernetes"
+ icon = "fab fa-stack-overflow"
+ desc = "Practical questions and curated answers"
+
# Language definitions.
[languages]
diff --git a/content/en/community/_index.html b/content/en/community/_index.html
index 0f6fb9bc04d..e1ebb9e9cb1 100644
--- a/content/en/community/_index.html
+++ b/content/en/community/_index.html
@@ -17,7 +17,7 @@ cid: community
-
+