rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

tweaks to the responsive layout to improve type

Browse Source
This commit is contained in:
Mark Otto 2011-10-22 22:49:37 -07:00
parent fb7fbdb278
commit b4c0d2a6b2
6 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bootstrap.css vendored
View File

@ -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;

4
bootstrap.min.css vendored
View File

@ -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;}}

30
docs/assets/css/docs.css
View File

@ -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) {

6
docs/index.html
View File

@ -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>

2
lib/responsive.less
View File

@ -10,7 +10,7 @@
// Remove width from containers
.container {
width: auto;
padding: 0 10px;
padding: 0 15px;
}
// Undo negative margin on rows
.row {

7
lib/type.less
View File

@ -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;
}