src/scss/bootstrap-4.0.0-alpha.6/docs/assets/scss/_masthead.scss

   1 // scss-lint:disable ImportantRule
   2
   3 .bd-masthead {
   4   position: relative;
   5   padding: 3rem ($grid-gutter-width-base / 2) 2rem;
   6   color: $bd-purple-light;
   7   text-align: center;
   8   background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
   9
  10   .bd-booticon {
  11     margin: 0 auto 2rem;
  12     color: $bd-purple-light;
  13     border-color: $bd-purple-light;
  14   }
  15
  16   h1 {
  17     font-weight: 300;
  18     line-height: 1;
  19   }
  20
  21   .lead {
  22     margin-right: auto;
  23     margin-bottom: 2rem;
  24     margin-left: auto;
  25     font-size: 1.25rem;
  26     color: #fff;
  27   }
  28
  29   .version {
  30     margin-top: -1rem;
  31     margin-bottom: 2rem;
  32   }
  33
  34   .btn {
  35     width: 100%;
  36     padding: 1rem 2rem;
  37     font-size: 1.25rem;
  38     font-weight: 500;
  39     color: $bd-yellow;
  40     border-color: $bd-yellow;
  41
  42     &:hover {
  43       color: $bd-graphite;
  44       background-color: $bd-yellow;
  45       border-color: $bd-yellow;
  46     }
  47   }
  48
  49   .carbonad {
  50     margin-bottom: -2rem !important;
  51   }
  52
  53   @include media-breakpoint-up(sm) {
  54     padding-top: 8rem;
  55     padding-bottom: 2rem;
  56
  57     .btn {
  58       width: auto;
  59     }
  60
  61     .carbonad {
  62       margin-bottom: 0 !important;
  63     }
  64   }
  65
  66   @include media-breakpoint-up(md) {
  67     padding-bottom: 4rem;
  68
  69     .bd-header {
  70       margin-bottom: 4rem;
  71     }
  72
  73     h1 {
  74       font-size: 4rem;
  75     }
  76
  77     .lead {
  78       font-size: 1.5rem;
  79     }
  80
  81     .carbonad {
  82       margin-top: 3rem !important;
  83     }
  84   }
  85
  86   @include media-breakpoint-up(lg) {
  87     .lead {
  88       width: 85%;
  89       font-size: 2rem;
  90     }
  91   }
  92 }