diff --git a/site/layouts/partials/hero.html b/site/layouts/partials/hero.html
index 7b06b3f..a38b9ea 100644
--- a/site/layouts/partials/hero.html
+++ b/site/layouts/partials/hero.html
@@ -10,7 +10,7 @@
+
diff --git a/site/static/img/img.jpg b/site/static/img/img.jpg
new file mode 100644
index 0000000..ccec5ac
Binary files /dev/null and b/site/static/img/img.jpg differ
diff --git a/src/css/imports/components/block.scss b/src/css/imports/components/block.scss
index 6e8ea93..52616f4 100644
--- a/src/css/imports/components/block.scss
+++ b/src/css/imports/components/block.scss
@@ -14,18 +14,19 @@ $unit-size: 100% / $units;
width: $unit-size;
height: $unit-size;
transform-origin: 0 0;
- transition: transform 0.3s linear;
+ transition: transform 0.4s ease-in-out;
}
}
// all blocks start out at 1 unit size in length and width.
// $x, $y are the starting coordinates
-@mixin ab-set-layout($x, $y) {
+@mixin ab-set-layout($x: 0, $y: 0, $color: rgba(0, 0, 0, 0.5)) {
@extend %ab-layout;
&::before {
left: $x * $unit-size;
top: $y * $unit-size;
+ background-color: $color;
}
}
@@ -44,15 +45,19 @@ $unit-size: 100% / $units;
}
.anim-block--1 {
- @include ab-set-layout(2, 1);
+ @include ab-set-layout(2, 1, blue);
@include ab-set-state(0, 1, 1);
@include ab-set-state(1, 2, 2);
@include ab-set-state(2, 2, 3);
+}
- @at-root &::before {
- background-color: rgba(blue, 0.8);
- }
+.anim-block--2 {
+ @include ab-set-layout(1, 1, red);
+
+ @include ab-set-state(0, 1, 1);
+ @include ab-set-state(1, 2, 2);
+ @include ab-set-state(2, 2, 3);
}
// vim:set filetype=scss:
diff --git a/src/css/imports/hero.scss b/src/css/imports/hero.scss
index ea62b65..e144752 100644
--- a/src/css/imports/hero.scss
+++ b/src/css/imports/hero.scss
@@ -176,8 +176,8 @@
}
.hero-block-2 {
- grid-column: 5/8;
- grid-row: 1/5;
+ grid-column: 1/5;
+ grid-row: 5/9;
}
.hero-block-3 {
diff --git a/src/index.js b/src/index.js
index 625f1eb..bcc2e54 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,7 +19,7 @@ function initBlocks() {
let state = 0;
blockParent.classList.add(`state-${state}`);
- document.querySelector("header").addEventListener("click", () => {
+ document.getElementById("js-block-parent").addEventListener("click", () => {
const from = state;
blockParent.classList.remove(`state-${state}`);
state = state < 2 ? state + 1 : 0;