Merge pull request #50 from YugaByte/logoresponsive

#48 - new top logo needs to be auto-minimized to the YB tile for smal…
yugabyte · Mar 18, 2019 · 2dad982 · 2dad982
2 parents 5be3e09 + 0e7f431
commit 2dad982
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/docs/layouts/partials/header.html b/docs/layouts/partials/header.html
@@ -3,8 +3,7 @@
   <nav id="nav_bar" class="navbar navbar-expand-lg navbar-inverse d-print scrolled">
     <div class="container-fluid" class="d-flex">
       <a href="https://www.yugabyte.com/" class="navbar-brand">
-        <img alt="YugaByte" src="/images/ybdocs-white.png" class="nav-logo not-scrolled"/>
-        <img alt="YugaByte" src="/images/ybdocs-color.png" class="nav-logo scrolled"/>
+        <div alt="YugaByte" class="nav-logo scrolled"></div>
       </a>
 
       <div class="navbar-search-small">

diff --git a/docs/styles/_navbar.scss b/docs/styles/_navbar.scss
@@ -179,16 +179,30 @@ body {
   }
 
   .navbar-brand {
-    height: $HEADER_HEIGHT;
-    line-height: 70px;
+    height: 75px;
     padding: 0;
-    width: 192px;
+    width: 180px;
     margin-right: 0;
 
     @media screen and (max-width: 991px) {
-      max-width: 35px;
+      max-width: 39px;
       overflow: hidden;
     }
+
+    .nav-logo {
+      width: 100%;
+      line-height: inherit;
+      background-image: url('/images/ybdocs-color.png');
+      background-repeat: no-repeat;
+      background-position: left 23px;
+      background-size: auto 33px;
+      height: 75px;
+
+      @media screen and (max-width: 991px) {
+        background-image: url('/images/yblogo_whitebg.3fea4ef9.png');
+        background-size: auto 33px;
+      }
+    }
   }
 
   .flex-spacer {
@@ -233,7 +247,7 @@ body {
 
   .navbar-text {
     display: block;
-    margin: 0 4px;
+    margin: 0 2px;
     padding: 0;
     line-height: 18px;
     font-size: 18px;