From b4c0d2a6b2fe1bc92c3635cda71b63ee08a05be4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 22 Oct 2011 22:49:37 -0700 Subject: [PATCH] tweaks to the responsive layout to improve type --- bootstrap.css | 12 ++++-------- bootstrap.min.css | 4 ++-- docs/assets/css/docs.css | 30 +++++++++++++++++++++++++++--- docs/index.html | 6 +++--- lib/responsive.less | 2 +- lib/type.less | 7 +++---- 6 files changed, 40 insertions(+), 21 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index aebabeecca..c055a79c93 100644 --- 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 e35f0d2234..0aa8892072 100644 --- 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 b618c44b87..0a31ac9984 100644 --- 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 49e6d04310..2cb5eb8e40 100644 --- a/docs/index.html +++ b/docs/index.html @@ -630,7 +630,7 @@

To include a blockquote, wrap <blockquote> around <p> and <small> tags. Use the <small> element to cite your source and you'll get an em dash &mdash; before it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

- Dr. Julius Hibbert + Someone famous
@@ -2140,7 +2140,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita Javascript

Download the latest Less.js and include the path to it (and Bootstrap) in the head.

-
+
 <link rel="stylesheet/less" href="/path/to/bootstrap.less">
 <script src="/path/to/less.js"></script>
 

@@ -2156,7 +2156,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
           
         
         
-          Less Mac app
+          Mac app
           
             
The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.

             
If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.

diff --git a/lib/responsive.less b/lib/responsive.less
index 6cacccad99..75c33b1a8e 100644
--- 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 a490bf5fa1..d092b203da 100644
--- 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