Theming changes

res/include/img/background_patterns/create_transparent.sh

@@ -1,15 +0,0 @@
-#!/bin/bash
-
-transparent () {
-	convert $1.png -alpha set -channel a -evaluate set $2 $1_transparent.png
-}
-
-for i in {0..17}; do transparent "checker${i}" 5%; done
-transparent "checker_wednesday" 8%
-transparent "checker_dwarf" 5%
-transparent "checker_developers" 5%
-transparent "checker_halloween" 5%
-transparent "checker_christmas" 5%
-transparent "checker_ukraine" 8%
-
-optipng *.png

res/include/md/hosting.md

@@ -122,5 +122,7 @@ this.
 So enable IPv6. If you don't have IPv6, call your ISP and ask them why not.
 
 <div style="margin-top: 100px; height: 128px; text-align: center;">
-<a href="https://sia.tech/">{{ template "built-with-Sia-mono.svg" . }}</a>
+<a href="https://sia.tech/">
+	<img style="height: 100%;" src="/res/img/misc/built-with-Sia-mono.svg" alt="Built with Sia"/>
+</a>
 </div>

res/include/script/history.js

@@ -1,87 +0,0 @@
-function renderFileButton(apiURL, id, title, subtitle) {
-	let btn = document.createElement("a")
-	btn.classList = "file_button"
-	btn.href = "/u/" + id
-	btn.target = "_blank"
-	let thumbnail = document.createElement("img")
-	thumbnail.src = apiURL + "/file/" + id + "/thumbnail?width=80&height=80"
-	thumbnail.alt = title
-	let titleSpan = document.createElement("span")
-	titleSpan.classList = "file_button_title"
-	titleSpan.innerText = title
-	let br = document.createElement("br")
-	let subtitleSpan = document.createElement("span")
-	subtitleSpan.classList = "file_button_subtitle"
-	subtitleSpan.innerText = subtitle
-
-	btn.appendChild(thumbnail)
-	btn.appendChild(titleSpan)
-	btn.appendChild(br)
-	btn.appendChild(subtitleSpan)
-	return btn
-}
-
-function getCookie(name) {
-	var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie)
-	return result ? result[1] : null
-}
-
-function printDate(date, hours, minutes, seconds) {
-	let dateStr = date.getFullYear()
-		+ "-" + ("00" + (date.getMonth() + 1)).slice(-2)
-		+ "-" + ("00" + date.getDate()).slice(-2)
-
-	if (hours) { dateStr += " " + ("00" + date.getHours()).slice(-2) }
-	if (minutes) { dateStr += ":" + ("00" + date.getMinutes()).slice(-2) }
-	if (seconds) { dateStr += ":" + ("00" + date.getMinutes()).slice(-2) }
-	return dateStr
-}
-
-// Get the uploads from localstorage
-let uploadsStr = localStorage.getItem("uploaded_files")
-if (uploadsStr === null) { uploadsStr = "" }
-
-let uploads = Array()
-if (uploadsStr != "") {
-	// Strip the trailing comma
-	uploads = uploadsStr.slice(0, -1).split(",")
-}
-
-// Get the uploads from a cookie
-uploadsStr = getCookie("pduploads")
-if (uploadsStr === null) { uploadsStr = "" }
-
-if (uploadsStr != "") {
-	uploadsStr = uploadsStr.slice(0, -1) // Strip the trailing dot
-	uploads.push(uploadsStr.split(".").reverse())
-}
-
-// Render all the items
-function getHistoryItem() {
-	let item = uploads.shift()
-	if (item === undefined || item === "") { return }
-
-	fetch(
-		apiEndpoint + "/file/" + item + "/info"
-	).then(resp => {
-		if (!resp.ok) {
-			return Promise.reject()
-		}
-		return resp.json()
-	}).then(resp => {
-		document.getElementById("uploaded_files").appendChild(
-			renderFileButton(
-				apiEndpoint,
-				resp.id,
-				resp.name,
-				printDate(new Date(resp.date_upload), true, true, true),
-			)
-		)
-		getHistoryItem()
-	}).catch(err => {
-		console.log("Fetch failed: " + err)
-		getHistoryItem()
-	})
-}
-
-getHistoryItem()

res/include/style/layout.css

@@ -1,743 +0,0 @@
-/*
-    Created on : Jun 3, 2015, 9:33:11 AM
-    Author     : Fornax
-*/
-
-:root {
-	--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
-}
-
-@font-face {
-	font-family: 'Material Icons';
-	font-style: normal;
-	font-weight: 400;
-	font-display: block;
-	src: local('Material Icons'),
-		local('MaterialIcons-Regular'),
-		url(/res/misc/MaterialIcons-Regular.ttf) format('truetype');
-}
-
-.icon {
-	font-family: 'Material Icons';
-	font-weight: normal;
-	font-style: normal;
-	font-size: 1.5em;
-	display: inline-block;
-	line-height: 1;
-	text-transform: none;
-	letter-spacing: normal;
-	word-wrap: normal;
-	white-space: nowrap;
-	direction: ltr;
-	text-rendering: optimizeLegibility;
-	vertical-align: middle;
-}
-
-.icon_unicode {
-	font-size: 1.5em;
-	display: inline-block;
-	font-weight: normal;
-	font-style: normal;
-	vertical-align: middle;
-	line-height: 1;
-}
-
-.icon.small {
-	font-size: 1.2em;
-}
-
-a>svg {
-	vertical-align: middle;
-}
-
-/* Page rendering configuration */
-*,
-*::before,
-*::after {
-	box-sizing: border-box;
-}
-
-html,
-body {
-	/* This makes sure that no scrollbar shows up when the menu is open on small screens*/
-	overflow-x: hidden;
-}
-
-body {
-	margin: 0;
-	font-family: system-ui, sans-serif;
-	font-size: 17px;
-	line-height: 1.5em;
-	color: var(--body_text_color);
-	background: var(--background);
-	min-height: 100vh;
-	padding: 0;
-}
-
-header,
-footer,
-.checkers {
-	background-image: url("{{.BackgroundPattern}}");
-	background-color: var(--background_pattern_color);
-	background-repeat: repeat;
-}
-
-header,
-footer {
-	box-shadow: inset 0 0 3px -1px var(--shadow_color);
-	border-radius: 12px;
-	text-align: center;
-	overflow: hidden;
-}
-
-header>h1 {
-	text-shadow: 1px 1px 4px var(--shadow_color);
-	margin-top: 80px;
-	margin-bottom: 80px;
-}
-
-footer>.footer_content {
-	background-color: var(--shaded_background);
-	display: inline-block;
-	border-radius: 8px;
-	margin: 300px 0 69px 0;
-}
-
-/* Page layout elements */
-
-.button_toggle_navigation {
-	position: fixed;
-	backface-visibility: hidden;
-	z-index: 10;
-	top: 0;
-	left: 0;
-	padding: 10px 20px 15px 10px;
-	font-size: 2em;
-	margin: 0;
-	background: #3f3f3f;
-	background: var(--input_background);
-	border-radius: 0;
-	border-bottom-right-radius: 90%;
-}
-
-.button_toggle_navigation:active {
-	padding: 15px 15px 10px 15px;
-}
-
-.page_navigation {
-	position: fixed;
-	backface-visibility: hidden;
-	background: var(--navigation_background);
-	width: 17em;
-	height: 100%;
-	left: 0;
-	float: left;
-	padding: 20px 10px 10px 0;
-	overflow-y: auto;
-	overflow-x: hidden;
-	text-align: left;
-	transition: left 0.5s;
-}
-
-.page_body {
-	position: relative;
-	right: 0;
-	height: auto;
-	left: 0;
-	margin-left: 17em;
-	min-width: 300px;
-	display: block;
-	text-align: center;
-	/* Center the header and body */
-	overflow-y: auto;
-	overflow-x: hidden;
-	background: var(--body_background);
-	border-top-left-radius: 16px;
-	border-bottom-left-radius: 16px;
-	padding: 8px;
-	transition: margin-left 0.5s;
-}
-
-@media (max-width: 1000px) {
-	.page_navigation {
-		left: -18em;
-	}
-
-	.page_body {
-		margin-left: 0;
-		width: 100%;
-		padding: 4px;
-	}
-}
-
-section {
-	position: relative;
-	display: inline-block;
-	max-width: 1000px;
-	width: 100%;
-	height: auto;
-	padding: 0;
-	text-align: initial;
-	clear: both;
-}
-
-/* Page contents */
-
-.page_navigation a {
-	float: none;
-	display: block;
-	color: var(--background_text_color);
-	text-align: center;
-	padding: 4px;
-	margin: 0.3em 15px 0.3em 15px;
-	font-family: 'Open Sans Light', sans-serif;
-	font-weight: lighter;
-	font-size: 1.5em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	transition: background 0.2s;
-	border-radius: 24px;
-	text-decoration: none;
-}
-
-.page_navigation a:hover {
-	background: var(--input_background);
-	color: var(--input_text);
-	text-decoration: none;
-}
-
-.highlight_shaded,
-.highlight_green,
-.highlight_blue,
-.highlight_yellow,
-.highlight_red {
-	position: relative;
-	width: auto;
-	height: auto;
-	overflow: hidden;
-	text-align: center;
-	padding: 4px;
-	border-radius: 8px;
-}
-
-.highlight_shaded {
-	background: var(--background_color);
-	color: var(--background_text_color);
-}
-
-.highlight_green {
-	background-color: rgba(0, 255, 0, 0.05);
-	border-color: #00D000;
-}
-
-.highlight_blue {
-	background-color: rgba(32, 32, 255, 0.2);
-	border-color: #3636FF;
-}
-
-.highlight_yellow {
-	background-color: rgba(255, 255, 0, 0.05);
-	border-color: #A0A000;
-}
-
-.highlight_red {
-	background-color: rgba(255, 0, 0, 0.1);
-	border-color: #B00000;
-}
-
-.highlight_green,
-.highlight_blue,
-.highlight_yellow,
-.highlight_red {
-	border-top-width: 2px;
-	border-top-style: solid;
-	border-bottom-width: 2px;
-	border-bottom-style: solid;
-}
-
-/* Common elements */
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	line-height: 1;
-	margin: 0.5em 0;
-	font-weight: lighter;
-	font-family: 'Open Sans Light', sans-serif;
-}
-
-h1 {
-	font-size: 2.5em;
-	text-align: center;
-}
-
-h2 {
-	font-size: 2em;
-	border-bottom: 1px var(--separator) solid;
-}
-
-h3 {
-	font-size: 1.75em;
-	border-bottom: 1px var(--separator) solid;
-}
-
-h4 {
-	font-size: 1.50em;
-	border-bottom: 1px var(--separator) solid;
-}
-
-h5 {
-	font-size: 1.25em;
-	border-bottom: 1px var(--separator) solid;
-}
-
-h6 {
-	font-size: 1em;
-}
-
-.indent {
-	margin: 8px;
-}
-
-hr {
-	height: 1px;
-	border: none;
-	background-color: var(--separator);
-	margin: 12px;
-}
-
-a {
-	color: var(--link_color);
-}
-
-p {
-	margin: 1em 0;
-}
-
-.form {
-	margin-left: auto;
-	margin-right: auto;
-	text-align: left;
-	max-width: 30em;
-	width: 100%;
-}
-
-table:not(.form) {
-	border-collapse: collapse;
-	width: 100%;
-}
-
-.table_scroll {
-	width: 100%;
-	overflow-x: auto;
-	overflow-y: hidden;
-	white-space: nowrap;
-}
-
-.table_scroll>table {
-	min-width: 100%;
-}
-
-tr:not(.form) {
-	border-bottom: 1px var(--separator) solid;
-}
-
-tr>td,
-tr>th {
-	padding: 0.2em 0.5em;
-}
-
-@media(max-width: 30em) {
-
-	/* Forms will be stacked on small screens */
-	tr.form>td {
-		float: left;
-		width: 100%;
-		padding: 0.5em;
-	}
-}
-
-pre {
-	padding: 10px;
-	border-bottom: 1px var(--separator) solid;
-	overflow-x: auto;
-}
-
-.file_button {
-	position: relative;
-	width: 400px;
-	max-width: 90%;
-	height: 3.6em;
-	margin: 8px;
-	padding: 0;
-	overflow: hidden;
-	border-radius: 6px;
-	background: var(--input_background);
-	color: var(--body_text_color);
-	word-break: break-all;
-	text-align: left;
-	line-height: 1.2em;
-	display: inline-block;
-	transition: box-shadow 0.3s, opacity 2s, background 0.2s;
-	white-space: normal;
-	text-overflow: ellipsis;
-	text-decoration: none;
-	vertical-align: top;
-	cursor: pointer;
-}
-
-.file_button:hover {
-	text-decoration: none;
-	background: var(--input_hover_background);
-}
-
-.file_button>img {
-	max-height: 100%;
-	max-width: 25%;
-	margin-right: 5px;
-	float: left;
-	display: block;
-}
-
-.file_button>.file_button_title {
-	color: var(--link_color);
-}
-
-/* API documentation markup */
-
-details {
-	border-top: 1px solid;
-	border-bottom: 1px solid;
-	margin: 15px 0 15px 0;
-}
-
-details>summary {
-	padding: 2px;
-	font-family: monospace;
-}
-
-details>summary>.method {
-	display: inline-block;
-	width: 80px;
-}
-
-details>div {
-	padding: 8px;
-}
-
-details.request_get {
-	border-color: #3636ff;
-	background-color: rgba(32, 32, 255, 0.2);
-}
-
-details.request_post {
-	border-color: #00d000;
-	background-color: rgba(0, 255, 0, 0.05);
-}
-
-details.request_delete {
-	border-color: #B00000;
-	background-color: rgba(255, 0, 0, 0.05);
-}
-
-details.request_put {
-	border-color: #B06000;
-	background-color: rgba(255, 128, 0, 0.05);
-}
-
-details.request_patch {
-	border-color: #6000B0;
-	background-color: rgba(128, 0, 255, 0.1);
-}
-
-/* Form fields */
-
-.form_input {
-	width: 100%;
-}
-
-/* BUTTONS */
-button,
-.button,
-input[type="submit"],
-input[type="button"],
-input[type="color"],
-select {
-	display: inline-block;
-	border-radius: 6px;
-	margin: 3px;
-	background: var(--input_background);
-	padding: 5px 5px 5px 5px;
-	overflow: hidden;
-	color: var(--input_text);
-	vertical-align: middle;
-	align-items: center;
-	cursor: pointer;
-	transition: padding 0.1s, box-shadow 0.1s, background 0.1s;
-
-	/* Remove default styles set by the user-agent */
-	outline: 0;
-	font-size: 1em;
-	font-weight: normal;
-	line-height: 1;
-	text-decoration: none;
-	text-shadow: none;
-	border: none;
-}
-
-button:hover,
-.button:hover,
-input[type="submit"]:hover,
-input[type="button"]:hover,
-input[type="color"]:hover,
-select:hover,
-button:focus,
-.button:focus,
-input[type="submit"]:focus,
-input[type="button"]:focus,
-input[type="color"]:focus,
-select:focus {
-	color: var(--input_text);
-	text-decoration: none;
-	background: var(--input_hover_background);
-
-}
-
-button:active,
-.button:active,
-input[type="submit"]:active,
-input[type="button"]:active,
-input[type="color"]:active,
-select:active {
-	box-shadow: inset 4px 4px 8px var(--shadow_color);
-	/* Exactly 4px offset compared to the inactive padding to give a depth effect */
-	padding: 9px 1px 1px 9px;
-}
-
-.button_highlight {
-	background: var(--highlight_background) !important;
-	color: var(--highlight_text_color) !important;
-}
-
-.button_red {
-	background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important;
-	color: var(--highlight_text_color) !important;
-}
-
-button:disabled,
-button.disabled,
-.button:disabled,
-.button.disabled,
-input[type="submit"]:disabled,
-input[type="submit"].disabled,
-input[type="button"]:disabled,
-input[type="button"].disabled,
-input[type="color"]:disabled,
-input[type="color"].disabled,
-select:disabled,
-select.disabled {
-	color: var(--input_disabled_text);
-	box-shadow: none;
-	transition: none;
-	padding: 4px 5px 4px 5px;
-	cursor: not-allowed;
-	background: var(--input_background);
-}
-
-.group_first {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-	margin-right: 0;
-}
-
-.group_middle {
-	border-radius: 0;
-	margin-left: 0;
-	margin-right: 0;
-}
-
-.group_last {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-	margin-left: 0;
-}
-
-button>i,
-.button>i,
-button>svg,
-.button>svg {
-	vertical-align: middle;
-	line-height: 1;
-}
-
-.round {
-	border-radius: 32px;
-}
-
-.tab_bar {
-	display: block;
-	width: 100%;
-	overflow-x: auto;
-	overflow-y: hidden;
-	white-space: nowrap;
-	text-align: center;
-	box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
-	/* border-bottom: 2px solid var(--input_background); */
-}
-
-.tab_bar>button,
-.tab_bar>.button {
-	margin: 10px 0 0 10px;
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-	min-width: 5em;
-}
-
-.tab_bar>*:last-child {
-	margin-right: 10px;
-}
-
-/* Dropdown list of the select tag */
-option {
-	background: var(--input_background);
-	color: var(--body_text_color);
-}
-
-/* TEXT FIELDS */
-textarea,
-.groove,
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="number"],
-input[type="date"] {
-	display: inline-block;
-	margin: 3px;
-	/* Same as button, to make them align nicely */
-	border: none;
-	border-radius: 6px;
-	background: var(--input_background);
-	box-shadow: inset 1px 1px 2px -1px var(--shadow_color);
-	padding: 3px 5px;
-	color: var(--input_text);
-	font-size: 1em;
-	outline: 0;
-	transition: box-shadow 0.2s;
-}
-
-textarea:active,
-input[type="text"]:active,
-input[type="password"]:active,
-input[type="email"]:active,
-input[type="number"]:active,
-input[type="date"]:active,
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="date"]:focus {
-	box-shadow: inset 0 0 3px 0 var(--highlight_color);
-}
-
-textarea:disabled,
-input[type="text"]:disabled,
-input[type="password"]:disabled,
-input[type="email"]:disabled,
-input[type="number"]:disabled,
-input[type="date"]:disabled {
-	color: var(--input_disabled_text);
-	box-shadow: none;
-	transition: none;
-	cursor: not-allowed;
-}
-
-input[type=file] {
-	visibility: hidden;
-	position: static;
-	width: 0;
-	height: 0;
-}
-
-/* Webkit Scrollbars */
-
-::-webkit-scrollbar {
-	width: 18px;
-	/* for vertical scrollbars */
-	height: 18px;
-	/* for horizontal scrollbars */
-}
-
-::-webkit-scrollbar-track {
-	background: var(--body_color);
-}
-
-::-webkit-scrollbar-thumb {
-	background-color: var(--scrollbar_foreground_color);
-	border-radius: 10px;
-	border: 5px solid var(--body_color);
-	height: 40px;
-	width: 40px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background-color: var(--scrollbar_hover_color);
-}
-
-::-webkit-scrollbar-corner {
-	background-color: var(--body_color);
-}
-
-::-webkit-scrollbar-button:single-button {
-	background-color: var(--body_color);
-	display: block;
-	border-style: solid;
-	height: 10px;
-	width: 10px;
-}
-
-::-webkit-scrollbar-button:single-button:vertical:decrement {
-	display: none;
-	/* border-width: 0 8px 8px 8px; */
-	/* border-color: transparent transparent var(--scrollbar_foreground_color) transparent; */
-}
-
-/* ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
-	border-color: transparent transparent var(--scrollbar_hover_color) transparent;
-} */
-::-webkit-scrollbar-button:single-button:vertical:increment {
-	display: none;
-	/* border-width: 8px 8px 0 8px; */
-	/* border-color: var(--scrollbar_foreground_color) transparent transparent transparent; */
-}
-
-/* ::-webkit-scrollbar-button:vertical:single-button:increment:hover {
-	border-color: var(--scrollbar_hover_color) transparent transparent transparent;
-} */
-::-webkit-scrollbar-button:single-button:horizontal:decrement {
-	display: none;
-	/* border-width: 8px 8px 8px 0px; */
-	/* border-color: transparent var(--scrollbar_foreground_color) transparent transparent; */
-}
-
-/* ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
-	border-color: transparent var(--scrollbar_hover_color) transparent transparent;
-} */
-::-webkit-scrollbar-button:single-button:horizontal:increment {
-	display: none;
-	/* border-width: 8px 0px 8px 8px; */
-	/* border-color: transparent transparent transparent var(--scrollbar_foreground_color); */
-}
-
-/* ::-webkit-scrollbar-button:horizontal:single-button:increment:hover {
-    border-color: transparent transparent transparent var(--scrollbar_hover_color);
-} */
-
-/* Firefox Scrollbar */
-
-* {
-	scrollbar-color: var(--scrollbar_foreground_color) var(--body_color);
-}