add hero layout styles
This commit is contained in:
parent
208cc8bb26
commit
eab1e295d2
|
@ -1,6 +1,13 @@
|
||||||
<article id="home">
|
<article id="home">
|
||||||
<div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden hero-bg">
|
<div class="l-screen-full hero-bg">
|
||||||
<div class="block-container block-grid">
|
<div class="hero">
|
||||||
|
<div class="hero__body">
|
||||||
|
<h2 class="hero-title">How We Can Help You</h2>
|
||||||
|
<p class="h4">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
|
||||||
|
</div>
|
||||||
|
<div id="js-block-parent" class="hero__aside block-grid">
|
||||||
|
{{ partial "blocks.html" }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
@ -0,0 +1,80 @@
|
||||||
|
.hero {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 64px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $bp-hero) {
|
||||||
|
&__body,
|
||||||
|
&__aside {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__aside {
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $bp-hero) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
&__body,
|
||||||
|
&__aside {
|
||||||
|
flex: 0 0 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
}
|
||||||
|
|
||||||
|
&__aside {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__body {
|
||||||
|
background-color: rgba(yellow, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__aside {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr 1fr 1fr;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
|
||||||
|
.c-block-tr {
|
||||||
|
grid-column: 3/4;
|
||||||
|
grid-row: 1/3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-block-br {
|
||||||
|
grid-column: 2/4;
|
||||||
|
grid-row: 3/3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -6,6 +6,8 @@ $bp-l: 80em;
|
||||||
$bp-footer-s: 28em;
|
$bp-footer-s: 28em;
|
||||||
$bp-footer-m: 60em;
|
$bp-footer-m: 60em;
|
||||||
|
|
||||||
|
$bp-hero: $bp-m;
|
||||||
|
|
||||||
$z-index__header: 100;
|
$z-index__header: 100;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|
|
@ -12,6 +12,8 @@
|
||||||
|
|
||||||
@import "imports/components/base.scss";
|
@import "imports/components/base.scss";
|
||||||
|
|
||||||
|
@import "imports/hero.scss";
|
||||||
|
|
||||||
@import "mapbox-gl/dist/mapbox-gl.css";
|
@import "mapbox-gl/dist/mapbox-gl.css";
|
||||||
|
|
||||||
// swup transition classes
|
// swup transition classes
|
||||||
|
@ -383,35 +385,6 @@ html.is-animating .transition-fade {
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// hero
|
|
||||||
|
|
||||||
.block-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 110rem;
|
|
||||||
height: 100%;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
|
|
||||||
background-color: rgba(#000, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 1fr 1fr 1fr;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
|
||||||
|
|
||||||
.c-block-tr {
|
|
||||||
grid-column: 3/4;
|
|
||||||
grid-row: 1/3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c-block-br {
|
|
||||||
grid-column: 2/4;
|
|
||||||
grid-row: 3/3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// global
|
// global
|
||||||
|
|
||||||
.site-title {
|
.site-title {
|
||||||
|
|
Reference in New Issue