CSS: Design navigation bar and fix onto top border

server/templates/macros.htm

@@ -7,6 +7,7 @@
             background-color: #222222;
             color: whitesmoke;
             margin: .8rem;
+            margin-top: 0;
             line-height: 1.24;
         }
         table tr th, table tr td {
@@ -60,6 +61,31 @@
                 flex-direction: column;
             }
         }
+        /* navigation */
+        .navigation {
+            position: sticky;
+            z-index: 1000;
+            top: 0;
+
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: center;
+            align-content: center;
+            justify-content: center;
+            gap: .8rem;
+            --height: 2.4em;
+            width: max-content;
+            height: var(--height);
+            border-radius: 0 0 var(--height) var(--height);
+            margin: 0 auto;
+            padding: 1.2em 1.6em;
+
+            background-color: #333333;
+            box-shadow: 0 0 .2rem .4rem #444444;
+
+            font-size: 1.2rem;
+        }
     </style>
 {% endmacro %}