Fixed alignment issues; added a lot more flexboxes

client/src/App.svelte

@@ -11,14 +11,16 @@ import TopBorder from "./TopBorder.svelte";
 	}
 </script>
 
-<main class="bg-banner bg-cover bg-center h-screen font-sans">
+<main class="flex flex-col items-stretch bg-banner bg-cover bg-center h-screen font-sans">
-	<TopBorder></TopBorder>
+	<TopBorder class="flex-shrink"></TopBorder>
-	<BottomBorder></BottomBorder>
+	<div class="flex-grow">
 		{#if loggedin}
 			<MainPage on:logOut={toggleLoggedIn}></MainPage>
 		{:else}
 			<Login on:loginSuccess={toggleLoggedIn}></Login>
 		{/if}
+	</div>
+	<BottomBorder class="flex-shrink"></BottomBorder>
 </main>
 
 <svelte:head>

client/src/BottomBorder.svelte

@@ -1,21 +1,16 @@
 <script>
-
+    let clazz;
+    export {clazz as class};
 </script>
 
-<main>
+<main class={clazz}>
-	<div >
 
-    </div>
 </main>
 
 <style>
-	div{
+	main{
         width:100%;
         height:80px;
-        background:#00f;
-        position:fixed;
-        bottom:0;
-        left:0;
         
         background: linear-gradient(270.31deg, rgba(38, 77, 89, 0.7) 21.94%, rgba(38, 77, 89, 0) 89.29%);
     }

client/src/CardBG.svelte

@@ -1,19 +1,17 @@
 <script>
-	export let width;
+	export let width = "inherit";
-	export let height;
+	export let height = "inherit";
 
 	let clazz;
 	export {clazz as class}
 </script>
 
-<main>
+<main class="rounded-x p-3 m-14 {clazz}" style="--width: {width}; --height: {height};">
-	<figure class="rounded-x p-3 m-14 {clazz}" style="--width: {width}; --height: {height};">
 	<slot></slot>
-	</figure>
 </main>
 
 <style>
-	figure{
+	main {
 		width: var(--width);
 		height: var(--height);
 

client/src/Login.svelte

@@ -17,9 +17,9 @@ import Button from "./Button.svelte";
 
 </script>
 
-<main>
+<main class="h-full">
-    <div class="container h-screen flex flex-col justify-center">
+    <div class="h-full flex flex-col justify-center items-center md:items-start">
-        <CardBG width="464px" height="550px" class="flex flex-col items-stretch">
+        <CardBG class="flex flex-col items-stretch">
             <h1 class='font-welcome text-7xl text-gray-50 m-6 border-b-2'>Welcome,</h1>
             <div class="m-3 flex-shrink">
                 <InputField placeholder="Username" isPassword={false} value={username}></InputField>

client/src/MainPage.svelte

@@ -24,10 +24,15 @@
 
 </script>
 
-    <main>
+<main class="h-full flex flex-col items-stretch md:flex-row">
+    <div class="flex flex-col items-stretch">
+        <CardBG>Item 1</CardBG>
+        <CardBG>Item 2</CardBG>
+    </div>
+
+    <div class="flex-shrink md:flex-shrink-0 md:flex-grow"></div>
 
-        <div class="container h-screen flex flex-col justify-center">
+    <CardBG class="flex-shrink flex flex-col items-stretch md:self-start">
-            <CardBG width="514px" height="600px" class="flex flex-col items-stretch">
         <div class="flex flex-row"> 
             <h1 class='font-sans text-5xl text-gray-50 m-6 border-b-2'>{username}</h1>
             <button on:click={showNotifications} style=" filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));"> <Icon icon="akar-icons:envelope" color="#FB6666" width="64" height="64" /></button>
@@ -58,7 +63,6 @@
         </div>
         
     </CardBG>
-        </div>
     
 </main>
 

client/src/TopBorder.svelte

@@ -1,21 +1,16 @@
 <script>
-
+    let clazz;
+    export {clazz as class};
 </script>
 
-<main>
+<main class={clazz}>
-	<div >
+    <h1 class="font-title text-7xl text-gray-50 m-8">FOXBANK</h1>
-        <h1 class="font-title text-7xl text-gray-50 mx-8">FOXBANK</h1>
-    </div>
 </main>
 
 <style>
-	div{
+	main{
         width:100%;
         height:80px;
-        background:#00f;
-        position:fixed;
-        top:0;
-        left:0;
         
         background: linear-gradient(90.12deg, rgba(38, 77, 89, 0.7) 19.7%, rgba(38, 77, 89, 0) 93.77%);
     }