added amimations to logo-tiles on clicks

docs/css/style.css

@@ -73,6 +73,25 @@
   }
 }
 
+@-moz-keyframes spin {
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 @keyframes root-gradient {
   0% {
     opacity: 0;
@@ -279,6 +298,12 @@ main p:nth-child(4) {
   animation-delay: calc(var(--logo-tiles-in-delay) * 3);
 }
 
+.spin {
+  -webkit-animation: spin 0.5s linear;
+  -moz-animation: spin 0.5s linear;
+  animation: spin 0.5s linear;
+}
+
 /* Main */
 
 main h1 {
@@ -294,15 +319,19 @@ main h1 {
 main p {
   animation: var(--move-in-animation);
 }
+
 main p:nth-of-type(1) {
   animation-delay: calc(var(--move-in-base-delay) * 5);
 }
+
 main p:nth-of-type(2) {
   animation-delay: calc(var(--move-in-base-delay) * 6);
 }
+
 main p:nth-of-type(3) {
   animation-delay: calc(var(--move-in-base-delay) * 7);
 }
+
 main p:nth-of-type(4) {
   animation-delay: calc(var(--move-in-base-delay) * 8);
 }

docs/theme/theme.js

@@ -1,8 +1,32 @@
 var $body = document.body;
 var activeTheme = "dark";
+var mstiles = [
+  "logo-tile--red",
+  "logo-tile--green",
+  "logo-tile--blue",
+  "logo-tile--yellow"
+];
+var next = 0;
 
 document.querySelector(".theme").onclick = function(e) {
   $body.classList.remove("js-theme-" + activeTheme);
   activeTheme = activeTheme === "dark" ? "light" : "dark";
   $body.classList.add("js-theme-" + activeTheme);
 };
+
+function clearClass(x) {
+  setTimeout(function() {
+    x.remove("spin");
+  }, 1200);
+}
+
+document.onclick = function(e) {
+  var el = document.getElementsByClassName(mstiles[next]);
+  var elClasses = el[0].classList;
+  elClasses.add("spin");
+  clearClass(elClasses);
+  next++;
+  if (next >= 4) {
+    next = 0;
+  }
+};