From 52e07b54dcdc1c9a203ffee18d5601bb81662b5a Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Sun, 11 Feb 2024 00:54:43 +0100
Subject: [PATCH] Simplify design

---
 index.js         |   2 -
 public/header.js |  13 +++---
 public/style.css | 104 ++++++++++++++++++++---------------------------
 3 files changed, 51 insertions(+), 68 deletions(-)

diff --git a/index.js b/index.js
index 77f1cda..7e9d494 100644
--- a/index.js
+++ b/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 });
diff --git a/public/header.js b/public/header.js
index 66eebf1..a4f7a57 100644
--- a/public/header.js
+++ b/public/header.js
@@ -30,16 +30,15 @@ function displayHeader() {
 
     document.querySelector("h1").outerHTML = `
         <header>
-            <a href="/">
-                <h1 id="app-name">MaoTube</h1>
-            </a>
+            <h1 id="app-name">MaoTube</h1>
             <nav>
                 ${links}
+                -
+                <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>
-            <form method="GET" target="_self" action="/search">
-                <input type="text" id="search" name="query" placeholder="Search">
-                <input type="submit" value="Search">
-            </form>
         </header>
     `
 }
diff --git a/public/style.css b/public/style.css
index c406dbd..279c6f2 100644
--- a/public/style.css
+++ b/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 {
@@ -61,9 +66,9 @@ body {
 #video-list {
     padding: 0;
     list-style: none;
-	width: 100%;
-	max-width: 800px;
-	margin: auto;
+    width: 100%;
+    max-width: 800px;
+    margin: auto;
 }
 
 #video-player {
@@ -71,79 +76,60 @@ 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);
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 2rem;
+    text-align: left;
+    background-color: rgba(255, 255, 255, 0.3);
+    border: 1px solid black;
 }
 
 @media (prefers-color-scheme: dark) {
-	.video-item {
-		background-color: rgba(0, 0, 0, 0.3);
-	}
+    .video-item {
+        background-color: rgba(0, 0, 0, 0.3);
+    }
 }
 
 .video-item .video-image {
-	border-radius: 0.25rem;
-	position: relative;
-	width: 200px;
-	height: 113px;
-	overflow: hidden;
-	background-color: black;
+    position: relative;
+    width: 200px;
+    height: 113px;
+    overflow: hidden;
+    background-color: black;
 }
 
 
 .video-item .video-image img {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .video-item .shadow {
-	object-fit: cover;
-	filter: blur(0.25rem) brightness(50%);
+    object-fit: cover;
+    filter: blur(0.25rem) brightness(50%);
 }
 
 .video-item .non-shadow {
-	object-fit: contain;
+    object-fit: contain;
 }
 
 .video-item .video-info {
-	padding-block: 0.5em;
+    padding-block: 0.5em;
 }
 
 .video-item a {
-	font-size: 1.4em;
-	font-weight: bold;
+    font-size: 1.4em;
+    font-weight: bold;
 }
 
 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;
+    color: #FF5722;
 }