CSS: Design navigation bar and fix onto top border

2 years ago · 1c9c6a2502
parent 4df5138b82
commit 1c9c6a2502
1 changed files with 26 additions and 0 deletions
--- a/server/templates/macros.htm
+++ b/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 %}