Massive refactor courtesy of 5 dollars of AI tokens

1 files changed, 109 insertions, 45 deletions

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 00d3e07..c9375e5 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,46 +1,110 @@
-<footer class="mt-auto bg-dark text-white">
-  <div class="container mt-2 mb-2">
-    <div class="row">
-      <div class="col-md-6">
-        <h3>Contact</h3>
-        <div class="d-flex flex-row align-items-center border-darkish p-1">
-          <i class="bi bi-telephone"></i>
-          <div class="px-4">
-            <a href="tel:12084994517">
-              <span>(208) 499 - 4517</span>
-            </a>
-          </div>
-        </div>
-        <div class="d-flex flex-row align-items-center border-darkish p-1">
-          <i class="bi bi-mailbox"></i>
-          <a href="mailto:contact@mistymountainstherapy.com">
-            <div class="px-4">
-              <span>contact@mistymountainstherapy.com</span>
-            </div>
-          </a>
-        </div> 
-        <div class="d-flex flex-row align-items-center p-1">
-          <i class="bi bi-pin-map"></i>
-          <a href="https://maps.app.goo.gl/s1AFqfKvUKgXDCrq5">
-          <div class="px-4">
-            <span>534 Trejo Street, Suite 200F</span>
-            <br>
-            <span class="ml-2">Rexburg, ID, 83440</span>
-          </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-6">
-        <h3>About</h3>
-        <div class="border-darkish p-1">
-          <a href="https://docs.google.com/document/d/10S_-yfiaDZnuD-0tvXTEIIyZiErVwrTj0y_0JiRT5_U/edit?usp=sharing" target="_blank">Privacy Policy</a>
-        </div>
-        <div class="p-1">
-          <span class="text-muted">Copyright &copy; 2024 Misty Mountains Therapy</span>
-          <br>
-          <span class="text-muted">High quality therapy services for the greater Rexburg area.</span>
-        </div>
-      </div>
-    </div>
-  </div>
+<footer class="site-footer">
+	<div class="container site-footer__inner">
+		<section class="site-footer__col" aria-label="Contact">
+			<h2 class="site-footer__heading">Contact</h2>
+
+			<address class="site-footer__list">
+				<div class="site-footer__item border-darkish">
+					<i class="bi bi-telephone" aria-hidden="true"></i>
+					<a class="site-footer__link" href="tel:12084994517">(208) 499 - 4517</a>
+				</div>
+
+				<div class="site-footer__item border-darkish">
+					<i class="bi bi-mailbox" aria-hidden="true"></i>
+					<a class="site-footer__link" href="mailto:contact@mistymountainstherapy.com"
+						>contact@mistymountainstherapy.com</a
+					>
+				</div>
+
+				<div class="site-footer__item">
+					<i class="bi bi-pin-map" aria-hidden="true"></i>
+					<a
+						class="site-footer__link"
+						href="https://maps.app.goo.gl/s1AFqfKvUKgXDCrq5"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<span>534 Trejo Street, Suite 200F</span><br />
+						<span>Rexburg, ID, 83440</span>
+					</a>
+				</div>
+			</address>
+		</section>
+
+		<section class="site-footer__col" aria-label="About">
+			<h2 class="site-footer__heading">About</h2>
+			<div class="site-footer__item border-darkish">
+				<a
+					class="site-footer__link"
+					href="https://docs.google.com/document/d/10S_-yfiaDZnuD-0tvXTEIIyZiErVwrTj0y_0JiRT5_U/edit?usp=sharing"
+					target="_blank"
+					rel="noopener noreferrer"
+					>Privacy Policy</a
+				>
+			</div>
+
+			<p class="text-muted" style="margin-top: var(--space-4)">
+				Copyright &copy; 2024 Misty Mountains Therapy
+			</p>
+			<p class="text-muted">High quality therapy services for the greater Rexburg area.</p>
+		</section>
+	</div>
 </footer>
+
+<style>
+	.site-footer {
+		margin-top: auto;
+		background: #101413;
+		color: white;
+		padding-block: var(--space-6);
+	}
+
+	.site-footer__inner {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: var(--space-6);
+	}
+
+	.site-footer__heading {
+		margin: 0 0 var(--space-3);
+		font-size: 1.6rem;
+		color: white;
+	}
+
+	.site-footer__list {
+		margin: 0;
+		font-style: normal;
+		display: grid;
+		gap: var(--space-2);
+	}
+
+	.site-footer__item {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--space-3);
+		padding: var(--space-2);
+	}
+
+	.site-footer__item i {
+		margin-top: 0.2rem;
+		color: rgba(255, 255, 255, 0.85);
+	}
+
+	.site-footer__link {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.site-footer__link:hover {
+		text-decoration: underline;
+		text-decoration-thickness: 2px;
+		text-underline-offset: 0.18em;
+	}
+
+	@media (min-width: 768px) {
+		.site-footer__inner {
+			grid-template-columns: 1fr 1fr;
+			align-items: start;
+		}
+	}
+</style>