* Hover divs and clickable images

api/static/css/style.css

@@ -15,6 +15,13 @@ html, body, div, tag {
 a {
 	text-decoration: none;
 	color: whitesmoke;
+   text-shadow:
+		3px 3px 0   #191818,
+		-1px -1px 0 #191818,  
+		1px -1px 0  #191818,
+		-1px 1px 0  #191818,
+		1px 1px 0   #191818;
+
 }
 
 .content {
@@ -31,14 +38,24 @@ a {
 }
 
 .video-block {
+	display: block;
     padding: 1em;
     width: 400px;
     line-height: 1em;
 	margin-right: 1em;
 	margin-bottom: 1em;
-	background: #191818;
 	border-radius: 1em;
+
+	background: linear-gradient(#191818,#191818,50%,#00ffcc,50%,#00ffcc);
+	background-size: 100% 200%;
+	transition: all 0.2s ease;
+	animation: 0.4s ease;
 }
+.video-block:hover {
+	background-position: 100% 100%;
+	animation: 0.4s ease;
+}
+
 video {
 	max-width: 100%;
 	max-height: 80vh;

ts/index.ts

@@ -21,6 +21,7 @@ class Category {
 			link.href = '#'
 			link.text = this.name + 'ft. No thumbnail'
 		}
+		link.text = link.text[0].toUpperCase() + link.text.substring(1, link.text.length)
 
 		container.appendChild(link)
 
@@ -28,7 +29,7 @@ class Category {
 		return container
 	}
 
-	thumbnail_div() : HTMLImageElement {
+	thumbnail_div() : HTMLAnchorElement {
 		let nail = document.createElement('img')
 		nail.className = 'pure-img'
 
@@ -39,8 +40,18 @@ class Category {
 			nail.setAttribute('src', '/static/cantfindshit.gif')
 		}
 
-		return nail
+		let link = document.createElement('a')
+		if(this.name) {
+			link.href = `/category/${this.name}`
+		} else  {
+			link.href = '#'
+		}
+		link.appendChild(nail)
+
+		return link
 	}
+
+
 	public as_div() {
 		let container = document.createElement('div')
 		container.className = 'video-block'