Mercurial > hg > Members > nobuyasu > TwitterBootstrap

comparison css/docs.css @ 0:cfa3e2e51af7 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add some files
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Wed, 19 Sep 2012 22:11:23 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:cfa3e2e51af7
1 /* Add additional stylesheets below
2 -------------------------------------------------- */
3 /*
4 Bootstrap's documentation styles
5 Special styles for presenting Bootstrap's documentation and examples
6 */
7
8
9
10 /* Body and structure
11 -------------------------------------------------- */
12
13 body {
14 position: relative;
15 padding-top: 40px;
16 }
17
18 /* Code in headings */
19 h3 code {
20 font-size: 14px;
21 font-weight: normal;
22 }
23
24
25
26 /* Tweak navbar brand link to be super sleek
27 -------------------------------------------------- */
28
29 body > .navbar {
30 font-size: 13px;
31 }
32
33 /* Change the docs' brand */
34 body > .navbar .brand {
35 padding-right: 0;
36 padding-left: 0;
37 margin-left: 20px;
38 float: right;
39 font-weight: bold;
40 color: #000;
41 text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
42 -webkit-transition: all .2s linear;
43 -moz-transition: all .2s linear;
44 transition: all .2s linear;
45 }
46 body > .navbar .brand:hover {
47 text-decoration: none;
48 text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
49 }
50
51
52 /* Sections
53 -------------------------------------------------- */
54
55 /* padding for in-page bookmarks and fixed navbar */
56 section {
57 padding-top: 30px;
58 }
59 section > .page-header,
60 section > .lead {
61 color: #5a5a5a;
62 }
63 section > ul li {
64 margin-bottom: 5px;
65 }
66
67 /* Separators (hr) */
68 .bs-docs-separator {
69 margin: 40px 0 39px;
70 }
71
72 /* Faded out hr */
73 hr.soften {
74 height: 1px;
75 margin: 70px 0;
76 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
77 background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
78 background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
79 background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
80 border: 0;
81 }
82
83
84
85 /* Jumbotrons
86 -------------------------------------------------- */
87
88 /* Base class
89 ------------------------- */
90 .jumbotron {
91 position: relative;
92 padding: 40px 0;
93 color: #fff;
94 text-align: center;
95 text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
96 background: #020031; /* Old browsers */
97 background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
98 background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
99 background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
100 background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
101 background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
102 background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
103 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
104 -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
105 -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
106 box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
107 }
108 .jumbotron h1 {
109 font-size: 80px;
110 font-weight: bold;
111 letter-spacing: -1px;
112 line-height: 1;
113 }
114 .jumbotron p {
115 font-size: 24px;
116 font-weight: 300;
117 line-height: 30px;
118 margin-bottom: 30px;
119 }
120
121 /* Link styles (used on .masthead-links as well) */
122 .jumbotron a {
123 color: #fff;
124 color: rgba(255,255,255,.5);
125 -webkit-transition: all .2s ease-in-out;
126 -moz-transition: all .2s ease-in-out;
127 transition: all .2s ease-in-out;
128 }
129 .jumbotron a:hover {
130 color: #fff;
131 text-shadow: 0 0 10px rgba(255,255,255,.25);
132 }
133
134 /* Download button */
135 .masthead .btn {
136 padding: 14px 24px;
137 font-size: 24px;
138 font-weight: 200;
139 color: #fff; /* redeclare to override the `.jumbotron a` */
140 border: 0;
141 -webkit-border-radius: 6px;
142 -moz-border-radius: 6px;
143 border-radius: 6px;
144 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
145 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
146 box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
147 -webkit-transition: none;
148 -moz-transition: none;
149 transition: none;
150 }
151 .masthead .btn:hover {
152 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
153 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
154 box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
155 }
156 .masthead .btn:active {
157 -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
158 -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
159 box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
160 }
161
162
163 /* Pattern overlay
164 ------------------------- */
165 .jumbotron .container {
166 position: relative;
167 z-index: 2;
168 }
169 .jumbotron:after {
170 content: '';
171 display: block;
172 position: absolute;
173 top: 0;
174 right: 0;
175 bottom: 0;
176 left: 0;
177 background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
178 opacity: .4;
179 }
180
181 /* Masthead (docs home)
182 ------------------------- */
183 .masthead {
184 padding: 70px 0 80px;
185 margin-bottom: 0;
186 color: #fff;
187 }
188 .masthead h1 {
189 font-size: 120px;
190 line-height: 1;
191 letter-spacing: -2px;
192 }
193 .masthead p {
194 font-size: 40px;
195 font-weight: 200;
196 line-height: 1.25;
197 }
198
199 /* Textual links in masthead */
200 .masthead-links {
201 margin: 0;
202 list-style: none;
203 }
204 .masthead-links li {
205 display: inline;
206 padding: 0 10px;
207 color: rgba(255,255,255,.25);
208 }
209
210 /* Social proof buttons from GitHub & Twitter */
211 .bs-docs-social {
212 padding: 15px 0;
213 text-align: center;
214 background-color: #f5f5f5;
215 border-top: 1px solid #fff;
216 border-bottom: 1px solid #ddd;
217 }
218
219 /* Quick links on Home */
220 .bs-docs-social-buttons {
221 margin-left: 0;
222 margin-bottom: 0;
223 padding-left: 0;
224 list-style: none;
225 }
226 .bs-docs-social-buttons li {
227 display: inline-block;
228 padding: 5px 8px;
229 line-height: 1;
230 *display: inline;
231 *zoom: 1;
232 }
233
234 /* Subhead (other pages)
235 ------------------------- */
236 .subhead {
237 text-align: left;
238 border-bottom: 1px solid #ddd;
239 }
240 .subhead h1 {
241 font-size: 60px;
242 }
243 .subhead p {
244 margin-bottom: 20px;
245 }
246 .subhead .navbar {
247 display: none;
248 }
249
250
251
252 /* Marketing section of Overview
253 -------------------------------------------------- */
254
255 .marketing {
256 text-align: center;
257 color: #5a5a5a;
258 }
259 .marketing h1 {
260 margin: 60px 0 10px;
261 font-size: 60px;
262 font-weight: 200;
263 line-height: 1;
264 letter-spacing: -1px;
265 }
266 .marketing h2 {
267 font-weight: 200;
268 margin-bottom: 5px;
269 }
270 .marketing p {
271 font-size: 16px;
272 line-height: 1.5;
273 }
274 .marketing .marketing-byline {
275 margin-bottom: 40px;
276 font-size: 20px;
277 font-weight: 300;
278 line-height: 25px;
279 color: #999;
280 }
281 .marketing img {
282 display: block;
283 margin: 0 auto 30px;
284 }
285
286
287
288 /* Footer
289 -------------------------------------------------- */
290
291 .footer {
292 padding: 70px 0;
293 margin-top: 70px;
294 border-top: 1px solid #e5e5e5;
295 background-color: #f5f5f5;
296 }
297 .footer p {
298 margin-bottom: 0;
299 color: #777;
300 }
301 .footer-links {
302 margin: 10px 0;
303 }
304 .footer-links li {
305 display: inline;
306 margin-right: 10px;
307 }
308
309
310
311 /* Special grid styles
312 -------------------------------------------------- */
313
314 .show-grid {
315 margin-top: 10px;
316 margin-bottom: 20px;
317 }
318 .show-grid [class*="span"] {
319 background-color: #eee;
320 text-align: center;
321 -webkit-border-radius: 3px;
322 -moz-border-radius: 3px;
323 border-radius: 3px;
324 min-height: 40px;
325 line-height: 40px;
326 }
327 .show-grid:hover [class*="span"] {
328 background: #ddd;
329 }
330 .show-grid .show-grid {
331 margin-top: 0;
332 margin-bottom: 0;
333 }
334 .show-grid .show-grid [class*="span"] {
335 background-color: #ccc;
336 }
337
338
339
340 /* Mini layout previews
341 -------------------------------------------------- */
342 .mini-layout {
343 border: 1px solid #ddd;
344 -webkit-border-radius: 6px;
345 -moz-border-radius: 6px;
346 border-radius: 6px;
347 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
348 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
349 box-shadow: 0 1px 2px rgba(0,0,0,.075);
350 }
351 .mini-layout,
352 .mini-layout .mini-layout-body,
353 .mini-layout.fluid .mini-layout-sidebar {
354 height: 300px;
355 }
356 .mini-layout {
357 margin-bottom: 20px;
358 padding: 9px;
359 }
360 .mini-layout div {
361 -webkit-border-radius: 3px;
362 -moz-border-radius: 3px;
363 border-radius: 3px;
364 }
365 .mini-layout .mini-layout-body {
366 background-color: #dceaf4;
367 margin: 0 auto;
368 width: 70%;
369 }
370 .mini-layout.fluid .mini-layout-sidebar,
371 .mini-layout.fluid .mini-layout-header,
372 .mini-layout.fluid .mini-layout-body {
373 float: left;
374 }
375 .mini-layout.fluid .mini-layout-sidebar {
376 background-color: #bbd8e9;
377 width: 20%;
378 }
379 .mini-layout.fluid .mini-layout-body {
380 width: 77.5%;
381 margin-left: 2.5%;
382 }
383
384
385
386 /* Download page
387 -------------------------------------------------- */
388
389 .download .page-header {
390 margin-top: 36px;
391 }
392 .page-header .toggle-all {
393 margin-top: 5px;
394 }
395
396 /* Space out h3s when following a section */
397 .download h3 {
398 margin-bottom: 5px;
399 }
400 .download-builder input + h3,
401 .download-builder .checkbox + h3 {
402 margin-top: 9px;
403 }
404
405 /* Fields for variables */
406 .download-builder input[type=text] {
407 margin-bottom: 9px;
408 font-family: Menlo, Monaco, "Courier New", monospace;
409 font-size: 12px;
410 color: #d14;
411 }
412 .download-builder input[type=text]:focus {
413 background-color: #fff;
414 }
415
416 /* Custom, larger checkbox labels */
417 .download .checkbox {
418 padding: 6px 10px 6px 25px;
419 font-size: 13px;
420 line-height: 18px;
421 color: #555;
422 background-color: #f9f9f9;
423 -webkit-border-radius: 3px;
424 -moz-border-radius: 3px;
425 border-radius: 3px;
426 cursor: pointer;
427 }
428 .download .checkbox:hover {
429 color: #333;
430 background-color: #f5f5f5;
431 }
432 .download .checkbox small {
433 font-size: 12px;
434 color: #777;
435 }
436
437 /* Variables section */
438 #variables label {
439 margin-bottom: 0;
440 }
441
442 /* Giant download button */
443 .download-btn {
444 margin: 36px 0 108px;
445 }
446 #download p,
447 #download h4 {
448 max-width: 50%;
449 margin: 0 auto;
450 color: #999;
451 text-align: center;
452 }
453 #download h4 {
454 margin-bottom: 0;
455 }
456 #download p {
457 margin-bottom: 18px;
458 }
459 .download-btn .btn {
460 display: block;
461 width: auto;
462 padding: 19px 24px;
463 margin-bottom: 27px;
464 font-size: 30px;
465 line-height: 1;
466 text-align: center;
467 -webkit-border-radius: 6px;
468 -moz-border-radius: 6px;
469 border-radius: 6px;
470 }
471
472
473
474 /* Misc
475 -------------------------------------------------- */
476
477 /* Make tables spaced out a bit more */
478 h2 + table,
479 h3 + table,
480 h4 + table,
481 h2 + .row {
482 margin-top: 5px;
483 }
484
485 /* Example sites showcase */
486 .example-sites {
487 xmargin-left: 20px;
488 }
489 .example-sites img {
490 max-width: 100%;
491 margin: 0 auto;
492 }
493
494 .scrollspy-example {
495 height: 200px;
496 overflow: auto;
497 position: relative;
498 }
499
500
501 /* Fake the :focus state to demo it */
502 .focused {
503 border-color: rgba(82,168,236,.8);
504 -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
505 -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
506 box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
507 outline: 0;
508 }
509
510 /* For input sizes, make them display block */
511 .docs-input-sizes select,
512 .docs-input-sizes input[type=text] {
513 display: block;
514 margin-bottom: 9px;
515 }
516
517 /* Icons
518 ------------------------- */
519 .the-icons {
520 margin-left: 0;
521 list-style: none;
522 }
523 .the-icons li {
524 float: left;
525 width: 25%;
526 line-height: 25px;
527 }
528 .the-icons i:hover {
529 background-color: rgba(255,0,0,.25);
530 }
531
532 /* Example page
533 ------------------------- */
534 .bootstrap-examples p {
535 font-size: 13px;
536 line-height: 18px;
537 }
538 .bootstrap-examples .thumbnail {
539 margin-bottom: 9px;
540 background-color: #fff;
541 }
542
543
544
545 /* Bootstrap code examples
546 -------------------------------------------------- */
547
548 /* Base class */
549 .bs-docs-example {
550 position: relative;
551 margin: 15px 0;
552 padding: 39px 19px 14px;
553 *padding-top: 19px;
554 background-color: #fff;
555 border: 1px solid #ddd;
556 -webkit-border-radius: 4px;
557 -moz-border-radius: 4px;
558 border-radius: 4px;
559 }
560
561 /* Echo out a label for the example */
562 .bs-docs-example:after {
563 content: "Example";
564 position: absolute;
565 top: -1px;
566 left: -1px;
567 padding: 3px 7px;
568 font-size: 12px;
569 font-weight: bold;
570 background-color: #f5f5f5;
571 border: 1px solid #ddd;
572 color: #9da0a4;
573 -webkit-border-radius: 4px 0 4px 0;
574 -moz-border-radius: 4px 0 4px 0;
575 border-radius: 4px 0 4px 0;
576 }
577
578 /* Remove spacing between an example and it's code */
579 .bs-docs-example + .prettyprint {
580 margin-top: -20px;
581 padding-top: 15px;
582 }
583
584 /* Tweak examples
585 ------------------------- */
586 .bs-docs-example > p:last-child {
587 margin-bottom: 0;
588 }
589 .bs-docs-example .table,
590 .bs-docs-example .progress,
591 .bs-docs-example .well,
592 .bs-docs-example .alert,
593 .bs-docs-example .hero-unit,
594 .bs-docs-example .pagination,
595 .bs-docs-example .navbar,
596 .bs-docs-example > .nav,
597 .bs-docs-example blockquote {
598 margin-bottom: 5px;
599 }
600 .bs-docs-example .pagination {
601 margin-top: 0;
602 }
603 .bs-navbar-top-example,
604 .bs-navbar-bottom-example {
605 z-index: 1;
606 padding: 0;
607 height: 90px;
608 overflow: hidden; /* cut the drop shadows off */
609 }
610 .bs-navbar-top-example .navbar-fixed-top,
611 .bs-navbar-bottom-example .navbar-fixed-bottom {
612 margin-left: 0;
613 margin-right: 0;
614 }
615 .bs-navbar-top-example {
616 -webkit-border-radius: 0 0 4px 4px;
617 -moz-border-radius: 0 0 4px 4px;
618 border-radius: 0 0 4px 4px;
619 }
620 .bs-navbar-top-example:after {
621 top: auto;
622 bottom: -1px;
623 -webkit-border-radius: 0 4px 0 4px;
624 -moz-border-radius: 0 4px 0 4px;
625 border-radius: 0 4px 0 4px;
626 }
627 .bs-navbar-bottom-example {
628 -webkit-border-radius: 4px 4px 0 0;
629 -moz-border-radius: 4px 4px 0 0;
630 border-radius: 4px 4px 0 0;
631 }
632 .bs-navbar-bottom-example .navbar {
633 margin-bottom: 0;
634 }
635 form.bs-docs-example {
636 padding-bottom: 19px;
637 }
638
639 /* Images */
640 .bs-docs-example-images img {
641 margin: 10px;
642 display: inline-block;
643 }
644
645 /* Tooltips */
646 .bs-docs-tooltip-examples {
647 text-align: center;
648 margin: 0 0 10px;
649 list-style: none;
650 }
651 .bs-docs-tooltip-examples li {
652 display: inline;
653 padding: 0 10px;
654 }
655
656 /* Popovers */
657 .bs-docs-example-popover {
658 padding-bottom: 24px;
659 background-color: #f9f9f9;
660 }
661 .bs-docs-example-popover .popover {
662 position: relative;
663 display: block;
664 float: left;
665 width: 260px;
666 margin: 20px;
667 }
668
669
670
671 /* Responsive docs
672 -------------------------------------------------- */
673
674 /* Utility classes table
675 ------------------------- */
676 .responsive-utilities th small {
677 display: block;
678 font-weight: normal;
679 color: #999;
680 }
681 .responsive-utilities tbody th {
682 font-weight: normal;
683 }
684 .responsive-utilities td {
685 text-align: center;
686 }
687 .responsive-utilities td.is-visible {
688 color: #468847;
689 background-color: #dff0d8 !important;
690 }
691 .responsive-utilities td.is-hidden {
692 color: #ccc;
693 background-color: #f9f9f9 !important;
694 }
695
696 /* Responsive tests
697 ------------------------- */
698 .responsive-utilities-test {
699 margin-top: 5px;
700 margin-left: 0;
701 list-style: none;
702 overflow: hidden; /* clear floats */
703 }
704 .responsive-utilities-test li {
705 position: relative;
706 float: left;
707 width: 25%;
708 height: 43px;
709 font-size: 14px;
710 font-weight: bold;
711 line-height: 43px;
712 color: #999;
713 text-align: center;
714 border: 1px solid #ddd;
715 -webkit-border-radius: 4px;
716 -moz-border-radius: 4px;
717 border-radius: 4px;
718 }
719 .responsive-utilities-test li + li {
720 margin-left: 10px;
721 }
722 .responsive-utilities-test span {
723 position: absolute;
724 top: -1px;
725 left: -1px;
726 right: -1px;
727 bottom: -1px;
728 -webkit-border-radius: 4px;
729 -moz-border-radius: 4px;
730 border-radius: 4px;
731 }
732 .responsive-utilities-test span {
733 color: #468847;
734 background-color: #dff0d8;
735 border: 1px solid #d6e9c6;
736 }
737
738
739
740 /* Sidenav for Docs
741 -------------------------------------------------- */
742
743 .bs-docs-sidenav {
744 width: 228px;
745 margin: 30px 0 0;
746 padding: 0;
747 background-color: #fff;
748 -webkit-border-radius: 6px;
749 -moz-border-radius: 6px;
750 border-radius: 6px;
751 -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
752 -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
753 box-shadow: 0 1px 4px rgba(0,0,0,.065);
754 }
755 .bs-docs-sidenav > li > a {
756 display: block;
757 *width: 190px;
758 margin: 0 0 -1px;
759 padding: 8px 14px;
760 border: 1px solid #e5e5e5;
761 }
762 .bs-docs-sidenav > li:first-child > a {
763 -webkit-border-radius: 6px 6px 0 0;
764 -moz-border-radius: 6px 6px 0 0;
765 border-radius: 6px 6px 0 0;
766 }
767 .bs-docs-sidenav > li:last-child > a {
768 -webkit-border-radius: 0 0 6px 6px;
769 -moz-border-radius: 0 0 6px 6px;
770 border-radius: 0 0 6px 6px;
771 }
772 .bs-docs-sidenav > .active > a {
773 position: relative;
774 z-index: 2;
775 padding: 9px 15px;
776 border: 0;
777 text-shadow: 0 1px 0 rgba(0,0,0,.15);
778 -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
779 -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
780 box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
781 }
782 /* Chevrons */
783 .bs-docs-sidenav .icon-chevron-right {
784 float: right;
785 margin-top: 2px;
786 margin-right: -6px;
787 opacity: .25;
788 }
789 .bs-docs-sidenav > li > a:hover {
790 background-color: #f5f5f5;
791 }
792 .bs-docs-sidenav a:hover .icon-chevron-right {
793 opacity: .5;
794 }
795 .bs-docs-sidenav .active .icon-chevron-right,
796 .bs-docs-sidenav .active a:hover .icon-chevron-right {
797 background-image: url(../img/glyphicons-halflings-white.png);
798 opacity: 1;
799 }
800 .bs-docs-sidenav.affix {
801 top: 40px;
802 }
803 .bs-docs-sidenav.affix-bottom {
804 position: absolute;
805 top: auto;
806 bottom: 270px;
807 }
808
809
810
811
812 /* Responsive
813 -------------------------------------------------- */
814
815 /* Desktop large
816 ------------------------- */
817 @media (min-width: 1200px) {
818 .bs-docs-container {
819 max-width: 970px;
820 }
821 .bs-docs-sidenav {
822 width: 258px;
823 }
824 }
825
826 /* Desktop
827 ------------------------- */
828 @media (max-width: 980px) {
829 /* Unfloat brand */
830 body > .navbar-fixed-top .brand {
831 float: left;
832 margin-left: 0;
833 padding-left: 10px;
834 padding-right: 10px;
835 }
836
837 /* Inline-block quick links for more spacing */
838 .quick-links li {
839 display: inline-block;
840 margin: 5px;
841 }
842
843 /* When affixed, space properly */
844 .bs-docs-sidenav {
845 top: 0;
846 margin-top: 30px;
847 margin-right: 0;
848 }
849 }
850
851 /* Tablet to desktop
852 ------------------------- */
853 @media (min-width: 768px) and (max-width: 980px) {
854 /* Remove any padding from the body */
855 body {
856 padding-top: 0;
857 }
858 /* Widen masthead and social buttons to fill body padding */
859 .jumbotron {
860 margin-top: -20px; /* Offset bottom margin on .navbar */
861 }
862 /* Adjust sidenav width */
863 .bs-docs-sidenav {
864 width: 166px;
865 margin-top: 20px;
866 }
867 .bs-docs-sidenav.affix {
868 top: 0;
869 }
870 }
871
872 /* Tablet
873 ------------------------- */
874 @media (max-width: 767px) {
875 /* Remove any padding from the body */
876 body {
877 padding-top: 0;
878 }
879
880 /* Widen masthead and social buttons to fill body padding */
881 .jumbotron {
882 padding: 40px 20px;
883 margin-top: -20px; /* Offset bottom margin on .navbar */
884 margin-right: -20px;
885 margin-left: -20px;
886 }
887 .masthead h1 {
888 font-size: 90px;
889 }
890 .masthead p,
891 .masthead .btn {
892 font-size: 24px;
893 }
894 .marketing .span4 {
895 margin-bottom: 40px;
896 }
897 .bs-docs-social {
898 margin: 0 -20px;
899 }
900
901 /* Space out the show-grid examples */
902 .show-grid [class*="span"] {
903 margin-bottom: 5px;
904 }
905
906 /* Sidenav */
907 .bs-docs-sidenav {
908 width: auto;
909 margin-bottom: 20px;
910 }
911 .bs-docs-sidenav.affix {
912 position: static;
913 width: auto;
914 top: 0;
915 }
916
917 /* Unfloat the back to top link in footer */
918 .footer {
919 margin-left: -20px;
920 margin-right: -20px;
921 padding-left: 20px;
922 padding-right: 20px;
923 }
924 .footer p {
925 margin-bottom: 9px;
926 }
927 }
928
929 /* Landscape phones
930 ------------------------- */
931 @media (max-width: 480px) {
932 /* Remove padding above jumbotron */
933 body {
934 padding-top: 0;
935 }
936
937 /* Change up some type stuff */
938 h2 small {
939 display: block;
940 }
941
942 /* Downsize the jumbotrons */
943 .jumbotron h1 {
944 font-size: 60px;
945 }
946 .jumbotron p,
947 .jumbotron .btn {
948 font-size: 20px;
949 }
950 .jumbotron .btn {
951 display: block;
952 margin: 0 auto;
953 }
954
955 /* center align subhead text like the masthead */
956 .subhead h1,
957 .subhead p {
958 text-align: center;
959 }
960
961 /* Marketing on home */
962 .marketing h1 {
963 font-size: 40px;
964 }
965
966 /* center example sites */
967 .example-sites {
968 margin-left: 0;
969 }
970 .example-sites > li {
971 float: none;
972 display: block;
973 max-width: 280px;
974 margin: 0 auto 18px;
975 text-align: center;
976 }
977 .example-sites .thumbnail > img {
978 max-width: 270px;
979 }
980
981 /* Do our best to make tables work in narrow viewports */
982 table code {
983 white-space: normal;
984 word-wrap: break-word;
985 word-break: break-all;
986 }
987
988 /* Modal example */
989 .modal-example .modal {
990 position: relative;
991 top: auto;
992 right: auto;
993 bottom: auto;
994 left: auto;
995 }
996
997 /* Unfloat the back to top in footer to prevent odd text wrapping */
998 .footer .pull-right {
999 float: none;
1000 }
1001 }