Fixing the mascot

Added a class for the "Mascot" button. Added some pointer-events to make the "Mascot" button clickable when the window is narrow enough to make the mascot image overlap the button.

public/css/main.css

@@ -23,6 +23,7 @@ body {
 	max-width: 100%;
 	height: 60vh;
 	-webkit-tap-highlight-color: transparent;
+	pointer-events: auto;
 }
 
 .header {
@@ -200,9 +201,9 @@ select.form-input {
 	height: auto;
 }
 
-#content { position: relative; top: 70px;   }
+#content { position: relative; top: 70px; pointer-events: none; }
 /* #content { padding-top: 70px;  } */
-.content { border-radius: 3px; padding: 5px 10px; }
+.content { border-radius: 3px; padding: 5px 10px; pointer-events: auto; }
 
 .box {
 	overflow: hidden;
@@ -282,7 +283,7 @@ th { border-bottom-width: 2px; }
 .pagination a:nth-last-child(2) li { border-radius: 0 3px 3px 0; border-right-width: 1px !important}
 
 
-#footer { width: 100%; bottom: 0; left: 0; margin-top: 40px;}
+#footer { width: 100%; bottom: 0; left: 0; margin-top: 40px; }
 
 .footer {
 	text-align: center;
@@ -358,7 +359,10 @@ body { color: #333; background: #ededed; }
 
 #mascot { background: url('/img/renchon.svg') no-repeat right bottom transparent; }
 
-a { color: #196759; }
+a { 
+	color: #196759;
+	pointer-events: auto;
+}
 a:hover { color:  #238BC7; }
 
 .header {
@@ -376,6 +380,8 @@ a:hover { color:  #238BC7; }
 	border-color: #BBC9CF !important;
 }
 
+#toggle_mascot { pointer-events: auto; }
+
 .form-input { border-color: #BBC9CF !important; background: #fafafa; color: #666; }
 
 .btn:hover, .up-btn:hover { background: rgba(192,192,192,0.2); }

templates/index.html

@@ -90,7 +90,7 @@
 			<div class="container footer center">
 
 				<div class="footer-opt">
-					<button class="form-input btn" onclick="toggleMascot(this)" value="hide"><span class="oi" data-glyph="eye"></span> Mascot</button>
+					<button id="toggle_mascot" class="form-input btn" onclick="toggleMascot(this)" value="hide"><span class="oi" data-glyph="eye"></span> Mascot</button>
 					<p><a href="/settings">Change Settings</a></p>
 				</div>