From 8da02a679f83551484e3e6c3ad9a85f0708e01cc Mon Sep 17 00:00:00 2001
From: Krateng <git.noreply@krateng.ch>
Date: Sat, 2 Feb 2019 18:54:06 +0100
Subject: [PATCH] Design adjustments

---
 website/maloja.css | 17 ++++++++++----
 website/start.html | 56 +++++++++++++++++++++++-----------------------
 website/start.py   |  3 ---
 3 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/website/maloja.css b/website/maloja.css
index 47f34b8..3edab07 100644
--- a/website/maloja.css
+++ b/website/maloja.css
@@ -231,6 +231,13 @@ table.tiles_top td {
 	border:0px;
 }
 
+table.tiles_top:hover td div {
+	opacity:0.2;
+}
+table.tiles_top:hover td div:hover {
+	opacity:1;
+}
+
 table.tiles_top, table.tiles_sub {
 	border-collapse: collapse;
 }
@@ -247,12 +254,14 @@ table.tiles_sub {
 	width:100%;
 }
 
-
-table.tiles_top td div {
+table.tiles_top td {
 	background-size:cover;
 	background-position:center;
-	height:100%;
-	width:100%;
+	vertical-align:bottom;
+}
+
+table.tiles_top td span {
+	background-color:rgba(0,0,0,0.7);
 }
 
 table.tiles_2x2 td {
diff --git a/website/start.html b/website/start.html
index ff3cf0d..99d356b 100644
--- a/website/start.html
+++ b/website/start.html
@@ -16,35 +16,35 @@
 		<h1><a href="/topartists">Top Artists</a></h1>
 		<table class="tiles_top">
 			<tr>
-				<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
+				<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
 				<td>
 					<table class="tiles_2x2 tiles_sub">
 						<tr>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
 						</tr>
 						<tr>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
 						</tr>
 					</table>
 				</td>
 				<td>
 					<table class="tiles_3x3 tiles_sub">
 						<tr>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
 						</tr>
 						<tr>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
 						</tr>
 						<tr>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
-							<td><div style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> KEY_ARTISTLINK</div></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
+							<td style="background-image:url('KEY_ARTISTIMAGE')"><span class="stats">KEY_POSITION_ARTIST</span> <span>KEY_ARTISTLINK</span></td>
 						</tr>
 					</table>
 				
@@ -60,35 +60,35 @@
 		<h1><a href="/toptracks">Top Tracks</a></h1>
 		<table class="tiles_top">
 			<tr>
-				<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
+				<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
 				<td>
 					<table class="tiles_2x2 tiles_sub">
 						<tr>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
 						</tr>
 						<tr>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
 						</tr>
 					</table>
 				</td>
 				<td>
 					<table class="tiles_3x3 tiles_sub">
 						<tr>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
 						</tr>
 						<tr>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
 						</tr>
 						<tr>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
-							<td><div style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> KEY_TRACKLINK</div></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
+							<td style="background-image:url('KEY_TRACKIMAGE')"><span class="stats">KEY_POSITION_TRACK</span> <span>KEY_TRACKLINK</span></td>
 						</tr>
 					</table>
 				
diff --git a/website/start.py b/website/start.py
index d598f1b..b97d856 100644
--- a/website/start.py
+++ b/website/start.py
@@ -22,7 +22,6 @@ def replacedict(keys,dbport):
 	topartist = charts[0]["artist"]
 	
 	artisttitles = [c["artist"] for c in charts]
-	#chartslistimg = [getArtistInfo(a).get("image") for a in chartslist]
 	artistimages = [info.get("image") for info in getArtistsInfo(artisttitles)]
 	artistlinks = [artistLink(a) for a in artisttitles]
 	
@@ -60,8 +59,6 @@ def replacedict(keys,dbport):
 	response = urllib.request.urlopen("http://localhost:" +str(dbport) + "/numscrobbles")
 	stats = json.loads(response.read())
 	scrobbles_total = "<a href='/scrobbles'>" + str(stats["amount"]) + "</a>"
-	#stats_tracks = "<a href='/toptracks'>" + str(stats["tracks"]) + "</a>"
-	#stats_artists = "<a href='/topartists'>" + str(stats["artists"]) + "</a>"