kubes 0.1.0 → 0.2.0

data/docs/_sass/table.scss

@@ -0,0 +1,30 @@
+table {
+  width: 100%;
+  max-width: 900px;
+  margin-bottom: 20px;
+  border: 1px solid #dfe2e5;
+}
+
+tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+td {
+  vertical-align: top;
+  border: 1px solid #dfe2e5;
+}
+
+th, td {
+  padding: 10px;
+}
+
+thead th {
+  background-color: #000000;
+  text-transform: uppercase;
+  color: #cdcdce;
+}
+
+tbody td {
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+  color: black;
+}

data/docs/_sass/theme.scss

@@ -0,0 +1,292 @@
+.masthead {
+  h1 {
+    font-size: 2.2em;
+    font-weight: bold;
+  }
+  h2 {
+    font-size: 1.7em;
+    line-height: 1.3em;
+    padding-bottom: 20px;
+  }
+}
+.homepage-logo {
+  margin: auto;
+  text-align: center;
+  display: block;
+  padding-bottom: 30px;
+
+  @media (min-width: 575px) {
+    position: absolute;
+    top: 50%;
+    max-width: none;
+    margin: 0;
+    transform: translateY(-50%);
+  }
+}
+
+.navbar-logo {
+  max-height: 25px;
+  @media (min-width: 992px) {
+    max-height: 55px;
+  }
+}
+
+ol.overview-stages li {
+  padding: 10px 0;
+}
+
+section#main {
+  text-align: center;
+  color: #fff;
+  background: $site-color-primary;
+}
+
+section#main .container {
+  padding-top: 60px;
+  padding-bottom: 50px;
+}
+
+section#main img {
+  display: block;
+  margin: 0 auto 20px;
+}
+
+section#main .intro-text .name {
+  display: block;
+  text-transform: uppercase;
+  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size: 2em;
+  font-weight: 700;
+}
+
+section#main .intro-text .skills {
+  font-size: 1.25em;
+  font-weight: 300;
+}
+
+@media(min-width:768px) {
+  section#main {
+    text-align: left;
+  }
+
+  section#main .container {
+    padding-top: 60px;
+    padding-bottom: 40px;
+  }
+
+  section#main .intro-text .name {
+    font-size: 4.75em;
+  }
+
+  section#main .intro-text .skills {
+    font-size: 1.75em;
+  }
+}
+
+.content-body {
+  text-align: left;
+  margin-top: 30px;
+  @media (min-width: 992px) {
+    margin-top: 35px;
+  }
+}
+
+.reference-nav {
+  margin-top: 30px;
+  margin-bottom: -10px;
+}
+
+footer h3 {
+  margin-bottom: 25px;
+}
+
+footer img.footer-logo {
+  width: 240px;
+}
+
+
+.edit-on-github {
+  font-size: 0.8em;
+  border-top: thin solid white;
+  border-bottom: thin solid white;
+  padding: 20px;
+  margin-top: 60px;
+
+  h2 {
+    font-size: 1.3em;
+  }
+  li {
+    font-size: 0.9em;
+  }
+}
+
+.use-cases {
+  font-size: 1.25em;
+}
+
+.use-cases li {
+  margin-bottom: 15px;
+}
+
+
+// https://coolestguidesontheplanet.com/videodrome/youtube/
+// I added another box wrapper to control the width
+.content-body {
+  .video-box {
+    max-width: 600px;
+    text-align: left;
+    margin: 0 auto 0 0;
+    padding-bottom: 20px;
+    .video-container {
+      position:relative;
+      padding-bottom:56.25%;
+      padding-top:30px;
+      height:0;
+      overflow:hidden;
+    }
+
+    .video-container iframe, .video-container object, .video-container embed {
+      position:absolute;
+      top:0;
+      left:0;
+      width:100%;
+      height:100%;
+    }
+  }
+}
+
+.content-body-list {
+  .video-container iframe, .video-container object, .video-container embed {
+    width: 180px;
+    @media (min-width: 768px) {
+      /* 16:9 ratio */
+      width: 300px;
+      height: 169px;
+    }
+  }
+}
+
+#timeline {
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.learning-content {
+  padding-top: 30px;
+}
+
+.article-box {
+  padding-top: 20px;
+}
+
+.related-body {
+  font-family: "Calibre", -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
+  font-size: 1.15em;
+  padding-bottom: 10px;
+  position: relative;
+  // background-color: yellow;
+  // border: 1px solid red;
+  @media (min-width: 1000px) {
+    margin-top: 0;
+    padding-bottom: 30px;
+    height: 230px;
+  }
+
+  .related-thumbnail {
+    float: left;
+    width: 110px;
+    vertical-align: middle;
+    text-align: center;
+    display: table-cell;
+    height: 70px;
+    // background-color: green;
+    @media (min-width: 768px) {
+      width: 150px;
+      height: 120px;
+    }
+    @media (min-width: 1000px) {
+      width: inherit;
+      height: 160px;
+      text-align: center;
+      // background-color: orange;
+      display: block;
+      float: none;
+    }
+    img.center-crop {
+      object-fit: contain;
+      object-position: center; /* Center the image within the element */
+      height: 64px;
+      @media (min-width: 768px) {
+        height: 110px;
+      }
+      @media (min-width: 1000px) {
+        height: 160px;
+      }
+    }
+  }
+  .related-link {
+    // background-color: red;
+    vertical-align: top;
+    display: table-cell;
+    height: 70px;
+    padding-left: 15px;
+    @media (min-width: 1000px) {
+      height: 50px;
+      display: block;
+      clear: both;
+      padding-top: 10px;
+      margin-bottom: 5px;
+      text-align: center;
+    }
+      a {
+      display: block;
+      vertical-align: middle;
+      line-height: normal;
+    }
+  }
+}
+
+.related-body:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.related-filler {
+  @media (min-width: 1000px) {
+    padding: 30px;
+  }
+}
+
+blockquote {
+  padding: 12px 24px;
+  margin: 0 0 24px;
+  border-left: 5px solid #eee;
+}
+
+ul.toc {
+  list-style-type: none;
+  padding: 5px;
+  margin-left: 0;
+  li {
+    list-style-type: none;
+    padding-left: 5px;
+    margin-left: 0;
+  }
+  ul {
+    padding-left: 10px;
+  }
+}
+
+.cloud-logos {
+  padding-bottom: 30px;
+  text-align: center;
+  img {
+    vertical-align: middle;
+    text-align: center;
+    padding: 20px;
+  }
+}

data/docs/_sass/variables.scss

@@ -0,0 +1,24 @@
+// Variables
+
+// Gray and Brand Colors for use across theme
+
+$theme-primary:    #777;
+$theme-secondary:  #7b4397;
+$theme-tertiary:   #dc2430;
+
+$gray-base:        #000;
+$gray-darker:      lighten($gray-base, 13.5%); // #222
+$gray-dark:        lighten($gray-base, 20%);   // #333
+$gray:             lighten($gray-base, 33.5%); // #555
+$gray-light:       lighten($gray-base, 46.7%); // #777
+$gray-lighter:     lighten($gray-base, 93.5%); // #eee
+
+$brand-twitter:		#1da1f2;
+$brand-facebook:	#3b5998;
+$brand-google-plus:	#dd4b39;
+
+$site-color-primary: #3972c7;
+$site-color-primary-rgb: #18FF9C;
+$site-color-secondary: #2c3e50;
+$site-color-secondary-dark: #233140;
+$site-color-links: #a3c8ff;

data/docs/bin/build

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+bundle exec jekyll build
+bundle exec rake opal:build

data/docs/bin/rerun

@@ -0,0 +1,2 @@
+#!/bin/bash
+exec bundle exec rerun -x --background --pattern 'opal/*.rb' 'rake opal:build'

data/docs/bin/web

@@ -0,0 +1,8 @@
+#!/bin/bash -ex
+
+# Usage:
+#   bin/web
+#   bin/web -P 8888
+
+bundle exec jekyll clean
+exec bundle exec jekyll serve --host 0.0.0.0 "$@"

data/docs/css/main.scss

@@ -0,0 +1,24 @@
+---
+# this ensures Jekyll reads the file to be transformed into CSS later
+# only Main files contain this front matter, not partials.
+---
+
+// base
+@import "variables";
+@import "mixins";
+@import "default";
+
+// structure
+@import "sidebar";
+@import "caret";
+@import "content";
+@import "footer";
+
+// theme
+@import "bootstrap-overrides";
+@import "theme";
+@import "buttons";
+@import "masthead";
+@import "table";
+@import "syntax";
+@import "cta";

data/docs/docs.md

@@ -0,0 +1,7 @@
+---
+title: Overview
+---
+
+## What is kubes?
+
+{% include reference.md %}

data/docs/getting-started.md

@@ -0,0 +1,12 @@
+---
+title: Getting Started
+---
+
+Kubes makes it easier to work with Kubernetes by automating the deployment workflow. It will:
+
+{% include kubes-steps.md %}
+
+Choose an option:
+
+1. [Getting Started with Kubes YAML]({% link _docs/learn/yaml.md %})
+2. [Getting Started with Kubes DSL]({% link _docs/learn/dsl.md %})

data/docs/index.html

@@ -0,0 +1,34 @@
+---
+layout: default
+sidebar: false
+---
+
+<header class="masthead">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-8 col-sm-offset-2">
+        <div class="header-content">
+          <div class="header-content-inner">
+            <h1>Kubes</h1>
+            <h2>Kubes is a Kubernetes Deployment Tool. It builds the docker image, creates the Kubernetes YAML, and runs kubectl apply. It automates the deployment process and saves you precious finger-typing energy.</h2>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-4">
+        <img src="/img/logos/kubes-sign.png" class="homepage-logo" />
+      </div>
+    </div>
+  </div>
+</header>
+
+{% include commands.html %}
+
+<section class="cta">
+  <div class="cta-content">
+    <div class="container">
+      <h2>Learn More</h2>
+      <a href="{% link getting-started.md %}" class="btn btn-outline btn-xl">Quick Start</a>
+    </div>
+  </div>
+  <div class="overlay"></div>
+</section>