Styling

public/search/script.js

@@ -26,14 +26,17 @@ function displayResponse(response) {
                 console.log(v);
                 return `
 					<li>
-						<p class="video-item">
-							<img src="/videos/${v.id}.png" alt="">
+						<div class="video-item">
+							<div class="video-image">
+								<img class="shadow" src="/videos/${v.id}.png" alt="">
+								<img class="non-shadow" src="/videos/${v.id}.png" alt="">
+							</div>
 							<span class="video-info">
 								<a href="/watch?id=${v.id}">${v.title}</a>
 								<br>
 								by ${v.author}
 							</span>
-						</p>
+						</div>
 					</li>
 				`;
             })

public/style.css

@@ -1,10 +1,11 @@
-
 *, *::before, *::after {
     box-sizing: border-box;
 }
 
 :root {
     color-scheme: light dark;
+
+	--shadow: 0 0.125rem 0.25rem 0.125rem rgba(0, 0, 0, 0.125);
 }
 
 body {
@@ -12,15 +13,6 @@ body {
     padding: 0;
     text-align: center;
     font-family: system-ui, sans-serif;
-    background-color: #dff3f1;
-    color: #211;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #211;
-    color: #dff3f1;
-  }
 }
 
 .mao-error {
@@ -38,7 +30,7 @@ body {
 }
 
 .mao-error p {
-  color: #fff;
+  color: white;
   text-transform: uppercase;
   font-weight: bold;
   font-family: "Impact", "Bebas", "League Gothic", "Oswald", "Coluna", "Ubuntu Condensed", system-ui, sans-serif;
@@ -59,7 +51,7 @@ body {
     margin-top: auto;
 }
 
-ul#video-list {
+#video-list {
     padding: 0;
     list-style: none;
 	width: 100%;
@@ -72,24 +64,45 @@ ul#video-list {
 }
 
 .video-item {
+	padding: 0.5rem;
+	border-radius: 0.25rem;
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
-	gap: 2em;
+	gap: 2rem;
 	text-align: left;
 	background-color: rgba(255, 255, 255, 0.3);
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	box-shadow: var(--shadow);
 }
 
-.video-item img {
+.video-item .video-image {
+	border-radius: 0.25rem;
+	position: relative;
 	width: 200px;
-	height: 100px;
-	object-fit: contain;
+	height: 113px;
+	overflow: hidden;
 	background-color: black;
 }
 
+
+.video-item .video-image img {
+	position: absolute;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.video-item .shadow {
+	object-fit: cover;
+	filter: blur(0.25rem) brightness(50%);
+}
+
+.video-item .non-shadow {
+	object-fit: contain;
+}
+
 .video-item .video-info {
-	padding-top: 0.5em;
+	padding-block: 0.5em;
 }
 
 .video-item a {
@@ -97,41 +110,27 @@ ul#video-list {
 	font-weight: bold;
 }
 
+a {
+	color: #c51e0e;
+}
+
+a:visited {
+	color: #FF5722;
+}
+
 header {
     display: flex;
     align-items: center;
     gap: 30px;
-    background-image: linear-gradient(to bottom, #c51e0e, #FF5722);
     padding: 20px;
-    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
-    color: #fcf4c8;
+    box-shadow: var(--shadow);
+}
+
+header a {
+    text-decoration: none;
 }
 
 #app-name {
     padding-right: 20px;
     margin: 0;
 }
-
-header a {
-    color: #fcf4c8;
-    text-decoration: none;
-}
-
-#search {
-    border: none;
-    outline: none;
-    padding: 10px;
-    background-color: rgba(0, 0, 0, 0.2);
-    transition-duration: 100ms;
-    color: white;
-}
-
-#search:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-}
-
-#search:focus {
-    background-color: white;
-    color: black;
-}
-