Add web fonts, dix donation page, tweak file detail popup

res/static/script/DetailsWindow.js

@@ -13,9 +13,9 @@ var DetailsWindow = {
 	},
 	setDetails: function (file) {
 		if (Viewer.isList) {
-			//  Lists give incomplete file information, so we have to request
-			//  more details in the background. File descriptions only exist in
-			//  lists, so for that we use the data provided in the page source
+			// Lists give incomplete file information, so we have to request
+			// more details in the background. File descriptions only exist in
+			// lists, so for that we use the data provided in the page source
 			$.ajax({
 				dataType: "json",
 				url: apiEndpoint + "/file/" + file.id + "/info",
@@ -25,7 +25,7 @@ var DetailsWindow = {
 						+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
 						+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
 						+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
-						+ "<tr><td>Id<td><td>" + data.id + "</td></tr>"
+						+ "<tr><td>IS<td><td>" + data.id + "</td></tr>"
 						+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"
 						+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
 						+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
@@ -38,7 +38,7 @@ var DetailsWindow = {
 				"<table>"
 				+ "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
 				+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
-				+ "<tr><td>Id<td><td>" + file.id + "</td></tr>"
+				+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
 				+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.size + "</td></tr>"
 				+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
 				+ "</table>"

res/static/script/Toolbar.js

@@ -16,15 +16,17 @@ var Toolbar = {
 				Sharebar.toggle();
 			}
 
-			$("#toolbar").animate({left: "-132"}, 400);
-			$("#filepreview").animate({left: "0"}, 400);
+			$("#toolbar").animate(    {left: "-132"}, 400);
+			$("#filepreview").animate({left: "0"},    400);
+			$("#info_popup").animate( {left: "20"},   400);
 
 			$("#button-expand-toolbar").css("visibility", "visible");
 
 			this.visible = false;
 		} else {
-			$("#toolbar").animate({left: "0"}, 400);
+			$("#toolbar").animate(    {left: "0"},   400);
 			$("#filepreview").animate({left: "122"}, 400);
+			$("#info_popup").animate( {left: "142"}, 400);
 
 			setTimeout(function(){
 				if(this.visible){

res/static/style/layout.css

@@ -13,7 +13,8 @@
 	font-family: 'Ubuntu';
 	font-style: normal;
 	font-weight: 400;
-	font-display: auto;
+	font-display: fallback;
+    text-rendering: optimizeLegibility;
 	src:
 		local('Ubuntu'),
 		local('Ubuntu Regular'),
@@ -22,10 +23,11 @@
 		url(/res/misc/Ubuntu-R.ttf) format('truetype');
 }
 @font-face {
-	font-family: 'Lato';
-	font-style: normal;
-	font-weight: 100;
-	font-display: auto;
+	font-family: 'Lato Thin';
+	font-display: fallback;
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
 	src:
 		local('Lato Thin'),
 		local('Lato, Thin'),
@@ -33,7 +35,19 @@
 		local('Lato Hairline'),
 		local('Lato, Hairline'),
 		local('Lato-Hairline'),
-		url(/res/misc/Lato-Hairline.ttf) format('truetype');
+		url(/res/misc/LatoLatin-Thin.ttf) format('truetype');
+}
+@font-face {
+	font-family: 'Lato';
+	font-display: fallback;
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+	src:
+		local('Lato Regular'),
+		local('Lato, Regular'),
+		local('Lato-Regular'),
+		url(/res/misc/Lato-Regular.ttf) format('truetype');
 }
 
 /* Page rendering configuration */
@@ -87,7 +101,7 @@ body{
 	padding: 4px 6px;
 	margin: 0 4px;
 	text-decoration: none;
-	font-family: "Lato", sans-serif;
+	font-family: "Lato Thin", sans-serif;
 	font-weight: bold;
 	font-size: 26px;
 }
@@ -148,6 +162,12 @@ body{
 /* Common elements */
 
 h1, h2, h3, h4, h5, h6 {line-height: 1em;}
+h1{font-size: 2em;    font-family: "Lato Thin";}
+h2{font-size: 1.75em; font-family: "Lato Thin";}
+h3{font-size: 1.5em;  font-family: "Lato Thin";}
+h4{font-size: 1.25em; font-family: "Lato";}
+h5{font-size: 1em;    font-family: "Lato";}
+h6{font-size: .75em;  font-family: "Lato";}
 h3{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
 
 hr{