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 = `
- -

MaoTube

-
+

MaoTube

-
- - -
` } 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; }