readable: fix navbar issues, closes thomaspark#285

Serle66 · Jul 9, 2014 · 125bedd · 125bedd
1 parent a89faf5
commit 125bedd
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 26 deletions.
diff --git a/readable/bootstrap.css b/readable/bootstrap.css
@@ -3759,7 +3759,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar {
   position: relative;
-  min-height: 50px;
+  min-height: 65px;
   margin-bottom: 22px;
   border: 1px solid transparent;
 }
@@ -3867,10 +3867,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-brand {
   float: left;
-  padding: 14px 15px;
+  padding: 21.5px 15px;
   font-size: 20px;
   line-height: 22px;
-  height: 50px;
+  height: 65px;
 }
 .navbar-brand:hover,
 .navbar-brand:focus {
@@ -3887,8 +3887,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   float: right;
   margin-right: 15px;
   padding: 9px 10px;
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-top: 15.5px;
+  margin-bottom: 15.5px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
@@ -3912,7 +3912,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-nav {
-  margin: 7px -15px;
+  margin: 10.75px -15px;
 }
 .navbar-nav > li > a {
   padding-top: 10px;
@@ -3950,8 +3950,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     float: left;
   }
   .navbar-nav > li > a {
-    padding-top: 14px;
-    padding-bottom: 14px;
+    padding-top: 21.5px;
+    padding-bottom: 21.5px;
   }
   .navbar-nav.navbar-right:last-child {
     margin-right: -15px;
@@ -3973,8 +3973,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin-top: 12.5px;
+  margin-bottom: 12.5px;
 }
 @media (min-width: 768px) {
   .navbar-form .form-group {
@@ -4053,20 +4053,20 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   border-bottom-left-radius: 0;
 }
 .navbar-btn {
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin-top: 12.5px;
+  margin-bottom: 12.5px;
 }
 .navbar-btn.btn-sm {
-  margin-top: 8.5px;
-  margin-bottom: 8.5px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 .navbar-btn.btn-xs {
-  margin-top: 14px;
-  margin-bottom: 14px;
+  margin-top: 21.5px;
+  margin-bottom: 21.5px;
 }
 .navbar-text {
-  margin-top: 14px;
-  margin-bottom: 14px;
+  margin-top: 21.5px;
+  margin-bottom: 21.5px;
 }
 @media (min-width: 768px) {
   .navbar-text {
@@ -6174,6 +6174,11 @@ button.close {
 .navbar {
   font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
+.navbar-nav,
+.navbar-form {
+  margin-left: 0;
+  margin-right: 0;
+}
 .navbar-nav > li > a {
   padding: 8px 12px;
   margin: 12px 6px;
@@ -6194,10 +6199,12 @@ button.close {
   color: #333333;
 }
 .navbar-brand {
-  margin-top: 6px;
+  padding-top: 20px;
 }
-.navbar-form {
-  margin-top: 12px;
+@media (max-width: 768px) {
+  .navbar .navbar-nav > li > a {
+    margin: 0;
+  }
 }
 .btn {
   font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;

diff --git a/readable/bootstrap.min.css b/readable/bootstrap.min.css
diff --git a/readable/bootswatch.less b/readable/bootswatch.less
@@ -9,6 +9,12 @@
 .navbar {
   font-family: @headings-font-family;
 
+  &-nav,
+  &-form {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   &-nav > li > a {
     padding: @padding-base-vertical @padding-base-horizontal;
     margin: 12px 6px;
@@ -34,11 +40,15 @@
   }
 
   &-brand {
-    margin-top: 6px;
+    padding-top: 20px;
   }
+}
 
-  &-form {
-    margin-top: 12px;
+@media (max-width: @grid-float-breakpoint) {
+  .navbar {
+    .navbar-nav > li > a {
+      margin: 0;
+    }
   }
 }
 

diff --git a/readable/variables.less b/readable/variables.less
@@ -335,7 +335,7 @@
 //##
 
 // Basics of a navbar
-@navbar-height:                    50px;
+@navbar-height:                    65px;
 @navbar-margin-bottom:             @line-height-computed;
 @navbar-border-radius:             @border-radius-base;
 @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));