update styling and add documentation nav bar

9 years ago · 69fbd0472f
parent 36c9eeced5
commit 69fbd0472f
3 changed files with 104 additions and 5 deletions
--- a/docsite/_themes/srtd/layout.html
+++ b/docsite/_themes/srtd/layout.html
@ -131,6 +131,9 @@
  </noscript>
  End of Google Code for Remarketing Tag -->

+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300'
+    rel='stylesheet' type='text/css'>
+
 </head>

 <body class="wy-body-for-nav">
@ -140,16 +143,32 @@
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PSB293');</script>
  <!-- End Google Tag Manager -->

+  <a class="DocSite-nav" href="http://docs.ansible.com/">
+    <img class="DocSiteNav-logo"
+      src="{{ pathto('_static/', 1) }}images/logo_invert.png"
+      alt="Ansible Logo">
+    <div class="DocSiteNav-title">
+      Documentation
+    </div>
+  </a>
+
  <div class="wy-grid-for-nav">

    {# SIDE NAV, TOGGLES ON MOBILE #}
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
-      <div style='background-color:#64C5C7'>
-        <br/>
-        <center><a href="{{ pathto(master_doc) }}"><img src="http://cdn2.hubspot.net/hub/330046/file-445792629-png/ANSI_logotype_web_white.png" style="border-radius:0;background-color:#64C5C7;width:214px;height:26px;margin:'auto auto auto auto'"></a></center>
-        <br/>
+
+      <div style="background-color:#5bbdbf;height=80px;margin:'auto auto auto auto'">
+        <a class="DocSiteProduct-header DocSiteProduct-header--core"
+          href="http://docs.ansible.com/ansible/">
+          <div class="DocSiteProduct-productName">
+            <div class="DocSiteProduct-logoText">
+              ANSIBLE
            </div>
-      <div class="wy-side-nav-search" style="background-color:#64C5C7;height=80px;margin:'auto auto auto auto'">
+          </div>
+        </a>
+      </div>
+
+      <div class="wy-side-nav-search" style="background-color:#5bbdbf;height=80px;margin:'auto auto auto auto'">
        <!-- <a href="{{ pathto(master_doc) }}" class="icon icon-home"> {{ project }}</a> -->
        {% include "searchbox.html" %}
      </div>
--- a/docsite/_themes/srtd/static/css/theme.css
+++ b/docsite/_themes/srtd/static/css/theme.css
@ -4634,3 +4634,83 @@ span[id*='MathJax-Span'] {
 #search-box-id {
    padding-right: 25px;
 }
+
+.DocSiteProduct-header {
+    flex: 1;
+    -webkit-flex: 1;
+    padding: 20px;
+    padding-top: 10px;
+    padding-bottom: 20px;
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;
+    align-items: center;
+    -webkit-align-items: center;
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start;
+    margin-left: 20px;
+    margin-right: 20px;
+    text-decoration: none;
+    font-weight: 400;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.DocSiteProduct-header:active,
+.DocSiteProduct-header:focus {
+    color: #fff;
+}
+
+.DocSiteProduct-header:visited {
+    color: #fff;
+}
+
+.DocSiteProduct-header--core {
+    font-size: 25px;
+    background-color: #5bbdbf;
+    border: 2px solid #5bbdbf;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    color: #fff;
+}
+
+.DocSiteProduct-headerAlign {
+    width: 100%;
+}
+
+.DocSiteProduct-logo {
+    width: 60px;
+    height: 60px;
+    margin-bottom: -9px;
+}
+
+.DocSiteProduct-logoText {
+    margin-top: 6px;
+    font-size: 25px;
+}
+
+.DocSite-nav {
+    flex: initial;
+    -webkit-flex: initial;
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: row;
+    -webkit-flex-direction: row;
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start;
+    padding: 15px;
+    background-color: #000;
+    text-decoration: none;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.DocSiteNav-logo {
+    width: 28px;
+    height: 28px;
+    margin-right: 8px;
+}
+
+.DocSiteNav-title {
+    color: #fff;
+    font-size: 20px;
+}
--- a/docsite/_themes/srtd/static/images/logo_invert.png
+++ b/docsite/_themes/srtd/static/images/logo_invert.png