From b4daf394457453d469b09d342ab39186790aa0ac Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Sun, 29 Mar 2020 19:58:33 +0000
Subject: [PATCH] tidy up temporary blocks layout

---
 site/layouts/partials/blocks.html | 26 +++++++++++++++-----------
 site/layouts/partials/hero.html   |  4 +++-
 src/css/imports/blocks.scss       | 29 +++++++++++++++++++++++++++--
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/site/layouts/partials/blocks.html b/site/layouts/partials/blocks.html
index 55bf1c4..9262f1e 100644
--- a/site/layouts/partials/blocks.html
+++ b/site/layouts/partials/blocks.html
@@ -2,17 +2,21 @@
     <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>
-
-  <div class="js-block c-block c-block--3 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 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>
diff --git a/site/layouts/partials/hero.html b/site/layouts/partials/hero.html
index 7066fce..e84e20a 100644
--- a/site/layouts/partials/hero.html
+++ b/site/layouts/partials/hero.html
@@ -1,5 +1,7 @@
 <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">
-    {{ partial "blocks.html" . }}
+    <div class="block-container block-grid">
+      {{ partial "blocks.html" . }}
+    </div>
   </div>
 </article>
diff --git a/src/css/imports/blocks.scss b/src/css/imports/blocks.scss
index e3c1aab..d832e33 100644
--- a/src/css/imports/blocks.scss
+++ b/src/css/imports/blocks.scss
@@ -150,8 +150,6 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
 }
 
 .c-block--4 {
-  height: 24rem;
-
   &::before {
     transform-origin: 100% 0;
 
@@ -204,4 +202,31 @@ $transition-img-out: opacity $duration $delay ease-out, transform $duration;
   }
 }
 
+.block-container {
+  position: relative;
+  width: 100%;
+  max-width: 110rem;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+
+  background-color: pink;
+}
+
+.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;
+  }
+}
+
 // vim:set filetype=scss: