diff --git a/docs/css/style.css b/docs/css/style.css index 9328d56..d4db5f4 100644 --- a/docs/css/style.css +++ b/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); } diff --git a/docs/theme/theme.js b/docs/theme/theme.js index 9b41a28..fe84557 100644 --- a/docs/theme/theme.js +++ b/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; + } +};