• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1.hero {
2  background-position: 50% 50%;
3  @include flexbox();
4  @include flex-direction(column);
5  @include justify-content(center);
6  h1 { font-size: map-get($base, font-size-h1-xl); }
7  h2 { font-size: map-get($base, font-size-h2-xl); }
8  h3 { font-size: map-get($base, font-size-h3-xl); }
9  h4 { font-size: map-get($base, font-size-h4-xl); }
10  h5 { font-size: map-get($base, font-size-h5-xl); }
11  h6 { font-size: map-get($base, font-size-h6-xl); }
12  p  { font-size: map-get($base, font-size-xl); }
13  @include media-breakpoint-down(lg) {
14    h1 { font-size: map-get($base, font-size-h1-lg); }
15    h2 { font-size: map-get($base, font-size-h2-lg); }
16    h3 { font-size: map-get($base, font-size-h3-lg); }
17    h4 { font-size: map-get($base, font-size-h4-lg); }
18    h5 { font-size: map-get($base, font-size-h5-lg); }
19    h6 { font-size: map-get($base, font-size-h6-lg); }
20    p  { font-size: map-get($base, font-size-lg); }
21  }
22  @include media-breakpoint-down(md) {
23    h1 { font-size: map-get($base, font-size-h1-sm); }
24    h2 { font-size: map-get($base, font-size-h2-sm); }
25    h3 { font-size: map-get($base, font-size-h3-sm); }
26    h4 { font-size: map-get($base, font-size-h4-sm); }
27    h5 { font-size: map-get($base, font-size-h5-sm); }
28    h6 { font-size: map-get($base, font-size-h6-sm); }
29    p  { font-size: map-get($base, font-size); }
30  }
31  background-size: cover;
32
33}
34
35.hero--center {
36  text-align: center;
37  .menu {
38    @extend .menu--center;
39  }
40}
41
42.hero--light {
43  @extend .text--light;
44}
45
46.hero--dark {
47  @extend .text--dark;
48}
49
50.hero__content {
51  margin: map-get($spacers, 5);
52  @include media-breakpoint-down(lg) {
53    margin: map-get($spacers, 5) map-get($spacers, 4);
54  }
55  @include media-breakpoint-down(md) {
56    margin: map-get($spacers, 4) map-get($spacers, 3);
57  }
58}
59
60.heros {
61  & > .hero {
62    margin: map-get($spacers, 5);
63    @include media-breakpoint-down(lg) {
64      margin: map-get($spacers, 3);
65    }
66    @include media-breakpoint-down(md) {
67      margin: map-get($spacers, 2) 0;
68    }
69  }
70}