:Octoright octoflop

It should be obvious, no?

7 files changed, 53 insertions, 3 deletions

diff --git a/docs/about/githubbub.md b/docs/about/githubbub.md
index eceac1d..63c6df6 100644
--- a/docs/about/githubbub.md
+++ b/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
diff --git a/docs/about/resume.html b/docs/about/resume.html
index 241d06a..d3adbe2 100644
--- a/docs/about/resume.html
+++ b/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" />
diff --git a/docs/about/resume/style.css b/docs/about/resume/style.css
index e66768b..ff009cd 100644
--- a/docs/about/resume/style.css
+++ b/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;
diff --git a/images/octoright-42.png b/images/octoright-42.png
new file mode 100644
index 0000000..1f863f4
--- /dev/null
+++ b/images/octoright-42.png
diff --git a/images/octoright-large.png b/images/octoright-large.png
new file mode 100644
index 0000000..201467a
--- /dev/null
+++ b/images/octoright-large.png
diff --git a/style.css b/style.css
index 55e2273..d3031c7 100644
--- a/style.css
+++ b/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;
 
diff --git a/tpl/.config b/tpl/.config
index 1aa2b24..094eabb 100644
--- a/tpl/.config
+++ b/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"