add hero layout styles
This commit is contained in:
parent
208cc8bb26
commit
eab1e295d2
|
@ -1,6 +1,13 @@
|
|||
<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="block-container block-grid">
|
||||
<div class="l-screen-full hero-bg">
|
||||
<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>
|
||||
</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-m: 60em;
|
||||
|
||||
$bp-hero: $bp-m;
|
||||
|
||||
$z-index__header: 100;
|
||||
|
||||
:root {
|
||||
|
|
|
@ -12,6 +12,8 @@
|
|||
|
||||
@import "imports/components/base.scss";
|
||||
|
||||
@import "imports/hero.scss";
|
||||
|
||||
@import "mapbox-gl/dist/mapbox-gl.css";
|
||||
|
||||
// swup transition classes
|
||||
|
@ -383,35 +385,6 @@ html.is-animating .transition-fade {
|
|||
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
|
||||
|
||||
.site-title {
|
||||
|
|
Reference in New Issue