berniestrap/less/jumbotron.less

The most popular front-end framework for developing responsive, mobile first projects on the web, modified to match the style of the Bernie Sanders Presidential campaign.

//
// Jumbotron
// --------------------------------------------------


.jumbotron {
  padding-top:    (@jumbotron-padding/3);
  padding-bottom: (@jumbotron-padding/3);
  margin-bottom: @jumbotron-padding;
  color: @jumbotron-color;
  background-color: @brand-primary;
  border-radius: @border-radius-large;
  -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
  -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.25);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.25);

  h1, .h1,
  h2, .h2,
  h3, .h3 {
    color: @jumbotron-heading-color;
    font-family: @font-family-serif;
  }

  p {
    margin-bottom: (@jumbotron-padding / 2);
    font-size: @jumbotron-font-size;
    font-weight: 300;
  }

  > hr {
    border-top-color: darken(@jumbotron-bg, 10%);
  }

  .container &,
  .container-fluid & {
    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
    padding-left:  (@grid-gutter-width / 2);
    padding-right: (@grid-gutter-width / 2);
  }

  .container {
    max-width: 100%;
  }

  @media screen and (min-width: @screen-sm-min) {
    padding-top:    (@jumbotron-padding/2);
    padding-bottom: (@jumbotron-padding/2);

    .container &,
    .container-fluid & {
      padding-left:  (@jumbotron-padding * 2);
      padding-right: (@jumbotron-padding * 2);
    }

    h1, .h1,
    h2, .h2,
    h3, .h3 {
      font-size: @jumbotron-heading-font-size;
    }
  }
}