Změny vzhledu

static/mo.css

 body {
+	display: flex;
+	flex-direction: column;
 	background-color: white;
 	color: black;
 	margin: 0;
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 800px;
+	min-height: 100vh;
+}
+
+.content, main {
+	display: block;
+	margin: 0 auto;
+	padding: 0 1em;
+	max-width: 1000px;
+	width: 100%;
+}
+
+header {
+	margin: 10px 0px;
+}
+
+main {
+	padding: 1em;
+}
+
+header .content {
+	display: flex;
+}
+
+header img { height: 60px; }
+
+header h1 { margin: auto 20px 0px; color: #222; }
+
+#nav-wrapper {
+	position: sticky;
+	top: 0;
+	background-color: #222;
+	border: 1px #222 solid;
+}
+
+footer {
+	margin-top: auto;
 }
 
 .error {
@@ -34,13 +69,12 @@ table.data tr td, table.data tr th {
 
 nav#main-menu {
 	display: flex;
-	background-color: #333;
+	flex-wrap: wrap;
 }
 
 nav#main-menu a, nav#main-menu input[type=submit] {
 	background: none;
 	border: none;
-	border-left:1px solid #bbb;
 	margin: 0px;
 	color: white;
 	font-size: 1em;
@@ -48,20 +82,20 @@ nav#main-menu a, nav#main-menu input[type=submit] {
 	padding: 14px 16px;
 	text-decoration: none;
 }
-nav#main-menu a:first-child {
-	border-left: none;
-}
+
 /* Only the first item with .right class does the margin trick */
 nav#main-menu > .right { margin-left: auto; }
 nav#main-menu > .right ~ .right { margin-left: 0px; }
 
 nav#main-menu a:hover:not(.active), nav#main-menu input[type=submit]:hover {
 	cursor: pointer;
-	background-color: #111;
+	background-color: #555;
+	color: white;
 }
 
 nav#main-menu a.active {
-	background-color: #4CAF50;
+	background-color: #ddd;
+	color: black;
 }
 
 .form-group.required .control-label:after {