From fd8afab3fd2c9485f7497fb470b931348ecf3573 Mon Sep 17 00:00:00 2001
From: Jan Diehm <jadiehm@gmail.com>
Date: Thu, 12 Oct 2023 21:51:30 -0500
Subject: [PATCH] adds loader and container queries to h1

---
 src/components/ChapterMarker.svelte | 11 ++++++-
 src/components/IntroBook.svelte     | 40 ++++++++++++++++++-------
 src/components/IntroScrolly.svelte  | 46 +++++++++++++++++++++++++----
 src/svg/loader.svg                  |  9 ++++++
 4 files changed, 89 insertions(+), 17 deletions(-)
 create mode 100644 src/svg/loader.svg

diff --git a/src/components/ChapterMarker.svelte b/src/components/ChapterMarker.svelte
index 1e54dd0..0d4b3dd 100644
--- a/src/components/ChapterMarker.svelte
+++ b/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;
diff --git a/src/components/IntroBook.svelte b/src/components/IntroBook.svelte
index a098bd0..08da268 100644
--- a/src/components/IntroBook.svelte
+++ b/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;
diff --git a/src/components/IntroScrolly.svelte b/src/components/IntroScrolly.svelte
index 2e7cd9d..4035ff4 100644
--- a/src/components/IntroScrolly.svelte
+++ b/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;
diff --git a/src/svg/loader.svg b/src/svg/loader.svg
new file mode 100644
index 0000000..8df6064
--- /dev/null
+++ b/src/svg/loader.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="64px" height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#F6AAB5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<path class="st0" d="M61.4,32c0,16.2-13.2,29.4-29.4,29.4S2.6,48.2,2.6,32S15.8,2.6,32,2.6c3.1,0,6.2,0.5,9.1,1.4"/>
+</svg>