addressed word wrapping issue & responsive menu

QubesOS/qubes-issues#1841
QubesOS · Apr 3, 2016 · 9822503 · 9822503
1 parent 9d6347d
commit 9822503
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 70 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,5 +1,5 @@
 <!-- Fixed navbar -->
-<nav class="navbar navbar-top navbar-custom">
+<nav class="navbar navbar-custom navbar-static-top">
   <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -9,8 +9,8 @@
         <span class="icon-bar"></span>
       </button>
       <a class="page-link" href="{{ "/" | prepend: site.baseurl | prepend: site.url }}">
-        <img src="{{ "/attachment/icons/128x128/apps/qubes-logo-icon.png" | prepend: site.baseurl | prepend: site.url }}"
-                  width="44" height="44" alt="Qubes OS Project">
+        <img src="{{ "/attachment/icons/128x128/apps/qubes-logo-icon.png" | prepend: site.baseurl | prepend: site.url }}" width="44" height="44" alt="Qubes OS Project">
+        <span><strong>Qubes</strong> OS</span>
       </a>
     </div>
     <div id="navbar" class="navbar-collapse collapse">

diff --git a/_layouts/doc.html b/_layouts/doc.html
@@ -49,7 +49,6 @@ <h5 class="remove-bottom">{{section.title}}</h5>
           </div>
         </div>
         {% include footer.html %}
-        <script src="{{ "/js/jquery.min.js" | prepend: site.baseurl }}"></script>
         <script src="{{ "/js/jquery.toc.js" | prepend: site.baseurl }}"></script>
         <script>
         $(document).ready(function() {

diff --git a/_sass/_header.scss b/_sass/_header.scss
@@ -2,22 +2,42 @@
 * Greyscale overwrites.
 */
 
+.navbar {
+  padding: 14px 0 10px 0;
+  letter-spacing: 0px;
+}
+
 .navbar-custom {
   height: 72px;
   margin-bottom: 0;
   font-family: $ostrich-heavy;
   font-size: 21px;
   letter-spacing: 1px;
   background-color: $body-bg;
-
-  a {
-    font-family: $ostrich-heavy;
-    font-size: 21px;
-    color: $gray-base;
-  }
+  border-bottom: 1px solid $gray-light;
 
   a.page-link {
+    display: inline-block;
     margin-right: 10px;
+
+    span {
+      font-family: $ostrich;
+      font-size: 30px;
+      line-height: 30px;
+      display: none;
+      color: $gray-base;
+
+      strong {
+        font-family: $ostrich-heavy;
+      }
+    }
+  }
+
+  .navbar-collapse a {
+    color: $gray-base;
+    font-family: $ostrich-heavy;
+    font-size: 21px;
+    line-height: 21px;
   }
 
   .nav {
@@ -46,82 +66,75 @@
       }
     }
   }
-}
 
-.navbar.navbar-custom {
-  border-bottom: 1px solid $gray-light;
-}
-
-.navbar-custom .navbar-collapse a {
-  color: $gray-light;
-}
-
-@media(min-width:$screen-xs-max) {
+  // Toggles responsive menu
+  .navbar-toggle {
+    background-color: $color-white;
+    border-color: $gray;
+    margin-top: 5px;
 
-  .navbar {
-    padding: 10px 0;
-    letter-spacing: 0px;
+    &:hover,
+    &:focus {
+      background-color: $gray-light;
 
-  }
-
-  .navbar-custom .navbar-collapse a {
-    color: $gray-base;
-  }
-
-  .navbar-custom.top-nav-collapse {
-    padding: 0;
-    background-color: $gray-base;
-
-    a {
-      color: $gray-base;
-      padding-right: 10px;
-      padding-left: 10px;
+      .icon-bar {
+        background-color: $gray-darker;
+      }
+    }
+    .icon-bar {
+      background-color: $gray-darker;
     }
   }
+}
+
+/* Makes links not wrap */
+@media(max-width: $screen-md-max) {
 
   .navbar-custom {
-    .top-nav-collapse {
-      border-bottom: 1px solid transparentize($gray-base, 0.7);
+    .navbar-collapse {
+      ul.nav-justified > li > a {
+        padding: 10px 5px;
+        letter-spacing: 0px;
+      }
     }
   }
-
-  .navbar-custom .navbar-brand {
-    font-size: 18px;
-  }
 }
 
-/**
- * Site header
- */
-.site-header {
-    min-height: 72px;
+/* Responsive menu */
+@media (max-width: $screen-xs-max) {
 
-    // Positioning context for the mobile navigation icon
-    position: relative;
-}
+  .navbar-custom {
 
-.navbar-brand .logo {
-    width: 40px;
-    height: 40px;
-    vertical-align: middle;
-    margin-right: 4px;
-    margin-top: -4px;
-    display: inline-block;
+    a.page-link {
+      margin-left: 15px;
 
-    path {
-        color: #000;
-        fill: #fff;
+      span {
+        position: relative;
+        top: 5px;
+        left: 15px;
+        display: inline-block;
+      }
     }
-}
 
-.top-nav-collapse {
-    .logo path {
-        color: #fff;
-        fill: #fff;
-    }
-}
+    .navbar-collapse {
+      position: relative;
+      top: 10px;
+      left: 0px;
+      padding: 0px 5px;
+      background-color: $color-white;
+      border-bottom: 1px solid $gray-light;
 
+      ul > li > a {
+        color: $gray-base;
+        padding: 10px 5px;
+        letter-spacing: 1px;
 
-.navbar-nav > li > a {
-  padding-top: 20px;
+        &:hover,
+        &:focus {
+          color: $gray-base;
+          background-color: $gray-light;
+        }
+      }
+    }
+  }
 }
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -79,6 +79,9 @@ $qubes-blue-light:			#99bfff;
 $qubes-purple:					#9f389f;
 $qubes-yellow: 					#e7e532;
 
+$color-white:						#ffffff;
+$color-black:						#000000;
+
 //== Scaffolding
 //
 //## Settings for some of the most global styles.