diff --git a/site/layouts/partials/components/block.html b/site/layouts/partials/components/block.html index 1f89376..5c93d10 100644 --- a/site/layouts/partials/components/block.html +++ b/site/layouts/partials/components/block.html @@ -1,8 +1,8 @@ -
+
-
+
Lorem itaque a nesciunt neque porro! Hic at expedita dignissimos nostrum omnis.

-
-
+
+
diff --git a/src/css/imports/components/block.scss b/src/css/imports/components/block.scss index 346bf8d..6e8ea93 100644 --- a/src/css/imports/components/block.scss +++ b/src/css/imports/components/block.scss @@ -1,327 +1,57 @@ -$duration: 1s; -$delay: 0.3s; +// units are the number of units that make up 100% of the container +// e.g., if there are 4 units then sizes, lengths, can be from 0 to 4 +// corresponding to lengths of 0, 25%, 50%, 75% and 100%. +$units: 4; +$unit-size: 100% / $units; -$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: 1; - transform: none; -} - -@mixin img-out { - transition: $transition-img-out; -} - -.c-block::before, -.c-block__img { - @include abs-full; -} - -.c-block { - z-index: 1; +%ab-layout { 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 { + display: block; + position: absolute; + width: $unit-size; + height: $unit-size; 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); - } + transition: transform 0.3s linear; } } -.c-block--2 { +// all blocks start out at 1 unit size in length and width. +// $x, $y are the starting coordinates +@mixin ab-set-layout($x, $y) { + @extend %ab-layout; + &::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; - } + left: $x * $unit-size; + top: $y * $unit-size; } } -.c-block--3 { - &::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 100%; - // - // @at-root .state-0 & { - // @include img-in; - // } - // - // @at-root .state-1 & { - // @include img-out; - // transform: translate(66.6%, 0) scale(1.3); - // } - // - // @at-root .state-2 & { - // transform: translate(66.6%, 66.6%) scale(2); - // } - // } -} - -.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); - } +@mixin ab-set-state($state-class, $width, $height) { + @at-root .state-#{$state-class} &::before { + transform: scale($width, $height); } } -.c-block--5 { - &::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; - } - } +.block-grid { + padding-top: 3rem; } -.c-block--6 { - &::before { - transform-origin: 100% 0; - - @at-root .state-0 & { - transform: scale(1.333, 0.666); - } - - @at-root .state-1 & { - transform: scale(0.5, 0.666); - } - - @at-root .state-2 & { - transform: scale(0.5, 0.5); - } - } - - // > .c-block__img { - // transform-origin: 0 100%; - // - // @at-root .state-0 & { - // @include img-in; - // } - // - // @at-root .state-1 & { - // @include img-out; - // transform: translate(66.6%, 0) scale(1.3); - // } - // - // @at-root .state-2 & { - // transform: translate(66.6%, 66.6%) scale(2); - // } - // } +.anim-block { + background-color: rgba(blue, 0.06); } -.c-block--7 { - &::before { - transform-origin: 100% 100%; +.anim-block--1 { + @include ab-set-layout(2, 1); - @at-root .state-0 & { - transform: scale(1, 1); - } + @include ab-set-state(0, 1, 1); + @include ab-set-state(1, 2, 2); + @include ab-set-state(2, 2, 3); - @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 100%; - - @at-root .state-0 & { - @include img-in; - } - - @at-root .state-1 & { - @include img-out; - transform: translate(66.6%, 0) scale(1.3); - } - - @at-root .state-2 & { - transform: translate(66.6%, 66.6%) scale(2); - } - } -} - -.c-block--8 { - &::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--9 { - &::before { - transform-origin: 100% 100%; - - @at-root .state-0 & { - transform: scale(1, 1); - } - - @at-root .state-1 & { - transform: scale(0.375, 1); - } - - @at-root .state-2 & { - transform: scale(0.375, 0.375); - } - } - - > .c-block__img { - transform-origin: 0 100%; - - @at-root .state-0 & { - @include img-in; - } - - @at-root .state-1 & { - @include img-out; - transform: translate(66.6%, 0) scale(1.3); - } - - @at-root .state-2 & { - transform: translate(66.6%, 66.6%) scale(2); - } + @at-root &::before { + background-color: rgba(blue, 0.8); } } diff --git a/src/css/imports/hero.scss b/src/css/imports/hero.scss index ebcba0e..ea62b65 100644 --- a/src/css/imports/hero.scss +++ b/src/css/imports/hero.scss @@ -81,18 +81,18 @@ display: grid; @media (max-width: $bp-hero) { - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + 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; - grid-template-rows: 1fr 1fr; + 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: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: repeat(16, 1fr); + grid-template-rows: repeat(16, 1fr); } } @@ -171,13 +171,13 @@ // row 1 //////// .hero-block-1 { - grid-column: 1/4; - grid-row: 1/4; + grid-column: 5/9; + grid-row: 5/9; } .hero-block-2 { - grid-column: 4/7; - grid-row: 1/4; + grid-column: 5/8; + grid-row: 1/5; } .hero-block-3 { diff --git a/src/css/main.css b/src/css/main.css index c0b7af5..de5d378 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -224,7 +224,7 @@ html.is-animating .transition-fade { // hero .hero-bg { - background-color: var(--primary-500); + // background-color: var(--primary-500); } // about diff --git a/src/index.js b/src/index.js index a011092..625f1eb 100644 --- a/src/index.js +++ b/src/index.js @@ -17,11 +17,21 @@ function initBlocks() { if (blockParent) { let state = 0; - setInterval(() => { + blockParent.classList.add(`state-${state}`); + + document.querySelector("header").addEventListener("click", () => { + const from = state; blockParent.classList.remove(`state-${state}`); state = state < 2 ? state + 1 : 0; blockParent.classList.add(`state-${state}`); - }, INTERVAl); + console.log(`state: ${from} -> ${state}`); + }); + + // setInterval(() => { + // blockParent.classList.remove(`state-${state}`); + // state = state < 2 ? state + 1 : 0; + // blockParent.classList.add(`state-${state}`); + // }, INTERVAl); } }