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

@@ -3,10 +3,40 @@
     <div class="hero">
       <div class="hero__body">
         <h2 class="hero-title">How Can We Help You?</h2>
-          <p class="h4">Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.<p>
+          <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">
-        {{ partial "blocks.html" }}
+        <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>

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/hero.scss

@@ -50,31 +50,173 @@
   }
 }
 
+.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 {
-  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 {
+  @media (max-width: $bp-hero) {
-    grid-column: 3/4;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-row: 1/3;
+    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;
+    }
   }
 
-  .c-block-br {
+  @media (min-width: $bp-hero) {
-    grid-column: 2/4;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-row: 3/3;
+    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;
   }
 }