Moved mascot to the left, made her clickable with sound

public/css/style-night.css

@@ -56,7 +56,7 @@
     background-color: #29363d;
 }
 
-li#mascot {
+#mascot {
 	background-image: url(/img/megumin.png);
 }
 

public/css/style.css

@@ -59,11 +59,13 @@ padding:2px 0;
     background: white;
 }
 
-li#mascot {
+#mascot {
 	background-image: url(/img/renchon.png);
 	width: 125px;
 	height: 169px;
-	margin-bottom: -5px;
+  position: fixed;
+  bottom: 0px;
+  left: 2%;
 }
 /* This used to avoid usage of Javascript for switching images. */
 

public/js/main.js

@@ -45,3 +45,13 @@ window.onload = function() {
 if (location.hash) shiftWindow();
 window.addEventListener("hashchange", shiftWindow);
 };
+
+
+$('#mascot').bind('touchstart mousedown click', function(e){
+	var night = localStorage.getItem("night");
+    if(night == "true") {
+		$('#explosion')[0].play();
+    } else {
+		$('#nyaapassu')[0].play();
+    }
+});

templates/home.html

@@ -1,12 +1,24 @@
 {{define "title"}}{{T "home"}}{{end}}
 {{define "contclass"}}cont-home{{end}}
 {{define "content"}}
+
+<audio id="nyaapassu" hidden>
+  <source src="http://nyanpass.com/nyanpass.mp3" type="audio/mpeg">
+Your browser does not support the audio element.
+</audio>
+<audio id="explosion" hidden>
+  <source src="https://megumin.love/sounds/explosion.mp3" type="audio/mpeg">
+Your browser does not support the audio element.
+</audio>
+
+  <span id="mascot" class="visible-lg-block"></span>
+
   <div class="blockBody">
+      <nav>
       <ul class="list-inline" aria-label="Page navigation">
-          <li id="mascot"></li>
-          <li style="padding-top: 7%;" class="pull-right"><ul class="pagination">
+          <li><ul class="pagination">
               {{ genNav .Navigation .URL 5 }}
-          </ul></li>
+          </li></ul>
       </nav>
 
       <div class="table-responsive">