@turnipxenon/pineapple 2.4.12 → 2.4.13

package/dist/components/ToggleableContent.svelte

@@ -55,12 +55,12 @@ onMount(() => {
 });
 $:
   attachGibberish(gibberishParent);
-</script>
-
-{#if toggle === ToggleableContentType.Default}
-	<slot />
-{:else if (ToggleableContentType.Gibberish === toggle)}
-	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
-		<slot />
-	</div>
+</script>
+
+{#if toggle === ToggleableContentType.Default}
+	<slot />
+{:else if (ToggleableContentType.Gibberish === toggle)}
+	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
+		<slot />
+	</div>
 {/if}

package/dist/components/layouts/PineappleBaseLayout.svelte

@@ -4,6 +4,7 @@ import { page } from "$app/stores";
 import { enableBackground } from "../../store";
 import DialogOverlay from "../DialogOverlay.svelte";
 import AresLogo from "../../assets/characters/ares/ares_logo.webp";
+import FABIcon from "../../assets/placeholder/placeholder_circle.png";
 import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
@@ -46,6 +47,13 @@ enableDialogueOverlay.subscribe((value) => {
 	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
 </svelte:head>
 
+<!--todo: turn off hidden when it's time-->
+<button type="button" class="fab" on:click={()=>{
+    enableDialogueOverlay.set(!enableDialogueOverlayValue);
+}}>
+	<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+</button>
+
 <AppShell>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
@@ -184,4 +192,17 @@ enableDialogueOverlay.subscribe((value) => {
     .breadcrumb li:nth-last-child(1) {
         display: block;
 }
+
+    .fab {
+		    position: fixed;
+		    bottom: 2em;
+    }
+
+    .fab:dir(ltr) {
+		    right: 2em;
+    }
+
+    .fab:dir(rtl) {
+		    left: 2em;
+    }
 </style>

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -18,13 +18,6 @@ let shouldDisplaySocialIcons = writable(false);
 	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
 </svelte:head>
 
-<!--todo: turn off hidden when it's time-->
-<!--<button type="button" class="fab" on:click={()=>{-->
-<!--    enableDialogueOverlay.set(!enableDialogueOverlayValue);-->
-<!--}}>-->
-<!--	<img src={FABIcon} alt="interactive floating action button represented as a turnip">-->
-<!--</button>-->
-
 <AppShell>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
@@ -39,7 +32,7 @@ let shouldDisplaySocialIcons = writable(false);
 					</div>
 				{:else if $$slots.extraLeadingIcons}
 					<div hidden>
-						<slot name="extraLeadingIcons" />
+						<slot name="s" />
 					</div>
 				{/if}
 			</svelte:fragment>

package/dist/components/layouts/SeaweedBaseLayout.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
     };
     slots: {
         extraLeadingIcons: {};
+        s: {};
         default: {
             shouldDisplaySocialIcons: import("svelte/store").Writable<boolean>;
         };

package/dist/postcss.d.ts

@@ -1,3 +1,3 @@
-// from https://stackoverflow.com/a/63885623/17836168
-declare module "./app.postcss";
-declare module "./theme.postcss";
+// from https://stackoverflow.com/a/63885623/17836168
+declare module "./app.postcss";
+declare module "./theme.postcss";

package/dist/styles/global.css

@@ -1 +1 @@
-/* todo: delete if unneeded */
+/* todo: delete if unneeded */

package/dist/theme.postcss

@@ -5,7 +5,7 @@
     --theme-font-family-base: system-ui;
     --theme-font-family-heading: system-ui;
     --theme-font-color-base: var(--color-primary-900);
-    --theme-font-color-dark: var(--color-primary-100);
+    --theme-font-color-dark: var(--color-primary-50);
     --theme-rounded-base: 24px;
     --theme-rounded-container: 16px;
     --theme-border-base: 2px;
@@ -99,6 +99,7 @@
     --color-surface-800: 153 148 136; /* ⬅ #999488 */
     --color-surface-900: 125 121 111; /* ⬅ #7d796f */
     /* text color | #3f312f */
+    --color-text-25: 237 234 234; /* ⬅ #e2e0e0 */
     --color-text-50: 226 224 224; /* ⬅ #e2e0e0 */
     --color-text-100: 217 214 213; /* ⬅ #d9d6d5 */
     --color-text-200: 207 204 203; /* ⬅ #cfcccb */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.12",
+  "version": "2.4.13",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/components/Card.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-	export let margin = "0";
-	export let marginBottom = "3em";
-	export let overrideStyle = "";
-	export let includeDataNoSnippet = true;
-
-	// warning: don't forget the semi-colon when adding new style!
-	const style = `
-		--turnip-card-margin: ${margin};
-		--turnip-card-margin-bottom: ${marginBottom};
-		${overrideStyle};
-	`;
-</script>
-
-{#if (includeDataNoSnippet)}
-	<div class="card turnip-card" style={style} data-no-snippet>
-		<slot name="content" class="card" />
-	</div>
-{:else }
-	<div class="card turnip-card" style={style}>
-		<slot name="content" class="card" />
-	</div>
-{/if}
-
-<style lang="postcss">
-    .turnip-card {
-        @apply bg-surface-100 dark:bg-surface-900;
-        margin: var(--turnip-card-margin);
-        margin-bottom: var(--turnip-card-margin-bottom);
-        border-radius: var(--theme-rounded-container);
-    }
-</style>
+<script lang="ts">
+	export let margin = "0";
+	export let marginBottom = "3em";
+	export let overrideStyle = "";
+	export let includeDataNoSnippet = true;
+
+	// warning: don't forget the semi-colon when adding new style!
+	const style = `
+		--turnip-card-margin: ${margin};
+		--turnip-card-margin-bottom: ${marginBottom};
+		${overrideStyle};
+	`;
+</script>
+
+{#if (includeDataNoSnippet)}
+	<div class="card turnip-card" style={style} data-no-snippet>
+		<slot name="content" class="card" />
+	</div>
+{:else }
+	<div class="card turnip-card" style={style}>
+		<slot name="content" class="card" />
+	</div>
+{/if}
+
+<style lang="postcss">
+    .turnip-card {
+        @apply bg-surface-100 dark:bg-surface-900;
+        margin: var(--turnip-card-margin);
+        margin-bottom: var(--turnip-card-margin-bottom);
+        border-radius: var(--theme-rounded-container);
+    }
+</style>

package/src/lib/components/CarouselElement.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-    export let activeGameIndex: number;
-    export let selfIndex: number;
-
-    import {fly, slide, scale} from "svelte/transition";
-
-</script>
-
-{#if (activeGameIndex === selfIndex)}
-	<!--todo: make section consistent size for all-->
-	<section class="game-showcase"
-	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
-		<slot/>
-	</section>
-{/if}
-
-<style>
-    .game-showcase {
-        @apply snap-center rounded-container-token;
-        margin: auto;
-        width: 100%;
-    }
+<script lang="ts">
+    export let activeGameIndex: number;
+    export let selfIndex: number;
+
+    import {fly, slide, scale} from "svelte/transition";
+
+</script>
+
+{#if (activeGameIndex === selfIndex)}
+	<!--todo: make section consistent size for all-->
+	<section class="game-showcase"
+	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
+		<slot/>
+	</section>
+{/if}
+
+<style>
+    .game-showcase {
+        @apply snap-center rounded-container-token;
+        margin: auto;
+        width: 100%;
+    }
 </style>

package/src/lib/components/Chip.svelte

@@ -1,12 +1,12 @@
-<span class="chip variant-filled-tertiary">
-<slot />
-</span>
-
-<style lang="postcss">
-    .chip {
-        border-radius: 1em;
-        margin: 0.25em;
-        font-weight: bold;
-        pointer-events: none;
-    }
-</style>
+<span class="chip variant-filled-tertiary">
+<slot />
+</span>
+
+<style lang="postcss">
+    .chip {
+        border-radius: 1em;
+        margin: 0.25em;
+        font-weight: bold;
+        pointer-events: none;
+    }
+</style>

package/src/lib/components/ElementVisbilityDetector.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-    import {onMount} from "svelte";
-
-    export let isVisible = true;
-
-    let stickyElem: HTMLElement;
-
-    let observer: undefined | IntersectionObserver;
-    onMount(() => {
-        observer = new IntersectionObserver(
-            ([e]) => {
-                isVisible = e.intersectionRatio >= 1;
-            },
-            {threshold: [1]}
-        );
-        observer.observe(stickyElem);
-    });
-</script>
-
-<span bind:this={stickyElem}>
-	<slot/>
-</span>
+<script lang="ts">
+    import {onMount} from "svelte";
+
+    export let isVisible = true;
+
+    let stickyElem: HTMLElement;
+
+    let observer: undefined | IntersectionObserver;
+    onMount(() => {
+        observer = new IntersectionObserver(
+            ([e]) => {
+                isVisible = e.intersectionRatio >= 1;
+            },
+            {threshold: [1]}
+        );
+        observer.observe(stickyElem);
+    });
+</script>
+
+<span bind:this={stickyElem}>
+	<slot/>
+</span>

package/src/lib/components/OnElementVisbilityChanged.ts

@@ -1 +1 @@
-export type OnElementVisibilityChanged = (isVisible: boolean) => void;
+export type OnElementVisibilityChanged = (isVisible: boolean) => void;

package/src/lib/components/SocialSection.svelte

@@ -1,93 +1,96 @@
-<script>
-	import MailIcon from "$pkg/assets/icons/mail.svg";
-	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
-	import { ItchLogoHotLink } from "$pkg/consts";
-	import LinkedinIcon from "$pkg/assets/icons/linkedin.svg";
-	import { onMount } from "svelte";
-
-	export let isSmallVersion = false;
-	export let email = "turnipxenon@gmail.com";
-	export let linkedinSlug = "turnip-xenon";
-	export let isSlot = false;
-
-	let shouldShowExtra = false;
-	const style = `
-		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
-		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
-	`;
-
-	onMount(() => {
-		shouldShowExtra = window.screen.availWidth >= 440;
-	});
-</script>
-
-<div class="socials" class:isSmall={isSmallVersion} style={style} data-nosnippet>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title="https://github.com/TurnipXenon"
-	        on:click={() => window.open("https://github.com/TurnipXenon")}>
-		<img src={GithubIcon} alt="github icon">
-		{#if (!isSmallVersion)}
-			<span>TurnipXenon</span>
-		{/if}
-	</button>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title={`https://www.linkedin.com/in/${linkedinSlug}/`}
-	        on:click={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
-		<img src={LinkedinIcon} alt="linkedikn icon">
-		{#if (!isSmallVersion)}
-			<span>{linkedinSlug}</span>
-		{/if}
-	</button>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title={`mailto:${email}`}
-	        on:click={() => window.open(`mailto:${email}`)}>
-		<img src={MailIcon} alt="mail icon" />
-		{#if (!isSmallVersion)}
-			<span>{email}</span>
-		{/if}
-	</button>
-	{#if (shouldShowExtra)}
-		<button type="button" class="social-button turnip-button"
-		        role="link"
-		        title="https://turnipxenon.itch.io/"
-		        on:click={() => window.open("https://turnipxenon.itch.io/")}>
-			<img src={ItchLogoHotLink} alt="itch icon">
-			{#if (!isSmallVersion)}
-				<span>TurnipXenon</span>
-			{/if}
-		</button>
-	{/if}
-</div>
-
-<style lang="postcss">
-    .social-button {
-        @apply btn variant-filled-primary;
-    }
-
-    button > img {
-        max-height: 1lh;
-    }
-
-    button {
-        min-width: 0;
-        min-height: 0;
-    }
-
-    .socials {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: var(--preferred-justify-content);
-    }
-
-    .socials > button {
-        margin: 0 0.5em var(--preferred-overall-margin-bottom);
-    }
-
-    .socials.isSmall > button {
-        margin-left: 0.25em;
-        margin-right: 0.25em;
-    }
+<script>
+	export let isSmallVersion = false;
+	export let email = "turnipxenon@gmail.com";
+	export let linkedinSlug = "turnip-xenon";
+	export let isSlot = false;
+
+	import { ItchLogoHotLink } from "$pkg/consts";
+	import { onMount } from "svelte";
+	import { scale } from "svelte/transition";
+
+	import MailIcon from "$pkg/assets/icons/mail.svg";
+	import GithubIcon from "$pkg/assets/icons/github-mark.svg";
+	import LinkedinIcon from "$pkg/assets/icons/linkedin.svg";
+
+	let shouldShowExtra = false;
+	const style = `
+		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
+		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
+	`;
+
+	onMount(() => {
+		shouldShowExtra = window.screen.availWidth >= 440;
+	});
+</script>
+
+<div class="socials" class:isSmall={isSmallVersion} style={style} data-nosnippet>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title="https://github.com/TurnipXenon"
+	        on:click={() => window.open("https://github.com/TurnipXenon")}>
+		<img src={GithubIcon} alt="github icon">
+		{#if (!isSmallVersion)}
+			<span>TurnipXenon</span>
+		{/if}
+	</button>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title={`https://www.linkedin.com/in/${linkedinSlug}/`}
+	        on:click={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
+		<img src={LinkedinIcon} alt="linkedikn icon">
+		{#if (!isSmallVersion)}
+			<span>{linkedinSlug}</span>
+		{/if}
+	</button>
+	<button type="button" class="social-button turnip-button"
+	        role="link"
+	        title={`mailto:${email}`}
+	        on:click={() => window.open(`mailto:${email}`)}>
+		<img src={MailIcon} alt="mail icon" />
+		{#if (!isSmallVersion)}
+			<span>{email}</span>
+		{/if}
+	</button>
+	{#if (shouldShowExtra)}
+		<button type="button" class="social-button turnip-button"
+		        role="link"
+		        title="https://turnipxenon.itch.io/"
+		        transition:scale
+		        on:click={() => window.open("https://turnipxenon.itch.io/")}>
+			<img src={ItchLogoHotLink} alt="itch icon">
+			{#if (!isSmallVersion)}
+				<span>TurnipXenon</span>
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style lang="postcss">
+    .social-button {
+        @apply btn variant-filled-primary;
+    }
+
+    button > img {
+        max-height: 1lh;
+    }
+
+    button {
+        min-width: 0;
+        min-height: 0;
+    }
+
+    .socials {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: var(--preferred-justify-content);
+    }
+
+    .socials > button {
+        margin: 0 0.5em var(--preferred-overall-margin-bottom);
+    }
+
+    .socials.isSmall > button {
+        margin-left: 0.25em;
+        margin-right: 0.25em;
+    }
 </style>

package/src/lib/components/StickyElement.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-    import {onMount} from "svelte";
-    import {fly} from "svelte/transition";
-
-    export let isFirst = false;
-
-    let stickyElem: HTMLElement;
-    let isSticky = false;
-
-    let observer: undefined | IntersectionObserver;
-    onMount(() => {
-        observer = new IntersectionObserver(
-            ([e]) => {
-                isSticky = e.intersectionRatio < 1;
-            },
-            {threshold: [1]}
-        );
-        observer.observe(stickyElem);
-    });
-</script>
-
-<span transition:fly={{y: -100}}>
-{#if (isFirst && !isSticky)}
-	<!-- intentionally empty -->
-{:else if (isSticky)}
-	{" | "}
-{:else }
-	<br>
-{/if}
-	<span class="sticky-div" bind:this={stickyElem}>
-		<slot/>
-	</span>
-</span>
-
-<style>
-    .sticky-div {
-        position: sticky;
-        top: -1px;
-    }
+<script lang="ts">
+    import {onMount} from "svelte";
+    import {fly} from "svelte/transition";
+
+    export let isFirst = false;
+
+    let stickyElem: HTMLElement;
+    let isSticky = false;
+
+    let observer: undefined | IntersectionObserver;
+    onMount(() => {
+        observer = new IntersectionObserver(
+            ([e]) => {
+                isSticky = e.intersectionRatio < 1;
+            },
+            {threshold: [1]}
+        );
+        observer.observe(stickyElem);
+    });
+</script>
+
+<span transition:fly={{y: -100}}>
+{#if (isFirst && !isSticky)}
+	<!-- intentionally empty -->
+{:else if (isSticky)}
+	{" | "}
+{:else }
+	<br>
+{/if}
+	<span class="sticky-div" bind:this={stickyElem}>
+		<slot/>
+	</span>
+</span>
+
+<style>
+    .sticky-div {
+        position: sticky;
+        top: -1px;
+    }
 </style>