From c7d3969a53092a13585e7b54a4738543db1a7d83 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 12 Jun 2024 03:13:59 -0700
Subject: [PATCH] refac

---
 src/app.html              | 87 +++++++++++++++++++++------------------
 src/routes/+layout.svelte |  2 +-
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/app.html b/src/app.html
index 89f9a95c1..347a7e7fa 100644
--- a/src/app.html
+++ b/src/app.html
@@ -83,54 +83,53 @@
 				src="/logo.svg"
 			/>
 
-			<img
-				id="logo-her"
+			<div
 				style="
 					position: absolute;
-					width: 13rem;
-					height: 13rem;
 					top: 33%;
 					left: 50%;
-					margin-left: -6.5rem;
-				"
-				src="/logo.svg"
-				class="animate-pulse-fast"
-			/>
-
-			<div
-				id="progress-background"
-				style="
-					position: absolute;
-					top: 58%;
-					left: 50%;
-
-					margin-left: -12rem;
 
 					width: 24rem;
-					height: 0.75rem;
-					border-radius: 9999px;
-					background-color: #fafafa9a;
-				"
-				class="bg-white"
-			></div>
-
-			<div
-				id="progress-bar"
-				style="
-					position: absolute;
-					top: 58%;
-					left: 50%;
-
 					margin-left: -12rem;
 
-					height: 0.75rem;
-					border-radius: 9999px;
-					background-color: #fff;
-
-					width: 0rem;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
 				"
-				class="bg-white"
-			></div>
+			>
+				<img
+					id="logo-her"
+					style="width: 13rem; height: 13rem"
+					src="/logo.svg"
+					class="animate-pulse-fast"
+				/>
+
+				<div style="position: relative; width: 24rem; margin-top: 0.5rem">
+					<div
+						id="progress-background"
+						style="
+							position: absolute;
+							width: 100%;
+							height: 0.75rem;
+
+							border-radius: 9999px;
+							background-color: #fafafa9a;
+						"
+					></div>
+
+					<div
+						id="progress-bar"
+						style="
+							position: absolute;
+							width: 100%;
+							height: 0.75rem;
+							border-radius: 9999px;
+							background-color: #fff;
+						"
+						class="bg-white"
+					></div>
+				</div>
+			</div>
 
 			<!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
 				Footer content
@@ -188,6 +187,16 @@
 		display: block;
 	}
 
+	@media (max-width: 24rem) {
+		html.her #progress-background {
+			display: none;
+		}
+
+		html.her #progress-bar {
+			display: none;
+		}
+	}
+
 	@keyframes pulse {
 		50% {
 			opacity: 0.65;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cd65ad955..2493a94de 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -129,7 +129,7 @@
 				const progressBar = document.getElementById('progress-bar');
 
 				if (progressBar) {
-					progressBar.style.width = `${value * 0.24}rem`;
+					progressBar.style.width = `${value}%`;
 				}
 			});