From b692a19b81453c9fd0548cb02c62fe58e2708eb5 Mon Sep 17 00:00:00 2001
From: Aumetra Weisman <aumetra@cryptolab.net>
Date: Wed, 1 May 2024 19:18:44 +0200
Subject: [PATCH] frontpage overhaul

---
 kitsune-fe/src/routes/+page.svelte | 188 +++++++++++++++--------------
 kitsune-fe/src/styles/root.scss    |   4 +-
 2 files changed, 102 insertions(+), 90 deletions(-)

diff --git a/kitsune-fe/src/routes/+page.svelte b/kitsune-fe/src/routes/+page.svelte
index 6ec0517c1..f4cd2eeb6 100644
--- a/kitsune-fe/src/routes/+page.svelte
+++ b/kitsune-fe/src/routes/+page.svelte
@@ -8,127 +8,137 @@
 </script>
 
 <div class="landing-page">
-	<div class="left-section">
-		<img class="logo" alt="Kitsune VTuber-style logo" src="/kitsune_vtuber.png" />
-		<h1>Federated microblogging.</h1>
-
-		Instance statistics:
-
-		<ul>
-			<li>Registered users: 0</li>
-			<li>Published posts: 0</li>
-			<li>Known instances: 0</li>
-		</ul>
-	</div>
-
-	<div class="right-section">
-		<div class="login-form">
-			<Button class="login-button" onclick={() => alert('clicked')}>Login</Button>
+	<div class="top-section">
+		<div class="top-section-content">
+			<div class="top-section-left">
+				<img class="logo" src="/kitsune_vtuber.png" />
+
+				<h1>Federated microblogging</h1>
+
+				Statistics:
+
+				<ul>
+					<li>1,000,000,000 registered users</li>
+					<li>96,000,000,000 posts</li>
+					<li>50,000,000 connected instances</li>
+				</ul>
+			</div>
+
+			<div class="top-section-right">
+				<form class="register-form">
+					<label>
+						Username
+						<br /><input type="text" name="username" />
+					</label>
+
+					<label>
+						Email
+						<br /><input type="email" name="email" />
+					</label>
+
+					<label>
+						Password
+						<br /><input type="password" name="password" />
+					</label>
+
+					<label>
+						Confirm Password
+						<br /><input type="password" name="confirm-password" />
+					</label>
+
+					<p>
+						<Button class="register-button" onclick={() => console.log('register')}>
+							Register
+						</Button>
+					</p>
+				</form>
+			</div>
 		</div>
-
-		<h2>-- OR --</h2>
-
-		<form
-			class="register-form"
-			onsubmit={(e) => {
-				e.preventDefault();
-				alert('submitted');
-			}}
-		>
-			<label>
-				Username
-				<input name="username" type="text" />
-			</label>
-
-			<label>
-				Email
-				<input name="email" type="email" />
-			</label>
-
-			<label>
-				Password
-				<input name="password" type="password" />
-			</label>
-
-			<label>
-				Confirm password
-				<input name="password-confirm" type="password" />
-			</label>
-
-			<p>
-				<Button>Register</Button>
-			</p>
-		</form>
 	</div>
+
+	<div class="bottom-section"></div>
 </div>
 
 <style lang="scss">
+	@use '../styles/breakpoints' as *;
 	@use '../styles/colours' as *;
 	@use '../styles/mixins' as *;
+	@use 'sass:map';
+
+	$top-percentage: 70%;
 
 	.landing-page {
 		display: flex;
-		flex-direction: row;
-		align-content: center;
-
-		padding: 5em 8em;
-
-		width: 100%;
+		flex-direction: column;
 		height: 100%;
-
-		@include only-on-mobile {
-			flex-direction: column;
-		}
 	}
 
-	.left-section {
+	.top-section {
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
 		justify-content: center;
+		align-items: flex-end;
 
-		flex: 40%;
+		flex: $top-percentage;
 
-		@include only-on-mobile {
-			align-items: center;
-		}
-	}
+		&-content {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
 
-	.right-section {
-		display: flex;
-		flex-direction: column;
+			width: 100%;
+			height: 80%;
 
-		flex: 10%;
-		padding: 1em;
+			max-width: map.get($breakpoints, lg);
+		}
 
-		justify-content: center;
-		align-items: center;
+		&-right {
+			background-color: $dark2;
+			padding: 3em;
+		}
+	}
+
+	.bottom-section {
+		background-color: $dark2;
+		flex: calc(100% - $top-percentage);
 	}
 
 	.logo {
-		width: 60%;
+		width: 65%;
 	}
 
-	.login-form,
 	.register-form {
-		border: 1px solid $shade1dark;
-		border-radius: 0.5em;
-	}
+		display: flex;
+		flex-direction: column;
+
+		& label {
+			margin: 0.3em 0;
+
+			& input {
+				width: 40ch;
+			}
+		}
 
-	.login-form {
-		padding: 2em 7em;
-		background-color: $dark3;
+		& :global(.register-button) {
+			width: 100%;
+			margin-top: 2em;
+		}
 	}
 
-	.register-form {
-		padding: 2em;
-		background-color: $dark3;
+	@include only-on-mobile {
+		.bottom-section {
+			display: none;
+		}
 
-		& label {
-			display: flex;
+		.top-section-content {
 			flex-direction: column;
-			width: 30ch;
+			align-items: center;
+		}
 
-			padding: 0.3em 0;
+		.top-section-left {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
 		}
 	}
 </style>
diff --git a/kitsune-fe/src/styles/root.scss b/kitsune-fe/src/styles/root.scss
index 77e2d4079..89290796f 100644
--- a/kitsune-fe/src/styles/root.scss
+++ b/kitsune-fe/src/styles/root.scss
@@ -12,7 +12,7 @@
 	color-scheme: light dark;
 	font-weight: 400;
 	font-size: 16px;
-	line-height: 24px;
+	line-height: 1.5em;
 
 	font-synthesis: none;
 	-webkit-font-smoothing: antialiased;
@@ -32,6 +32,8 @@ body {
 	margin: 0;
 	width: 100vw;
 	height: 100vh;
+
+	overflow-x: hidden;
 }
 
 ::-webkit-scrollbar {