:Octoright octoflop

It should be obvious, no?

docs/about/githubbub.md

@@ -1,6 +1,6 @@
 ### GitHubbub!  GitHub Does Not Value Software Freedom.
 
-<div class="inline-img">![GitHub](/images/github-mark-large.png "GitHubbub!")</div>
+<div class="inline-img octoflop">![GitHub](/images/octoright-large.png "GitHubbub!")</div>
 
 If you hit this page expecting to have been taken to my GitHub profile, then
 this is probably not what you were looking for.  But let me tell you why

docs/about/resume.html

@@ -61,7 +61,7 @@
         </li>
         <li>
           <a href="https://github.com/mikegerwitz">
-            <img src="/images/github-42.png"
+            <img src="/images/octoright-42.png"
                  width="42" height="42"
                  alt="See me on GitHub"
                  title="See me on GitHub" />

docs/about/resume/style.css

@@ -216,6 +216,12 @@ h1 { font-size: 2.2em; }
 #header ul.links a {
   border:  none;
 }
+#header ul.links img {
+  transition: transform 0.25s;
+}
+#header ul.links img[src*=octoright]:hover {
+  transform: rotate(-20deg);
+}
 
 #header #infobox {
   float:      right;

style.css

@@ -296,6 +296,50 @@ body.index footer hr,
   text-decoration: none;
 }
 
+#selflinks img {
+  transition: transform 0.25s;
+}
+#selflinks img[src*=octoright]:hover {
+  transform: rotate(-20deg);
+}
+
+.octoflop {
+  /* make upright again (image is rotated 270deg) */
+  transform: rotate(90deg);
+
+  animation-duration: 2s;
+  animation-delay: 2s;
+  animation-name: octoflop;
+  animation-fill-mode: forwards;
+}
+
+@keyframes octoflop {
+  30% {
+    transform: rotate(-35deg);
+  }
+  50% {
+    transform: rotate(25deg);
+  }
+  65% {
+    transform: rotate(-17deg);
+  }
+  75% {
+    transform: rotate(10deg);
+  }
+  85% {
+    transform: rotate(-5deg);
+  }
+  90% {
+    transform: rotate(3deg);
+  }
+  95% {
+    transform: rotate(-2deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
 .hn-icon {
     display: block;
 

tpl/.config

@@ -123,7 +123,7 @@ html_index_footer=$(cat <<EOM
     </a>
 
     <a href="/about/githubbub">
-      <img src="/images/github-42.png"
+      <img src="/images/octoright-42.png"
         alt="Don't see me on GitHub"
         title="Don't see me on GitHub"
         width="42" height="42" border="0"