diff options
| author | Mark Otto <[email protected]> | 2013-12-31 13:53:33 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-12-31 13:53:33 -0800 |
| commit | b253cb2c1e34a41940c4933fb95c46da833fc5f9 (patch) | |
| tree | e5a40b963eba273c42e4aad21fb3858a657002dd /docs/examples/carousel/carousel.css | |
| parent | 9e1153d0498a9e9612c1db85922642fe2aa38c2a (diff) | |
| parent | 8812856de1ce17bb2f482c75370fb2e3db7ac6de (diff) | |
| download | bootstrap-b253cb2c1e34a41940c4933fb95c46da833fc5f9.tar.xz bootstrap-b253cb2c1e34a41940c4933fb95c46da833fc5f9.zip | |
Merge branch 'master' into docs_derp
Conflicts:
_config.yml
docs/_includes/footer.html
docs/_includes/nav-main.html
docs/_includes/old-bs-docs.html
docs/_layouts/default.html
docs/_layouts/home.html
docs/getting-started.html
docs/index.html
Diffstat (limited to 'docs/examples/carousel/carousel.css')
| -rw-r--r-- | docs/examples/carousel/carousel.css | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css new file mode 100644 index 000000000..a728bd899 --- /dev/null +++ b/docs/examples/carousel/carousel.css @@ -0,0 +1,148 @@ +/* GLOBAL STYLES +-------------------------------------------------- */ +/* Padding below the footer and lighter body text */ + +body { + padding-bottom: 40px; + color: #5a5a5a; +} + + + +/* CUSTOMIZE THE NAVBAR +-------------------------------------------------- */ + +/* Special class on .container surrounding .navbar, used for positioning it into place. */ +.navbar-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 20; +} + +/* Flip around the padding for proper display in narrow viewports */ +.navbar-wrapper .container { + padding-left: 0; + padding-right: 0; +} +.navbar-wrapper .navbar { + padding-left: 15px; + padding-right: 15px; +} + + +/* CUSTOMIZE THE CAROUSEL +-------------------------------------------------- */ + +/* Carousel base class */ +.carousel { + height: 500px; + margin-bottom: 60px; +} +/* Since positioning the image, we need to help out the caption */ +.carousel-caption { + z-index: 10; +} + +/* Declare heights because of positioning of img element */ +.carousel .item { + height: 500px; + background-color: #777; +} +.carousel-inner > .item > img { + position: absolute; + top: 0; + left: 0; + min-width: 100%; + height: 500px; +} + + + +/* MARKETING CONTENT +-------------------------------------------------- */ + +/* Pad the edges of the mobile views a bit */ +.marketing { + padding-left: 15px; + padding-right: 15px; +} + +/* Center align the text within the three columns below the carousel */ +.marketing .col-lg-4 { + text-align: center; + margin-bottom: 20px; +} +.marketing h2 { + font-weight: normal; +} +.marketing .col-lg-4 p { + margin-left: 10px; + margin-right: 10px; +} + + +/* Featurettes +------------------------- */ + +.featurette-divider { + margin: 80px 0; /* Space out the Bootstrap <hr> more */ +} + +/* Thin out the marketing headings */ +.featurette-heading { + font-weight: 300; + line-height: 1; + letter-spacing: -1px; +} + + + +/* RESPONSIVE CSS +-------------------------------------------------- */ + +@media (min-width: 768px) { + + /* Remove the edge padding needed for mobile */ + .marketing { + padding-left: 0; + padding-right: 0; + } + + /* Navbar positioning foo */ + .navbar-wrapper { + margin-top: 20px; + } + .navbar-wrapper .container { + padding-left: 15px; + padding-right: 15px; + } + .navbar-wrapper .navbar { + padding-left: 0; + padding-right: 0; + } + + /* The navbar becomes detached from the top, so we round the corners */ + .navbar-wrapper .navbar { + border-radius: 4px; + } + + /* Bump up size of carousel content */ + .carousel-caption p { + margin-bottom: 20px; + font-size: 21px; + line-height: 1.4; + } + + .featurette-heading { + font-size: 50px; + } + +} + +@media (min-width: 992px) { + .featurette-heading { + margin-top: 120px; + } +} |
