Make main page more responsive on mobile

Karthik99999 · Feb 26, 2024 · 44ea027 · 44ea027
1 parent f00e507
commit 44ea027
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 52 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -18,53 +18,41 @@
 	<meta name="description" content="A password generator to create Wonder Mail, rescue passwords, revival passwords and more for Pokemon Mystery Dungeon." />
 </svelte:head>
 
-<div id="page-container">
-	<div id="content-wrap">
-		<!-- Top Navbar -->
-		<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-			<a class="navbar-brand" href="{base}/">PMD Gen</a>
-			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-				<span class="navbar-toggler-icon"></span>
-			</button>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+	<a class="navbar-brand" href="{base}/">PMD Gen</a>
+	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+		<span class="navbar-toggler-icon"></span>
+	</button>
 
-			<div class="collapse navbar-collapse" id="navbar">
-				<ul class="navbar-nav ml-auto">
-					<a href="https://github.com/Karthik99999/pmd-gen" target="_blank" style="font-size:35px"><i class="bi bi-github" style="color:white"></i></a>
-				</ul>
-			</div>
-		</nav>
-		<!-- Jumbotron -->
-		<div class="container">
-			<div class="col-md-12">
-				<br />
-				<div class="jumbotron" id="jumbotron">
-					<slot />
+	<div class="collapse navbar-collapse" id="navbar">
+		<ul class="navbar-nav">
+			<li class="nav-item dropdown">
+				<a class="nav-link dropdown-toggle" href={'#'} id="rt-generators" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rescue Team</a>
+				<div class="dropdown-menu" aria-labelledby="rt-generators">
+					<a class="dropdown-item" href="{base}/rt-wondermail">Wonder Mail</a>
+					<a class="dropdown-item" href="{base}/rt-sosconverter">SOS to A-OK</a>
 				</div>
-			</div>
-		</div>
+			</li>
+			<li class="nav-item dropdown">
+				<a class="nav-link dropdown-toggle" href={'#'} id="rt-generators" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rescue Team DX</a>
+				<div class="dropdown-menu" aria-labelledby="rt-generators">
+					<a class="dropdown-item" href="{base}/rtdx-rescue">Rescue</a>
+					<a class="dropdown-item" href="{base}/rtdx-revival">Revival</a>
+				</div>
+			</li>
+		</ul>
+		<ul class="navbar-nav ml-auto">
+			<a href="https://github.com/Karthik99999/pmd-gen" target="_blank" style="font-size:35px"><i class="bi bi-github" style="color:white"></i></a>
+		</ul>
+	</div>
+</nav>
+
+<div class="container pt-3 mt-3">
+	<div class="jumbotron">
+		<slot />
 	</div>
-	<footer>
-		© 2024 Karthik99999 | <a href="https://github.com/Karthik99999/pmd-gen" target="_blank">Source</a>
-		<br />
-		All game logos used on this site belong to The Pokémon Company. This site is not affiliated with The Pokémon Company or Spike Chunsoft in any way.
+	<footer class="text-center text-muted">
+		<p class="pb-2 mb-2 border-bottom">© 2024 Karthik B. | <a href="https://github.com/Karthik99999/pmd-gen" target="_blank">Source</a></p>
+		<p>All game logos used on this site belong to The Pokémon Company. This site is not affiliated with The Pokémon Company or Spike Chunsoft in any way.</p>
 	</footer>
 </div>
-
-<style>
-	#page-container {
-		position: relative;
-		min-height: 100vh;
-	}
-
-	#content-wrap {
-		padding-bottom: 2.5rem; /* Footer height */
-	}
-
-	footer {
-		text-align: center;
-		position: absolute;
-		bottom: 0;
-		width: 100%;
-		height: 4rem;
-	}
-</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -8,18 +8,14 @@
 
 <center>
 	<h3>Generators</h3>
-</center>
-<div class="row m-3 justify-content-center">
-	<div class="col-sm-auto">
+	<div class="card-deck justify-content-center">
 		<div class="card" style="background:linear-gradient(to bottom right, #ED1C24, #0097DC)">
 			<img src="{base}/RRT_BRT_LOGO.png" class="card-img-top" alt="Rescue_Team" />
 			<div class="card-body btn-group" style="width: 100%;">
 				<a class="btn btn-info" href="{base}/rt-wondermail">Wonder Mail</a>
 				<a class="btn btn-info" href="{base}/rt-sosconverter">SOS to A-OK</a>
 			</div>
 		</div>
-	</div>
-	<div class="col-sm-auto">
 		<div class="card" style="background:linear-gradient(#ED1C24, #0097DC)">
 			<img src="{base}/RTDX_LOGO.png" class="card-img-top" alt="Rescue_Team_DX" />
 			<div class="card-body btn-group" style="width: 100%;">
@@ -28,12 +24,12 @@
 			</div>
 		</div>
 	</div>
-</div>
+</center>
 
 <style>
 	.card {
 		border: none;
-		width: 20rem;
+		max-width: 20rem;
 	}
 
 	.card-img-top {