git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/examples/carousel/carousel.css

   1 /* GLOBAL STYLES
   2 -------------------------------------------------- */
   3 /* Padding below the footer and lighter body text */
   4
   5 body {
   6   padding-bottom: 40px;
   7   color: #5a5a5a;
   8 }
   9
  10
  11
  12 /* CUSTOMIZE THE NAVBAR
  13 -------------------------------------------------- */
  14
  15 /* Special class on .container surrounding .navbar, used for positioning it into place. */
  16 .navbar-wrapper {
  17   position: relative;
  18   z-index: 15;
  19 }
  20
  21
  22 /* CUSTOMIZE THE CAROUSEL
  23 -------------------------------------------------- */
  24
  25 /* Carousel base class */
  26 .carousel {
  27   margin-bottom: 60px;
  28
  29   /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
  30   margin-top: -90px;
  31 }
  32 /* Since positioning the image, we need to help out the caption */
  33 .carousel-caption {
  34   z-index: 10;
  35 }
  36
  37 /* Declare heights because of positioning of img element */
  38 .carousel .item {
  39   height: 500px;
  40   background-color: #777;
  41 }
  42 .carousel-inner > .item > img {
  43   position: absolute;
  44   top: 0;
  45   left: 0;
  46   min-width: 100%;
  47   height: 500px;
  48 }
  49
  50
  51
  52 /* MARKETING CONTENT
  53 -------------------------------------------------- */
  54
  55 /* Pad the edges of the mobile views a bit */
  56 .marketing {
  57   padding-left: 15px;
  58   padding-right: 15px;
  59 }
  60
  61 /* Center align the text within the three columns below the carousel */
  62 .marketing .col-lg-4 {
  63   text-align: center;
  64   margin-bottom: 20px;
  65 }
  66 .marketing h2 {
  67   font-weight: normal;
  68 }
  69 .marketing .col-lg-4 p {
  70   margin-left: 10px;
  71   margin-right: 10px;
  72 }
  73
  74
  75 /* Featurettes
  76 ------------------------- */
  77
  78 .featurette-divider {
  79   margin: 80px 0; /* Space out the Bootstrap <hr> more */
  80 }
  81
  82 /* Thin out the marketing headings */
  83 .featurette-heading {
  84   font-weight: 300;
  85   line-height: 1;
  86   letter-spacing: -1px;
  87 }
  88
  89
  90
  91 /* RESPONSIVE CSS
  92 -------------------------------------------------- */
  93
  94 @media (min-width: 768px) {
  95
  96   /* Remove the edge padding needed for mobile */
  97   .marketing {
  98     padding-left: 0;
  99     padding-right: 0;
 100   }
 101
 102   /* Navbar positioning foo */
 103   .navbar-wrapper {
 104     margin-top: 20px;
 105   }
 106   /* The navbar becomes detached from the top, so we round the corners */
 107   .navbar-wrapper .navbar {
 108     border-radius: 4px;
 109   }
 110
 111   /* Bump up size of carousel content */
 112   .carousel-caption p {
 113     margin-bottom: 20px;
 114     font-size: 21px;
 115     line-height: 1.4;
 116   }
 117
 118   .featurette-heading {
 119     font-size: 50px;
 120   }
 121
 122 }
 123
 124 @media (min-width: 992px) {
 125   .featurette-heading {
 126     margin-top: 120px;
 127   }
 128 }