71 lines
2.0 KiB
SCSS
71 lines
2.0 KiB
SCSS
|
.hero {
|
||
|
|
background-position: 50% 50%;
|
||
|
|
@include flexbox();
|
||
|
|
@include flex-direction(column);
|
||
|
|
@include justify-content(center);
|
||
|
|
h1 { font-size: map-get($base, font-size-h1-xl); }
|
||
|
|
h2 { font-size: map-get($base, font-size-h2-xl); }
|
||
|
|
h3 { font-size: map-get($base, font-size-h3-xl); }
|
||
|
|
h4 { font-size: map-get($base, font-size-h4-xl); }
|
||
|
|
h5 { font-size: map-get($base, font-size-h5-xl); }
|
||
|
|
h6 { font-size: map-get($base, font-size-h6-xl); }
|
||
|
|
p { font-size: map-get($base, font-size-xl); }
|
||
|
|
@include media-breakpoint-down(lg) {
|
||
|
|
h1 { font-size: map-get($base, font-size-h1-lg); }
|
||
|
|
h2 { font-size: map-get($base, font-size-h2-lg); }
|
||
|
|
h3 { font-size: map-get($base, font-size-h3-lg); }
|
||
|
|
h4 { font-size: map-get($base, font-size-h4-lg); }
|
||
|
|
h5 { font-size: map-get($base, font-size-h5-lg); }
|
||
|
|
h6 { font-size: map-get($base, font-size-h6-lg); }
|
||
|
|
p { font-size: map-get($base, font-size-lg); }
|
||
|
|
}
|
||
|
|
@include media-breakpoint-down(md) {
|
||
|
|
h1 { font-size: map-get($base, font-size-h1-sm); }
|
||
|
|
h2 { font-size: map-get($base, font-size-h2-sm); }
|
||
|
|
h3 { font-size: map-get($base, font-size-h3-sm); }
|
||
|
|
h4 { font-size: map-get($base, font-size-h4-sm); }
|
||
|
|
h5 { font-size: map-get($base, font-size-h5-sm); }
|
||
|
|
h6 { font-size: map-get($base, font-size-h6-sm); }
|
||
|
|
p { font-size: map-get($base, font-size); }
|
||
|
|
}
|
||
|
|
background-size: cover;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero--center {
|
||
|
|
text-align: center;
|
||
|
|
.menu {
|
||
|
|
@extend .menu--center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero--light {
|
||
|
|
@extend .text--light;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero--dark {
|
||
|
|
@extend .text--dark;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero__content {
|
||
|
|
margin: map-get($spacers, 5);
|
||
|
|
@include media-breakpoint-down(lg) {
|
||
|
|
margin: map-get($spacers, 5) map-get($spacers, 4);
|
||
|
|
}
|
||
|
|
@include media-breakpoint-down(md) {
|
||
|
|
margin: map-get($spacers, 4) map-get($spacers, 3);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.heros {
|
||
|
|
& > .hero {
|
||
|
|
margin: map-get($spacers, 5);
|
||
|
|
@include media-breakpoint-down(lg) {
|
||
|
|
margin: map-get($spacers, 3);
|
||
|
|
}
|
||
|
|
@include media-breakpoint-down(md) {
|
||
|
|
margin: map-get($spacers, 2) 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|