Fix a bunch of padding issues

svelte/src/file_viewer/AdLeaderboard.svelte

@@ -160,7 +160,7 @@ head.valueimpression_loaded.subscribe(v => {
 		</div>
 	{:else if ad_type === "twitter"}
 
-		<div class="banner" style="font-size: 1.4em; text-align: center; padding: 4px;">
+		<div class="banner social_button">
 			<a href="https://twitter.com/Fornax96" rel="noreferrer" class="button" target="_blank" style="background-color: #1a8cd8; color: #ffffff;">
 				<Twitter style="color: #ffffff;"/>
 				Follow Pixeldrain on Twitter: @Fornax96
@@ -169,7 +169,7 @@ head.valueimpression_loaded.subscribe(v => {
 
 	{:else if ad_type === "mastodon"}
 
-		<div class="banner" style="font-size: 1.4em; text-align: center; padding: 4px;">
+		<div class="banner social_button">
 			<a href="https://mastodon.social/@fornax" rel="noreferrer" class="button" target="_blank" style="background-color: #595aff; color: #ffffff;">
 				<Mastodon style="color: #ffffff;"/>
 				Follow Pixeldrain on Mastodon: fornax@mastodon.social
@@ -178,12 +178,13 @@ head.valueimpression_loaded.subscribe(v => {
 
 	{:else if ad_type === "reddit"}
 
-		<div class="banner" style="font-size: 1.4em; text-align: center; padding: 4px;">
+		<div class="banner social_button">
 			<a href="https://www.reddit.com/r/PixelDrain" rel="noreferrer" class="button" target="_blank" style="background-color: #ff4500; color: #ffffff;">
 				<Reddit style="color: #ffffff;"/>
 				Follow Pixeldrain on Reddit: /r/pixeldrain
 			</a>
 		</div>
+
 	{/if}
 </div>
 
@@ -198,4 +199,19 @@ head.valueimpression_loaded.subscribe(v => {
 	text-align: center;
 	padding: 2px;
 }
+.social_button {
+	font-size: 1.4em;
+	text-align: center;
+	padding: 4px;
+}
+
+/* Vertical estate is sparse on some devices*/
+@media(max-height: 600px) {
+	.support_banner {
+		font-size: 1em;
+	}
+	.social_button {
+		font-size: 1.2em;
+	}
+}
 </style>

svelte/src/file_viewer/viewers/Abuse.svelte

@@ -11,6 +11,7 @@ let file = {
 </script>
 
 <h1>{file.name}</h1>
+
 <TextBlock>
 	<h2>Unavailable for legal reasons</h2>
 	<p>

svelte/src/file_viewer/viewers/File.svelte

@@ -17,6 +17,7 @@ let file = {
 </script>
 
 <h1>{file.name}</h1>
+
 <IconBlock icon_href={file.icon_href}>
 	Type: {file.mime_type}<br/>
 	No preview is available for this file type. Download to view it locally.
@@ -26,7 +27,7 @@ let file = {
 		<span>Download</span>
 	</button>
 </IconBlock>
-<br/>
+
 {#if file.show_ads}
 	<BandwidthUsage file={file} on:reload/>
 {/if}

svelte/src/file_viewer/viewers/IconBlock.svelte

@@ -12,15 +12,22 @@ export let width = "750px"
 
 <style>
 .block {
-	display: inline-flex;
+	display: flex;
 	flex-direction: row;
+	margin: 8px auto;
 }
+@media(max-width: 500px) {
+	.block {
+		flex-direction: column;
+	}
+}
+
 .icon {
 	flex: 0 0 auto;
 	margin-right: 8px;
 	border-radius: 8px;
 	/* Prevent icon from being stretched if text content is too large */
-	object-fit: contain;
+	align-self: center;
 }
 .description {
 	flex: 1 1 auto;
@@ -28,7 +35,7 @@ export let width = "750px"
 	text-align: initial;
 	padding-left: 8px;
 	vertical-align: middle;
-
+	overflow-wrap: anywhere;
 	background-color: var(--shaded_background);
 	border-radius: 8px;
 	padding: 8px;

svelte/src/file_viewer/viewers/RateLimit.svelte

@@ -13,8 +13,7 @@ let file = {
 }
 </script>
 
-<br/>
+<TextBlock>
-<TextBlock width="800px">
 	{#if file.availability === "file_rate_limited_captcha_required"}
 		<h1>
 			<i class="icon">file_download_off</i>

svelte/src/file_viewer/viewers/SpeedLimit.svelte

@@ -14,7 +14,6 @@ export let file = {
 }
 </script>
 
-<br/>
 <TextBlock>
 	<img src="/res/img/slow_down.webp" class="header_image" alt="Yea, I'm gonna need you to slow down a bit"/>
 	<p>
@@ -63,8 +62,6 @@ export let file = {
 		Also, I believe you have my stapler. Please give it back.
 	</p>
 </TextBlock>
-<br/>
-<br/>
 
 <style>
 .header_image {

svelte/src/file_viewer/viewers/TextBlock.svelte

@@ -9,11 +9,11 @@ export let center = false
 
 <style>
 .block {
-	display: inline-block;
+	display: block;
 	text-align: initial;
-	padding-left: 8px;
-	vertical-align: middle;
 	max-width: 100%;
+	overflow-wrap: anywhere;
+	margin: 8px auto;
 
 	background-color: var(--shaded_background);
 	border-radius: 8px;

svelte/src/file_viewer/viewers/Torrent.svelte

@@ -80,6 +80,7 @@ const copy_magnet = () => {
 </script>
 
 <h1>{file.name}</h1>
+
 <IconBlock icon_href={file.icon_href}>
 	{#if status === "finished"}
 		Created by: {torrent.created_by}<br/>
@@ -121,7 +122,7 @@ const copy_magnet = () => {
 		<span>Download torrent file</span>
 	</button>
 </IconBlock>
-<br/>
+
 {#if status === "finished"}
 	<TextBlock>
 		<h2>Files in this torrent</h2>

svelte/src/file_viewer/viewers/Video.svelte

@@ -163,6 +163,7 @@ const fullscreen = () => {
 	{/if}
 {:else}
 	<h1>{file.name}</h1>
+
 	<IconBlock icon_href={file.icon_href}>
 		The online video player on pixeldrain is only available for registered
 		users, or when the uploader of the video has a Pro account. You can
@@ -175,11 +176,8 @@ const fullscreen = () => {
 		<a href="/register" class="button">
 			<i class="icon">how_to_reg</i> Sign up
 		</a>
-		<a href="https://www.patreon.com/join/pixeldrain" target="_blank" class="button" rel="noreferrer">
-			<i class="icon">bolt</i> Get Pixeldrain Pro
-		</a>
 	</IconBlock>
-	<br/>
+
 	{#if file.show_ads}
 		<BandwidthUsage file={file} on:reload/>
 	{/if}

svelte/src/file_viewer/viewers/Zip.svelte

@@ -77,7 +77,7 @@ const recursive_size = (file) => {
 		<span>Download</span>
 	</button>
 </IconBlock>
-<br/>
+
 {#if status === "finished"}
 	<TextBlock>
 		<h2>Files in this zip archive</h2>

webcontroller/style.go

@@ -163,7 +163,7 @@ func (s styleSheet) withDefaults() styleSheet {
 	defaultCSS(&s.Navigation, RawCSS("none"))
 	defaultCSS(&s.BodyBackground, s.BodyColor)
 	defaultHSL(&s.BackgroundText, s.BodyText)
-	defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .03))
+	defaultHSL(&s.Separator, s.BodyColor.Add(0, 0, .05))
 
 	return s
 }