From 6832b80308eda5ee6bab8b882e66ad8357bee0ca Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Sat, 28 Mar 2020 09:36:39 +0000
Subject: [PATCH] add basic block

---
 site/layouts/index.html          | 15 ++++++--
 site/layouts/partials/block.html |  5 +++
 src/css/main.css                 | 64 ++++++++++++++++++++------------
 src/index.js                     | 21 ++++++++++-
 4 files changed, 75 insertions(+), 30 deletions(-)
 create mode 100644 site/layouts/partials/block.html

diff --git a/site/layouts/index.html b/site/layouts/index.html
index fc5a229..f2a7b18 100644
--- a/site/layouts/index.html
+++ b/site/layouts/index.html
@@ -1,9 +1,16 @@
 {{ define "main" }}
 
-<h1 class="text-3xl">Hugo with Webpack, Sass, and PostCSS</h1>
 
-<h3>Hooray 🎉 - you've built this with <a href="https://github.com/netlify/victor-hugo">Victor-Hugo</a>!</h3>
-
-<a href="{{ "/tech" | relURL }}">Check out the tech</a>
+<section class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+  {{ partial "block.html" . }}
+</section>
 
 {{ end }}
diff --git a/site/layouts/partials/block.html b/site/layouts/partials/block.html
new file mode 100644
index 0000000..1e5be3d
--- /dev/null
+++ b/site/layouts/partials/block.html
@@ -0,0 +1,5 @@
+  <div class="js-block c-block relative bg-gray-300 w-64 h-64 overflow-hidden">
+    <div class="c-block__bg bg-gray-600 w-full h-full"></div>
+    <div class="c-block__img absolute w-full h-full top-0 left-0 bg-cover bg-center" style="background-image: url(/img/img.jpg)">
+    </div>
+  </div>
diff --git a/src/css/main.css b/src/css/main.css
index edfc6d2..3adbf43 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,11 +1,9 @@
 @tailwind base;
-
 @tailwind components;
-
 @tailwind utilities;
 
 /*
-  You can use import statements to include partials:
+You can use import statements to include partials:
  */
 // @import "imports/reset.css";
 
@@ -14,30 +12,48 @@ body {
   height: 100%;
 }
 
-body {
-  font-size: calc(10px + 1vmin);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.c-block {
+  $duration: 1s;
+  $delay: 0.3s;
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  background-color: #282c34;
-  color: white;
-}
+  > .c-block__bg {
+    will-change: transform;
+    transform-origin: 100% 100%;
+    transition: transform $duration;
+    transform: scale3d(1, 1, 1);
+  }
 
-a {
-  color: pink;
-  text-decoration: none;
-}
+  &.state-1 > .c-block__bg {
+    transform-origin: 100% 100%;
+    transition: transform $duration;
+    transform: scale3d(0.5, 1, 1);
+  }
 
-.content {
-  padding: 0 32px;
+  &.state-2 > .c-block__bg {
+    transform-origin: 100% 100%;
+    transform-origin: 100 100;
+    transition: transform $duration;
+    transform: scale3d(0.5, 0.5, 1);
+  }
+
+  > .c-block__img {
+    will-change: opacity, transform;
+    transform-origin: 0 0;
+    transition: opacity $duration $delay ease-in, transform $duration;
+    opacity: 1;
+    transform: none;
+  }
+
+  &.state-1 > .c-block__img {
+    transition: opacity $duration $delay ease-out, transform $duration;
+    opacity: 0;
+    transform: translate(50%, 0) scale(1.3);
+  }
+
+  &.state-2 > .c-block__img {
+    opacity: 0;
+    transform: translate(50%, 50%) scale(2);
+  }
 }
 
 // vim:set filetype=scss:
diff --git a/src/index.js b/src/index.js
index 4f56b24..4848884 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,5 +2,22 @@
 
 import "./css/main.css";
 
-// Say hello
-console.log("🦊 Hello! Edit me in src/index.js");
+window.addEventListener("DOMContentLoaded", () => {
+  const TRANSITION_DURATION = 1000;
+  const INTERVAl = TRANSITION_DURATION + 600;
+  const blocks = document.querySelectorAll(".js-block");
+
+  if (blocks) {
+    Array.prototype.forEach.call(blocks, (block) => {
+      let state = 0;
+      setInterval(() => {
+        block.classList.remove(`state-${state}`);
+        state = state < 2 ? state + 1 : 0;
+        if (state > 0)  {
+          block.classList.add(`state-${state}`);
+        }
+      }, INTERVAl);
+    });
+  }
+});
+