- Fix logo to display "Quay.io" in the proper font

- Fix the CSS to properly show the menu on smaller screens and to scale down the logo as necessary
- Fix the CSS to have the menu icon be properly sized

static/css/quay.css

@@ -1325,6 +1325,7 @@ i.toggle-icon:hover {
   right: 20px;
   top: 20px;
   color: white;
+  z-index: 100;
 }
 
 .landing .header-bar .user-tools a {
@@ -1348,11 +1349,56 @@ i.toggle-icon:hover {
   font-weight: normal;
 }
 
-@media (max-height: 768px) {
-  .landing {
+@media (max-width: 1032px) {
+   .landing .logo {
+      width: 250px;
    }
 }
 
+@media (max-width: 971px) {
+  .landing .navbar-collapse {
+      background: rgba(0, 0, 0, 0.8);
+      border-radius: 2px;
+   }
+
+    .navbar-header {
+        float: none;
+    }
+
+    .navbar-toggle {
+        display: block;
+        color: white;
+        font-size: 48px;
+        line-height: 28px;
+        padding: 4px;
+    }
+
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+
+    .navbar-nav {
+        float: none!important;
+        margin: 7.5px -15px;
+    }
+
+    .navbar-nav>li {
+        float: none;
+    }
+
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    .navbar-collapse.collapse.in { display: block!important; }
+}
+
 .landing .messages b {
   color: #59B2FF;
 }

static/directives/header-bar.html

@@ -1,7 +1,7 @@
 <!-- Quay -->
 <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" style="padding: 0px; padding-left: 4px; padding-right: 4px;">
-    <span style="font-size: 24px">&equiv;</span>
+    &equiv;
   </button>
   <a class="navbar-brand" href="/" target="{{ appLinkTarget() }}">
     <img src="/static/img/quay-logo-inverted.png">

static/partials/landing-normal.html

@@ -3,7 +3,6 @@
   <div class="landing-filter" ng-class="user.anonymous ? 'landing': 'signedin'"></div>
   <div class="landing-content">
     <img class="logo" src="/static/img/box-logo.png">
-    <span class="product-name">Quay.io</span>
 
     <div class="header-bar"></div>