From 115c0545efcf18a5cedc7ca9dc9f376e6f4e0c89 Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Mon, 20 Apr 2020 16:50:41 +0000
Subject: [PATCH] add hero skeleton

---
 site/layouts/partials/hero.html |  39 +------
 src/css/imports/hero.scss       | 194 ++------------------------------
 2 files changed, 15 insertions(+), 218 deletions(-)

diff --git a/site/layouts/partials/hero.html b/site/layouts/partials/hero.html
index a38b9ea..cd5244b 100644
--- a/site/layouts/partials/hero.html
+++ b/site/layouts/partials/hero.html
@@ -1,43 +1,12 @@
 <article id="home">
   <div class="l-screen-full hero-bg">
     <div class="hero">
-      <div class="hero__body">
-        <h2 class="hero-title">How Can We Help You?</h2>
+      <div class="hero__fg">
+        <h1 class="hero-title">How Can We Help You?</h1>
           <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 anim-block anim-block--1 hero-block-1">
-          <div class="anim-block__img" style="background-image: url(/img/img.jpg)"></div>
-        </div>
-
-        <div class="js-block anim-block anim-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 class="hero__bg">
+			</div>
     </div>
   </div>
 </article>
diff --git a/src/css/imports/hero.scss b/src/css/imports/hero.scss
index e144752..b389907 100644
--- a/src/css/imports/hero.scss
+++ b/src/css/imports/hero.scss
@@ -4,7 +4,9 @@
   width: 100%;
   height: 100%;
 
-  &__body {
+  background-color: rgba(pink, 0.5);
+
+  &__fg {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -12,11 +14,13 @@
 
     padding: 64px;
     text-align: center;
+
+    background-color: rgba(pink, 0.5);
   }
 
   @media (max-width: $bp-hero) {
-    &__body,
-    &__aside {
+    &__fg,
+    &__bg {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -24,11 +28,11 @@
       left: 0;
     }
 
-    &__body {
+    &__fg {
       z-index: 10;
     }
 
-    &__aside {
+    &__bg {
       z-index: 5;
     }
   }
@@ -37,186 +41,10 @@
     display: flex;
     flex-direction: row;
 
-    &__body,
-    &__aside {
+    &__fg,
+    &__bg {
       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: repeat(16, 1fr);
-    grid-template-rows: repeat(16, 1fr);
-
-    @media (max-width: $bp-hero) and (orientation: landscape) {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-  }
-
-  @media (min-width: $bp-hero) {
-    grid-template-columns: repeat(16, 1fr);
-    grid-template-rows: repeat(16, 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: 5/9;
-    grid-row: 5/9;
-  }
-
-  .hero-block-2 {
-    grid-column: 1/5;
-    grid-row: 5/9;
-  }
-
-  .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;
   }
 }