Merge pull request #11634 from jlmitch5/update-docs-styling

Update docs styling

docsite/_themes/srtd/layout.html

@@ -113,23 +113,8 @@
      }
   </style>
 
-  <!-- Google Code for Remarketing Tag -->
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300'
-  <script type="text/javascript">
+    rel='stylesheet' type='text/css'>
-  /* <![CDATA[ */
-  var google_conversion_id = 972577926;
-  var google_custom_params = window.google_tag_params;
-  var google_remarketing_only = true;
-  /* ]]> */
-  </script>
-  <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
-  </script>
-  <noscript>
-    <div style="display:inline;">
-        <img height="1" width="1" style="border-style:none;" alt=""
-              src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/972577926/?value=0&amp;guid=ON&amp;script=0"/>
-    </div>
-  </noscript>
-  <!-- End of Google Code for Remarketing Tag -->
 
 </head>
 
@@ -140,16 +125,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/>
+      <div style="background-color:#5bbdbf;height=80px;margin:'auto auto auto auto'">
-        <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>
+        <a class="DocSiteProduct-header DocSiteProduct-header--core"
-        <br/>      
+          href="http://docs.ansible.com/ansible/">
+          <div class="DocSiteProduct-productName">
+            <div class="DocSiteProduct-logoText">
+              ANSIBLE
+            </div>
           </div>
-      <div class="wy-side-nav-search" style="background-color:#64C5C7;height=80px;margin:'auto auto auto auto'">
+        </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>

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;
+}