css animation experiments because I'm bored. #quarantine

.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'

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

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';

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>