Merge pull request #12 from sstream17/development

More updates after SvelteKit Upgrade

src/components/Nav.svelte

@@ -6,6 +6,8 @@
 
 	$: pathName = $page.url.pathname;
 
+	const homeUrl = `${base}/wedding`;
+
 	const mediumWidth: number = 768;
 
 	let collapsed: boolean = true;
@@ -57,7 +59,7 @@
 <nav>
 	<div class="title">
 		<HamburgerButton onClick={toggleHamburgerMenu} {collapsed} />
-		<a class="title-center" href={base}>
+		<a class="title-center" href={homeUrl}>
 			<h1>Katherine & Spencer</h1>
 		</a>
 		<div />
@@ -77,7 +79,7 @@
 						aria-current={pathName === `${base}/wedding`
 							? "page"
 							: undefined}
-						href={base}>{page.title}</a
+						href={homeUrl}>{page.title}</a
 					>
 				</li>
 			{:else}

src/routes/wedding/+page.svelte

@@ -11,9 +11,9 @@
 <svelte:window bind:scrollY={y} />
 
 <header class="zoom">
-	<h1>We're getting married!</h1>
+	<h1>We're married!</h1>
 	<img
-		src="/home/hero3_3x2.jpg"
+		src="/home/hero.jpg"
 		alt="Katie and Spencer"
 		style="transform: translate(0, -{y / 10}%) scale({1 + y / 1000});"
 	/>

src/routes/wedding/photos/+page.svelte

@@ -6,6 +6,29 @@
 
 <h1>Photos</h1>
 
+<h2>Wedding</h2>
+
+<div class="grid">
+    <div class="zoom img-4">
+        <img src="/photos/katie+spencer4.jpg" alt="Katie and Spencer" />
+    </div>
+    <div class="zoom img-5">
+        <img src="/photos/wedding_party1.jpg" alt="The wedding party" />
+    </div>
+    <div class="zoom img-6">
+        <img src="/photos/katie+spencer5.jpg" alt="Katie and Spencer" />
+    </div>
+</div>
+
+<p>
+    <a
+        href="https://brittanymccoyphotography.client-gallery.com/gallery/stream/"
+        >View more photos.</a
+    >
+</p>
+
+<h2>Engagement</h2>
+
 <div class="grid">
     <div class="zoom img-1">
         <img src="/photos/katie+spencer1.jpg" alt="Katie and Spencer" />
@@ -21,7 +44,8 @@
 <p>
     <a
         href="https://brittanymccoyphotography.client-gallery.com/gallery/katie-and-spencer/"
-    >View more photos.</a>
+        >View more engagement photos.</a
+    >
 </p>
 
 <style>
@@ -68,6 +92,21 @@
         grid-row: 4 / span 3;
     }
 
+    .img-4 {
+        grid-column: 1 / span 4;
+        grid-row: 1 / span 6;
+    }
+
+    .img-5 {
+        grid-column: 5 / span 4;
+        grid-row: 1 / span 3;
+    }
+
+    .img-6 {
+        grid-column: 5 / span 4;
+        grid-row: 4 / span 3;
+    }
+
     @media screen and (max-width: 768px) {
         .grid {
             grid-template-columns: 1fr;

src/routes/wedding/travel/+page.svelte

@@ -16,15 +16,7 @@
         <p>3130 Holen Ave</p>
         <p>York, NE 68467</p>
     </div>
-    <iframe
-        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3018.9424231718494!2d-97.59572702675875!3d40.82922832654488!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x879745212796c751%3A0xa4a002d0b800ffa!2sHolthus%20Convention%20Center!5e0!3m2!1sen!2sus!4v1626826245756!5m2!1sen!2sus"
-        width="600"
-        height="450"
-        style="border:0;"
-        title="Holthus Convention Center"
-        allowfullscreen=""
-        loading="lazy"
-    />
+    <img src="/travel/holthus.jpg" alt="Holthus Convention Center" />
 </div>
 
 <p>
@@ -39,13 +31,7 @@
         <p>309 W David Dr</p>
         <p>York, NE 68467</p>
     </div>
-    <a href="https://g.page/HamptonInnYork?share">
-        <img
-            id="hampton-inn-img"
-            src="/travel/hampton_inn.jpg"
-            alt="Hampton Inn York, NE"
-        />
-    </a>
+    <img src="/travel/hampton_inn.jpg" alt="Hampton Inn York, NE" />
 </div>
 
 <p>
@@ -55,31 +41,22 @@
 </p>
 
 <style>
-    iframe {
-        margin: 0 auto;
-    }
-
     .travel-card {
         align-items: center;
         font-size: 20px;
     }
 
     .travel-card,
-    .travel-card h3,
-    .travel-card a {
+    .travel-card h3 {
         text-align: start !important;
         line-height: 1;
     }
 
-    .travel-card a {
-        display: contents;
-    }
-
     .travel-card p {
         margin: 0.5em 0;
     }
 
-    #hampton-inn-img {
+    .travel-card img {
         max-width: 50%;
     }
 </style>