Fix layout differences between day/night mode (fixes #493)

public/css/style-night.css

@@ -56,25 +56,9 @@
     background-color: #29363d;
 }
 
- /* #container.cont-home {
-     background: #29363d url(/img/megumin.png) no-repeat;
-}
-#container.cont-view {
-     background: #29363d url(/img/megumin.png) no-repeat;
-     background-size: 75px;
-}
-*/
-img#mascot {
-	display:block;
+li#mascot {
 	background-image: url(/img/megumin.png);
-	box-sizing: border-box;
-	height: 167px;
-	width: 125px;
-	padding-left: 125px;
 }
-/*The above is thanks to https://css-tricks.com/replace-the-image-in-an-img-with-css/
-Used to avoid the layout bugs caused by pure css background mascots, while still avoiding
-JS to switch the images.*/
 
 body {
     background-color:#282A2E;

public/css/style.css

@@ -59,16 +59,13 @@ padding:2px 0;
     background: white;
 }
 
-
-/*
-#container.cont-home {
-     background: white url(/img/renchon.png) no-repeat;
+li#mascot {
+	background-image: url(/img/renchon.png);
+	width: 125px;
+	height: 169px;
+	margin-bottom: -5px;
 }
-#container.cont-view {
-     background: white url(/img/renchon.png) no-repeat;
-     background-size: 61px;
-}
-*/
+/* This used to avoid usage of Javascript for switching images. */
 
 body {
     background-color: #ececec;

templates/home.html

@@ -3,7 +3,7 @@
 {{define "content"}}
   <div class="blockBody">
       <ul class="list-inline" aria-label="Page navigation">
-          <li><img id="mascot" src="/img/renchon.png" /></li>
+          <li id="mascot"></li>
           <li style="padding-top: 7%;" class="pull-right"><ul class="pagination">
               {{ genNav .Navigation .URL 5 }}
           </ul></li>