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

3 files changed, 492 insertions, 48 deletions

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