style basic grid layout for hero blocks

site/layouts/partials/blocks.html

@@ -1,22 +0,0 @@
-  <div class="js-block c-block c-block--1 bg-gray-300 w-64 h-64 text-red-500">
-    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
-  </div>
-
-  <div class="js-block c-block c-block--3 c-block-tr bg-gray-300 w-64 h-64 text-yellow-500">
-    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
-  </div>
-
-  <div class="js-block c-block c-block--4 c-block-br bg-gray-300 w-64 text-green-500">
-    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
-  </div>
-
-  <div class="js-block c-block c-block--5 bg-gray-300 w-64 h-64 text-blue-500">
-  </div>
-
-  <div class="js-block c-block c-block--3 c-block-tr bg-gray-300 w-64 h-64 text-yellow-500">
-    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
-  </div>
-
-  <div class="js-block c-block c-block--2 bg-gray-300 w-64 h-64 text-orange-500">
-    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
-  </div>

site/layouts/partials/hero.html

@@ -1,6 +1,43 @@
 <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 Can We Help You?</h2>
+          <p class="h4 hero-sub-title">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
+      </div>
+      <div id="js-block-parent" class="hero__aside block-grid">
+        <div class="js-block c-block c-block--1 hero-block-1">
+          <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+        </div>
+
+        <div class="js-block c-block c-block--2 hero-block-2">
+          <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+        </div>
+
+        <div class="js-block c-block c-block--3 hero-block-3">
+        </div>
+
+        <div class="js-block c-block c-block--4 hero-block-4">
+        </div>
+
+        <div class="js-block c-block c-block--5 hero-block-5">
+          <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+        </div>
+
+        <div class="js-block c-block c-block--6 hero-block-6">
+        </div>
+
+        <div class="js-block c-block c-block--7 hero-block-7">
+          <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+        </div>
+
+        <div class="js-block c-block c-block--8 hero-block-8">
+        </div>
+
+        <div class="js-block c-block c-block--9 hero-block-9">
+          <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+        </div>
+      </div>
     </div>
   </div>
 </article>

src/css/imports/components/block.scss

@@ -6,7 +6,7 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
 
 @mixin img-in {
   transition: $transition-img-in;
-  opacity: 0.5;
+  opacity: 1;
   transform: none;
 }
 
@@ -115,6 +115,59 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
 }
 
 .c-block--3 {
+  &::before {
+    transform-origin: 100% 100%;
+
+    @at-root .state-0 & {
+      transform: scale(1, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale(0.5, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale(0.5, 0.5);
+    }
+  }
+
+  // > .c-block__img {
+  //   transform-origin: 0 100%;
+  //
+  //   @at-root .state-0 & {
+  //     @include img-in;
+  //   }
+  //
+  //   @at-root .state-1 & {
+  //     @include img-out;
+  //     transform: translate(66.6%, 0) scale(1.3);
+  //   }
+  //
+  //   @at-root .state-2 & {
+  //     transform: translate(66.6%, 66.6%) scale(2);
+  //   }
+  // }
+}
+
+.c-block--4 {
+  &::before {
+    transform-origin: 100% 0;
+
+    @at-root .state-0 & {
+      transform: scale(0.33, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale(0.33, 0.25);
+    }
+
+    @at-root .state-2 & {
+      transform: scale(1, 1);
+    }
+  }
+}
+
+.c-block--5 {
   &::before {
     transform-origin: 100% 0;
 
@@ -149,42 +202,77 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
   }
 }
 
-.c-block--4 {
+.c-block--6 {
   &::before {
     transform-origin: 100% 0;
 
     @at-root .state-0 & {
-      transform: scale(0.33, 1);
+      transform: scale(1.333, 0.666);
     }
 
     @at-root .state-1 & {
-      transform: scale(0.33, 0.25);
+      transform: scale(0.5, 0.666);
     }
 
     @at-root .state-2 & {
+      transform: scale(0.5, 0.5);
+    }
+  }
+
+  // > .c-block__img {
+  //   transform-origin: 0 100%;
+  //
+  //   @at-root .state-0 & {
+  //     @include img-in;
+  //   }
+  //
+  //   @at-root .state-1 & {
+  //     @include img-out;
+  //     transform: translate(66.6%, 0) scale(1.3);
+  //   }
+  //
+  //   @at-root .state-2 & {
+  //     transform: translate(66.6%, 66.6%) scale(2);
+  //   }
+  // }
+}
+
+.c-block--7 {
+  &::before {
+    transform-origin: 100% 100%;
+
+    @at-root .state-0 & {
       transform: scale(1, 1);
     }
+
+    @at-root .state-1 & {
+      transform: scale(0.5, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale(0.5, 0.5);
+    }
   }
 
   > .c-block__img {
     transform-origin: 0 100%;
 
     @at-root .state-0 & {
+      @include img-in;
+    }
+
+    @at-root .state-1 & {
       @include img-out;
       transform: translate(66.6%, 0) scale(1.3);
     }
 
-    @at-root .state-1 & {
-      transform: translate(66.6%, 66.6%) scale(2);
-    }
-
     @at-root .state-2 & {
-      @include img-in;
+      transform: translate(66.6%, 66.6%) scale(2);
     }
   }
 }
 
-.c-block--5 {
+.c-block--8 {
   &::before {
     transform-origin: 100% 100%;
 
@@ -201,7 +289,40 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
     }
   }
 }
-//
+
-//
+.c-block--9 {
-//
+  &::before {
+    transform-origin: 100% 100%;
+
+    @at-root .state-0 & {
+      transform: scale(1, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale(0.375, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale(0.375, 0.375);
+    }
+  }
+
+  > .c-block__img {
+    transform-origin: 0 100%;
+
+    @at-root .state-0 & {
+      @include img-in;
+    }
+
+    @at-root .state-1 & {
+      @include img-out;
+      transform: translate(66.6%, 0) scale(1.3);
+    }
+
+    @at-root .state-2 & {
+      transform: translate(66.6%, 66.6%) scale(2);
+    }
+  }
+}
+
 // vim:set filetype=scss:

src/css/imports/components/menu-toggle.scss

@@ -6,7 +6,19 @@ $bp-menu-collpase: $bp-s;
 
 input.c-menu-toggle__toggle[type="checkbox"],
 input.c-menu-toggle__toggle[type="radio"] {
-  display: none;
+  // display: none;
+
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+
+  &:checked {
+    pointer-events: auto;
+  }
 }
 
 @media (max-width: $bp-menu-collpase) {

src/css/imports/hero.scss

@@ -0,0 +1,222 @@
+.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,
+.hero-sub-title {
+  color: #fff;
+}
+
+.hero-title {
+  margin-bottom: 1.25rem;
+
+  @media (max-width: $bp-hero) {
+    font-size: 1.4em;
+  }
+}
+
+.hero-sub-title {
+  margin-bottom: 1.25rem;
+
+  @media (max-width: $bp-hero) {
+    font-size: 1.2em;
+  }
+}
+
+.hero__body {
+}
+
+.hero__aside {
+}
+
+.block-grid {
+  display: grid;
+
+  @media (max-width: $bp-hero) {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+
+    @media (max-width: $bp-hero) and (orientation: landscape) {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+    }
+  }
+
+  @media (min-width: $bp-hero) {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.c-block {
+  outline: 1px dotted red;
+  opacity: 0.8;
+}
+
+@media (max-width: $bp-hero) {
+  .hero-block-1 {
+    display: none;
+  }
+
+  .hero-block-2 {
+    display: none;
+  }
+
+  .hero-block-3 {
+    display: none;
+  }
+
+  .hero-block-4 {
+    display: none;
+  }
+
+  .hero-block-5 {
+    display: none;
+  }
+
+  .hero-block-6 {
+    display: none;
+  }
+
+  .hero-block-7 {
+    display: none;
+  }
+
+  .hero-block-8 {
+    display: none;
+  }
+
+  .hero-block-9 {
+    display: none;
+  }
+}
+
+@media (max-width: $bp-hero) and (orientation: landscape) {
+  .hero-block-1 {
+  }
+
+  .hero-block-2 {
+  }
+
+  .hero-block-3 {
+  }
+
+  .hero-block-4 {
+  }
+
+  .hero-block-5 {
+  }
+
+  .hero-block-6 {
+  }
+
+  .hero-block-7,
+  .hero-block-8,
+  .hero-block-9 {
+    @media (max-width: $bp-hero) {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: $bp-hero) {
+  // row 1
+  ////////
+  .hero-block-1 {
+    grid-column: 1/4;
+    grid-row: 1/4;
+  }
+
+  .hero-block-2 {
+    grid-column: 4/7;
+    grid-row: 1/4;
+  }
+
+  .hero-block-3 {
+    grid-column: 7/10;
+    grid-row: 1/4;
+  }
+
+  // row 2
+  ////////
+  .hero-block-4 {
+    grid-column: 1/4;
+    grid-row: 4/7;
+  }
+
+  .hero-block-5 {
+    grid-column: 4/7;
+    grid-row: 4/7;
+  }
+
+  .hero-block-6 {
+    grid-column: 7/10;
+    grid-row: 4/7;
+  }
+
+  // row 3
+  ////////
+  .hero-block-7 {
+    grid-column: 1/4;
+    grid-row: 7/10;
+  }
+
+  .hero-block-8 {
+    grid-column: 4/7;
+    grid-row: 7/10;
+  }
+
+  .hero-block-9 {
+    grid-column: 6/10;
+    grid-row: 6/10;
+  }
+}
+

src/css/imports/layout.scss

@@ -157,9 +157,6 @@
 
 .l-flex-list-col,
 .l-flex-list-row {
-  > li {
-    margin: 0;
-  }
 }
 
 .l-list-bare {

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 {

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
@@ -50,6 +52,10 @@ html.is-animating .transition-fade {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+
+  li {
+    margin-bottom: 0;
+  }
 }
 
 .nav__item {
@@ -379,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 {