From eab1e295d26f7638616a95fdc3da3615ca9f75bc Mon Sep 17 00:00:00 2001 From: rayelliott Date: Fri, 3 Apr 2020 12:45:30 +0000 Subject: [PATCH] add hero layout styles --- site/layouts/partials/hero.html | 11 ++++- src/css/imports/hero.scss | 80 +++++++++++++++++++++++++++++++++ src/css/imports/variables.scss | 2 + src/css/main.css | 31 +------------ 4 files changed, 93 insertions(+), 31 deletions(-) create mode 100644 src/css/imports/hero.scss diff --git a/site/layouts/partials/hero.html b/site/layouts/partials/hero.html index 14cc086..23ac421 100644 --- a/site/layouts/partials/hero.html +++ b/site/layouts/partials/hero.html @@ -1,6 +1,13 @@
-
-
+
+
+
+

How We Can Help You

+

Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.

+

+
+ {{ partial "blocks.html" }} +
diff --git a/src/css/imports/hero.scss b/src/css/imports/hero.scss new file mode 100644 index 0000000..392b654 --- /dev/null +++ b/src/css/imports/hero.scss @@ -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; + } +} + diff --git a/src/css/imports/variables.scss b/src/css/imports/variables.scss index 1acac44..bf54353 100644 --- a/src/css/imports/variables.scss +++ b/src/css/imports/variables.scss @@ -6,6 +6,8 @@ $bp-l: 80em; $bp-footer-s: 28em; $bp-footer-m: 60em; +$bp-hero: $bp-m; + $z-index__header: 100; :root { diff --git a/src/css/main.css b/src/css/main.css index 663cbaf..c0b7af5 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -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 {