Fun Stuff is separated to good stuff and site spells. Harlem Shake and DVD Spells added; Oneko is now a spell

10 files changed, 758 insertions, 70 deletions

diff --git a/static/audio/spells/harlem-shake.mp3 b/static/audio/spells/harlem-shake.mp3
new file mode 100644
index 00000000..315fe34a
--- /dev/null
+++ b/static/audio/spells/harlem-shake.mp3
diff --git a/static/css/harlem-shake.css b/static/css/harlem-shake.css
new file mode 100644
index 00000000..65597b30
--- /dev/null
+++ b/static/css/harlem-shake.css
@@ -0,0 +1,424 @@
+/* .im_drunk, .im_baked, .im_trippin, .im_blown */
+
+.mw-strobe_light {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  background-color: rgba(250, 250, 250, 0.8);
+  display: block;
+}
+
+.mw-harlem_shake_me {
+  transition: all 0.8s ease-in-out;
+  -moz-transition: all 0.8s ease-in-out;
+  -webkit-transition: all 0.8s ease-in-out;
+  -o-transition: all 0.8s ease-in-out;
+  -ms-transition: all 0.8s ease-in-out;
+
+  animation: spin 1s infinite linear;
+  -moz-animation: spin 1s infinite linear;
+  -webkit-animation: spin 1s infinite linear;
+  -o-animation: spin 1s infinite linear;
+  -ms-animation: spin 1s infinite linear;
+}
+
+.mw-harlem_shake_slow {
+  transition: all 3.2s ease-in-out;
+  -moz-transition: all 3.2s ease-in-out;
+  -webkit-transition: all 3.2s ease-in-out;
+  -o-transition: all 3.2s ease-in-out;
+  -ms-transition: all 3.2s ease-in-out;
+
+  animation: spin 4s infinite linear;
+  -moz-animation: spin 4s infinite linear;
+  -webkit-animation: spin 4s infinite linear;
+  -o-animation: spin 4s infinite linear;
+  -ms-animation: spin 4s infinite linear;
+}
+
+/*
+  Animate.css - http://daneden.me/animate
+  Licensed under the ☺ license (http://licence.visualidiot.com/)
+  But we have it modified for our use.
+  */
+body {
+  -webkit-backface-visibility: hidden;
+}
+
+.mw-harlem_shake_me {
+  -webkit-animation-duration: 0.4s;
+  -moz-animation-duration: 0.4s;
+  -o-animation-duration: 0.4s;
+  animation-duration: 0.4s;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.mw-harlem_shake_slow {
+  -webkit-animation-duration: 1.6s;
+  -moz-animation-duration: 1.6s;
+  -o-animation-duration: 1.6s;
+  animation-duration: 1.6s;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.flash,
+.mw-strobe_light {
+  -webkit-animation-name: flash;
+  -moz-animation-name: flash;
+  -o-animation-name: flash;
+  animation-name: flash;
+}
+
+@-webkit-keyframes shake {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    -webkit-transform: translateX(10px);
+  }
+}
+
+@-moz-keyframes shake {
+  0%,
+  100% {
+    -moz-transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -moz-transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    -moz-transform: translateX(10px);
+  }
+}
+
+@-o-keyframes shake {
+  0%,
+  100% {
+    -o-transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -o-transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    -o-transform: translateX(10px);
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(10px);
+  }
+}
+
+.shake,
+.im_baked {
+  -webkit-animation-name: shake;
+  -moz-animation-name: shake;
+  -o-animation-name: shake;
+  animation-name: shake;
+}
+
+.swing,
+.im_drunk {
+  -webkit-transform-origin: top center;
+  -moz-transform-origin: top center;
+  -o-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-animation-name: swing;
+  -moz-animation-name: swing;
+  -o-animation-name: swing;
+  animation-name: swing;
+}
+
+@-webkit-keyframes wobble {
+  0% {
+    -webkit-transform: translateX(0%);
+  }
+  15% {
+    -webkit-transform: translateX(-15%) rotate(-4deg);
+  }
+  30% {
+    -webkit-transform: translateX(12%) rotate(3deg);
+  }
+  45% {
+    -webkit-transform: translateX(-9%) rotate(-2deg);
+  }
+  60% {
+    -webkit-transform: translateX(6%) rotate(2deg);
+  }
+  75% {
+    -webkit-transform: translateX(-3%) rotate(-1deg);
+  }
+  100% {
+    -webkit-transform: translateX(0%);
+  }
+}
+
+@-moz-keyframes wobble {
+  0% {
+    -moz-transform: translateX(0%);
+  }
+  15% {
+    -moz-transform: translateX(-15%) rotate(-5deg);
+  }
+  30% {
+    -moz-transform: translateX(12%) rotate(3deg);
+  }
+  45% {
+    -moz-transform: translateX(-9%) rotate(-3deg);
+  }
+  60% {
+    -moz-transform: translateX(6%) rotate(2deg);
+  }
+  75% {
+    -moz-transform: translateX(-3%) rotate(-1deg);
+  }
+  100% {
+    -moz-transform: translateX(0%);
+  }
+}
+
+@-o-keyframes wobble {
+  0% {
+    -o-transform: translateX(0%);
+  }
+  15% {
+    -o-transform: translateX(-15%) rotate(-5deg);
+  }
+  30% {
+    -o-transform: translateX(12%) rotate(3deg);
+  }
+  45% {
+    -o-transform: translateX(-9%) rotate(-3deg);
+  }
+  60% {
+    -o-transform: translateX(6%) rotate(2deg);
+  }
+  75% {
+    -o-transform: translateX(-3%) rotate(-1deg);
+  }
+  100% {
+    -o-transform: translateX(0%);
+  }
+}
+
+@keyframes wobble {
+  0% {
+    transform: translateX(0%);
+  }
+  ` 15% {
+    transform: translateX(-15%) rotate(-5deg);
+  }
+  30% {
+    transform: translateX(12%) rotate(3deg);
+  }
+  45% {
+    transform: translateX(-9%) rotate(-3deg);
+  }
+  60% {
+    transform: translateX(6%) rotate(2deg);
+  }
+  75% {
+    transform: translateX(-3%) rotate(-1deg);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+.wobble,
+.im_first {
+  -webkit-animation-name: wobble;
+  -moz-animation-name: wobble;
+  -o-animation-name: wobble;
+  animation-name: wobble;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+  }
+  50% {
+    -webkit-transform: scale(1.1);
+  }
+  100% {
+    -webkit-transform: scale(1);
+  }
+}
+@-moz-keyframes pulse {
+  0% {
+    -moz-transform: scale(1);
+  }
+  50% {
+    -moz-transform: scale(1.1);
+  }
+  100% {
+    -moz-transform: scale(1);
+  }
+}
+@-o-keyframes pulse {
+  0% {
+    -o-transform: scale(1);
+  }
+  50% {
+    -o-transform: scale(1.1);
+  }
+  100% {
+    -o-transform: scale(1);
+  }
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.pulse,
+.im_blown {
+  -webkit-animation-name: pulse;
+  -moz-animation-name: pulse;
+  -o-animation-name: pulse;
+  animation-name: pulse;
+}
+
+@-webkit-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.3);
+  }
+
+  50% {
+    opacity: 1;
+    -webkit-transform: scale(1.05);
+  }
+
+  70% {
+    -webkit-transform: scale(0.9);
+  }
+
+  100% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@-moz-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -moz-transform: scale(0.3);
+  }
+
+  50% {
+    opacity: 1;
+    -moz-transform: scale(1.05);
+  }
+
+  70% {
+    -moz-transform: scale(0.9);
+  }
+
+  100% {
+    -moz-transform: scale(1);
+  }
+}
+
+@-o-keyframes bounceIn {
+  0% {
+    opacity: 0;
+    -o-transform: scale(0.3);
+  }
+
+  50% {
+    opacity: 1;
+    -o-transform: scale(1.05);
+  }
+
+  70% {
+    -o-transform: scale(0.9);
+  }
+
+  100% {
+    -o-transform: scale(1);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+
+  70% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.bounceIn,
+.im_trippin {
+  -webkit-animation-name: bounceIn;
+  -moz-animation-name: bounceIn;
+  -o-animation-name: bounceIn;
+  animation-name: bounceIn;
+}
diff --git a/static/css/sidebar.css b/static/css/sidebar.css
index 35e7a853..fc795fd4 100644
--- a/static/css/sidebar.css
+++ b/static/css/sidebar.css
@@ -1,8 +1,8 @@
-
 #sidebar {
-    width: 250px;
+  width: 250px;
 }
 
+#site-spells ul,
 #navigation-area ul,
 #archives-area ul,
 #categories-area ul,
@@ -10,7 +10,8 @@
 #announcements ul,
 #user-area ul,
 #fun-stuff ul,
-#activity ul, 
+#activity ul,
+#site-spells li,
 #navigation-area li,
 #archives-area li,
 #categories-area li,
@@ -19,15 +20,16 @@
 #user-area li,
 #fun-stuff li,
 #activity li {
-    margin: 0px;
-    padding: 0px;
+  margin: 0px;
+  padding: 0px;
 }
 
 #register_form ul {
-    padding: 0px;
-    list-style-type: none;
+  padding: 0px;
+  list-style-type: none;
 }
 
+#site-spells li,
 #navigation-area li,
 #archives-area li,
 #categories-area li,
@@ -36,24 +38,26 @@
 #user-area li,
 #fun-stuff li,
 #activity li {
-    display: block;
-    list-style-type: none;
+  display: block;
+  list-style-type: none;
 }
 
+#site-spells img,
 #navigation-area img,
 #archives-area img,
 #categories-area img,
 #user-area img,
 #fun-stuff img {
-    width: 24px;
-    vertical-align: middle;
+  width: 24px;
+  vertical-align: middle;
 }
 
 #admin-area img {
-    width: 14px;
-    vertical-align: middle;
+  width: 14px;
+  vertical-align: middle;
 }
 
+#site-spells span,
 #navigation-area span,
 #archives-area span,
 #categories-area span,
@@ -61,65 +65,87 @@
 #announcements span,
 #user-area span,
 #fun-stuff span {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 #user-area {
-    background: url('../images/backgrounds/user-area.png') no-repeat;
-    background-size: 250px 150px;
-    width: 250px;
-    height: 150px;
+  background: url("../images/backgrounds/user-area.png") no-repeat;
+  background-size: 250px 150px;
+  width: 250px;
+  height: 150px;
 }
 
 #user-area > h2 {
-    margin: 0;
-    padding: 0;
-    border: none;
-    position: relative;
-    left: 100px;
-    top: 15px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  position: relative;
+  left: 100px;
+  top: 15px;
 }
 
 #user-area > ul {
-    position: absolute;
-    left: 110px;
-    top: 58px;
+  position: absolute;
+  left: 110px;
+  top: 58px;
 }
 
+#site-spells h2,
 #navigation-area h2,
 #archives-area h2,
 #categories-area h2,
 #admin-area h2,
 #fun-stuff h2,
 #online-users h2 {
-    background: #311b4f;
-    padding: 10px 15px;
-    text-align: left;
-    margin: 0;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    border-bottom: none;
-    font-size: 13px;
-    text-transform: capitalize;
+  background: #311b4f;
+  padding: 10px 15px;
+  text-align: left;
+  margin: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom: none;
+  font-size: 13px;
+  text-transform: capitalize;
 }
 
+#site-spells ul,
 #navigation-area ul,
 #archives-area ul,
 #categories-area ul,
 #admin-area ul,
 #fun-stuff ul,
 #online-users div {
-    background: #f4f1e90f;
-    padding: 10px;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
+  background: #f4f1e90f;
+  padding: 10px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
 }
 
 #online-users div > ul {
-    padding: 0 0 0 20px;
+  padding: 0 0 0 20px;
 }
 
 #online-users p {
-    margin: 0;
+  margin: 0;
+}
+
+#black {
+  height: 100vh;
+  width: 100vw;
+  position: relative;
+  background: #00000069;
+  z-index: 3;
 }
 
+#dvd {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 100px;
+  width: 200px;
+  mask: url("https://upload.wikimedia.org/wikipedia/commons/9/9b/DVD_logo.svg");
+  -webkit-mask: url("https://upload.wikimedia.org/wikipedia/commons/9/9b/DVD_logo.svg");
+  background-repeat: no-repeat;
+  background-size: 150px;
+  background-position: center;
+}
diff --git a/static/css/styles.css b/static/css/styles.css
index d208597d..326148c5 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -499,12 +499,6 @@ blockquote {
     margin-bottom: 10px;
 }
 
-#categories-area>ul,
-#archives-area>ul {
-    position: relative;
-    z-index: 1;
-}
-
 #anonymous-profile-info > div, #anonymous-profile-info > #creds > div {
     margin: 10px 0;
 }
diff --git a/static/images/site/dvd.gif b/static/images/site/dvd.gif
new file mode 100644
index 00000000..bde16457
--- /dev/null
+++ b/static/images/site/dvd.gif
diff --git a/static/images/site/patrick-star.gif b/static/images/site/patrick-star.gif
new file mode 100644
index 00000000..5cac5379
--- /dev/null
+++ b/static/images/site/patrick-star.gif
diff --git a/static/js/globals.js b/static/js/globals.js
index 61b3fcce..c10d9016 100644
--- a/static/js/globals.js
+++ b/static/js/globals.js
@@ -15,19 +15,23 @@ function changeLang(lang) {
 }
 
 function copyToClipboard(text) {
-  $('body').append('<input type="text" value="' + text + '" id="copyToClipboard">');
-  const copyText = $('#copyToClipboard');
+  $("body").append(
+    '<input type="text" value="' + text + '" id="copyToClipboard">'
+  );
+  const copyText = $("#copyToClipboard");
   copyText.select();
   copyText[0].setSelectionRange(0, 99999);
-  navigator.clipboard.writeText(copyText.val()).then(function () {
-    alert("Copied to clipboard!");
-  }, function (err) {
-    alert("Failed to copy to clipboard!");
-  });
+  navigator.clipboard.writeText(copyText.val()).then(
+    function () {
+      alert("Copied to clipboard!");
+    },
+    function (err) {
+      alert("Failed to copy to clipboard!");
+    }
+  );
   copyText.remove();
 }
 
-
 // Smooth scroll to anchor
 $(document).ready(function () {
   $('a[href^="#"]').on("click", function (e) {
@@ -61,15 +65,3 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   }
 });
-
-function summonOneko() {
-  document.cookie =
-    "summonOneko=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
-  location.reload();
-}
-
-function withdrawOneko() {
-  document.cookie =
-    "summonOneko=false; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
-  location.reload();
-}
diff --git a/static/js/spells.js b/static/js/spells.js
new file mode 100644
index 00000000..096d25d4
--- /dev/null
+++ b/static/js/spells.js
@@ -0,0 +1,220 @@
+function summonOneko() {
+  document.cookie =
+    "summonOneko=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
+  location.reload();
+}
+
+function withdrawOneko() {
+  document.cookie =
+    "summonOneko=false; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
+  location.reload();
+}
+
+function harlemShakeAndBake() {
+  function c() {
+    var e = document.createElement("link");
+    e.setAttribute("type", "text/css");
+    e.setAttribute("rel", "stylesheet");
+    e.setAttribute("href", f);
+    e.setAttribute("class", l);
+    document.body.appendChild(e);
+  }
+  function h() {
+    var e = document.getElementsByClassName(l);
+    for (var t = 0; t < e.length; t++) {
+      document.body.removeChild(e[t]);
+    }
+  }
+  function p() {
+    var e = document.createElement("div");
+    e.setAttribute("class", a);
+    document.body.appendChild(e);
+    setTimeout(function () {
+      document.body.removeChild(e);
+    }, 100);
+  }
+  function d(e) {
+    return {
+      height: e.offsetHeight,
+      width: e.offsetWidth,
+    };
+  }
+  function v(i) {
+    var s = d(i);
+    return s.height > e && s.height < n && s.width > t && s.width < r;
+  }
+  function m(e) {
+    var t = e;
+    var n = 0;
+    while (!!t) {
+      n += t.offsetTop;
+      t = t.offsetParent;
+    }
+    return n;
+  }
+  function g() {
+    var e = document.documentElement;
+    if (!!window.innerWidth) {
+      return window.innerHeight;
+    } else if (e && !isNaN(e.clientHeight)) {
+      return e.clientHeight;
+    }
+    return 0;
+  }
+  function y() {
+    if (window.scrollY) {
+      return window.scrollY;
+    }
+    return Math.max(
+      document.documentElement.scrollTop,
+      document.body.scrollTop
+    );
+  }
+  function E(e) {
+    var t = m(e);
+    return t >= w && t <= b + w;
+  }
+  function S() {
+    var e = document.createElement("audio");
+    e.setAttribute("class", l);
+    e.src = i;
+    e.loop = false;
+    e.addEventListener(
+      "canplay",
+      function () {
+        setTimeout(function () {
+          x(k);
+        }, 500);
+        setTimeout(function () {
+          N();
+          p();
+          for (var e = 0; e < O.length; e++) {
+            T(O[e]);
+          }
+        }, 15500);
+      },
+      true
+    );
+    e.addEventListener(
+      "ended",
+      function () {
+        N();
+        h();
+      },
+      true
+    );
+    e.innerHTML =
+      " <p>If you are reading this, it is because your browser does not support the audio element. I recommend that you get a new browser.</p> <p>";
+    document.body.appendChild(e);
+    e.play();
+  }
+  function x(e) {
+    e.className += " " + s + " " + o;
+  }
+  function T(e) {
+    e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)];
+  }
+  function N() {
+    var e = document.getElementsByClassName(s);
+    var t = new RegExp("\\b" + s + "\\b");
+    for (var n = 0; n < e.length; ) {
+      e[n].className = e[n].className.replace(t, "");
+    }
+  }
+  var e = 30;
+  var t = 30;
+  var n = 350;
+  var r = 350;
+  var i = "/static/audio/spells/harlem-shake.mp3";
+  var s = "mw-harlem_shake_me";
+  var o = "im_first";
+  var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
+  var a = "mw-strobe_light";
+  var f = "/static/css/harlem-shake.css";
+  var l = "mw_added_css";
+  var b = g();
+  var w = y();
+  var C = document.getElementsByTagName("*");
+  var k = null;
+  for (var L = 0; L < C.length; L++) {
+    var A = C[L];
+    if (v(A)) {
+      if (E(A)) {
+        k = A;
+        break;
+      }
+    }
+  }
+  if (A === null) {
+    console.warn(
+      "Could not find a node of the right size. Please try a different page."
+    );
+    return;
+  }
+  c();
+  S();
+  var O = [];
+  for (var L = 0; L < C.length; L++) {
+    var A = C[L];
+    if (v(A)) {
+      O.push(A);
+    }
+  }
+}
+
+function dvd() {
+  let x = 0,
+    y = 0,
+    dirX = 1,
+    dirY = 1;
+  const speed = 2;
+  const pallete = ["#ff8800", "#e124ff", "#6a19ff", "#ff2188"];
+  let dvd = document.getElementById("dvd");
+  dvd.style.backgroundColor = pallete[0];
+  let prevColorChoiceIndex = 0;
+  let black = document.getElementById("black");
+  black.style.display = "block";
+  const dvdWidth = dvd.clientWidth;
+  const dvdHeight = dvd.clientHeight;
+
+  function getNewRandomColor() {
+    const currentPallete = [...pallete];
+    currentPallete.splice(prevColorChoiceIndex, 1);
+    const colorChoiceIndex = Math.floor(Math.random() * currentPallete.length);
+    prevColorChoiceIndex =
+      colorChoiceIndex < prevColorChoiceIndex
+        ? colorChoiceIndex
+        : colorChoiceIndex + 1;
+    const colorChoice = currentPallete[colorChoiceIndex];
+    return colorChoice;
+  }
+  function animate() {
+    const screenHeight = $(window).height();
+    const screenWidth = document.body.clientWidth;
+
+    if (y + dvdHeight >= screenHeight || y < 0) {
+      dirY *= -1;
+      dvd.style.backgroundColor = getNewRandomColor();
+    }
+    if (x + dvdWidth >= screenWidth || x < 0) {
+      dirX *= -1;
+
+      dvd.style.backgroundColor = getNewRandomColor();
+    }
+    x += dirX * speed;
+    y += dirY * speed;
+    dvd.style.left = x + "px";
+    dvd.style.top = y + "px";
+    window.requestAnimationFrame(animate);
+  }
+
+  window.requestAnimationFrame(animate);
+}
+
+function handleDVD() {
+  if ($("#black").css("display") === "none") {
+    dvd();
+  } else {
+    $("#black").css("display", "none");
+  }
+}
diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index b9c4b48d..cd605dae 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -4,7 +4,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0 " />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="{{ request.meta.description }}" />
     <meta name="image" content="{{ request.meta.image }}" />
     <meta name="url" content="{{ request.meta.url }}" />
@@ -147,6 +147,7 @@
     
     <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
     <script src="{% static 'js/globals.js' %}"></script>
+    <script src="{% static 'js/spells.js' %}"></script>
     <script src="{% static 'js/phone_compatibility.js' %}"></script>
     <script
       type="text/javascript"
diff --git a/templates/blog/partials/sidebar.html b/templates/blog/partials/sidebar.html
index c0611890..31ea7604 100644
--- a/templates/blog/partials/sidebar.html
+++ b/templates/blog/partials/sidebar.html
@@ -157,7 +157,7 @@
 </div>
 
 <div id="fun-stuff" class="mtctitem">
-    <h2>Fun Stuff</h2>
+    <h2>Good Stuff</h2>
     <ul>
         <li>
             <span>
@@ -189,6 +189,12 @@
                 </a>
             </span>
         </li>
+    </ul>
+</div>
+
+<div id="site-spells" class="mtctitem">
+    <h2>Site Spells</h2>
+    <ul>
         <li>
             {% if request.COOKIES.summonOneko == 'true' %}
                 <span>
@@ -210,6 +216,31 @@
                 </span>
             {% endif %}
         </li>
+        <li>
+            <span>
+                <img src="{% static 'images/site/patrick-star.gif' %}" alt="Patrick Star" border="0" id="patrick">
+            </span>
+            <span>
+                <a href="javascript:harlemShakeAndBake();">
+                    Harlem Shake
+                </a>
+            </span>
+        </li>
+        <li>
+            <div style="position: fixed; top: 0; left: 0;">
+                <div id="black" style="display: none;" onclick="javascript:handleDVD();">
+                    <div id="dvd"></div>
+                </div>
+            </div>
+            <span>
+                <img src="{% static 'images/site/dvd.gif' %}" alt="DVD" border="0">
+            </span>
+            <span>
+                <a href="javascript:handleDVD();">
+                    DVD SiteSaver
+                </a>
+            </span>
+        </li>
     </ul>
 </div>