From 85035f610d3b64f9086dd4aaec447988dfa6ffe4 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 30 May 2017 23:10:27 +0200
Subject: [PATCH] ipdb rocket tweaks

---
 _src/_assets/styles/_ipdb.scss | 221 +++++++++++++++++++++++++++++++--
 1 file changed, 212 insertions(+), 9 deletions(-)

diff --git a/_src/_assets/styles/_ipdb.scss b/_src/_assets/styles/_ipdb.scss
index f37703a..973a36f 100644
--- a/_src/_assets/styles/_ipdb.scss
+++ b/_src/_assets/styles/_ipdb.scss
@@ -1,7 +1,6 @@
 .ipdb {
     text-align: center;
     background: linear-gradient(-45deg, #114656 0%, #062e38 100%);
-    overflow: hidden;
 
     a {
         font-weight: $font-weight-light;
@@ -13,6 +12,10 @@
         &:hover {
             background: none;
             color: #fff;
+
+            .ipdb-rocket {
+                animation: shake .1s ease-in-out infinite;
+            }
         }
     }
 }
@@ -23,20 +26,220 @@
 }
 
 .ipdb-rocket {
+    @include transition;
     fill: #fff;
     position: absolute;
     right: 0;
-    top: -.5rem;
-    width: 4rem;
-    height: 2.8rem;
+    top: -1.2rem;
+    width: 5rem;
+    height: 3.7rem;
     opacity: .3;
+    transform: scaleX(-1); // lazy flip it around
 
     @media ($screen-sm) {
         opacity: 1;
-        right: -5rem;
-    }
-
-    @media ($screen-md) {
-
+        right: -4.5rem;
+    }
+}
+
+@keyframes shake {
+    2% {
+        transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
+    }
+
+    4% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    6% {
+        transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
+    }
+
+    8% {
+        transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
+    }
+
+    10% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    12% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    14% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    16% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    18% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    20% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    22% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    24% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    26% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    28% {
+        transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
+    }
+
+    30% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    32% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    34% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    36% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    38% {
+        transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
+    }
+
+    40% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    42% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    44% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    46% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    48% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    50% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    52% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    54% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    56% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    58% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    60% {
+        transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
+    }
+
+    62% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    64% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    66% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    68% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    70% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    72% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    74% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    76% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    78% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    80% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    82% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    84% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    86% {
+        transform: scaleX(-1) translate(0px, 1px) rotate(.5deg)
+    }
+
+    88% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    90% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    92% {
+        transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
+    }
+
+    94% {
+        transform: scaleX(-1) translate(0px, 0px) rotate(.5deg)
+    }
+
+    96% {
+        transform: scaleX(-1) translate(1px, 1px) rotate(.5deg)
+    }
+
+    98% {
+        transform: scaleX(-1) translate(1px, 0px) rotate(.5deg)
+    }
+
+    0%, 100% {
+        transform: scaleX(-1) translate(0, 0) rotate(0)
     }
 }