Move data-sveltekit-* attributes to parent level when possible

src/routes/+page.svelte

@@ -118,15 +118,6 @@
         <DiscoverText />
 
         <ListCTAs>
-            <li>
-                <BoxCTA
-                    url="#locations"
-                    icon="globe"
-                    label="Discover locations"
-                    alt="Globe"
-                    on:click={() => smoothScroll({ hash: 'locations' })}
-                />
-            </li>
             <li>
                 <BoxCTA
                     url="/photos"
@@ -143,6 +134,14 @@
                     alt="Shopping bag"
                 />
             </li>
+            <li>
+                <BoxCTA
+                    url="/about"
+                    icon="compass"
+                    label="Learn about the project"
+                    alt="Compass"
+                />
+            </li>
         </ListCTAs>
     </div>
 

src/routes/[country]/[location]/+page.svelte

@@ -282,7 +282,7 @@
     </section>
 
     {#if photos.length}
-        <section class="location-page__houses" bind:this={photosListEl}>
+        <section class="location-page__houses" bind:this={photosListEl} data-sveltekit-noscroll>
             {#each photos as { title, image: { id, title: alt, width, height }, slug, city, date_taken }, index}
                 <House
                     {title}

src/routes/credits/+page.svelte

@@ -117,11 +117,11 @@
                                 {/if}
                             </dt>
                             <dd>
-                                <ul>
+                                <ul data-sveltekit-noscroll>
                                     {#each location as loc}
                                         {#if loc.location_id}
                                             <li>
-                                                <a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" data-sveltekit-noscroll tabindex="0">
+                                                <a href="/{loc.location_id.country.slug}/{loc.location_id.slug}" tabindex="0">
                                                     <Image
                                                         id={loc.location_id.country.flag.id}
                                                         sizeKey="square-small"

src/routes/photos/+page.svelte

@@ -427,10 +427,10 @@
     <section class="photos-page__content" bind:this={photosContentEl} style:--margin-sides="{sideMargins}px">
         <div class="grid container">
             {#if photos}
-                <div class="photos-page__grid" bind:this={photosGridEl}>
+                <div class="photos-page__grid" bind:this={photosGridEl} data-sveltekit-noscroll data-sveltekit-prefetch>
                     {#each photos as { id, image, slug, location, title, city }, index (id)}
                         <figure class="photo shadow-photo">
-                            <a href="/{location.country.slug}/{location.slug}/{slug}" data-sveltekit-prefetch data-sveltekit-noscroll tabindex="0">
+                            <a href="/{location.country.slug}/{location.slug}/{slug}" tabindex="0">
                                 <Image
                                     id={image.id}
                                     sizeKey="photo-grid"