Simplify design

index.js

@@ -116,8 +116,6 @@ app.get("/api/search", async (req, res) => {
 		OFFSET ?
 	`, search, end, start);
 
-	console.log(videos);
-
 	const { total } = await dbGet("SELECT COUNT(*) AS total FROM videos");
 
     return res.status(200).json({ ok: true, videos, total });

public/header.js

@@ -30,16 +30,15 @@ function displayHeader() {
 
     document.querySelector("h1").outerHTML = `
         <header>
-            <a href="/">
             <h1 id="app-name">MaoTube</h1>
-            </a>
             <nav>
                 ${links}
-            </nav>
-            <form method="GET" target="_self" action="/search">
+                -
+                <form id="search-form" method="GET" target="_self" action="/search">
                     <input type="text" id="search" name="query" placeholder="Search">
                     <input type="submit" value="Search">
                 </form>
+            </nav>
         </header>
     `
 }

public/style.css

@@ -1,25 +1,30 @@
 *, *::before, *::after {
     box-sizing: border-box;
+    appearance: none;
 }
 
 :root {
     color-scheme: light dark;
 
-	--shadow: 0 0.125rem 0.25rem 0.125rem rgba(0, 0, 0, 0.125);
-}
-
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--shadow: 0 0.25rem 0.5rem 0.25rem rgba(0, 0, 0, 0.125);
-	}
+    --red: #c51e0e;
 }
 
 body {
     margin: 0 auto;
     padding: 0;
     text-align: center;
-    font-family: system-ui, sans-serif;
+}
+
+nav {
+    margin-bottom: 20px;
+}
+
+input::file-selector-button {
+    appearance: none;
+}
+
+#search-form {
+    display: inline-block;
 }
 
 .mao-error {
@@ -72,14 +77,13 @@ body {
 
 .video-item {
     padding: 0.5rem;
-	border-radius: 0.25rem;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: 2rem;
     text-align: left;
     background-color: rgba(255, 255, 255, 0.3);
-	box-shadow: var(--shadow);
+    border: 1px solid black;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -89,7 +93,6 @@ body {
 }
 
 .video-item .video-image {
-	border-radius: 0.25rem;
     position: relative;
     width: 200px;
     height: 113px;
@@ -124,26 +127,9 @@ body {
 }
 
 a {
-	color: #c51e0e;
+    color: var(--red);
 }
 
 a:visited {
     color: #FF5722;
 }
-
-header {
-    display: flex;
-    align-items: center;
-    gap: 30px;
-    padding: 20px;
-    box-shadow: var(--shadow);
-}
-
-header a {
-    text-decoration: none;
-}
-
-#app-name {
-    padding-right: 20px;
-    margin: 0;
-}