initial commit

static/css/main.css

@@ -0,0 +1,174 @@
+:root {
+    --side-length: 30vw;
+    --side-length-neg: -30vw;
+    --side-length-half: calc(var(--side-length) / 2);
+    --side-length-half-neg: calc(var(--side-length-neg) / 2);
+    --colour-bg-main: #d4c3a3;
+    --colour-bg-secondary: #4a4a4a;
+    --colour-primary: #f6e8d4;
+    --colour-text-main: #fff;
+    --colour-cube-1: #dd4814;
+    --colour-cube-2: #0497aa;
+}
+
+@font-face {
+    font-family: "Montserrat";
+    src: url(../fonts/montserrat/Montserrat-Medium.otf) format("truetype");
+}
+
+html {
+    font-family: Montserrat, Verdana, Tahoma;
+    color: var(--colour-text-main);
+    background-color: var(--colour-bg-main);
+    font-size: 16px;
+    color: var(--colour-primary);
+}
+
+body {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+header, footer {
+    padding: 0 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--colour-bg-secondary);
+    height: 4rem;
+}
+
+header {
+    font-size: 2rem;
+    justify-content: flex-end;
+}
+
+footer {
+    height: 2.5rem;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.wrap {
+    transition: opacity linear 3s;
+	perspective: 250vw;
+    perspective-origin: 500% 50vw;
+    width: var(--side-length);
+    height: var(--side-length);
+}
+
+.cube {
+    transform-style: preserve-3d;
+    width: var(--side-length);
+    height: var(--side-length);
+	animation: spin 50s infinite ease-in-out;
+}
+
+.wrap:hover {
+    opacity: 0.1;
+}
+
+.cube div {
+	position: absolute;
+    width: var(--side-length);
+    height: var(--side-length);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.cube div div {
+    opacity: 0.8;
+    background-color: var(--colour-bg-secondary);
+    width: 90%;
+    height: 90%;
+}
+.cube div div:hover {
+    opacity: 0.2;
+}
+
+.front div, .back div {
+	animation: fb 50s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.left div, .right div {
+	animation: rl 50s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.top div, .bottom div {
+	animation: tb 50s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.back {
+	transform: translateZ(var(--side-length-half-neg)) rotateY(180deg);
+}
+.right {
+	transform: rotateY(-270deg) translateX(var(--side-length-half));
+	transform-origin: top right;
+}
+.left {
+	transform: rotateY(270deg) translateX(var(--side-length-half-neg));
+	transform-origin: center left;
+}
+.top {
+	transform: rotateX(-90deg) translateY(var(--side-length-half-neg));
+	transform-origin: top center;
+}
+.bottom {
+	transform: rotateX(90deg) translateY(var(--side-length-half));
+	transform-origin: bottom center;
+}
+
+.front {
+	transform: translateZ(var(--side-length-half));
+}
+.cube .front div {
+    opacity: 0.9;
+	transform: translateZ(var(--side-length-half));
+    background-color: #a39494;
+}
+.cube .bottom div {
+    background-color: #7d7d7d;
+}
+
+@keyframes spin {
+	0%, 10% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
+	11%, 20% { transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg); }
+	21%, 35% { transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg); }
+	36%, 50% { transform: rotateX(90deg) rotateY(90deg) rotateZ(180deg); }
+	51%, 65% { transform: rotateX(90deg) rotateY(90deg) rotateZ(360deg); }
+	66%, 80% { transform: rotateX(180deg) rotateY(90deg) rotateZ(360deg); }
+	81%, 99% { transform: rotateX(180deg) rotateY(360deg) rotateZ(360deg); }
+	100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
+}
+
+@keyframes fb {
+	0%, 9% { border-radius: 0; }
+	10%, 11% { border-radius: 50% }
+	12%, 49% { border-radius: 0; }
+	50%, 51% { border-radius: 50%; }
+	52%, 64% { border-radius: 0; }
+	65%, 66% { border-radius: 50%; }
+	67%, 100% { border-radius: 0; }
+}
+
+@keyframes rl {
+	0%, 19% { border-radius: 0; }
+	20%, 21% { border-radius: 50%; }
+	22%, 98% { border-radius: 0; }
+	99%, 100% { border-radius: 50% }
+}
+
+@keyframes tb {
+	0%, 34% { border-radius: 0; }
+	35%, 36% { border-radius: 50%; }
+	37%, 79% { border-radius: 0; }
+	80%, 81% { border-radius: 50%; }
+	82%, 100% { border-radius: 0; }
+}