Updates Teleport Theme to be inline with site design. (gravitational#…

…3107) * Updates Teleport Docs Theme to be inline with site design.
ollyg · Oct 25, 2019 · c34e62f · c34e62f
1 parent e6a024b
commit c34e62f
Show file tree

Hide file tree

Showing 29 changed files with 2,183 additions and 1,470 deletions.
diff --git a/docs/theme/base.html b/docs/theme/base.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>{% include "head.html" %}</head>
-<body role="document" class="has-secondary-nav has-side-nav">
+<body class="has-secondary-nav has-side-nav">
   {% include "topnav.html" %}
   {% include "toc.html" %}
 
-  <article class="l-section">
+  <div class="l-section">
     <section id="docs-content" class="l-section-content text-article">
       {% block content %}
         {{ page.content }}
@@ -16,15 +16,15 @@
       {% endblock %}
 
     </section>
-  </article>
+  </div>
   {% include "cta.html" %}
 
+  {%- block grvfooter %}{% endblock %}
   {% include "footer.html" %}
   {% include "scripts.html" %}
   {%- block extrascripts %}{% endblock %}
 </body>
 </html>
-
 {% if page and page.is_homepage %}
 <!--
 MkDocs version : {{ mkdocs_version }}

diff --git a/docs/theme/cta.html b/docs/theme/cta.html
@@ -1,47 +1,46 @@
-<section class="background-dark l-section" id="offerings">
+<section class="l-section">
   <div class="l-section-content grid-center-equalHeight">
+   <!-- TELEPORT ENTERPRISE -->
+   <div class="col-6_md-12">
+    <div class="paper">
+      <h3 class="text-title is-uppercase is-bold is-plum">Teleport Enterprise</h3>
+      <p class="text-body">
+        Teleport Enterprise is built around the open-source core,
+        with premium support and additional, enterprise-grade features. It is for organizations
+        that need to secure critical production infrastructure and meet
+        compliance and audit requirements.
+      </p>
 
-    <!-- TELEPORT ENTERPRISE -->
-    <div class="col-6_md-12">
-      <div class="paper">
-        <h3 class="text-title is-uppercase is-bold is-plum">Teleport Enterprise</h3>
-        <p class="text-body">
-          Teleport Enterprise is built around the open-source core,
-          with premium support and additional, enterprise-grade features. It is for organizations
-          that need to secure critical production infrastructure and meet
-          compliance and audit requirements.
-        </p>
-
-        <a class="is-block button button-primary is-large l-space-top-4" href="/teleport/demo/">Demo Teleport Enterprise</a>
-      </div>
+      <a class="is-block button button-primary is-large l-space-top-4" href="/teleport/demo/">Demo Teleport Enterprise</a>
     </div>
+  </div>
 
-    <!-- TELEPORT COMMUNITY -->
-    <div class="col-6_md-12">
-      <div class="paper">
-        <h3 class="text-title is-plum">
-          Teleport Community
-        </h3>
+  <!-- TELEPORT COMMUNITY -->
+  <div class="col-6_md-12">
+    <div class="paper">
+      <h3 class="text-title is-plum">
+        Teleport Community
+      </h3>
 
-        <p class="text-body">
-          Teleport Community provides modern SSH best practices out
-          of the box for managing elastic infrastructure. Teleport Community
-          is open-source software that anyone can download and install for free.
-        </p>
+      <p class="text-body">
+        Teleport Community provides modern SSH best practices out
+        of the box for managing elastic infrastructure. Teleport Community
+        is open-source software that anyone can download and install for free.
+      </p>
 
-        <p class="text-body is-center l-space-top-2">
-          <iframe class="widget-github"
-            frameborder="0"
-            width="95px"
-            height="20px"
-            scrolling="0"
-            src="https://ghbtns.com/github-btn.html?user=gravitational&amp;repo=teleport&amp;type=star&amp;count=true">
-          </iframe>
-        </p>
+      <p class="text-body is-center l-space-top-2">
+        <iframe class="widget-github"
+          frameborder="0"
+          width="95px"
+          height="20px"
+          scrolling="0"
+          src="https://ghbtns.com/github-btn.html?user=gravitational&amp;repo=teleport&amp;type=star&amp;count=true">
+        </iframe>
+      </p>
 
-        <a class="is-block button button-secondary button-border is-large" href="/teleport/download/">Download Teleport Community</a>
+      <a class="is-block button button-secondary button-border is-large" href="/teleport/download/">Download Teleport Community</a>
 
-      </div>
     </div>
   </div>
+</div>
 </section>
diff --git a/docs/theme/fonts/Colfax-Medium.ttf b/docs/theme/fonts/Colfax-Medium.ttf
diff --git a/docs/theme/fonts/Colfax-Regular.ttf b/docs/theme/fonts/Colfax-Regular.ttf
diff --git a/docs/theme/fonts/FontAwesome.otf b/docs/theme/fonts/FontAwesome.otf
diff --git a/docs/theme/fonts/fontawesome-webfont.eot b/docs/theme/fonts/fontawesome-webfont.eot
diff --git a/docs/theme/fonts/fontawesome-webfont.svg b/docs/theme/fonts/fontawesome-webfont.svg
diff --git a/docs/theme/fonts/fontawesome-webfont.ttf b/docs/theme/fonts/fontawesome-webfont.ttf
diff --git a/docs/theme/fonts/fontawesome-webfont.woff b/docs/theme/fonts/fontawesome-webfont.woff
diff --git a/docs/theme/fonts/fontawesome-webfont.woff2 b/docs/theme/fonts/fontawesome-webfont.woff2
diff --git a/docs/theme/footer.html b/docs/theme/footer.html
@@ -1,6 +1,6 @@
-<div class="launchpad">
-  <div class="grid">
-    <div class="col col_sm-12">
+<footer class="launchpad">
+  <div class="launchpad-launchpad">
+    <div class="launchpad-section">
       <h3>PRODUCTS</h3>
       <ul>
         <li><a href="https://gravitational.com/teleport/">Teleport</a></li>
@@ -9,7 +9,7 @@ <h3>PRODUCTS</h3>
       </ul>
     </div>
 
-    <div class="col col_sm-12">
+    <div class="launchpad-section">
       <h3>LEARNING</h3>
       <ul>
         <li><a href="https://gravitational.com/resources/">Resources</a></li>
@@ -18,7 +18,7 @@ <h3>LEARNING</h3>
       </ul>
     </div>
 
-    <div class="col col_sm-12">
+    <div class="launchpad-section">
       <h3>COMPANY</h3>
       <ul>
         <li><a href="https://gravitational.com/about/">About Us</a></li>
@@ -27,18 +27,25 @@ <h3>COMPANY</h3>
       </ul>
     </div>
 
-    <div class="col col_sm-12">
+    <div class="launchpad-section">
       <h3>GET IN TOUCH</h3>
       <ul>
-        <li><a href="https://gravitational.zendesk.com/hc/en-us">Support Desk</a></li>
+        <li><a href="https://gravitational.zendesk.com/hc/en-us">Customer Support</a></li>
         <li><a href="mailto:[email protected]">[email protected]</a></li>
-        <li><a href="tel:855-867-2538">Phone: (855) 867 2538 </a></li>
+        <li><a href="tel:855-818-9008">Phone: (855) 818 9008 </a></li>
       </ul>
     </div>
 
-    <div class="col col_sm-12">
+    <div class="launchpad-section">
       <h3>CONNECT</h3>
       <ul>
+        <li class="has-icon clearfix">
+          <a class="l-space-right-1" href="https://community.gravitational.com/">
+            <img src="/images/discourse.svg">
+            Community Forum
+          </a>
+        </li>
+
         <li class="has-icon clearfix">
           <a class="l-space-right-1" href="https://github.com/gravitational">
             <img src="/images/github.svg">
@@ -55,12 +62,10 @@ <h3>CONNECT</h3>
       </ul>
     </div>
   </div>
-</div>
 
-<footer class="footer clearfix">
-  <p>&copy; Gravitational, Inc. All Rights Reserved</p>
-  <nav>
+  <div class="launchpad-copyright">
+    &copy; Gravitational, Inc. All Rights Reserved
     <a href="https://gravitational.com/tos/" class="l-space-right-1">Terms of Service</a>
     <a href="https://gravitational.com/privacy/" class="l-space-left-1">Privacy Policy</a>
-  </nav>
+  </div>
 </footer>
diff --git a/docs/theme/head.html b/docs/theme/head.html
@@ -4,17 +4,16 @@
 {% if config.site_description %}<meta name="description" content="{{ config.site_description }}">{% endif %}
 {% if config.site_author %}<meta name="author" content="{{ config.site_author }}">{% endif %}
 
+<link rel="stylesheet" href="{{ base_url }}/src/docs.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"  />
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900" />
-<link rel="stylesheet" href="{{ base_url }}/src/docs.css">
-
 {%- for path in extra_css %}
 <link href="{{ path }}" rel="stylesheet">
 {%- endfor %}
 
 <link rel="shortcut icon" href="https://gravitational.com/favicon.ico" type="image/x-icon" />
 
-{%- block extrahead %}{% endblock %}
+{%- block extrahead %} {% endblock %}
 
 {% block htmltitle %}
 <title>{% if page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>

diff --git a/docs/theme/images/diagram-teleport.png b/docs/theme/images/diagram-teleport.png
diff --git a/docs/theme/images/discourse.svg b/docs/theme/images/discourse.svg