resolves #1 by only showing logo every 24hrs

Author: mattkersley

_includes/head.html

@@ -15,10 +15,24 @@
   {% include head--icons.html %}
 
   <script>
-    // when the whole document has loaded, add a CSS class
+
+    // global vars
+    var today = new Date();
+    var tomorrow = new Date();
+        tomorrow.setDate(tomorrow.getDate() + 1);
+    var playLogo = false;
+
+    // if we have localstorage,
+    // see if the logo_expiry has happened or not
+    if (window.localStorage) {
+      var expires = new Date(localStorage.getItem('logo_expiry'));
+      playLogo = (today - expires > 0);
+    }
+
+    // if the logo animation has been played already, just load the content
     window.onload = function(){
-      var body = document.getElementsByTagName('body')[0]
-      if (body.className.indexOf('home') == -1) {
+      var body = document.getElementsByTagName('body')[0];
+      if (!playLogo || body.className.indexOf('home') < 0) {
         body.className += ' loaded';
       }
     };

_includes/header.html

@@ -1,7 +1,22 @@
 <script>
+  var body = document.getElementsByTagName('body')[0];
+
   // we add this inline to let the CSS know we have JS capability
   // as soon as humanly possible.
-  document.getElementsByTagName('body')[0].className += ' js';
+  body.className += ' js';
+
+  // if our logo animation hasn't been played in 24 hours,
+  // clear the localstorage ready to play it (next code block)
+  if (playLogo) {
+    localStorage.removeItem('logo_expiry');
+  }
+
+  // if we're on the homepage, and the logo animation hasn't played before
+  // add an "animate" css class and set the localstorage item
+  if (body.className.indexOf('home') > -1 && playLogo && window.localStorage) {
+    body.className += ' animate-logo';
+    localStorage.setItem("logo_expiry", tomorrow);
+  }
 </script>
 
 <header class="site-header">

_sass/logo.scss

@@ -16,7 +16,7 @@ svg { display:block; margin: 0 auto; width: 280px; max-width: 80vw; }
 
 #logomark path { fill: $brand-color; }
 
-.home{
+.home.animate-logo{
 
   svg {
     width: 100%;

css/main.scss

@@ -70,7 +70,7 @@
 /**
  *  homepage content animation
  */
-.home {
+.home.animate-logo {
   .page-content {
     animation: movein 1.5s ease-out forwards 4s;
     opacity: 0;