From b8115531479ead21cd91b392ad98bae0d662e87e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 4 Dec 2014 14:18:13 -0800 Subject: [PATCH] new look for carousel example, convert to rems --- docs/examples/carousel/carousel.css | 86 +++++++++-------------------- docs/examples/carousel/index.html | 60 +++++++------------- scss/_navbar.scss | 2 +- 3 files changed, 47 insertions(+), 101 deletions(-) diff --git a/docs/examples/carousel/carousel.css b/docs/examples/carousel/carousel.css index 8833f82ddd..7056a41a89 100644 --- a/docs/examples/carousel/carousel.css +++ b/docs/examples/carousel/carousel.css @@ -3,44 +3,17 @@ /* Padding below the footer and lighter body text */ body { - padding-bottom: 40px; + padding-bottom: 3rem; color: #5a5a5a; } -/* CUSTOMIZE THE NAVBAR --------------------------------------------------- */ - -/* Special class on .container surrounding .navbar, used for positioning it into place. */ -.navbar-wrapper { - position: absolute; - top: 0; - right: 0; - left: 0; - z-index: 20; -} - -/* Flip around the padding for proper display in narrow viewports */ -.navbar-wrapper > .container { - padding-right: 0; - padding-left: 0; -} -.navbar-wrapper .navbar { - padding-right: 15px; - padding-left: 15px; -} -.navbar-wrapper .navbar .container { - width: auto; -} - - /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { - height: 500px; - margin-bottom: 60px; + margin-bottom: 4rem; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { @@ -49,7 +22,7 @@ body { /* Declare heights because of positioning of img element */ .carousel .item { - height: 500px; + height: 32rem; background-color: #777; } .carousel-inner > .item > img { @@ -57,7 +30,20 @@ body { top: 0; left: 0; min-width: 100%; - height: 500px; + height: 32rem; +} + +.carousel-indicators { + top: 1.5rem; + right: 1.5rem; + bottom: auto; + left: auto; + width: 1rem; + margin-left: 0; +} + +.carousel-indicators > li { + margin-bottom: .25rem; } @@ -66,15 +52,15 @@ body { /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { - margin-bottom: 20px; + margin-bottom: 1.5rem; text-align: center; } .marketing h2 { font-weight: normal; } .marketing .col-lg-4 p { - margin-right: 10px; - margin-left: 10px; + margin-right: .75rem; + margin-left: .75rem; } @@ -82,43 +68,25 @@ body { ------------------------- */ .featurette-divider { - margin: 80px 0; /* Space out the Bootstrap
more */ + margin: 5rem 0; /* Space out the Bootstrap
more */ } /* Thin out the marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; - letter-spacing: -1px; + letter-spacing: -.05rem; } /* RESPONSIVE CSS -------------------------------------------------- */ -@media (min-width: 768px) { - /* Navbar positioning foo */ - .navbar-wrapper { - margin-top: 20px; - } - .navbar-wrapper .container { - padding-right: 15px; - padding-left: 15px; - } - .navbar-wrapper .navbar { - padding-right: 0; - padding-left: 0; - } - - /* The navbar becomes detached from the top, so we round the corners */ - .navbar-wrapper .navbar { - border-radius: 4px; - } - +@media (min-width: 40em) { /* Bump up size of carousel content */ .carousel-caption p { - margin-bottom: 20px; - font-size: 21px; + margin-bottom: 1.25rem; + font-size: 1.25rem; line-height: 1.4; } @@ -127,8 +95,8 @@ body { } } -@media (min-width: 992px) { +@media (min-width: 62em) { .featurette-heading { - margin-top: 120px; + margin-top: 7rem; } } diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index f7d119d061..15704ac094 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -19,47 +19,25 @@ - -
-
- - -
-
+