aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/DirectionCard.svelte80
-rw-r--r--src/components/Footer.svelte154
-rw-r--r--src/components/NavBar.svelte306
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>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-05 13:37:42 +0000