Compare commits
No commits in common. "cb4df1c2039fb048398cb8b1c498abb5c5b1be5f" and "f826c0e39b6a7d3d8022fa8be3f2dd0096f68891" have entirely different histories.
cb4df1c203
...
f826c0e39b
|
|
@ -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">
|
||||
{{ partial "block.html" . }}
|
||||
</section>
|
||||
<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>
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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:
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@mixin abs-full {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -1,14 +1,43 @@
|
|||
@tailwind base;
|
||||
|
||||
@tailwind components;
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
@import "imports/mixins.scss";
|
||||
|
||||
@import "imports/blocks.scss";
|
||||
/*
|
||||
You can use import statements to include partials:
|
||||
*/
|
||||
// @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:
|
||||
|
|
|
|||
17
src/index.js
17
src/index.js
|
|
@ -2,18 +2,5 @@
|
|||
|
||||
import "./css/main.css";
|
||||
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
const TRANSITION_DURATION = 1000;
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
// Say hello
|
||||
console.log("🦊 Hello! Edit me in src/index.js");
|
||||
|
|
|
|||
Reference in New Issue