24 files changed, 1858 insertions, 0 deletions
diff --git a/static/client.js b/static/client.js
new file mode 100644
index 0000000..82ea4df
--- /dev/null
+++ b/static/client.js
@@ -0,0 +1,682 @@
+
+/*
+	Global functions
+*/
+function htmlspecialchars(str){
+
+	var map = {
+		'&': '&amp;',
+		'<': '&lt;',
+		'>': '&gt;',
+		'"': '&quot;',
+		"'": '&#039;'
+	}
+
+	return str.replace(/[&<>"']/g, function(m){return map[m];});
+}
+
+function htmlspecialchars_decode(str){
+	
+	var map = {
+		'&amp;': '&',
+		'&lt;': '<',
+		'&gt;': '>',
+		'&quot;': '"',
+		'&#039;': "'"
+	}
+	
+	return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m){return map[m];});
+}
+
+function is_click_within(elem, classname, is_id = false){
+	
+	while(true){
+		
+		if(elem === null){
+			
+			return false;
+		}
+		
+		if(
+			(
+				is_id === false &&
+				elem.className == classname
+			) ||
+			(
+				is_id === true &&
+				elem.id == classname
+			)
+		){
+			
+			return elem;
+		}
+		
+		elem = elem.parentElement;
+	}
+}
+
+
+
+/*
+	Prevent GET parameter pollution
+*/
+var form = document.getElementsByTagName("form");
+
+if(
+	form.length !== 0 &&
+	window.location.pathname != "/" &&
+	window.location.pathname != "/settings.php" &&
+	window.location.pathname != "/settings"
+){
+	form = form[0];
+	
+	var scraper_dropdown = document.getElementsByName("scraper")[0];
+	
+	scraper_dropdown.addEventListener("change", function(choice){
+		
+		submit(form);
+	});
+	
+	form.addEventListener("submit", function(e){
+		
+		e.preventDefault();
+		submit(e.srcElement);
+	});
+}
+
+function submit(e){
+	
+	var GET = "";
+	var first = true;
+	
+	if((s = document.getElementsByName("s")).length !== 0){
+		
+		GET += "?s=" + encodeURIComponent(s[0].value).replaceAll("%20", "+");
+		first = false;
+	}
+	
+	Array.from(
+		e.getElementsByTagName("select")
+	).concat(
+		Array.from(
+			e.getElementsByTagName("input")
+		)
+	).forEach(function(el){
+		
+		var firstelem = el.getElementsByTagName("option");
+		
+		if(
+			(
+				(
+					firstelem.length === 0 ||
+					firstelem[0].value != el.value
+				) &&
+				el.name != "" &&
+				el.value != "" &&
+				el.name != "s"
+			) ||
+			el.name == "scraper" ||
+			el.name == "nsfw"
+		){
+			
+			if(first){
+				
+				GET += "?";
+				first = false;
+			}else{
+				
+				GET += "&";
+			}
+			
+			GET += encodeURIComponent(el.name).replaceAll("%20", "+") + "=" + encodeURIComponent(el.value).replaceAll("%20", "+");
+		}
+	});
+	
+	window.location.href = GET;
+}
+
+
+
+/*
+	Hide show more button when it's not needed on answers
+*/
+var answer_div = document.getElementsByClassName("answer");
+
+if(answer_div.length !== 0){
+	answer_div = Array.from(answer_div);
+	var spoiler_button_div = Array.from(document.getElementsByClassName("spoiler-button"));
+
+	// execute on pageload
+	hide_show_more();
+
+	window.addEventListener("resize", hide_show_more);
+
+	function hide_show_more(){
+		
+		var height = window.innerWidth >= 1000 ? 600 : 200;
+		
+		for(i=0; i<answer_div.length; i++){
+			
+			if(answer_div[i].scrollHeight < height){
+				
+				spoiler_button_div[i].style.display = "none";
+				
+				document.getElementById(spoiler_button_div[i].htmlFor).checked = true;
+			}else{
+				
+				spoiler_button_div[i].style.display = "block";
+			}
+		}
+	}
+}
+
+switch(document.location.pathname){
+	
+	case "/web":
+	case "/web.php":
+		var image_class = "image";
+		break;
+	
+	case "/images":
+	case "/images.php":
+		var image_class = "thumb";
+		break;
+	
+	default:
+		var image_class = null;
+}
+
+if(image_class !== null){
+	
+	/*
+		Add popup to document
+	*/
+	var popup_bg = document.createElement("div");
+	popup_bg.id = "popup-bg";
+	document.body.appendChild(popup_bg);
+	
+	// enable/disable pointer events
+	if(!document.cookie.includes("bg_noclick=yes")){
+		
+		popup_bg.style.pointerEvents = "none";
+	}
+	
+	var popup_status = document.createElement("div");
+	popup_status.id = "popup-status";
+	document.body.appendChild(popup_status);
+	
+	var popup_body = document.createElement("div");
+	popup_body.id = "popup";
+	document.body.appendChild(popup_body);
+	
+	// import popup
+	var popup_body = document.getElementById("popup");
+	var popup_status = document.getElementById("popup-status");
+	var popup_image = null; // is set later on popup click
+	
+	// image metadata
+	var collection = []; // will contain width, height, image URL
+	var collection_index = 0;
+	
+	// event handling helper variables
+	var is_popup_shown = false;
+	var mouse_down = false;
+	var mouse_move = false;
+	var move_x = 0;
+	var move_y = 0;
+	var target_is_popup = false;
+	var mirror_x = false;
+	var mirror_y = false;
+	var rotation = 0;
+	
+	/*
+		Image dragging (mousedown)
+	*/
+	document.addEventListener("mousedown", function(div){
+		
+		if(div.buttons !== 1){
+			
+			return;
+		}
+		
+		mouse_down = true;
+		mouse_move = false;
+		
+		if(is_click_within(div.target, "popup", true) === false){
+			
+			target_is_popup = false;
+		}else{
+
+			target_is_popup = true;
+			
+			var pos = popup_body.getBoundingClientRect();
+			move_x = div.x - pos.x;
+			move_y = div.y - pos.y;
+		}
+	});
+	
+	/*
+		Image dragging (mousemove)
+	*/
+	document.addEventListener("mousemove", function(pos){
+		
+		if(
+			target_is_popup &&
+			mouse_down
+		){
+			
+			mouse_move = true;
+			movepopup(popup_body, pos.clientX - move_x, pos.clientY - move_y);
+		}
+	});
+	
+	/*
+		Image dragging (mouseup)
+	*/
+	document.addEventListener("mouseup", function(){
+		
+		mouse_down = false;
+	});
+	
+	/*
+		Image popup open
+	*/
+	document.addEventListener("click", function(click){
+		
+		// should our click trigger image open?
+		if(
+			elem = is_click_within(click.target, image_class) ||
+			click.target.classList.contains("openimg")
+		){
+			
+			event.preventDefault();
+			is_popup_shown = true;
+			
+			// reset position params
+			mirror_x = false;
+			mirror_y = false;
+			rotation = 0;
+			scale = 60;
+			collection_index = 0;
+			
+			// get popup data
+			if(elem === true){
+				// we clicked a simple image preview
+				elem = click.target;
+				var image_url = elem.getAttribute("src");
+				
+				if(image_url.startsWith("/proxy")){
+					
+					var match = image_url.match(/i=([^&]+)/);
+					
+					if(match !== null){
+						
+						image_url = decodeURIComponent(match[1]);
+					}
+				}else{
+					
+					image_url = htmlspecialchars_decode(image_url);
+				}
+				
+				collection = [
+					{
+						"url": image_url,
+						"width": Math.round(click.target.naturalWidth),
+						"height": Math.round(click.target.naturalHeight)
+					}
+				];
+				
+				var title = "No description provided";
+				
+				if(click.target.title != ""){
+					
+					title = click.target.title;
+				}else{
+					
+					if(click.target.alt != ""){
+						
+						title = click.target.alt;
+					}
+				}
+			}else{
+				
+				if(image_class == "thumb"){
+					// we're inside image.php
+					
+					elem =
+						elem
+						.parentElement
+						.parentElement;
+					
+					var image_url = elem.getElementsByTagName("a")[1].href;
+				}else{
+					
+					// we're inside web.php
+					var image_url = elem.href;
+				}
+				
+				collection =
+					JSON.parse(
+						elem.getAttribute("data-json")
+					);
+				
+				var title = elem.title;
+			}
+			
+			// prepare HTML
+			var html =
+				'<div id="popup-num">(' + collection.length + ')</div>' + 
+				'<div id="popup-dropdown">' +
+					'<select name="viewer-res" onchange="changeimage(event)">';
+			
+			for(i=0; i<collection.length; i++){
+				
+				if(collection[i].url.startsWith("data:")){
+					
+					var domain = "&lt;Base64 Data&gt;";
+				}else{
+					
+					var domain = new URL(collection[i].url).hostname;
+				}
+				
+				html += '<option value="' + i + '">' + '(' + collection[i].width + 'x' + collection[i].height + ') ' + domain + '</option>';
+			}
+			
+			popup_status.innerHTML =
+				html + '</select></div>' +
+				'<a href="' + htmlspecialchars(image_url) + '" rel="noreferrer nofollow "id="popup-title">' + htmlspecialchars(title) + '</a>';
+			
+			popup_body.innerHTML =
+				'<img src="' + getproxylink(collection[0].url) + '" draggable="false" id="popup-image">';
+			
+			// make changes to DOM
+			popup_body.style.display = "block";
+			popup_bg.style.display = "block";
+			popup_status.style.display = "table";
+			
+			// store for rotation functions & changeimage()
+			popup_image = document.getElementById("popup-image");
+			
+			scalepopup(collection[collection_index], scale);
+			centerpopup();
+		}else{
+			
+			// click inside the image viewer
+			// resize image
+			if(is_click_within(click.target, "popup", true)){
+				
+				if(mouse_move === false){
+					scale = 80;
+					scalepopup(collection[collection_index], scale);
+					centerpopup();
+				}
+			}else{
+				
+				if(is_click_within(click.target, "popup-status", true) === false){
+					
+					// click outside the popup while its open
+					// close it
+					if(is_popup_shown){
+						
+						hidepopup();
+					}
+				}
+			}
+		}
+	});
+	
+	/*
+		Scale image viewer
+	*/
+	popup_body.addEventListener("wheel", function(scroll){
+		
+		event.preventDefault();
+		
+		if(
+			scroll.altKey ||
+			scroll.ctrlKey ||
+			scroll.shiftKey
+		){
+			
+			var increment = 7;
+		}else{
+			
+			var increment = 14;
+		}
+		
+		if(scroll.wheelDelta > 0){
+			
+			// scrolling up
+			scale = scale + increment;
+		}else{
+			
+			// scrolling down
+			if(scale - increment > 7){
+				scale = scale - increment;
+			}
+		}
+		
+		// calculate relative size before scroll
+		var pos = popup_body.getBoundingClientRect();
+		var x = (scroll.x - pos.x) / pos.width;
+		var y = (scroll.y - pos.y) / pos.height;
+		
+		scalepopup(collection[collection_index], scale);
+		
+		// move popup to % we found
+		pos = popup_body.getBoundingClientRect();
+		
+		movepopup(
+			popup_body,
+			scroll.clientX - (x * pos.width),
+			scroll.clientY - (y * pos.height)
+		);
+	});
+	
+	/*
+		Keyboard controls
+	*/
+	
+	document.addEventListener("keydown", function(key){
+		
+		// close popup
+		if(
+			is_popup_shown &&
+			key.keyCode === 27
+		){
+			
+			hidepopup();
+			return;
+		}
+		
+		if(is_popup_shown === false){
+			
+			return;
+		}
+		
+		if(
+			key.altKey ||
+			key.ctrlKey ||
+			key.shiftKey
+		){
+			
+			// mirror image
+			switch(key.keyCode){
+				
+				case 37:
+					// left
+					key.preventDefault();
+					mirror_x = true;
+					break;
+				
+				case 38:
+					// up
+					key.preventDefault();
+					mirror_y = false;
+					break;
+				
+				case 39:
+					// right
+					key.preventDefault();
+					mirror_x = false;
+					break;
+				
+				case 40:
+					// down
+					key.preventDefault();
+					mirror_y = true;
+					break;
+			}
+		}else{
+			
+			// rotate image
+			switch(key.keyCode){
+				
+				case 37:
+					// left
+					key.preventDefault();
+					rotation = -90;
+					break;
+				
+				case 38:
+					// up
+					key.preventDefault();
+					rotation = 0;
+					break;
+				
+				case 39:
+					// right
+					key.preventDefault();
+					rotation = 90;
+					break;
+				
+				case 40:
+					// down
+					key.preventDefault();
+					rotation = -180;
+					break;
+			}
+		}
+		
+		popup_image.style.transform =
+			"scale(" +
+				(mirror_x ? "-1" : "1") +
+				", " +
+				(mirror_y ? "-1" : "1") +
+			") " +
+			"rotate(" +
+				rotation + "deg" +
+			")";
+	});
+}
+
+function getproxylink(url){
+	
+	if(url.startsWith("data:")){
+		
+		return htmlspecialchars(url);
+	}else{
+		
+		console.log(url);
+		return '/proxy?i=' + encodeURIComponent(url);
+	}
+}
+
+function hidepopup(){
+	
+	is_popup_shown = false;
+	popup_status.style.display = "none";
+	popup_body.style.display = "none";
+	popup_bg.style.display = "none";
+}
+
+function scalepopup(size, scale){
+	
+	var ratio =
+		Math.min(
+			(window.innerWidth * (scale / 100)) / collection[collection_index].width, (window.innerHeight * (scale / 100)) / collection[collection_index].height
+		);
+	
+	popup_body.style.width = size.width * ratio + "px";
+	popup_body.style.height = size.height * ratio + "px";
+}
+
+function centerpopup(){
+	
+	var size = popup_body.getBoundingClientRect();
+	var size = {
+		"width": parseInt(size.width),
+		"height": parseInt(size.height)
+	};
+	
+	movepopup(
+		popup_body,
+		(window.innerWidth / 2) - (size.width / 2),
+		(window.innerHeight / 2) - (size.height / 2)
+	);
+}
+
+function movepopup(popup_body, x, y){
+	
+	popup_body.style.left = x + "px";
+	popup_body.style.top = y + "px";
+}
+
+function changeimage(event){
+	
+	// reset rotation params
+	mirror_x = false;
+	mirror_y = false;
+	rotation = 0;
+	
+	scale = 60;
+	
+	collection_index = parseInt(event.target.value);
+	
+	// we set innerHTML otherwise old image lingers a little
+	popup_body.innerHTML =
+		'<img src="' + getproxylink(collection[collection_index].url) + '" draggable="false" id="popup-image">';
+	
+	// store for rotation functions & changeimage()
+	popup_image = document.getElementById("popup-image");
+	
+	scalepopup(collection[collection_index], scale);
+	centerpopup();
+}
+
+/*
+	Shortcuts
+*/
+var searchbox_wrapper = document.getElementsByClassName("searchbox");
+
+if(searchbox_wrapper.length !== 0){
+	searchbox_wrapper = searchbox_wrapper[0];
+	var searchbox = searchbox_wrapper.getElementsByTagName("input")[1];
+
+	document.addEventListener("keydown", function(key){
+		
+		switch(key.keyCode){
+			
+			case 191:
+				// 191 = /
+				if(document.activeElement.tagName == "INPUT"){
+					
+					// already focused, ignore
+					break;
+				}
+				
+				if(
+					typeof is_popup_shown != "undefined" &&
+					is_popup_shown
+				){
+					
+					hidepopup();
+				}
+				
+				window.scrollTo(0, 0);
+				searchbox.focus();
+				key.preventDefault();
+				break;
+		}
+	});
+}
diff --git a/static/icon/amazon.png b/static/icon/amazon.png
new file mode 100644
index 0000000..75b52a7
--- /dev/null
+++ b/static/icon/amazon.png
diff --git a/static/icon/appstore.png b/static/icon/appstore.png
new file mode 100644
index 0000000..46a0be0
--- /dev/null
+++ b/static/icon/appstore.png
diff --git a/static/icon/facebook.png b/static/icon/facebook.png
new file mode 100644
index 0000000..e40590c
--- /dev/null
+++ b/static/icon/facebook.png
diff --git a/static/icon/gamespot.png b/static/icon/gamespot.png
new file mode 100644
index 0000000..a5b781e
--- /dev/null
+++ b/static/icon/gamespot.png
diff --git a/static/icon/github.png b/static/icon/github.png
new file mode 100644
index 0000000..f0455f4
--- /dev/null
+++ b/static/icon/github.png
diff --git a/static/icon/googleplay.png b/static/icon/googleplay.png
new file mode 100644
index 0000000..f59ca3d
--- /dev/null
+++ b/static/icon/googleplay.png
diff --git a/static/icon/imdb.png b/static/icon/imdb.png
new file mode 100644
index 0000000..8ddb803
--- /dev/null
+++ b/static/icon/imdb.png
diff --git a/static/icon/instagram.png b/static/icon/instagram.png
new file mode 100644
index 0000000..f1bf8e6
--- /dev/null
+++ b/static/icon/instagram.png
diff --git a/static/icon/itunes.png b/static/icon/itunes.png
new file mode 100644
index 0000000..cf99ab4
--- /dev/null
+++ b/static/icon/itunes.png
diff --git a/static/icon/microsoft.png b/static/icon/microsoft.png
new file mode 100644
index 0000000..830fadf
--- /dev/null
+++ b/static/icon/microsoft.png
diff --git a/static/icon/quora.png b/static/icon/quora.png
new file mode 100644
index 0000000..2bcbb48
--- /dev/null
+++ b/static/icon/quora.png
diff --git a/static/icon/reddit.png b/static/icon/reddit.png
new file mode 100644
index 0000000..8f24212
--- /dev/null
+++ b/static/icon/reddit.png
diff --git a/static/icon/rottentomatoes.png b/static/icon/rottentomatoes.png
new file mode 100644
index 0000000..01f553a
--- /dev/null
+++ b/static/icon/rottentomatoes.png
diff --git a/static/icon/sciencedirect.png b/static/icon/sciencedirect.png
new file mode 100644
index 0000000..17e03c0
--- /dev/null
+++ b/static/icon/sciencedirect.png
diff --git a/static/icon/soundcloud.png b/static/icon/soundcloud.png
new file mode 100644
index 0000000..9c86c48
--- /dev/null
+++ b/static/icon/soundcloud.png
diff --git a/static/icon/spotify.png b/static/icon/spotify.png
new file mode 100644
index 0000000..07fd1f3
--- /dev/null
+++ b/static/icon/spotify.png
diff --git a/static/icon/steam.png b/static/icon/steam.png
new file mode 100644
index 0000000..749ba3e
--- /dev/null
+++ b/static/icon/steam.png
diff --git a/static/icon/twitter.png b/static/icon/twitter.png
new file mode 100644
index 0000000..a6d4389
--- /dev/null
+++ b/static/icon/twitter.png
diff --git a/static/icon/w3html.png b/static/icon/w3html.png
new file mode 100644
index 0000000..c010842
--- /dev/null
+++ b/static/icon/w3html.png
diff --git a/static/icon/website.png b/static/icon/website.png
new file mode 100644
index 0000000..02b2670
--- /dev/null
+++ b/static/icon/website.png
diff --git a/static/icon/wikipedia.png b/static/icon/wikipedia.png
new file mode 100644
index 0000000..18cf9a0
--- /dev/null
+++ b/static/icon/wikipedia.png
diff --git a/static/icon/youtube.png b/static/icon/youtube.png
new file mode 100644
index 0000000..6951c84
--- /dev/null
+++ b/static/icon/youtube.png
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..c7cacfe
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,1176 @@
+
+/*
+	Global styles
+*/
+:root{
+	/* background */
+	--1d2021: #1d2021;
+	--282828: #282828;
+	--3c3836: #3c3836;
+	--504945: #504945;
+	
+	/* font */
+	--928374: #928374;
+	--a89984: #a89984;
+	--bdae93: #bdae93;
+	--8ec07c: #8ec07c;
+	--ebdbb2: #ebdbb2;
+	
+	/* code highlighter */
+	--comment: #9e8e73;
+	--default: #d4be98;
+	--keyword: #d8a657;
+	--string: #7daea7;
+}
+
+.theme-white{
+	/* background */
+	--1d2021: #bdae93;
+	--282828: #a89984;
+	--3c3836: #a89984;
+	--504945: #504945;
+	
+	/* font */
+	--928374: #1d2021;
+	--a89984: #282828;
+	--bdae93: #3c3836;
+	--8ec07c: #52520e;
+	--ebdbb2: #1d2021;
+	
+	/* code highlighter */
+	--comment: #6a4400;
+	--default: #d4be98;
+	--keyword: #4a4706;
+	--string: #076678;
+}
+
+.theme-white .autocomplete .entry:hover{
+	background:#928374;
+}
+
+audio{
+	max-width:100%;
+}
+
+body,html{
+	padding:0;
+	margin:0;
+}
+
+body{
+	background:var(--1d2021);
+	color:var(--a89984);
+	font-size:16px;
+	box-sizing:border-box;
+	font-family:sans-serif;
+	padding:15px 7% 45px;
+	word-wrap:anywhere;
+	line-height:22px;
+	max-width:2000px;
+}
+
+h1,h2,h3,h4,h5,h6{
+	padding:0;
+	margin:0 0 7px 0;
+	line-height:initial;
+	color:var(--bdae93);
+}
+
+h3,h4,h5,h6{
+	margin-bottom:14px;
+}
+
+/*
+	Web styles
+*/
+#overflow{
+	overflow:hidden;
+}
+
+/* Searchbox */
+.searchbox{
+	width:40%;
+	height:36px;
+	border:1px solid var(--504945);
+	background:var(--282828);
+	border-radius:2px;
+	margin-bottom:10px;
+	position:relative;
+}
+
+.searchbox .wrapper{
+	overflow:hidden;
+}
+
+.searchbox input[type="text"]{
+	width:100%;
+	padding-left:10px;
+}
+
+.searchbox input[type="text"]::placeholder{
+	color:var(--928374);
+}
+
+.searchbox input[type="submit"]{
+	float:right;
+	cursor:pointer;
+	padding:0 10px;
+}
+
+.searchbox input[type="submit"]:hover{
+	text-decoration:underline;
+}
+
+.searchbox input{
+	all:unset;
+	line-height:36px;
+	box-sizing:border-box;
+	height:36px;
+	color:var(--bdae93);
+}
+
+.searchbox:focus-within{
+	border:1px solid var(--928374);
+}
+
+.autocomplete{
+	display:none;
+	position:absolute;
+	top:35px;
+	left:-1px;
+	right:-1px;
+	background:var(--282828);
+	border:1px solid var(--504945);
+	border-top:none;
+	border-radius:0 0 2px 2px;
+	z-index:10;
+}
+
+.autocomplete .entry{
+	overflow:hidden;
+	padding:4px 10px;
+	cursor:pointer;
+}
+
+.autocomplete .entry:hover{
+	background:var(--3c3836);
+}
+
+.autocomplete .title{
+	float:left;
+}
+
+.autocomplete .subtext{
+	float:right;
+	font-size:14px;
+	color:var(--928374);
+	margin-left:7px;
+}
+
+/* Tabs */
+.tabs, .filters{
+	overflow:hidden;
+	overflow-x:auto;
+	white-space:nowrap;
+}
+
+.tabs{
+	padding-bottom:10px;
+}
+
+.tabs .tab{
+	text-decoration:none;
+	color:var(--bdae93);
+	padding:4px 10px;
+	display:inline-block;
+}
+
+.tabs .tab:hover{
+	text-decoration:underline;
+}
+
+.tabs .tab.selected{
+	border-bottom:2px solid var(--bdae93);
+}
+
+/* Filters */
+.filters{
+	padding-bottom:15px;
+	margin-bottom:7px;
+}
+
+.filters .filter{
+	display:inline-block;
+	margin-right:7px;
+	vertical-align:bottom;
+}
+
+.filters .filter .title{
+	font-size:13px;
+	margin:0 4px;
+}
+
+.filters .filter input,
+.filters .filter select{
+	all:unset;
+	display:block;
+	border:1px solid var(--504945);
+	border-radius:2px;
+	font-size:14px;
+	padding:0 4px;
+	width:127px;
+	height:24px;
+}
+
+
+/*
+	HOME
+*/
+.home{
+	min-height:100vh;
+	margin:0 auto;
+	display:table;
+	text-align:center;
+}
+
+.home .logo{
+	max-width:400px;
+	height:100px;
+	margin:0 auto 17px auto;
+}
+
+.home img{
+	line-height:100px;
+	font-size:60px;
+	text-align:center;
+	font-family:Times;
+	width:100%;
+	height:100%;
+	background:var(--282828);
+	display:block;
+	object-fit:contain;
+}
+
+.home #center{
+	display:table-cell;
+	vertical-align:middle;
+	width:500px;
+}
+
+.home .searchbox{
+	width:100%;
+	text-align:left;
+	margin-bottom:20px;
+}
+
+.home a{
+	color:inherit;
+}
+
+.home .subtext{
+	margin-top:17px;
+	line-height:16px;
+	font-size:12px;
+}
+
+
+/*
+	WEB
+*/
+
+/* Left wrapper */
+.web .left{
+	width:40%;
+	float:left;
+}
+
+/* infobox */
+.infobox{
+	border:1px dashed var(--504945);
+	padding:10px;
+	margin-bottom:17px;
+}
+
+.infobox .code{
+	white-space:initial;
+}
+
+.infobox ul{
+	padding-left:27px;
+	margin-bottom:0;
+}
+
+.infobox a{
+	color:var(--bdae93);
+}
+
+.infobox a:hover{
+	text-decoration:underline;
+}
+
+/* text-result */
+.web .text-result{
+	margin-bottom:30px;
+}
+
+.web .description{
+	white-space:pre-line;
+}
+
+.web .type{
+	border:1px solid var(--928374);
+	background:var(--282828);
+	padding:0 4px;
+	border-radius:2px;
+	font-size:14px;
+	line-height:16px;
+	float:left;
+	margin:2px 7px 0 0;
+}
+
+.web .url{
+	position:relative;
+}
+
+.web .url .part{
+	font-size:15px;
+	text-decoration:none;
+	color:var(--928374);
+}
+
+.web .separator::before{
+	content:"/";
+	padding:0 4px;
+	color:var(--504945);
+	font-size:12px;
+}
+
+.web .part:hover{
+	text-decoration:underline;
+}
+
+.web .hover{
+	display:block;
+	text-decoration:none;
+	color:var(--a89984);
+	overflow:hidden;
+	clear:left;
+	padding-top:7px;
+}
+
+.web .text-result .title{
+	font-size:18px;
+	color:var(--bdae93);
+	margin-bottom:7px;
+}
+
+.web .text-result a:visited .title{
+	color:var(--928374) !important;
+}
+
+.theme-white .web .text-result a:visited .title{
+	color:#7c6f64 !important;
+}
+
+.web .text-result .hover:hover .title{
+	text-decoration:underline;
+}
+
+.web .text-result .author{
+	font-style:italic;
+}
+
+.web .text-result .greentext{
+	font-size:14px;
+	color:var(--8ec07c);
+}
+
+.web .right-right .text-result:last-child,
+.web .right-left .text-result:last-child{
+	margin-bottom:0;
+}
+
+/* favicon */
+.favicon{
+	all:unset;
+	float:left;
+	cursor:pointer;
+}
+
+.favicon-dropdown{
+	display:none;
+	position:absolute;
+	top:25px;
+	background:var(--282828);
+	border:1px solid var(--504945);
+	border-radius:2px;
+	z-index:3;
+	word-wrap:normal;
+}
+
+.favicon-dropdown::before{
+	content:"";
+	position:absolute;
+	top:-10px;
+	left:2px;
+	border:5px solid transparent;
+	border-bottom:5px solid var(--504945);
+}
+
+.favicon-dropdown a{
+	text-decoration:none;
+	color:var(--bdae93);
+	display:block;
+	padding:2px 7px 2px 5px;
+	font-size:13px;
+}
+
+.favicon-dropdown a:hover{
+	text-decoration:underline;
+}
+
+.favicon-dropdown:hover,
+.favicon:focus + .favicon-dropdown,
+.favicon-dropdown:focus-within{
+	display:block;
+}
+
+.web .favicon img,
+.favicon-dropdown img{
+	margin:3px 7px 0 0;
+	height:16px;
+	font-size:12px;
+	line-height:16px;
+	text-align:center;
+	display:block;
+	text-align:left;
+}
+
+.favicon-dropdown img{
+	float:left;
+	margin:2px 7px 0 0;
+}
+
+/* thumbnails */
+.thumb-wrap{
+	position:relative;
+	float:right;
+	width:160px;
+	height:90px;
+	background:var(--282828);
+	text-align:center;
+	line-height:87px;
+	border:1px solid var(--504945);
+	overflow:hidden;
+	margin-left:7px;
+}
+
+.duration{
+	position:absolute;
+	right:0;
+	bottom:0;
+	padding:1px 2px;
+	line-height:14px;
+	background:var(--3c3836);
+	font-size:12px;
+	border-left:1px solid var(--504945);
+	border-top:1px solid var(--504945);
+	font-family:monospace;
+}
+
+.web .text-result:hover .thumb-wrap .duration{
+	display:none;
+}
+
+.thumb-wrap .thumb{
+	max-width:100%;
+	max-height:100%;
+	text-align:left;
+	vertical-align:middle;
+}
+
+.thumb-wrap.portrait{
+	width:50px;
+}
+
+.thumb-wrap.square{
+	width:90px;
+}
+
+/* Next page */
+.nextpage{
+	margin:0 0 30px;
+	text-align:center;
+	display:block;
+	padding:10px;
+	border:1px solid var(--504945);
+	border-radius:2px;
+	text-decoration:none;
+	color:var(--bdae93);
+}
+
+.nextpage:hover{
+	text-decoration:underline;
+}
+
+/* Right wrapper */
+.web .right-wrapper{
+	width:60%;
+	float:right;
+	overflow:hidden;
+	padding-left:15px;
+	box-sizing:border-box;
+}
+
+.web .right-right,
+.web .right-left{
+	float:right;
+	width:50%;
+	padding:0 15px;
+	box-sizing:border-box;
+	overflow:hidden;
+	min-height:1px;
+}
+
+.web .right-right{
+	padding-right:0;
+}
+
+/*
+	Tables
+*/
+table{
+	width:100%;
+	text-align:left;
+	border-collapse:collapse;
+}
+
+table td{
+	width:50%;
+	padding:0;
+	vertical-align:top;
+}
+
+table tr td:first-child{
+	padding-right:7px;
+}
+
+table a{
+	display:block;
+	text-decoration:none;
+	color:var(--a89984);
+	padding:0 10px 0 0;
+}
+
+table tr a:last-child{
+	padding-right:0;
+}
+
+/* Related */
+.related{
+	margin-bottom:20px;
+}
+
+.related a{
+	padding-bottom:10px;
+	color:var(--bdae93);
+}
+
+.related a:hover{
+	text-decoration:underline;
+}
+
+/*
+	Answers
+*/
+.web .answer{
+	max-height:600px;
+	overflow:hidden;
+	padding-bottom:17px;
+	position:relative;
+}
+
+.web .answer::after{
+	content:"";
+	position:absolute;
+	bottom:0;
+	width:100%;
+	height:17px;
+	background:linear-gradient(transparent, var(--1d2021));
+	pointer-events:none;
+}
+
+.web .answer-title{
+	text-decoration:none;
+	color:var(--a89984);
+}
+
+.web .answer-title a:hover{
+	text-decoration:underline;
+}
+
+.web .spoiler:checked + .answer{
+	overflow:initial;
+	max-height:initial;
+}
+
+.web .spoiler{
+	display:none;
+}
+
+.web .spoiler-button{
+	display:block;
+	border:1px solid var(--504945);
+	border-radius:2px;
+	line-height:30px;
+	padding:0 7px;
+	text-align:center;
+	cursor:pointer;
+}
+
+.web .answer-wrapper{
+	margin-bottom:27px;
+}
+
+.web .spoiler-button:hover{
+	text-decoration:underline;
+}
+
+.web .spoiler-button::before{
+	content:"Show more";
+}
+
+.web .spoiler:checked + .answer + .spoiler-button::before{
+	content:"Show less";
+}
+
+/* Tables on left handside */
+.web .info-table{
+	margin:10px 0;
+	font-size:15px;
+	color:var(--928374);
+	background:var(--282828);
+	border:1px dashed var(--504945);
+}
+
+.web .info-table td{
+	padding:4px 10px;
+}
+
+.web .info-table tr td:first-child{
+	width:1%;
+	white-space:nowrap;
+	padding-right:17px;
+	color:var(--a89984);
+}
+
+.web .info-table tr:nth-child(even){
+	background:var(--1d2021);
+}
+
+.web .sublinks{
+	padding:17px 10px 0;
+	font-size:15px;
+	color:var(--#928374);
+}
+
+.web .sublinks table td{
+	padding-bottom:17px;
+}
+
+.web .sublinks table tr:last-child td:last-child{
+	padding-bottom:0;
+}
+
+.web .sublinks a:hover .title{
+	text-decoration:underline;
+}
+
+/* Wikipedia head */
+.web .wiki-head .photo{
+	float:right;
+	margin:0 1px 10px 10px;
+}
+.web .wiki-head .photo img{
+	display:block;
+	max-width:200px;
+	max-height:200px;
+	filter:drop-shadow(1px 0 0 var(--504945)) drop-shadow(-1px 0 0 var(--504945)) drop-shadow(0 -1px 0 var(--504945)) drop-shadow(0 1px 0 var(--504945));
+}
+
+.web .wiki-head .description{
+	clear:left;
+	padding-top:7px;
+	overflow:hidden;
+}
+
+.web .wiki-head table, .about table{
+	margin-top:17px;
+	border:1px dashed var(--504945);
+}
+
+.web .wiki-head td, .about table td{
+	padding:4px 7px;
+	vertical-align:middle;
+}
+
+.web .wiki-head tr td:first-child, .about table tr td:first-child{
+	width:30%;
+	min-width:150px;
+}
+
+.web .wiki-head tr:nth-child(odd), .about table tr:nth-child(odd){
+	background:var(--282828);
+}
+
+.web .wiki-head .socials{
+	overflow:hidden;
+	margin-top:17px;
+}
+
+.web .wiki-head .socials a{
+	width:74px;
+	height:80px;
+	padding-right:4px;
+	float:left;
+	color:var(--bdae93);
+	text-decoration:none;
+	display:table;
+}
+
+.web .wiki-head .socials a:hover .title{
+	text-decoration:underline;
+}
+
+.web .wiki-head .socials .center{
+	display:table-cell;
+	vertical-align:middle;
+}
+
+.web .wiki-head .socials img{
+	margin:0 auto;
+	display:block;
+	text-align:center;
+	width:36px;
+	height:36px;
+	line-height:36px;
+}
+
+.web .wiki-head .socials .title{
+	margin-top:7px;
+	text-align:center;
+	font-size:13px;
+	line-height:13px;
+}
+
+.web .fullimg{
+	display:block;
+	max-width:100%;
+	max-height:150px;
+	margin:7px 0 17px;
+	box-sizing:border-box;
+	border:1px solid var(--504945);
+}
+
+/*
+	Code tags
+*/
+.code{
+	white-space:pre;
+	font-family:monospace;
+	background:var(--3c3836);
+	color:var(--bdae93);
+	padding:7px;
+	margin:4px 0 13px 0;
+	overflow-x:auto;
+	border-radius:2px;
+	border:1px solid var(--504945);
+}
+
+.code-inline{
+	display:inline;
+	font-family:monospace;
+	background:var(--282828);
+	color:var(--bdae93);
+	border:1px solid var(--928374);
+	padding:0 4px;
+	border-radius:2px;
+}
+
+/* Wiki-head titles and quotes */
+.web .wiki-head h2{
+	font-size:20px;
+	margin:20px 0 13px 0;
+}
+
+.web .wiki-head h2:first-child{
+	margin-top:10px;
+}
+
+.web .wiki-head a{
+	color:var(--bdae93);
+}
+
+.quote{
+	font-style:italic;
+	margin:10px 0 13px;
+	padding-left:10px;
+	border-left:1px solid #504945;
+}
+
+/*
+	Web images
+*/
+.web .images{
+	overflow:hidden;
+	margin:0 -5px;
+	font-size:0;
+}
+
+.web .images .duration{
+	display:none;
+	border:1px solid var(--504945);
+	right:5px;
+	bottom:5px;
+}
+
+.web .images .image:hover .duration{
+	display:block;
+}
+
+.web .images .image{
+	width:90px;
+	height:90px;
+	padding:5px;
+	position:relative;
+	line-height:90px;
+	display:inline-block;
+	text-align:center;
+	color:inherit;
+}
+
+.web .images .image img{
+	max-width:100%;
+	max-height:100%;
+	vertical-align:middle;
+}
+
+
+/*
+	Images tab
+*/
+
+#images{
+	overflow:hidden;
+	margin-bottom:10px;
+}
+
+#images .infobox{
+	width:40%;
+	box-sizing:border-box;
+}
+
+#images .image-wrapper{
+	line-height:15px;
+	width:20%;
+	float:left;
+}
+
+#images .image{
+	margin:0 auto;
+	width:250px;
+	max-width:100%;
+	padding:7px 7px 30px 7px;
+	box-sizing:border-box;
+	font-size:14px;
+}
+
+#images a{
+	color:inherit;
+	text-decoration:none;
+	display:block;
+}
+
+#images a:hover .title{
+	text-decoration:underline;
+}
+
+#images .thumb{
+	display:block;
+	height:180px;
+	margin-bottom:10px;
+	position:relative;
+}
+
+#images .duration{
+	display:block;
+	border:1px solid #504945;
+}
+
+#images .image:hover .duration{
+	display:none;
+}
+
+#images img{
+	width:100%;
+	height:100%;
+	object-fit:contain;
+}
+
+#images .image .title{
+	white-space:nowrap;
+	overflow:hidden;
+	margin-bottom:7px;
+	font-weight:bold;
+}
+
+#images .image .description{
+	overflow:hidden;
+	height:45px;
+}
+
+.nextpage.img{
+	width:50%;
+	margin:0 auto 50px;
+}
+
+#popup{
+	display:none;
+	position:fixed;
+	top:0;
+	left:0;
+	cursor:grab;
+	user-select:none;
+	pointer-events:none;
+}
+
+#popup:active{
+	cursor:grabbing;
+}
+
+#popup-image{
+	border:1px solid var(--928374);
+	display:block;
+	margin:0 auto;
+	pointer-events:all;
+	width:100%;
+	height:100%;
+	object-fit:contain;
+	background:var(--282828);
+}
+
+#popup-status{
+	display:none;
+	position:fixed;
+	top:0;
+	left:0;
+	width:100%;
+	height:35px;
+	background:var(--1d2021);
+	border-bottom:1px solid var(--928374);
+}
+
+#popup-bg{
+	background:var(--1d2021);
+	opacity:.5;
+	position:fixed;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	display:none;
+}
+
+#popup-status select{
+	display:block;
+	width:250px;
+}
+
+#popup-num,
+#popup-title{
+	display:table-cell;
+	width:0;
+	word-wrap:normal;
+	padding:0 10px;
+	line-height:35px;
+	color:var(--ebdbb2);
+	text-decoration:none;
+}
+
+#popup-title:hover{
+	text-decoration:underline;
+}
+
+#popup-title{
+	width:initial;
+	overflow:hidden;
+	height:35px;
+	display:block;
+}
+
+#popup-num{
+	font-weight:bold;
+}
+
+#popup-dropdown{
+	display:table-cell;
+	vertical-align:middle;
+	width:0;
+}
+
+/*
+	Settings page
+*/
+.web .settings{
+	margin-top:17px;
+	border:1px dashed var(--504945);
+	padding:7px 10px 0;
+}
+
+.web .setting{
+	margin-bottom:17px;
+}
+
+.web .setting .title{
+	font-size:14px;
+}
+
+.web .settings-submit{
+	margin:17px 10px;
+}
+
+.web .settings-submit input{
+	float:right;
+}
+
+.web .settings-submit a{
+	margin-right:17px;
+	color:var(--bdae93);
+}
+
+/*
+	About page
+*/
+.about a{
+	color:var(--bdae93);
+}
+
+.about h1, .about h2{
+	margin-top:17px;
+}
+
+.about table{
+	margin-bottom:17px;
+}
+
+.about table a{
+	display:inline;
+}
+
+
+/*
+	Syntax highlight
+*/
+.c-comment{
+	color:var(--comment);
+}
+.c-default{
+	color:var(--default);
+}
+.c-html{
+	color:var(--html);
+}
+.c-keyword{
+	color:var(--keyword);
+	font-weight:bold;
+}
+.c-string{
+	color:var(--string);
+}
+
+/*
+	Responsive image
+*/
+@media only screen and (max-width: 1454px){ #images .image-wrapper{ width:25%; } }
+@media only screen and (max-width: 1161px){ #images .image-wrapper{ width:33.3333%; } }
+@media only screen and (max-width: 750px){ #images .image-wrapper{ width:50%; } }
+@media only screen and (max-width: 450px){ #images .image-wrapper{ width:100%; } }
+
+
+/*
+	Responsive design
+*/
+@media only screen and (max-width: 1550px){
+	
+	.web .right-right,
+	.web .right-left{
+		float:none;
+		width:initial;
+		padding:0 0 0 15px;
+	}
+	
+	.web .left,
+	.searchbox,
+	#images .infobox{
+		width:60%;
+	}
+	
+	.web .right-wrapper{
+		width:40%;
+	}
+}
+
+@media only screen and (max-width: 1000px){
+	
+	.nextpage.img{
+		width:initial;
+	}
+	
+	.web .right-right,
+	.web .right-left{
+		border:none;
+		padding:0;
+	}
+	
+	.web .right-wrapper{
+		float:none;
+		padding:0;
+		width:initial;
+	}
+	
+	.web .left,
+	.searchbox{
+		width:100%;
+	}
+	
+	table td{
+		display:block;
+		width:100%;
+	}
+	
+	table a{
+		padding:0;
+	}
+	
+	.web.has-answer .left::before{
+		display:block;
+		content:"Results";
+		font-size:24px;
+		font-weight:bold;
+		margin-bottom:17px;
+		color:var(--bdae93);
+	}
+	
+	.web .answer{
+		max-height:200px;
+	}
+	
+	.web .wiki-head tr td:first-child,
+	.web .info-table tr td:first-child{
+		text-decoration:underline;
+	}
+	
+	#images .infobox{
+		width:100%;
+	}
+}