Improve app layout

public/index.css

@@ -55,14 +55,18 @@
 	--font-family-monospace: monospace;
 	--border-radius: 50px;
 	--box-shadow-color: var(--color-secondary-2);
+	--content-max-width: 1920px;
+	--content-min-width: 480px;
 }
 
-
 body {
 	font-size: 16px;
 	font-weight: 400;
 	line-height: 1.5;
 	min-width: 580px;
+	height: 100%;
+	margin: 0;
+	padding: 0;
 	color: white;
 	text-align: left;
 	background-color: var(--color-background);
@@ -271,6 +275,15 @@ input.wide {
 	background: var(--color-yellow-background);
 }
 
+.centered {
+	height: 100%;
+	padding-top: 5rem;
+	padding-bottom: 24vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
 span.small {
 	font-size: 0.75rem;
 }

src/App.svelte

@@ -23,14 +23,16 @@
 </script>
 
 <style>
+  .app {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
   .wrapper {
     display: flex;
     align-items: center;
     flex-direction: column;
-    justify-content: center;
-    min-height: 24rem;
-    padding-top: 6rem;
-    padding-bottom: 6rem;
+    height: 100%;
   }
 </style>
 

src/Header.svelte

@@ -25,7 +25,7 @@
     justify-content: space-between;
     align-items: center;
     margin: 0;
-    padding: 1rem;
+    padding: 1.5rem;
   }
   header .nav {
     display: inline-block;

src/Modal.svelte

@@ -81,7 +81,7 @@
   <div class="modal-overlay"></div>
 {/if}
 
-<div class:modal-floating={floating}>
+<div class:modal-floating={floating} class="centered">
   <div class="modal" class:error class:modal-subtle={subtle} class:modal-small={small}>
     <div class="modal-title">
       <slot name="title"></slot>

src/base/home/Index.svelte

@@ -9,9 +9,11 @@
   };
 </script>
 
-<main>
-  <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
-  <button class="primary" on:click={search} disabled={!input}>
-    Search
-  </button>
+<main class="centered">
+  <div>
+    <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
+    <button class="primary" on:click={search} disabled={!input}>
+      Search
+    </button>
+  </div>
 </main>

src/base/orgs/Index.svelte

@@ -20,7 +20,7 @@
 <style>
   main {
     width: 100%;
-    padding: 0 3rem;
+    padding: 5rem 3rem;
     display: block;
     align-items: space-between;
     justify-content: space-between;
@@ -43,14 +43,20 @@
     margin: 3rem;
     display: inline-block;
   }
+
+  .loading {
+    padding: 3rem 0;
+  }
 </style>
 
 <main>
   {#await Org.getAll(config)}
-    <Loading center />
+    <div class="loading">
+      <Loading center />
+    </div>
   {:then orgs}
     <header>
-      <span><strong>Orgs</strong> on the Radicle network.</span>
+      <span><strong>Orgs</strong> of the Radicle network.</span>
       <button class="create small secondary" on:click={onCreate} disabled={!account}>
         Create
       </button>

src/base/orgs/View.svelte

@@ -50,6 +50,9 @@
 </script>
 
 <style>
+  main {
+    padding: 5rem 0;
+  }
   main > header {
     display: flex;
     align-items: center;

src/base/registrations/Index.svelte

@@ -14,10 +14,6 @@
 </script>
 
 <style>
-  main {
-    padding-top: 2rem;
-    align-self: center;
-  }
   div.input-caption {
     font-size: 1.25rem;
     text-align: left;
@@ -37,7 +33,7 @@
   }
 </style>
 
-<main>
+<main class="centered">
   <div class="input-caption">
     Register a <strong>{config.registrar.domain}</strong> name
   </div>

src/base/registrations/View.svelte

@@ -83,6 +83,9 @@
 </script>
 
 <style>
+  main {
+    padding: 5rem 0;
+  }
   main > header {
     display: flex;
     align-items: center;

src/base/vesting/Index.svelte

@@ -52,7 +52,7 @@
   }
 </style>
 
-<main>
+<main class="centered">
   {#if info}
     <Modal>
       <span slot="title">