Add margins around the page

res/static/style/layout.css

@@ -135,7 +135,7 @@ footer>.footer_content {
 	height: 100%;
 	left: 0;
 	float: left;
-	padding: 20px 10px 10px 0;
+	padding: 20px 0 10px 0;
 	overflow-y: auto;
 	overflow-x: hidden;
 	text-align: left;
@@ -154,14 +154,19 @@ footer>.footer_content {
 	/* Center the header and body */
 	overflow-y: auto;
 	overflow-x: hidden;
-	transition: margin-left 0.5s;
+	transition: margin 0.5s;
 }
 
 .page_content {
 	background: var(--body_background);
-	border-top-left-radius: 8px;
-	border-bottom-left-radius: 8px;
-	transition: border-top-left-radius 1s, border-bottom-left-radius 1s;
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.page_content,
+.page_margins {
+	margin-right: 5px;
+	margin-left: 5px;
 }
 
 @media (max-width: 1100px) {
@@ -171,12 +176,14 @@ footer>.footer_content {
 
 	.page_body {
 		margin-left: 0;
+		margin-right: 0;
 		width: 100%;
 	}
 
-	.page_content {
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
+	.page_content,
+	.page_margins {
+		margin-left: 0;
+		margin-right: 0;
 	}
 
 	header>h1 {

res/template/fragments/page_wrap.html

@@ -29,23 +29,14 @@
 function toggleMenu() {
 	var nav  = document.getElementById("page_navigation");
 	var body = document.getElementById("page_body");
-	var content = document.getElementById("page_content");
 	if (nav.offsetLeft === 0) {
 		// Menu is visible, hide it
 		nav.style.left = -nav.offsetWidth + "px";
 		body.style.marginLeft = "0";
-		if (content) {
-			content.style.borderTopLeftRadius = "0"
-			content.style.borderBottomLeftRadius = "0"
-		}
 	} else {
 		// Menu is hidden, show it
 		nav.style.left = "0";
 		body.style.marginLeft = nav.offsetWidth + "px";
-		if (content) {
-			content.style.borderTopLeftRadius = "8px"
-			content.style.borderBottomLeftRadius = "8px"
-		}
 	}
 }
 function resetMenu() {

res/template/home.html

@@ -11,7 +11,7 @@
 			background-color: var(--background_color);
 			background-blend-mode: luminosity;
 			color: #ffffff;
-			box-shadow: inset 0 0 2px 0 var(--shadow_color);
+			box-shadow: inset 0 0 10px -4px var(--shadow_color);
 			border: none;
 		}
 		</style>

svelte/src/home_page/HomePage.svelte

@@ -2,12 +2,11 @@
 import Footer from "../layout/Footer.svelte";
 import AddressReputation from "./AddressReputation.svelte";
 import FeatureTable from "./FeatureTable.svelte";
-import ForCreators from "./ForCreators.svelte";
 import OtherPlans from "./OtherPlans.svelte";
 import UploadWidget from "./UploadWidget.svelte";
 </script>
 
-<div id="page_content" class="page_content">
+<div class="page_content">
 	<header>
 		<div class="header_image_container"></div>
 	</header>
@@ -15,7 +14,9 @@ import UploadWidget from "./UploadWidget.svelte";
 	<AddressReputation/>
 
 	<UploadWidget></UploadWidget>
+</div>
 
+<div class="page_content">
 	<header>
 		<h1>What is pixeldrain?</h1>
 	</header>
@@ -43,6 +44,9 @@ import UploadWidget from "./UploadWidget.svelte";
 			registration page</a>. More about pixeldrain's features below.
 		</p>
 	</section>
+</div>
+
+<div class="page_content">
 	<header>
 		<h1 id="pro">Getting more out of pixeldrain</h1>
 	</header>
@@ -65,11 +69,23 @@ import UploadWidget from "./UploadWidget.svelte";
 		<br/>
 	</section>
 
-	<br/>
+</div>
+
+<div class="page_content">
 	<Footer></Footer>
 </div>
 
 <style>
+.page_content {
+	margin-top: 5px;
+	margin-bottom: 10px;
+}
+@media (max-width: 1100px) {
+	.page_content {
+		margin-top: 0;
+	}
+}
+
 .header_image_container {
 	margin: auto;
 	height: 200px;

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -359,6 +359,7 @@ const node_click = (index) => {
 	background: var(--body_background);
 	min-width: 850px;
 	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
 	border-bottom: 1px solid var(--separator);
 }
 .sorter_button {
@@ -389,6 +390,7 @@ const node_click = (index) => {
 	overflow-x: auto;
 	background: var(--body_background);
 	border-bottom-left-radius: 8px;
+	border-bottom-right-radius: 8px;
 }
 #node_container {
 	display: block;

svelte/src/user_file_manager/FileManager.svelte

@@ -257,7 +257,7 @@ onMount(() => {
 
 <svelte:window on:keydown={keydown} on:hashchange={hashChange} />
 
-<div id="file_manager" class="file_manager">
+<div id="file_manager" class="file_manager page_margins">
 	<div id="nav_bar" class="nav_bar">
 		<button id="btn_menu" onclick="toggleMenu()"><i class="icon">menu</i></button>
 		<button on:click={toggleSelecting} id="btn_select" class:button_highlight={selecting}>
@@ -354,12 +354,14 @@ is collapsed */
 }
 
 #file_manager {
-	position:         absolute;
-	padding:          0;
-	width:            100%;
-	height:           100%;
-	display:          flex;
-	flex-direction:   column;
+	position: absolute;
+	padding: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: flex;
+	flex-direction: column;
 }
 .nav_bar {
 	flex-shrink: 0;