From 652b42c95fe54681ed5a3b1faf517bfa8f655755 Mon Sep 17 00:00:00 2001
From: rayelliott <gitea@rayelliott.dev>
Date: Thu, 2 Apr 2020 18:28:18 +0000
Subject: [PATCH] add block component

---
 site/layouts/partials/components/block.html |   8 +
 src/css/imports/components/block.scss       | 207 ++++++++++++++++++++
 2 files changed, 215 insertions(+)
 create mode 100644 site/layouts/partials/components/block.html
 create mode 100644 src/css/imports/components/block.scss

diff --git a/site/layouts/partials/components/block.html b/site/layouts/partials/components/block.html
new file mode 100644
index 0000000..1f89376
--- /dev/null
+++ b/site/layouts/partials/components/block.html
@@ -0,0 +1,8 @@
+<!-- TODO convert to proper template -->
+<div class="js-block c-block c-block--4 c-block-br block-styles">
+  <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+</div>
+
+<div class="js-block c-block c-block--5 block-sans-image-styles">
+</div>
+
diff --git a/src/css/imports/components/block.scss b/src/css/imports/components/block.scss
new file mode 100644
index 0000000..ed1b631
--- /dev/null
+++ b/src/css/imports/components/block.scss
@@ -0,0 +1,207 @@
+$duration: 1s;
+$delay: 0.3s;
+
+$transition-img-in: opacity $duration $delay ease-in, transform $duration;
+$transition-img-out: opacity $duration $delay ease-out, transform $duration;
+
+@mixin img-in {
+  transition: $transition-img-in;
+  opacity: 0.5;
+  transform: none;
+}
+
+@mixin img-out {
+  transition: $transition-img-out;
+}
+
+.c-block::before,
+.c-block__img {
+  @include abs-full;
+}
+
+.c-block {
+  z-index: 1;
+  position: relative;
+  overflow: hidden;
+
+  width: 100%;
+  height: 100%;
+
+  &::before {
+    //will-change: transform;
+    z-index: 1;
+    content: "";
+    transition: transform $duration;
+    background-color: currentColor;
+  }
+
+  > .c-block__img {
+    z-index: 2;
+    //will-change: opacity, transform;
+    background-size: cover;
+    background-position: center;
+    opacity: 0;
+  }
+}
+
+.c-block--1 {
+  &::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 0;
+
+    @at-root .state-0 & {
+      @include img-in;
+    }
+
+    @at-root .state-1 & {
+      @include img-out;
+      transform: translate(50%, 0) scale(1.3);
+    }
+
+    @at-root .state-2 & {
+      transform: translate(50%, 50%) scale(2);
+    }
+  }
+}
+
+.c-block--2 {
+  &::before {
+    transform-origin: 100% 0;
+
+    @at-root .state-0 & {
+      transform: scale(0.5, 0.5);
+    }
+
+    @at-root .state-1 & {
+      transform: scale(1, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale(0.5, 1);
+    }
+  }
+
+  > .c-block__img {
+    transform-origin: 0 100%;
+
+    @at-root .state-0 & {
+      transform: translate(50%, 50%) scale(2);
+    }
+
+    @at-root .state-1 & {
+      @include img-in;
+    }
+
+    @at-root .state-2 & {
+      transform: translate(50%, 0) scale(1.3);
+      @include img-out;
+    }
+  }
+}
+
+.c-block--3 {
+  &::before {
+    transform-origin: 100% 0;
+
+    @at-root .state-0 & {
+      transform: scale(0.5, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale(0.5, 0.5);
+    }
+
+    @at-root .state-2 & {
+      transform: scale(1, 1);
+    }
+  }
+
+  > .c-block__img {
+    transform-origin: 0 100%;
+
+    @at-root .state-0 & {
+      @include img-out;
+      transform: translate(50%, 0) scale(1.3);
+    }
+
+    @at-root .state-1 & {
+      transform: translate(50%, 50%) scale(2);
+    }
+
+    @at-root .state-2 & {
+      @include img-in;
+    }
+  }
+}
+
+.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__img {
+    transform-origin: 0 100%;
+
+    @at-root .state-0 & {
+      @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;
+    }
+  }
+}
+
+.c-block--5 {
+  &::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);
+    }
+  }
+}
+//
+//
+//
+// vim:set filetype=scss: