adds loader and container queries to h1

src/components/ChapterMarker.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { onMount } from "svelte";
     import { activeSection, readingList, readingListVisible, sliderVisible } from "$stores/misc.js";
     import { fly, fade } from 'svelte/transition';
     import Icon from "$components/helpers/Icon.svelte";
@@ -11,6 +12,11 @@
     let sliderValIllo;
     let sliderValRace;
     let rangeStart = 100;
+    let loading = true;
+
+    onMount(() => {
+		loading = false;
+	})
 
     function handleListToggle(initState) {
         readingListVisible.set(!$readingListVisible);
@@ -38,7 +44,7 @@
 </script>
 
 <nav>
-    <div class="top-nav">
+    <div class="top-nav" class:loading={loading}>
         <div class="logo">
             <a href="https://pudding.cool" aria-label="The Pudding" target="_self">
                 {@html logo}
@@ -110,6 +116,9 @@
         z-index: 1000;
         height: 6rem;
     }
+    .loading {
+        pointer-events: none;
+    }
     .top-nav {
         display: flex;
         flex-direction: row;

src/components/IntroBook.svelte

@@ -15,7 +15,7 @@
 	let frontRotate = 0;
 	let pageOneText;
 	let pageTwoText;
-	let headlineSize;
+	// let headlineSize;
 
 	function computePercentage(scrollY, w, h) {
 		if (scrollY >= 2) {
@@ -33,23 +33,23 @@
 			if (bookMin > 900) {
 				pageOneText = copy.page1_900;
 				pageTwoText = copy.page2_900;
-				headlineSize = 68;
+				// headlineSize = 68;
 			} else if (bookMin > 750) {
 				pageOneText = copy.page1_750;
 				pageTwoText = copy.page2_750;
-				headlineSize = 56;
+				// headlineSize = 56;
 			} else if (bookMin > 650) {
 				pageOneText = copy.page1_650;
 				pageTwoText = copy.page2_650;
-				headlineSize = 48;
+				// headlineSize = 48;
 			} else if (bookMin > 600) {
 				pageOneText = copy.page1_600;
 				pageTwoText = copy.page2_600;
-				headlineSize = 40;
+				// headlineSize = 40;
 			} else if (bookMin <= 600)  {
 				pageOneText = copy.page1_else;
 				pageTwoText = copy.page2_else;
-				headlineSize = 36;
+				// headlineSize = 36;
 			} 
 		}
 	}
@@ -58,7 +58,6 @@
 	$: w, computePercentage(scrollY, w, h);
 	$: h, computePercentage(scrollY, w, h);
 	$: bookMin, setBookText();
-	$: console.log(headlineSize, bookMin)
 </script>
 
 <section id="intro-book">
@@ -76,7 +75,7 @@
 						</div>
 						<div class="gradient-wrapper"></div>
 						<div class="title-wrapper" style={"width: 100%; height: 80%;"}>
-							<h1 style="font-size:{headlineSize}px">What Does <br> A Happily <br> Ever After <br> Look Like?</h1>
+							<h1>What Does <br> A Happily <br> Ever After <br> Look Like?</h1>
 						</div>
 						<p class="byline"><a href="https://pudding.cool/author/alice-liang">Alice Liang</a></p>
 					</div>
@@ -223,8 +222,7 @@
 	}
 	.title-wrapper {
 		position: absolute;
-		width: 100%;
-		height: 60%;
+		container: title / inline-size;
 	}
 	.book-cover h1 {
 		font-family: var(--sans-display);
@@ -240,9 +238,29 @@
 		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
 		max-height: 60%;
 		white-space: nowrap;
-		font-size: var(--64px);
+		font-size: 36px;
 		/* transition: all 0.5s; */
 	}
+	@container title (min-width: 275px) {
+		.book-cover h1 {
+			font-size: 40px;
+		}
+	}
+	@container title (min-width: 325px) {
+		.book-cover h1 {
+			font-size: 48px;
+		}
+	}
+	@container title (min-width: 375px) {
+		.book-cover h1 {
+			font-size: 56px;
+		}
+	}
+	@container title (min-width: 450px) {
+		.book-cover h1 {
+			font-size: 68px;
+		}
+	}
 	.book-cover .byline {
 		font-family: var(--serif-display);
 		position: absolute;

src/components/IntroScrolly.svelte

@@ -1,9 +1,10 @@
 <script>
+    import { onMount } from "svelte";
 	import Scrolly from "$components/helpers/Scrolly.svelte";
     import IntroBook from "$components/IntroBook.svelte";
     import inView from "$actions/inView.js";
     import { activeSection } from "$stores/misc.js";
-    import Icon from "$components/helpers/Icon.svelte";
+	import { Info } from "lucide-svelte";
 
     export let bookMin;
     export let w;
@@ -13,6 +14,11 @@
     const steps = [0];
 
 	let value;
+    let loading = true;
+    
+    onMount(() => {
+		loading = false;
+	})
 
     function setSection(id) { activeSection.set(id); }
 
@@ -33,6 +39,13 @@
 	</Scrolly>
 	<div class="spacer" />
     <div class="icon-wrapper" class:isVisible={isVisible}>
+        {#if loading == true}
+        <p>Loading</p>
+        <div class="icon-loading"></div>
+        {:else}
+        <p>Scroll</p>
+        <div class="icon-scroll"></div>
+        {/if}
     </div>
 </section>
 
@@ -76,15 +89,38 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        bottom: 0;
+        bottom: 2rem;
         left: 50%;
-        transform: translate(-50%, -50%);
-        animation: bounceUp 1s infinite;
+        transform: translate(-50%, 0);
         opacity: 0;
+    }
+    .icon-wrapper p {
+        position: absolute;
+        bottom: -2.25rem;
+        color: var(--romance-pink-light);
+        font-family: var(--sans-display);
+        font-size: var(--12px);
+        text-align: center;
+    }
+    .icon-loading {
+        height: 3rem;
+        position: absolute;
+        width: 3rem;
+        background-image: url($svg/loader.svg);
+        background-size: 3rem 3rem;
+        background-repeat: no-repeat;
+        background-position: center; 
+        animation: rotation 1s infinite;
+    }
+    .icon-scroll {
+        height: 3rem;
+        position: absolute;
+        width: 3rem;
         background-image: url($svg/arrow-down-circle.svg);
         background-size: 3rem 3rem;
         background-repeat: no-repeat;
-        background-position: center;
+        background-position: center; 
+        animation: bounceUp 1s infinite;
     }
     .isVisible {
         opacity: 1;