From dd05444d21ba23fbfd216d997fadb4906b987917 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Thu, 2 Apr 2020 21:36:37 -0400
Subject: [PATCH] css animation experiments because I'm bored. #quarantine

---
 .percy.yml                                    |  3 +++
 .../components/{_wave.scss => _magic.scss}    | 22 ++++++++++++++-----
 assets/sass/main.scss                         |  2 +-
 layouts/partials/page/footer.html             |  2 +-
 4 files changed, 21 insertions(+), 8 deletions(-)
 rename assets/sass/components/{_wave.scss => _magic.scss} (53%)

diff --git a/.percy.yml b/.percy.yml
index 14a5b810..8e76fe6e 100644
--- a/.percy.yml
+++ b/.percy.yml
@@ -12,6 +12,9 @@ snapshot:
     div.highlight {
       border: 0;  /* no clue why this bugs out... */
     }
+    .wave, .beat {
+      animation: none;
+    }
 static-snapshots:
   path: public/
   snapshot-files: '**/index.html'
diff --git a/assets/sass/components/_wave.scss b/assets/sass/components/_magic.scss
similarity index 53%
rename from assets/sass/components/_wave.scss
rename to assets/sass/components/_magic.scss
index dfe78963..657039a8 100644
--- a/assets/sass/components/_wave.scss
+++ b/assets/sass/components/_magic.scss
@@ -1,15 +1,16 @@
 @charset "UTF-8";
 
-/*! Magic Waving Hand™ - https://go.jarv.is/wave */
-
-span.wave {
+.wave {
   display: inline-block;
-  animation-name: wave;
-  animation-duration: 2.5s;
-  animation-iteration-count: infinite;
+  animation: wave 2.5s infinite;
   transform-origin: 70% 70%;
 }
 
+.beat {
+  display: inline-block;
+  animation: beat 2s infinite;   // 30 bpm, call 911 if you see this please.
+}
+
 // stylelint-disable indentation
 @keyframes wave {
   0% { transform: rotate(  0.0deg); }
@@ -20,4 +21,13 @@ span.wave {
  50% { transform: rotate(  0.0deg); }
 100% { transform: rotate(  0.0deg); }
 }
+
+@keyframes beat {
+  0% { transform: scale(1.0); }
+ 10% { transform: scale(1.25); }
+ 20% { transform: scale(1.0); }
+ 30% { transform: scale(1.25); }
+ 40% { transform: scale(1.0); }
+100% { transform: scale(1.0); }
+}
 // stylelint-enable indentation
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 229215df..5b8e900f 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -29,4 +29,4 @@ $base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}/";   // consistent trailin
 
 // Miscellaneous
 @import 'components/syntax';
-@import 'components/wave';
+@import 'components/magic';
diff --git a/layouts/partials/page/footer.html b/layouts/partials/page/footer.html
index 0dcd47b4..773eede8 100644
--- a/layouts/partials/page/footer.html
+++ b/layouts/partials/page/footer.html
@@ -5,7 +5,7 @@
     <div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam" title="Live Panda Party!!!11" target="_blank" rel="noopener"><span>&#x1F43C;</span></a></div>
 
     <div id="poweredby">
-      <a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener">Powered by Hugo.</a>
+      <a class="no-underline" href="https://gohugo.io/" title="Powered by Hugo" id="hugo" target="_blank" rel="noopener">Made with <span class="beat">&#x2764;</span> and Hugo.</a>
       {{ with .Site.Params.gitRepo }}<a class="no-underline" href="{{ . }}" title="View Source on GitHub" id="source" target="_blank" rel="noopener">View source.</a>{{ end }}
     </div>
   </div>