add hero layout styles

This commit is contained in:
Ray Elliott 2020-04-03 12:45:30 +00:00
parent 208cc8bb26
commit eab1e295d2
4 changed files with 93 additions and 31 deletions

View File

@ -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>

80
src/css/imports/hero.scss Normal file
View File

@ -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;
}
}

View File

@ -6,6 +6,8 @@ $bp-l: 80em;
$bp-footer-s: 28em;
$bp-footer-m: 60em;
$bp-hero: $bp-m;
$z-index__header: 100;
:root {

View File

@ -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 {