Massive refactor courtesy of 5 dollars of AI tokens

3 files changed, 439 insertions, 101 deletions

diff --git a/src/components/DirectionCard.svelte b/src/components/DirectionCard.svelte
index 0097d33..7f9d76f 100644
--- a/src/components/DirectionCard.svelte
+++ b/src/components/DirectionCard.svelte
@@ -1,26 +1,60 @@
 <script>
-  export let imageSpec;
-  export let direction;
+	export let imageSpec;
+	export let direction;
 </script>
 
-<main>
-  {#if direction == 'right'}
-    <div class="row d-flex align-items-center my-2">
-      <div class="col-md-4 text-center order-sm-1">
-        <img class="img-fluid rounded shadow" src={imageSpec.image} alt={imageSpec.alt} />
-      </div>
-      <div class="col-md-8 border p-4 bg-light rounded shadow order-sm-2">
-        <slot />
-      </div>
-    </div>
-  {:else}
-    <div class="row d-flex align-items-center my-2">
-      <div class="col-md-8 border p-4 bg-light rounded shadow order-md-first order-last">
-        <slot />
-      </div>
-      <div class="col-md-4 text-center">
-        <img class="img-fluid rounded shadow" src={imageSpec.image} alt={imageSpec.alt} />
-      </div>
-    </div>
-  {/if}
-</main>
+<section class="direction-card">
+	{#if direction === 'right'}
+		<div class="direction-card__row row my-2">
+			<div class="direction-card__media col-md-4">
+				<img
+					class="img-fluid rounded shadow"
+					src={imageSpec.image}
+					alt={imageSpec.alt}
+					loading="lazy"
+					decoding="async"
+				/>
+			</div>
+			<div class="direction-card__content col-md-8 card">
+				<slot />
+			</div>
+		</div>
+	{:else}
+		<div class="direction-card__row row my-2">
+			<div class="direction-card__content col-md-8 card">
+				<slot />
+			</div>
+			<div class="direction-card__media col-md-4">
+				<img
+					class="img-fluid rounded shadow"
+					src={imageSpec.image}
+					alt={imageSpec.alt}
+					loading="lazy"
+					decoding="async"
+				/>
+			</div>
+		</div>
+	{/if}
+</section>
+
+<style>
+	.direction-card__row {
+		align-items: center;
+	}
+
+	.direction-card__media {
+		max-width: 420px;
+		margin-inline: auto;
+	}
+
+	@media (min-width: 768px) {
+		.direction-card__media {
+			max-width: none;
+		}
+	}
+
+	.direction-card :global(img) {
+		max-height: 520px;
+		object-fit: cover;
+	}
+</style>
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>
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index 44118ba..2b64c88 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -1,34 +1,274 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark">
-  <div class="container">
-    <a href="/" class="navbar-brand abs">
-      <img height="100" src="/logo.png" alt="Misty Mountains Therapy"/>
-    </a>
-    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#toggle">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="navbar-collapse collapse" id="toggle">
-      <ul class="navbar-nav ">
-        <li class="nav-item active">
-          <a class="nav-link" href="/">Home</a>
-        </li>
-        <li class="nav-item active">
-          <a class="nav-link" href="/team">Our Team</a>
-        </li>
-        <li class="nav-item active">
-          <a class="nav-link" href="/services">Services</a>
-        </li>
-        <li class="nav-item active">
-          <a class="nav-link" href="/approach">Approach</a>
-        </li>
-        <li class="nav-item active">
-          <a class="nav-link" href="https://joni-hunt.clientsecure.me/" target="_blank">Portal</a>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-auto">
-        <li class="nav-item">
-          <a class="btn btn-primary" href="/contact">Contact Us</a>
-        </li>
-      </ul>
-    </div>
-  </div>
+<script>
+	import { resolveRoute } from '$app/paths';
+	import { page } from '$app/stores';
+
+	let menuOpen = false;
+	const menuId = 'primary-navigation';
+	let menuEl;
+	let toggleEl;
+
+	const navLinks = [
+		{ href: '/', label: 'Home' },
+		{ href: '/team', label: 'Team' },
+		{ href: '/services', label: 'Services' },
+		{ href: '/approach', label: 'Approach' }
+	];
+
+	function isActive(path, currentPath) {
+		if (path === '/') return currentPath === '/';
+		return currentPath.startsWith(path);
+	}
+
+	function onWindowPointerDown(event) {
+		if (!menuOpen) return;
+		const target = event.target;
+		if (menuEl?.contains(target) || toggleEl?.contains(target)) return;
+		closeMenu();
+	}
+
+	function toggleMenu() {
+		menuOpen = !menuOpen;
+	}
+
+	function closeMenu() {
+		menuOpen = false;
+	}
+
+	function onNavKeydown(event) {
+		if (event.key === 'Escape') {
+			menuOpen = false;
+		}
+	}
+</script>
+
+<svelte:window on:keydown={onNavKeydown} on:pointerdown={onWindowPointerDown} />
+
+{#if menuOpen}
+	<div class="site-nav__backdrop" aria-hidden="true" on:click={closeMenu}></div>
+{/if}
+
+<nav class="site-nav" aria-label="Primary">
+	<div class="container site-nav__inner">
+		<a class="site-nav__brand" href={resolveRoute('/')} on:click={closeMenu}>
+			<img class="site-nav__logo" height="64" src="/logo.png" alt="Misty Mountains Therapy" />
+			<span class="visually-hidden">Misty Mountains Therapy</span>
+		</a>
+
+		<button
+			bind:this={toggleEl}
+			class="site-nav__toggle"
+			type="button"
+			aria-expanded={menuOpen}
+			aria-controls={menuId}
+			on:click={toggleMenu}
+		>
+			<span class="visually-hidden">{menuOpen ? 'Close menu' : 'Open menu'}</span>
+			<i class={'bi ' + (menuOpen ? 'bi-x-lg' : 'bi-list')} aria-hidden="true"></i>
+		</button>
+
+		<div bind:this={menuEl} id={menuId} class="site-nav__menu" class:site-nav__menuOpen={menuOpen}>
+			<ul class="site-nav__links">
+				{#each navLinks as link (link.href)}
+					<li>
+						<a
+							class="site-nav__link"
+							class:site-nav__link--active={isActive(link.href, $page.url.pathname)}
+							href={resolveRoute(link.href)}
+							aria-current={isActive(link.href, $page.url.pathname) ? 'page' : undefined}
+							on:click={closeMenu}
+						>
+							{link.label}
+						</a>
+					</li>
+				{/each}
+				<li>
+					<a
+						class="site-nav__link"
+						href="https://joni-hunt.clientsecure.me/"
+						target="_blank"
+						rel="noopener noreferrer"
+						on:click={closeMenu}
+					>
+						Portal
+						<i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>
+					</a>
+				</li>
+			</ul>
+
+			<div class="site-nav__cta">
+				<a class="button button--primary" href={resolveRoute('/contact')} on:click={closeMenu}>Contact Us</a>
+			</div>
+		</div>
+	</div>
 </nav>
+
+<style>
+	.site-nav {
+		position: sticky;
+		top: 0;
+		z-index: 70;
+		background: rgba(247, 247, 243, 0.86);
+		backdrop-filter: blur(10px);
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	.site-nav__inner {
+		position: relative;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--space-4);
+		padding-block: var(--space-3);
+	}
+
+	.site-nav__brand {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-3);
+		text-decoration: none;
+	}
+
+	.site-nav__logo {
+		display: block;
+		width: auto;
+		height: 64px;
+	}
+
+	.site-nav__toggle {
+		margin-left: auto;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-pill);
+		background: transparent;
+		padding: 0.75rem 0.9rem;
+		cursor: pointer;
+		line-height: 1;
+	}
+
+	.site-nav__toggle:hover {
+		border-color: var(--color-accent);
+	}
+
+	.site-nav__toggle i {
+		font-size: 1.25rem;
+	}
+
+	.site-nav__backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(16, 20, 19, 0.32);
+		backdrop-filter: blur(2px);
+		z-index: 40;
+	}
+
+	.site-nav__menu {
+		z-index: 60;
+		position: absolute;
+		top: calc(100% + var(--space-2));
+		left: 0;
+		right: 0;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-4);
+		padding: var(--space-3);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-sm);
+		background: rgba(247, 247, 243, 0.95);
+		box-shadow: var(--shadow-sm);
+
+		transform: translateX(0.75rem);
+		opacity: 0;
+		max-height: 0;
+		overflow: hidden;
+		pointer-events: none;
+		transition:
+			transform 180ms ease,
+			opacity 180ms ease,
+			max-height 240ms ease;
+	}
+
+	.site-nav__menuOpen {
+		transform: translateX(0);
+		opacity: 1;
+		max-height: 70vh;
+		pointer-events: auto;
+	}
+
+	.site-nav__links {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	.site-nav__link {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		text-decoration: none;
+		padding: 0.75rem 0.9rem;
+		border-radius: var(--radius-pill);
+		font-weight: 600;
+		transition: background 150ms ease, color 150ms ease;
+	}
+
+	.site-nav__link:hover {
+		background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+	}
+
+	.site-nav__link--active {
+		background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+		color: var(--color-accent-strong);
+	}
+
+	.site-nav__link--active:hover {
+		background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+	}
+
+	.site-nav__cta {
+		display: flex;
+	}
+
+	@media (min-width: 768px) {
+		.site-nav__toggle {
+			display: none;
+		}
+
+		.site-nav__backdrop {
+			display: none;
+		}
+
+		.site-nav__menu {
+			z-index: auto;
+			position: static;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: flex-end;
+			gap: var(--space-4);
+			margin-top: 0;
+			padding: 0;
+			border: 0;
+			border-radius: 0;
+			background: transparent;
+			box-shadow: none;
+			width: auto;
+			margin-left: auto;
+
+			transform: none;
+			opacity: 1;
+			max-height: none;
+			overflow: visible;
+			pointer-events: auto;
+			transition: none;
+		}
+
+		.site-nav__links {
+			flex-direction: row;
+			align-items: center;
+		}
+	}
+</style>