mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-24 14:04:09 +03:00
overhaul docs CSS since it was scalable, converted docs mastheads and footers to classes and HTML5 elements, add masthead to js docs page but make it slate so it looks cool and stands out
This commit is contained in:
Mark Otto
+101
-71
@@ -4,6 +4,7 @@
|
||||
Bootstrap's documentation styles
|
||||
Special styles for presenting Bootstrap's documentation and examples
|
||||
*/
|
||||
|
||||
/* Body and structure
|
||||
-------------------------------------------------- */
|
||||
body {
|
||||
@@ -16,7 +17,48 @@ section {
|
||||
section > .row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#masthead, #footer {
|
||||
|
||||
|
||||
/* Jumbotrons
|
||||
-------------------------------------------------- */
|
||||
.jumbotron {
|
||||
padding-top: 40px;
|
||||
}
|
||||
.jumbotron .inner {
|
||||
background: transparent url(../img/grid-18px.png) top center;
|
||||
padding: 45px 0;
|
||||
-webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
|
||||
-moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
|
||||
box-shadow: inset 0 10px 30px rgba(0,0,0,.3);
|
||||
}
|
||||
.jumbotron h1,
|
||||
.jumbotron p {
|
||||
margin-bottom: 9px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.3);
|
||||
}
|
||||
.jumbotron h1 {
|
||||
font-size: 54px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,.5);
|
||||
}
|
||||
.jumbotron p {
|
||||
font-weight: 300;
|
||||
}
|
||||
.jumbotron .lead {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
.jumbotron p a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Specific jumbotrons
|
||||
------------------------- */
|
||||
/* main docs page */
|
||||
.masthead {
|
||||
background-color: #049cd9;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
|
||||
@@ -26,46 +68,50 @@ section > .row {
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */
|
||||
}
|
||||
#masthead div.inner, #footer div.inner {
|
||||
background: transparent url(../img/grid-18px.png) top center;
|
||||
padding: 45px 0;
|
||||
-webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
/* supporting docs pages */
|
||||
.subhead {
|
||||
background-color: #767d80;
|
||||
background-repeat: no-repeat;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
|
||||
background-image: -webkit-linear-gradient(#565d60, #767d80);
|
||||
background-image: -moz-linear-gradient(#565d60, #767d80);
|
||||
background-image: -o-linear-gradient(top, #565d60, #767d80);
|
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */
|
||||
}
|
||||
#masthead h1,
|
||||
#footer h1,
|
||||
#masthead p,
|
||||
#footer p {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0,.3);
|
||||
.subhead .inner {
|
||||
padding: 36px 0 27px;
|
||||
}
|
||||
#masthead p a,
|
||||
#footer p a {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
.subhead h1,
|
||||
.subhead p {
|
||||
text-align: left;
|
||||
}
|
||||
#masthead {
|
||||
padding-top: 40px;
|
||||
.subhead h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
#masthead h1,
|
||||
#masthead p {
|
||||
text-align: center;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
#masthead h1 {
|
||||
font-size: 54px;
|
||||
line-height: 1;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,.5);
|
||||
}
|
||||
#masthead p {
|
||||
font-weight: 300;
|
||||
}
|
||||
#masthead p.lead {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
.subhead p a {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* Footer
|
||||
-------------------------------------------------- */
|
||||
.footer {
|
||||
background-color: #eee;
|
||||
padding: 30px 0;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
-webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
|
||||
-moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
|
||||
box-shadow: inset 0 5px 15px rgba(0,0,0,.025);
|
||||
}
|
||||
.footer p {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
|
||||
/* Quickstart section for getting le code
|
||||
-------------------------------------------------- */
|
||||
.quickstart {
|
||||
background-color: #f5f5f5;
|
||||
background-repeat: repeat-x;
|
||||
@@ -127,16 +173,7 @@ section > .row {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
#footer {
|
||||
margin-top: 80px;
|
||||
}
|
||||
#footer p {
|
||||
margin-bottom: 0;
|
||||
color: rgba(255,255,255,.8)
|
||||
}
|
||||
#footer p.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/* Special grid styles
|
||||
-------------------------------------------------- */
|
||||
@@ -162,6 +199,8 @@ section > .row {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Render mini layout previews
|
||||
-------------------------------------------------- */
|
||||
.diagram,
|
||||
@@ -208,18 +247,20 @@ section > .row {
|
||||
width: 300px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Topbar special styles
|
||||
-------------------------------------------------- */
|
||||
div.topbar-wrapper {
|
||||
.topbar-wrapper {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
margin: 5px 0 15px;
|
||||
}
|
||||
div.topbar-wrapper div.topbar {
|
||||
.topbar-wrapper .topbar {
|
||||
position: absolute;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
div.topbar-wrapper div.topbar .topbar-inner {
|
||||
.topbar-wrapper .topbar .topbar-inner {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-border-radius: 4px;
|
||||
@@ -227,61 +268,50 @@ div.topbar-wrapper div.topbar .topbar-inner {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Topbar special styles for js
|
||||
-------------------------------------------------- */
|
||||
#bootstrap-js div.topbar-wrapper {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
margin: 5px 0 15px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#bootstrap-js div.topbar-wrapper div.topbar {
|
||||
/* Topbar in js docs
|
||||
------------------------- */
|
||||
#bootstrap-js .topbar-wrapper .topbar {
|
||||
position: absolute;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
#bootstrap-js div.topbar-wrapper div.topbar .fill {
|
||||
#bootstrap-js .topbar-wrapper .topbar .topbar-inner {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#bootstrap-js div.topbar-wrapper .container {
|
||||
#bootstrap-js .topbar-wrapper .container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
/* Popover docs
|
||||
-------------------------------------------------- */
|
||||
div.popover-well {
|
||||
.popover-well {
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
div.popover-well div.popover {
|
||||
.popover-well .popover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.popover-well div.popover-wrapper {
|
||||
.popover-well .popover-wrapper {
|
||||
width: 50%;
|
||||
height: 160px;
|
||||
float: left;
|
||||
margin-left: 55px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.popover-well div.popover-menu-wrapper {
|
||||
.popover-well .popover-menu-wrapper {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
img.large-bird {
|
||||
margin: 5px 0 0 310px;
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
|
||||
/* Pretty Print
|
||||
-------------------------------------------------- */
|
||||
PRE.prettyprint {
|
||||
pre.prettyprint {
|
||||
overflow: hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user