site/layouts/index.html

@@ -1,8 +1,9 @@
 {{ define "main" }}
 
+<h1 class="text-3xl">Hugo with Webpack, Sass, and PostCSS</h1>
 
-<section id="js-block-parent" class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
+<h3>Hooray 🎉 - you've built this with <a href="https://github.com/netlify/victor-hugo">Victor-Hugo</a>!</h3>
-  {{ partial "block.html" . }}
+
-</section>
+<a href="{{ "/tech" | relURL }}">Check out the tech</a>
 
 {{ end }}

site/layouts/partials/block.html

@@ -1,18 +0,0 @@
-  <div class="js-block c-block c-block--1 bg-gray-300 w-64 h-64 text-red-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>

src/css/imports/blocks.scss

@@ -1,203 +0,0 @@
-$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;
-  &::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 {
-  height: 24rem;
-
-  &::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:

src/css/imports/mixins.scss

@@ -1,7 +0,0 @@
-@mixin abs-full {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  right: 0;
-}

src/css/main.css

@@ -1,14 +1,43 @@
 @tailwind base;
+
 @tailwind components;
+
 @tailwind utilities;
 
-@import "imports/mixins.scss";
+/*
-
+  You can use import statements to include partials:
-@import "imports/blocks.scss";
+ */
+// @import "imports/reset.css";
 
 html,
 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;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: #282c34;
+  color: white;
+}
+
+a {
+  color: pink;
+  text-decoration: none;
+}
+
+.content {
+  padding: 0 32px;
+}
+
 // vim:set filetype=scss:

src/index.js

@@ -2,18 +2,5 @@
 
 import "./css/main.css";
 
-window.addEventListener("DOMContentLoaded", () => {
+// Say hello
-  const TRANSITION_DURATION = 1000;
+console.log("🦊 Hello! Edit me in src/index.js");
-  const INTERVAl = TRANSITION_DURATION + 600;
-  const blockParent = document.getElementById("js-block-parent");
-
-  if (blockParent) {
-    let state = 0;
-    setInterval(() => {
-      blockParent.classList.remove(`state-${state}`);
-      state = state < 2 ? state + 1 : 0;
-      blockParent.classList.add(`state-${state}`);
-    }, INTERVAl);
-  }
-});
-