design navbar for client

2026-07-21 07:08:49 +10:00
parent fa20bf7fc4
commit 68558973f2
3 changed files with 46 additions and 0 deletions
--- a/client/header_bottom.html
+++ b/client/header_bottom.html
@@ -1,5 +1,16 @@
    </head>
    <body>
+        <nav>
+            <div id="brand">
+                <h2><a href="/">chookchat</a></h2>
+            </div>
+
+            <ul>
+                <li><a href="/">home</a></li>
+                <li><a href="/login">login</a></li>
+            </ul>
+        </nav>
+
        <div class="postbox">
            <form action="/make_post" method="post">
                <div>
--- a/client/style.css
+++ b/client/style.css
@@ -6,6 +6,8 @@ body {
    color: lime;
    background-color: black;
    line-height: 1.1;
+    height: 100vh;
+    margin: 0;
 }

 hr {
@@ -60,6 +62,37 @@ img {
    gap: 5px;
 }

+nav {
+    background: rgb(25, 25, 25);
+    display: flex;
+    padding: 16px;
+    margin-bottom: 1em;
+
+    #brand h2 {
+        margin: 0;
+    }
+
+    a {
+        color: lime;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    ul {
+        list-style: none;
+        display: flex;
+        align-items: center;
+        margin: 0;
+
+        li {
+            margin-left: 1em;
+        }
+    }
+}
+
@media (max-width: 600px) {
    input, textarea, button {
        font-size: 16px;