style: Update styling in CSS and HTML files for flex layout and navigation menus

Author: wajeht

public/css/style.css

@@ -2,6 +2,7 @@ body {
 	max-width: 54ch;
 	margin: 0 auto;
 	padding: 1rem 20px;
+
 	color: #1e1e1e;
 	font-family:
 		Segoe UI,
@@ -10,10 +11,34 @@ body {
 		sans-serif;
 	font-size: clamp(1rem, -0.875rem + 8.333vw, 1.5rem);
 	line-height: 1.5;
+
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+
+	box-sizing: border-box;
 }
 
 h1,
 h2,
 h3 {
 	line-height: 1.2;
 }
+
+header,
+footer {
+	flex-shrink: 0;
+}
+
+main {
+	flex: 1;
+}
+
+nav ul {
+	display: flex;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	gap: 20px;
+	flex-wrap: wrap;
+}

src/views/components/header.html

@@ -1,8 +1,25 @@
 <header>
-  <h1>
-    <a href="/">
-      notify
-    </a>
-  </h1>
-  <p>send notification to discord, email, and sms</p>
+  <div>
+    <h1>
+      <a href="/">
+        notify
+      </a>
+    </h1>
+    <p>send notification to discord, email, and sms</p>
+  </div>
+
+  <nav>
+    <ul>
+      <li>
+        <a href="/">home</a>
+      </li>
+      <li>
+        <a href="/login">login</a>
+      </li>
+      <li>
+        <a href="/dashboard">dashboard</a>
+      </li>
+    </ul>
+  </nav>
+
 </header>

src/views/pages/home.html

@@ -1,6 +1 @@
 <p>home page</p>
-
-
-<nav>
-  <a href="/login">login</a>
-</nav>