Add navigation bar and logout button

public/static/style.css

@@ -15,22 +15,73 @@ body {
 /* --- Header --- */
 header {
     margin: 1em;
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
 }
 
 header h1 {
     margin: 1em;
 }
 
+/* --- Navigation bar --- */
+nav {
+}
+
+nav ul {
+    display: flex;
+    padding: 0 1.5em;
+    border: 0;
+    border-bottom: 1px solid #000000;
+}
+
+nav ul li {
+    margin: 0 0 -1px -1px;
+    list-style: none;
+    z-index: 1;
+}
+
+nav a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0.5em 1em;
+    border: 1px solid #999999;
+    border-bottom-color: #000000;
+}
+
+nav a:link, nav a:visited {
+    background-color: #eeeeee;
+    color: blue;
+    text-decoration: none;
+}
+
+nav a:hover, nav a:focus {
+    background-color: #ffffff;
+    text-decoration: underline;
+}
+
+nav li.nav_current_page {
+    z-index: 10;
+}
+
+nav li.nav_current_page a {
+    background-color: #ffffff;
+    border-color: #000000;
+    border-bottom-color: #ffffff;
+}
+
+/* --- Main section --- */
+main {
+    margin: 2em;
+}
+
 /* --- Login page --- */
 main.login_page {
     margin: 2em;
     padding: 1em;
-    border: 1px gray solid;
-    width: auto;
-}
-
-main.login_page h2 {
-    margin: 0 0 0.5em 0;
+    border: 1px solid #666666;
 }
 
 main.login_page table td {
@@ -38,6 +89,10 @@ main.login_page table td {
 }
 
 /* --- Text and other styling --- */
+h2 {
+    margin: 0 0 0.5em 0;
+}
+
 .error {
     background: #ff4444;
     width: 30em;