Responsive menu

res/static/res/style/layout.css

@@ -70,6 +70,46 @@ html{
 	word-break: break-word;
 }
 
+.navigation a {
+	float: none;
+	display: inline-block;
+	color: var(--text_color);
+	text-align: center;
+	padding: 4px 6px;
+	margin: 0 4px;
+	text-decoration: none;
+	font-family: "Lato", sans-serif;
+	font-weight: bold; 
+	font-size: 26px;
+}
+.navigation a:hover {
+	background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
+	box-shadow: 2px 2px 8px #000000;
+	color: #000000;
+	text-decoration: none;
+}
+.navigation .icon {
+	display: none;
+}
+@media screen and (max-width: 500px) {
+	.navigation a:not(:first-child) {display: none;}
+	.navigation a.icon {
+		float: right;
+		display: block;
+	}
+	.navigation.responsive {position: relative;}
+	.navigation.responsive .icon {
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+	.navigation.responsive a {
+		float: none;
+		display: block;
+		text-align: left;
+	}
+}
+
 .highlight_dark,
 .highlight_middle,
 .highlight_light,
@@ -93,12 +133,6 @@ html{
 .border-top    {border-top:    #686868 1px solid;}
 .border-bottom {border-bottom: #686868 1px solid;}
 
-.menu{
-	font-family: "Lato", sans-serif;
-	font-weight: bold; 
-	font-size: 26px;
-}
-
 /* Common elements */
 
 hr{

res/template/fragments/menu.html

@@ -1,7 +1,18 @@
 {{define "menu"}}
-<div class="highlight_light border-top border-bottom menu">
+<div id="navigation" class="highlight_light border-top border-bottom navigation">
-	<a href="/">Home</a> ~ 
+	<a href="/">Home</a>
-	<a href="/history">My&nbsp;Files</a> ~ 
+	<a href="/history">My&nbsp;Files</a>
 	<a href="/api">API&nbsp;Documentation</a>
+	<a href="javascript:void(0);" class="icon" onclick="expandNavigation()">&#9776;</a>
+	<script>
+	function expandNavigation() {
+		var x = document.getElementById("navigation");
+		if (!x.className.includes("responsive")) {
+			x.className += " responsive";
+		} else {
+			x.className = x.className.replace(" responsive", "");
+		}
+	}
+	</script>
 </div>
 {{end}}

res/template/paste.html

@@ -8,7 +8,6 @@
 		<link rel="stylesheet" href="/global.css"/>
 		<link rel="stylesheet" href="/res/style/viewer.css"/>
 		<link rel="stylesheet" href="/res/style/layout.css"/>
-		<link rel="stylesheet" href="/res/style/season.css"/>
 		<link rel="stylesheet" href="/res/style/paste.css"/>
 		<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
 		<link rel="shortcut icon" href="/res/img/tray32.png"/>