tweaks to the responsive layout to improve type

diff --git a/bootstrap.css b/bootstrap.css
index aebabeecca145949743609021cee5953b8e37fa9..c055a79c9307899a19632262fd4b351dc0fc66d7 100644 (file)
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,11 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
-<<<<<<< HEAD
- * Date: Sat Oct 22 15:49:12 PDT 2011
-=======
- * Date: Fri Oct 21 11:54:44 CDT 2011
->>>>>>> 2e09ffe3832106fab60dc01cc3159c13029bdf68
+ * Date: Sat Oct 22 22:49:01 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -520,7 +516,7 @@ pre {
   background-color: #f5f5f5;
   display: block;
   padding: 8.5px;
-  margin: 0 0 18px;
+  margin: 0 0 9px;
   line-height: 18px;
   font-size: 12px;
   border: 1px solid #ccc;
@@ -530,7 +526,7 @@ pre {
   border-radius: 3px;
   white-space: pre;
   white-space: pre-wrap;
-  word-wrap: break-word;
+  word-break: break-all;
 }
 /* Forms.less
  * Base styles for various input types, form layouts, and states
@@ -2270,7 +2266,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 @media (max-width: 480px) {
   .container {
     width: auto;
-    padding: 0 10px;
+    padding: 0 15px;
   }
   .row {
     margin-left: 0;

diff --git a/bootstrap.min.css b/bootstrap.min.css
index e35f0d22349c7673b8b6179199e299dd4f6ac3fb..0aa8892072269087d282effb3982a6e3c2c5338b 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -89,7 +89,7 @@ blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;c
 address{display:block;line-height:18px;margin-bottom:18px;}
 code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
 code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
-pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 18px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
+pre{background-color:#f5f5f5;display:block;padding:8.5px;margin:0 0 9px;line-height:18px;font-size:12px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}
 form{margin-bottom:18px;}
 legend{display:block;width:100%;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#404040;border-bottom:1px solid #eee;}
 label,input,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;}
@@ -321,4 +321,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .media-grid li{display:inline;}
 .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
 .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
-@media (max-width: 480px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}
+@media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b618c44b87af5993b65e514bee7f24c9392f53f0..0a31ac9984394934a6ab4ab2b872d605efa2b693 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -21,6 +21,8 @@ section {
 /* Tweak topbar brand link to be super sleek
 -------------------------------------------------- */
 body > .navbar-fixed .brand {
+  padding-right: 0;
+  padding-left: 0;
   float: right;
   font-weight: bold;
   color: #000;
@@ -316,16 +318,24 @@ h2 + table {
 -------------------------------------------------- */
 @media (max-width: 480px) {
 
+  /* Hide the nav for now */
   body > .navbar-fixed .nav {
     display: none;
   }
 
-  .large-bird {
-    display: none;
+  /* Change up some type stuff */
+  h1 small {
+    display: block;
+    line-height: 20px;
   }
 
+  /* Adjust the jumbotron */
+  .jumbotron h1,
+  .jumbotron p {
+    margin-right: 0;
+  }
   .jumbotron h1 {
-    font-size: 36px;
+    font-size: 45px;
     margin-right: 0;
   }
   .jumbotron p {
@@ -338,6 +348,20 @@ h2 + table {
     width: auto;
     margin: 36px 0;
   }
+  .jumbotron .btn {
+    font-size: 18px;
+    padding: 10px 14px;
+  }
+
+  /* Popovers */
+  .large-bird {
+    display: none;
+  }
+  .popover-well .popover-wrapper {
+    margin-left: 0;
+  }
+
+
 }
 
 @media (min-width: 768px) and (max-width: 940px) {

diff --git a/docs/index.html b/docs/index.html
index 49e6d04310e8d94775f743591b2a0ee5e6430e3e..2cb5eb8e40feb0c5c19521a0ac713b5875f723d4 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -630,7 +630,7 @@
       <p>To include a blockquote, wrap <code>&lt;blockquote&gt;</code> around <code>&lt;p&gt;</code> and <code>&lt;small&gt;</code> tags. Use the <code>&lt;small&gt;</code> element to cite your source and you'll get an em dash <code>&amp;mdash;</code> before it.</p>
       <blockquote>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
-        <small>Dr. Julius Hibbert</small>
+        <small>Someone famous</small>
       </blockquote>
     </div>
     <div class="span7">
@@ -2140,7 +2140,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
           <td>Javascript</td>
           <td>
             <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
-<pre class="prettyprint linenums">
+<pre class="prettyprint">
 &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
 &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
 </pre>
@@ -2156,7 +2156,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
           </td>
         </tr>
         <tr>
-          <td>Less Mac app</td>
+          <td>Mac app</td>
           <td>
             <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
             <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>

diff --git a/lib/responsive.less b/lib/responsive.less
index 6cacccad99c6e673f3201f493a46030dd40854c6..75c33b1a8eb1ff53ef8345c2dd6e902873cbab55 100644 (file)
--- a/lib/responsive.less
+++ b/lib/responsive.less
@@ -10,7 +10,7 @@
   // Remove width from containers
   .container {
     width: auto;
-    padding: 0 10px;
+    padding: 0 15px;
   }
   // Undo negative margin on rows
   .row {

diff --git a/lib/type.less b/lib/type.less
index a490bf5fa14640c0467322a9daedd38159b9e228..d092b203daba6d1eaf908dcbf4ef6026b5d93dd1 100644 (file)
--- a/lib/type.less
+++ b/lib/type.less
@@ -24,7 +24,7 @@ p {
 h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
   color: @grayDark;
-  text-rendering: optimizelegibility;
+  text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
     color: @grayLight;
   }
@@ -185,7 +185,7 @@ pre {
   background-color: #f5f5f5;
   display: block;
   padding: (@baseLineHeight - 1) / 2;
-  margin: 0 0 @baseLineHeight;
+  margin: 0 0 @baseLineHeight / 2;
   line-height: @baseLineHeight;
   font-size: 12px;
   border: 1px solid #ccc;
@@ -193,6 +193,5 @@ pre {
   .border-radius(3px);
   white-space: pre;
   white-space: pre-wrap;
-  word-wrap: break-word;
-
+  word-break: break-all;
 }
\ No newline at end of file