@turnipxenon/pineapple 2.4.11 → 2.4.13

package/.svelte-kit/types/src/routes/{portfolio/actual → (pineapple)/personal}/$types.d.ts

@@ -4,14 +4,14 @@ type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 // @ts-ignore
 type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
 type RouteParams = {  };
-type RouteId = '/portfolio/actual';
+type RouteId = '/(pineapple)/personal';
 type MaybeWithVoid<T> = {} extends T ? T | void : T;
 export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
 type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
 type EnsureDefined<T> = T extends null | undefined ? {} : T;
 type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
 export type Snapshot<T = any> = Kit.Snapshot<T>;
-type PageParentData = EnsureDefined<import('../../$types.js').LayoutData>;
+type PageParentData = Omit<EnsureDefined<import('../../$types.js').LayoutData>, keyof import('../$types.js').LayoutData> & EnsureDefined<import('../$types.js').LayoutData>;
 
 export type PageServerData = null;
 export type PageData = Expand<PageParentData>;

package/.svelte-kit/types/src/routes/(seaweed)/$types.d.ts

@@ -0,0 +1,19 @@
+import type * as Kit from '@sveltejs/kit';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+// @ts-ignore
+type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
+type RouteParams = {  };
+type RouteId = '/(seaweed)';
+type MaybeWithVoid<T> = {} extends T ? T | void : T;
+export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
+type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
+type EnsureDefined<T> = T extends null | undefined ? {} : T;
+type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
+export type Snapshot<T = any> = Kit.Snapshot<T>;
+type LayoutRouteId = RouteId | "/(seaweed)/portfolio" | "/(seaweed)/portfolio/actual"
+type LayoutParams = RouteParams & {  }
+type LayoutParentData = EnsureDefined<import('../$types.js').LayoutData>;
+
+export type LayoutServerData = null;
+export type LayoutData = Expand<LayoutParentData>;

package/.svelte-kit/types/src/routes/{portfolio → (seaweed)/portfolio}/$types.d.ts

@@ -4,15 +4,15 @@ type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 // @ts-ignore
 type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
 type RouteParams = {  };
-type RouteId = '/portfolio';
+type RouteId = '/(seaweed)/portfolio';
 type MaybeWithVoid<T> = {} extends T ? T | void : T;
 export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
 type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
 type EnsureDefined<T> = T extends null | undefined ? {} : T;
 type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
 export type Snapshot<T = any> = Kit.Snapshot<T>;
-type PageServerParentData = EnsureDefined<import('../$types.js').LayoutServerData>;
-type PageParentData = EnsureDefined<import('../$types.js').LayoutData>;
+type PageServerParentData = Omit<EnsureDefined<import('../../$types.js').LayoutServerData>, keyof import('../$types.js').LayoutServerData> & EnsureDefined<import('../$types.js').LayoutServerData>;
+type PageParentData = Omit<EnsureDefined<import('../../$types.js').LayoutData>, keyof import('../$types.js').LayoutData> & EnsureDefined<import('../$types.js').LayoutData>;
 
 export type PageServerLoad<OutputData extends OutputDataShape<PageServerParentData> = OutputDataShape<PageServerParentData>> = Kit.ServerLoad<RouteParams, PageServerParentData, OutputData, RouteId>;
 export type PageServerLoadEvent = Parameters<PageServerLoad>[0];

package/.svelte-kit/types/src/routes/(seaweed)/portfolio/actual/$types.d.ts

@@ -0,0 +1,17 @@
+import type * as Kit from '@sveltejs/kit';
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+// @ts-ignore
+type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
+type RouteParams = {  };
+type RouteId = '/(seaweed)/portfolio/actual';
+type MaybeWithVoid<T> = {} extends T ? T | void : T;
+export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
+type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>
+type EnsureDefined<T> = T extends null | undefined ? {} : T;
+type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
+export type Snapshot<T = any> = Kit.Snapshot<T>;
+type PageParentData = Omit<EnsureDefined<import('../../../$types.js').LayoutData>, keyof import('../../$types.js').LayoutData> & EnsureDefined<import('../../$types.js').LayoutData>;
+
+export type PageServerData = null;
+export type PageData = Expand<PageParentData>;

package/.svelte-kit/types/src/routes/{portfolio → (seaweed)/portfolio}/proxy+page.server.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import type {PageLoad} from './$types';
+import type {PageLoad} from '../../../../.svelte-kit/types/src/routes';
 import * as htmlparser2 from "htmlparser2";
 import {DomUtils} from "htmlparser2";
 

package/README.md

@@ -1,28 +1,18 @@
-# create-svelte
+# Pineapple
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+This is the base package for styling my projects in Svelte.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+NPM package: https://www.npmjs.com/package/@turnipxenon/pineapple
 
 ## Developing
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've created a project and installed dependencies with `yarn`, start a development server:
 
 ```bash
-npm run dev
+yarn dev
 
 # or start the server and open the app in a new browser tab
-npm run dev -- --open
+yarn dev -- --open
 ```
 
 ## Building
@@ -30,9 +20,9 @@ npm run dev -- --open
 To create a production version of your app:
 
 ```bash
-npm run build
+yarn build
 ```
 
-You can preview the production build with `npm run preview`.
+You can preview the production build with `yarn preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package/dist/components/Card.svelte

@@ -7,30 +7,30 @@ const style = `
 		--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>
-    .turnip-card {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
-}
-:is(.dark .turnip-card) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
-}
-    .turnip-card {
-        margin: var(--turnip-card-margin);
-        margin-bottom: var(--turnip-card-margin-bottom);
-        border-radius: var(--theme-rounded-container);
-    }
-</style>
+</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>
+    .turnip-card {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
+}
+:is(.dark .turnip-card) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+    .turnip-card {
+        margin: var(--turnip-card-margin);
+        margin-bottom: var(--turnip-card-margin-bottom);
+        border-radius: var(--theme-rounded-container);
+    }
+</style>

package/dist/components/CarouselElement.svelte

@@ -1,21 +1,21 @@
 <script>export let activeGameIndex;
 export let selfIndex;
 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 {
-        scroll-snap-align: center;
-        border-radius: var(--theme-rounded-container);
-        margin: auto;
+</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 {
+        scroll-snap-align: center;
+        border-radius: var(--theme-rounded-container);
+        margin: auto;
         width: 100%
-}
+}
 </style>

package/dist/components/Chip.svelte

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

package/dist/components/ElementVisbilityDetector.svelte

@@ -11,8 +11,8 @@ onMount(() => {
   );
   observer.observe(stickyElem);
 });
-</script>
-
-<span bind:this={stickyElem}>
-	<slot/>
-</span>
+</script>
+
+<span bind:this={stickyElem}>
+	<slot/>
+</span>

package/dist/components/SocialSection.svelte

@@ -1,160 +1,163 @@
-<script>
-	import MailIcon from "../assets/icons/mail.svg";
-	import GithubIcon from "../assets/icons/github-mark.svg";
-	import { ItchLogoHotLink } from "../consts";
-	import LinkedinIcon from "../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>
-    :is(.dark .social-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-.social-button:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-.social-button:disabled:hover {
-        --tw-brightness: brightness(1);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.social-button:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.social-button {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        white-space: nowrap;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        border-radius: var(--theme-rounded-base);
-}
-
-.social-button > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.social-button:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.social-button:active {
-        --tw-scale-x: 95%;
-        --tw-scale-y: 95%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-brightness: brightness(.9);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.social-button {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-:is(.dark .social-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-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 "../consts";
+	import { onMount } from "svelte";
+	import { scale } from "svelte/transition";
+
+	import MailIcon from "../assets/icons/mail.svg";
+	import GithubIcon from "../assets/icons/github-mark.svg";
+	import LinkedinIcon from "../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>
+    :is(.dark .social-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-primary));
+}
+
+.social-button:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+.social-button:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.social-button:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.social-button {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+.social-button > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.social-button:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.social-button:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.social-button {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-primary));
+}
+
+:is(.dark .social-button) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-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/dist/components/StickyElement.svelte

@@ -13,24 +13,24 @@ onMount(() => {
   );
   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>
+
+<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>