feat: remove Sal.js

Fewer animations for the new year.

package.json

@@ -51,7 +51,6 @@
 		"react-chartjs-2": "^5.2.0",
 		"react-dom": "npm:@preact/compat@latest",
 		"reading-time": "^1.5.0",
-		"sal.js": "^0.8.5",
 		"swup": "^4.6.1",
 		"tailwindcss": "^3.4.3",
 		"unist-util-visit": "^5.0.0"

pnpm-lock.yaml

@@ -120,9 +120,6 @@ importers:
       reading-time:
         specifier: ^1.5.0
         version: 1.5.0
-      sal.js:
-        specifier: ^0.8.5
-        version: 0.8.5
       swup:
         specifier: ^4.6.1
         version: 4.7.0
@@ -6165,10 +6162,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sal.js@0.8.5:
-    resolution: {integrity: sha512-KUb3fNrVZ1oWxxkEAfQfQ4Mrd910yboIRHqsvioBkulQInqMVeSMah+J5f7ch7KXFLicKlAaE0TzTsG/eJ02Dg==}
-    engines: {node: '>=12.0.0'}
-
   sass-formatter@0.7.9:
     resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==}
 
@@ -14334,8 +14327,6 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sal.js@0.8.5: {}
-
   sass-formatter@0.7.9:
     dependencies:
       suf-log: 2.5.3

public/assets/scripts/sal.js

@@ -1,2 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.sal=t():e.sal=t()}(this,(function(){return(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}e.d(t,{default:()=>j});var a="Sal was not initialised! Probably it is used in SSR.",s="Your browser does not support IntersectionObserver!\nGet a polyfill from here:\nhttps://github.com/w3c/IntersectionObserver/tree/master/polyfill",i={root:null,rootMargin:"0% 50%",threshold:.5,animateClassName:"sal-animate",disabledClassName:"sal-disabled",enterEventName:"sal:in",exitEventName:"sal:out",selector:"[data-sal]",once:!0,disabled:!1},l=[],c=null,u=function(e){e&&e!==i&&(i=r(r({},i),e))},d=function(e){e.classList.remove(i.animateClassName)},f=function(e,t){var n=new CustomEvent(e,{bubbles:!0,detail:t});t.target.dispatchEvent(n)},b=function(){document.body.classList.add(i.disabledClassName)},p=function(){c.disconnect(),c=null},m=function(){return i.disabled||"function"==typeof i.disabled&&i.disabled()},v=function(e,t){e.forEach((function(e){var n=e.target,r=void 0!==n.dataset.salRepeat,o=void 0!==n.dataset.salOnce,a=r||!(o||i.once);e.intersectionRatio>=i.threshold?(function(e){e.target.classList.add(i.animateClassName),f(i.enterEventName,e)}(e),a||t.unobserve(n)):a&&function(e){d(e.target),f(i.exitEventName,e)}(e)}))},y=function(){var e=[].filter.call(document.querySelectorAll(i.selector),(function(e){return!function(e){return e.classList.contains(i.animateClassName)}(e,i.animateClassName)}));return e.forEach((function(e){return c.observe(e)})),e},O=function(){b(),p()},h=function(){document.body.classList.remove(i.disabledClassName),c=new IntersectionObserver(v,{root:i.root,rootMargin:i.rootMargin,threshold:i.threshold}),l=y()},g=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};p(),Array.from(document.querySelectorAll(i.selector)).forEach(d),u(e),h()},w=function(){var e=y();l.push(e)};const j=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:i;if(u(e),"undefined"==typeof window)return console.warn(a),{elements:l,disable:O,enable:h,reset:g,update:w};if(!window.IntersectionObserver)throw b(),Error(s);return m()?b():h(),{elements:l,disable:O,enable:h,reset:g,update:w}};return t.default})()}));
-//# sourceMappingURL=sal.js.map

public/assets/styles/print.css

@@ -5,12 +5,6 @@ body {
 	padding-inline-start: 0.5cm;
 }
 
-/* Show all content immediatly */
-[data-sal|='slide-up'] {
-	opacity: 1 !important;
-	transform: none !important;
-}
-
 /* Hide content from printing */
 lite-youtube {
 	display: none !important;

src/components/GalleryDetail.astro

@@ -1,7 +1,5 @@
 ---
 // Cspell:words astro
-import { animation, animationDelay } from '../data/site';
-
 import Image from './Image.astro';
 import Headline from './Headline.astro';
 
@@ -22,7 +20,6 @@ const imageLength = entry.data.images.length;
 	<div class="p-gap lg:w-2/6">
 		<div
 			class="md:w-[66ch] lg:sticky lg:top-[calc(100vh_/_2_-_(max(30vh,_250px)_/_2))] lg:h-[max(30vh,_250px)] lg:w-full"
-			{...animationDelay}
 		>
 			<Headline as="h1">{entry.data.title}</Headline>
 			<slot />
@@ -52,7 +49,6 @@ const imageLength = entry.data.images.length;
 							'lg:col-start-2': imageLength === 1 || index === 0,
 						},
 					]}
-					{...animation}
 				>
 					<Image alt={entry.data.title} src={src} />
 				</div>

src/components/JournalList.astro

@@ -7,8 +7,6 @@ interface Props {
 	entries: CollectionEntry<'journal'>[];
 }
 
-import { animation } from '../data/site';
-
 import { pickTwoRandomColors } from '../utils';
 import Link from '../components/Link.astro';
 import Subsubheadline from './Subsubheadline.astro';
@@ -21,7 +19,7 @@ const { entries } = Astro.props;
 >
 	{
 		entries.map(({ slug, data }) => (
-			<li class="journal-card image-shadow group" {...animation}>
+			<li class="journal-card image-shadow group">
 				<Link
 					class="journal-card-link group relative block h-full w-full group-hover:scale-100"
 					href={`/${slug}/`}

src/components/ProjectContainer.astro

@@ -2,8 +2,6 @@
 // Cspell:words astro halfgap figcaption
 import type { CollectionEntry } from 'astro:content';
 
-import { animation } from '../data/site';
-
 import ProjectContent from '../components/ProjectContent.astro';
 import ProjectImage from '../components/ProjectImage.astro';
 
@@ -19,7 +17,7 @@ const {
 } = Astro.props;
 ---
 
-<article class:list={['col-start-1 col-end-19 grid grid-cols-18', className]} {...animation}>
+<article class:list={['col-start-1 col-end-19 grid grid-cols-18', className]}>
 	{
 		format === '50-start' && (
 			<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
@@ -34,10 +32,7 @@ const {
 	}
 	{
 		format === '50-end' && (
-			<figure
+			<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
-				class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap"
-				{...animation}
-			>
 				<div class="col-start-1 col-end-3 row-start-1 md:col-start-2 md:row-start-1">
 					<ProjectImage project={project} />
 				</div>
@@ -49,10 +44,7 @@ const {
 	}
 	{
 		format === '70-start' && (
-			<figure
+			<figure class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap">
-				class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap"
-				{...animation}
-			>
 				<div class="col-start-1 col-end-19 xl:col-end-13">
 					<ProjectImage project={project} />
 				</div>
@@ -64,10 +56,7 @@ const {
 	}
 	{
 		format === '70-end' && (
-			<figure
+			<figure class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap">
-				class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap"
-				{...animation}
-			>
 				<div class="col-start-1 col-end-19 grid xl:col-start-7">
 					<ProjectImage project={project} />
 				</div>
@@ -79,10 +68,7 @@ const {
 	}
 	{
 		format === '100-start' && (
-			<figure
+			<figure class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-y-halfgap">
-				class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-y-halfgap"
-				{...animation}
-			>
 				<div class="col-start-1 col-end-19 row-start-1">
 					<ProjectImage project={project} />
 				</div>
@@ -94,10 +80,7 @@ const {
 	}
 	{
 		format === '100-end' && (
-			<figure
+			<figure class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-y-halfgap">
-				class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-y-halfgap"
-				{...animation}
-			>
 				<div class="col-start-1 col-end-19 row-start-1">
 					<ProjectImage project={project} />
 				</div>

src/components/Scripts.astro

@@ -1,9 +1,7 @@
 ---
 // Cspell:words astro swup animationend keydown
-import '../styles/sal.css';
 ---
 
-<script src="/assets/scripts/sal.js" defer></script>
 <script>
 	import Swup from 'swup';
 	import SwupFadeTheme from '@swup/fade-theme';
@@ -13,8 +11,6 @@ import '../styles/sal.css';
 	import SwupScrollPlugin from '@swup/scroll-plugin';
 	import SwupScriptsPlugin from '@swup/scripts-plugin';
 
-	declare const sal: any;
-
 	const hasWindow =
 		'querySelector' in document && 'localStorage' in window && 'addEventListener' in window;
 
@@ -38,14 +34,6 @@ import '../styles/sal.css';
 		],
 	});
 
-	if (hasWindow) {
-		if (typeof sal !== 'undefined') {
-			sal({
-				threshold: 0.1,
-			});
-		}
-	}
-
 	// Register scripts after swup page transition
 	swup.hooks.on('page:view', () => {
 		setActiveLink();
@@ -55,14 +43,6 @@ import '../styles/sal.css';
 		setSearchLink();
 	});
 
-	swup.hooks.on('visit:end', () => {
-		if (typeof sal !== 'undefined') {
-			sal({
-				threshold: 0.1,
-			});
-		}
-	});
-
 	function setActiveLink() {
 		const links = document.querySelectorAll('.navigation a');
 		const currentPath = window.location.pathname;
@@ -182,19 +162,3 @@ import '../styles/sal.css';
 	setSearchLink();
 	setSearchModalLink();
 </script>
-
-<style is:global>
-	.no-js [data-sal|='fade'] {
-		opacity: 1;
-	}
-
-	.no-js [data-sal|='slide'],
-	.no-js [data-sal|='zoom'] {
-		opacity: 1;
-		transform: none;
-	}
-
-	.no-js [data-sal|='flip'] {
-		transform: none;
-	}
-</style>

src/content/journal/2023/website-relaunch-astro-preact-tailwind.mdx

@@ -47,4 +47,4 @@ I opted for [Preact](https://preactjs.com/) for components, even though many did
 
 It was my first time using [Tailwind CSS](https://tailwindcss.com/). Initially, I was skeptical because I didn’t like the idea of writing CSS in HTML. But after using it, I really like it. Writing CSS is much faster and I don’t have to think about naming classes. Additionally, I reduced the CSS size by 30%.
 
-I used [Sal](https://mciastek.github.io/sal/) for scroll animations and [Swup](https://swup.js.org/) for page transitions. If you're interested in the plugins, tools, and libraries I used, take a look at the [Colophon](/colophon/) page or the [source code](https://github.com/kogakure/website-astro-stefanimhoff.de) on GitHub.
+I used [Swup](https://swup.js.org/) for page transitions. If you're interested in the plugins, tools, and libraries I used, take a look at the [Colophon](/colophon/) page or the [source code](https://github.com/kogakure/website-astro-stefanimhoff.de) on GitHub.

src/data/site.ts

@@ -1,8 +1,3 @@
-const animationType = 'slide-up';
-const delay = 300;
-const duration = 800;
-const easing = 'ease-out-sine';
-
 export const site = {
 	title: 'Stefan Imhoff',
 	description: 'Web UI Engineer from Hamburg, Germany',
@@ -12,14 +7,3 @@ export const site = {
 	faviconPath: '/assets/images/branding/favicons/',
 	x: '@kogakure',
 };
-
-export const animation = {
-	'data-sal': animationType,
-	'data-sal-duration': duration,
-	'data-sal-easing': easing,
-};
-
-export const animationDelay = {
-	...animation,
-	'data-sal-delay': delay,
-};

src/layouts/PageLayout.astro

@@ -1,7 +1,6 @@
 ---
 // Cspell:words astro frontmatter
 import { dateToFormat, dateToISO } from '../utils';
-import { animation, animationDelay } from '../data/site';
 
 import Pullquote from '../components/Pullquote.astro';
 import Image from '../components/Image.astro';
@@ -36,7 +35,7 @@ const gridVariant = frontmatter.grid || grid;
 	<slot name="before-content" />
 	{
 		frontmatter.intro && (
-			<div class="mbe-10" {...animation}>
+			<div class="mbe-10">
 				<Pullquote alignment="left" text={frontmatter.intro} />
 			</div>
 		)
@@ -44,7 +43,7 @@ const gridVariant = frontmatter.grid || grid;
 	<slot />
 	{
 		frontmatter.updated && (
-			<footer class="mbs-10" {...animationDelay}>
+			<footer class="mbs-10">
 				<b>Last Updated:</b>
 				<time datetime={dateToISO(frontmatter.updated)}>
 					{dateToFormat(frontmatter.updated)}

src/pages/404.astro

@@ -1,7 +1,5 @@
 ---
 // Cspell:words astro noindex
-import { animation, animationDelay } from '../data/site';
-
 import GridLayout from '../layouts/GridLayout.astro';
 
 import PageTitle from '../components/PageTitle.astro';
@@ -28,7 +26,6 @@ const description = 'Page not found.';
 	<Verse
 		class="z-10 col-start-1 col-end-17 row-start-2 text-3 italic mbe-10 mbs-10 md:col-start-3 md:col-end-9"
 		variant="left"
-		{...animation}
 	>
 		<Haiku components={mapping} />
 	</Verse>
@@ -36,7 +33,6 @@ const description = 'Page not found.';
 		aria-hidden="true"
 		class="col-start-10 col-end-13 row-start-1 row-end-3 text-9 font-black text-black/[0.05] dark:text-white/[0.05]"
 		role="img"
-		{...animationDelay}
 	>
 		404
 	</span>

src/pages/about.mdx

@@ -5,32 +5,19 @@ description: I’m Stefan Imhoff, a Web UI Engineer from Hamburg, Germany.
 backLink: /
 ---
 
-import { animation, animationDelay } from "../data/site";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
-<div {...animation}>
-
 I’m _Stefan Imhoff_, a Senior Web UI Engineer from Hamburg, Germany.
 
 I find inspiration in a wide variety of media, from reading challenging and heterodox [books](https://goodreads.com/kogakure) about philosophy, science, and economics to listening to [podcasts](https://raindrop.io/kogakure/podcasts-24118384), watching [TV shows](https://www.themoviedb.org/u/kogakure/favorites/tv) and [movies](https://www.themoviedb.org/u/kogakure/favorites), and indulging in [Korean](https://www.themoviedb.org/list/8216385) and [Japanese](https://www.themoviedb.org/list/106001) dramas on Netflix.
 
-</div>
-
-<div {...animationDelay}>
-
 As a passionate enthusiast of storytelling, I am convinced that humans understand the world and find meaning through narratives. This fascination has led me to contribute to the propagation of impactful ideas through my writing. Whether I am crafting [essays](/journal/), [Sketchnotes](/sketchnotes/), or [Haiku](/haiku/), I aim to use the power of storytelling to communicate messages that resonate with readers. I have even written a free [book about Ninja and Ninjutsu](https://www.kogakure.de/en/).
 
-</div>
-
-<div {...animationDelay}>
-
 In my spare time, I enjoy exploring nature through activities such as [walking and cycling](https://hamburg.stefanimhoff.de/), and doing [Calisthenics](/calisthenics/). I have a keen appreciation for the beauty of everyday life and find joy in the small things. Whether it’s the peacefulness of a forest, the vastness of the sea, or the grandeur of a mountain, I am constantly inspired by nature’s magnificence. I enjoy both the power of thunderstorms and the warmth of sunny days.
 
 See what I’m doing [now](/now/).
 
-</div>
-
 ---
 
 I see myself as a 🔲 [Minimalist](/minimalism/), 🏛️ [Stoic](/interpretation-if/), 🎧 Introvert, 🐍 Libertarian, and ⛩️ Japanophile.

src/pages/ai-art.astro

@@ -6,8 +6,6 @@ import { getCollection } from 'astro:content';
 
 import { sortBySortKey } from '../utils';
 
-import { animation } from '../data/site';
-
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
 import Image from '../components/Image.astro';
@@ -28,7 +26,6 @@ const description = 'This is a collection of AI art pieces I’ve created with S
 
 	<article
 		class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
-		{...animation}
 	>
 		<Intro components={mapping} />
 	</article>
@@ -66,7 +63,6 @@ const description = 'This is a collection of AI art pieces I’ve created with S
 									data.images[0].aspectRatio === 1 && data.coverSize === 'large',
 							},
 						]}
-						{...animation}
 					>
 						<Link title={data.title} href={`/ai-art/${slug}/`}>
 							<Image

src/pages/colophon.mdx

@@ -7,18 +7,11 @@ intro: In publishing, a colophon is a brief statement containing information abo
 backLink: /
 ---
 
-import { animation, animationDelay } from "../data/site";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
-<div {...animation}>
-
 The source code of this website is available on [GitHub](https://github.com/kogakure/website-astro-stefanimhoff.de). You are welcome to learn from the source code and reuse code for your projects. Don’t steal it. Learn from it. Remix. Reuse. Build your own things. 🤘
 
-</div>
-
-<div {...animationDelay}>
-
 ## Design
 
 - I designed the website myself in [Affinity Designer](https://affinity.serif.com/designer/), using the Japanese art form of _shibui_ (<nobr>渋い</nobr>) as a source of inspiration. To learn more about the process, please read the essays about the [inspiration](/new-website-2020-inspiration/) and [design](/new-website-2020-design/).
@@ -26,10 +19,6 @@ The source code of this website is available on [GitHub](https://github.com/koga
 - I created the Bonsai image on my homepage and other cover photos with [Stable Diffusion](https://stability.ai/), [FLUX](https://blackforestlabs.ai/) [ControlNet](https://github.com/lllyasviel/ControlNet), and [Affinity Photo](https://affinity.serif.com/photo/). My portrait photo was generated in Stable Diffusion with a custom model trainied in [DreamBooth](https://dreambooth.github.io/).
 - The minimalistic icons are by [Remix Icon](https://remixicon.com/), which is [Jimmy Cheung](https://github.com/xiaochunjimmy) and [Wendy Gao](https://github.com/wendygaoyuan).
 
-</div>
-
-<div {...animationDelay}>
-
 ## Technology
 
 - The website is built with [Astro](https://astro.build/), the all-in-one web framework.
@@ -37,7 +26,7 @@ The source code of this website is available on [GitHub](https://github.com/koga
 - The layouts, templates, and components are written in Astro and [Preact](https://preactjs.com/).
 - My content is written in [MDX](https://mdxjs.com/), which allows using components in the [Markdown](https://daringfireball.net/projects/markdown/).
 - I use [Tailwind CSS](https://tailwindcss.com/) for my styling and [tailwindcss-logical](https://stevecochrane.github.io/tailwindcss-logical/) to get logical properties.
-- The scroll animations are created with [Sal](https://mciastek.github.io/sal/) and for page transitions I use [Swup](https://swup.js.org/).
+- The page transitions are created with [Swup](https://swup.js.org/).
 - My site search is build with [Pagefind](https://pagefind.app/) using the [Astro-Pagefind](https://github.com/shishkin/astro-pagefind) integration.
 - I use YouTube Lite, provided by [Astro Embed](https://github.com/astro-community/astro-embed).
 - [Astro SEO](https://github.com/jonasmerlin/astro-seo) makes it easy to add the SEO relevant information.
@@ -47,5 +36,3 @@ The source code of this website is available on [GitHub](https://github.com/koga
 - To parse and format dates I use [Moment.js](https://momentjs.com/).
 - I use [Plop](https://plopjs.com/) to generate content from templates.
 - The website is self-hosted with [Coolify](https://coolify.io/).
-
-</div>

src/pages/cv.astro

@@ -1,7 +1,5 @@
 ---
 // Cspell:words astro subheadline imhoff stefanimhoff noindex
-import { animation, animationDelay } from '../data/site';
-
 import Divider from '../components/Divider.astro';
 import DownloadLink from '../components/DownloadLink.astro';
 import EmailLink from '../components/EmailLink.astro';
@@ -38,12 +36,12 @@ const description =
 >
 	<PageTitle grid="wide" innerGrid>Curriculum Vitae</PageTitle>
 
-	<article class="col-span-full md:col-start-1 md:col-end-9" {...animation}>
+	<article class="col-span-full md:col-start-1 md:col-end-9">
 		<Headline>{cv.summary.headline}</Headline>
 		<Intro components={mapping} />
 	</article>
 
-	<article class="col-span-full md:col-start-10 md:col-end-18" {...animationDelay}>
+	<article class="col-span-full md:col-start-10 md:col-end-18">
 		<Headline>Personal Information</Headline>
 		<Subheadline class="font-semibold">{cv.personal.name}</Subheadline>
 		<Text class="!mbe-0">{cv.personal.tagline}</Text>

src/pages/haiku.astro

@@ -5,7 +5,6 @@ type Haiku = CollectionEntry<'haiku'>;
 import { getCollection } from 'astro:content';
 
 import { sortByDate } from '../utils';
-import { animation, animationDelay } from '../data/site';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import Link from '../components/Link.astro';
@@ -27,7 +26,6 @@ const description =
 
 	<article
 		class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
-		{...animation}
 	>
 		<Intro components={mapping} />
 	</article>
@@ -39,7 +37,6 @@ const description =
 	>
 		<ol
 			class="grid list-none grid-cols-[repeat(auto-fill,_minmax(3rem,_1fr))] justify-items-center gap-[1rem]"
-			{...animationDelay}
 		>
 			{
 				allHaiku.map(({ slug }) => (

src/pages/haiku/[...slug].astro

@@ -4,7 +4,6 @@ type Haiku = CollectionEntry<'haiku'>;
 import { getCollection } from 'astro:content';
 
 import { sortByDate } from '../../utils';
-import { animation, animationDelay } from '../../data/site';
 
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import PageHeader from '../../components/PageHeader.astro';
@@ -44,7 +43,7 @@ const description = `Haiku ${entry.slug} in German and English.`;
 			class="min-[700px]:grid-cols-[repeat(auto-fit,_minmax(25rem,_1fr)] col-span-full row-start-1 row-end-3 grid w-full grid-cols-[repeat(auto-fit,_minmax(15rem,_1fr))] print:block"
 		>
 			<div class="grid h-full w-full items-center">
-				<div {...animation}>
+				<div>
 					<Verse
 						class="justify-center text-center text-3 font-black not-italic !leading-relaxed min-[700px]:text-4"
 					>
@@ -55,7 +54,7 @@ const description = `Haiku ${entry.slug} in German and English.`;
 			<div
 				class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c] print:bg-transparent"
 			>
-				<div {...animationDelay}>
+				<div>
 					<Verse
 						class="justify-center text-center text-3 font-black not-italic !leading-relaxed min-[700px]:text-4"
 					>

src/pages/index.astro

@@ -6,7 +6,7 @@ import { getCollection } from 'astro:content';
 
 import { formatPosts, isProduction, sortMarkdownByDate } from '../utils';
 
-import { site, animation, animationDelay } from '../data/site';
+import { site } from '../data/site';
 
 import GridLayout from '../layouts/GridLayout.astro';
 
@@ -55,7 +55,6 @@ rssPosts.sort(sortMarkdownByDate);
 
 	<article
 		class="col-start-2 col-end-18 row-start-3 self-center md:col-start-12 md:row-start-2 xl:col-start-13 xl:col-end-17"
-		{...animation}
 	>
 		<Headline>About Me</Headline>
 		<AboutMe components={mapping} />
@@ -64,7 +63,6 @@ rssPosts.sort(sortMarkdownByDate);
 
 	<article
 		class="col-start-2 col-end-18 row-start-4 md:col-start-3 md:col-end-17 md:row-start-3 xl:col-start-5 xl:col-end-15"
-		{...animationDelay}
 	>
 		<Headline>What I Do</Headline>
 		<div class="columns-1 gap-[2.775vw] mbe-10 md:columns-2 [&_p:last-of-type]:mbe-0">
@@ -75,7 +73,6 @@ rssPosts.sort(sortMarkdownByDate);
 
 	<article
 		class="col-start-2 col-end-18 md:col-start-6 md:col-end-14 xl:col-start-7 xl:col-end-13"
-		{...animation}
 	>
 		<Headline>Journal</Headline>
 		<Journal components={mapping} />
@@ -85,7 +82,6 @@ rssPosts.sort(sortMarkdownByDate);
 	<article
 		class="min-[1794px]:[&_li:block col-start-2 col-end-18 grid w-full grid-cols-18 gap-y-gap mbe-12 min-[1097px]:[&_li:nth-child(n+5)]:hidden min-[1410px]:[&_li:nth-child(n+5)]:block min-[1411px]:[&_li:nth-child(n+6)]:hidden min-[1793px]:[&_li:nth-child(n+6)]:block"
 		data-pagefind-ignore
-		{...animation}
 	>
 		<JournalList entries={formattedLatest} />
 	</article>

src/pages/journal.astro

@@ -6,8 +6,6 @@ import { getCollection } from 'astro:content';
 
 import { formatPosts } from '../utils';
 
-import { animation, animationDelay } from '../data/site';
-
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
 import JournalList from '../components/JournalList.astro';
@@ -33,11 +31,10 @@ const description = 'I am writing essays about various topics in this Journal.';
 	<article
 		class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
 		data-pagefind-ignore
-		{...animation}
 	>
 		<Intro components={mapping} />
 	</article>
-	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3" {...animationDelay}>
+	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
 		{uniqueTags.map((tag) => <Tag href={`/tag/${tag}/`}>{tag}</Tag>)}
 	</aside>
 	<nav class="col-start-1 col-end-18" aria-label="Journal">

src/pages/life-rules.mdx

@@ -7,16 +7,11 @@ intro: These are the rules, beliefs, and principles that guide my life.
 backLink: /
 ---
 
-import { animation, animationDelay } from "../data/site";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
-<div {...animation}>
-
 I try to live by these rules, beliefs, and principles. They are taken from everywhere, and will be updated when I find new ones. If you like them, take them.
 
-</div>
-
 ---
 
 ## 📚 Education & Knowledge

src/pages/now.mdx

@@ -7,18 +7,11 @@ intro: This is my Now page, a website with the content of what I am focused on a
 backLink: /
 ---
 
-import { animation, animationDelay } from "../data/site";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
-<div {...animation}>
-
 The concept of a [Now](https://nownownow.com/) page is an idea by [Derek Silvers](https://sive.rs/).
 
-</div>
-
-<div {...animationDelay}>
-
 - Building the Design System of XING 👨‍💻
 - Working from home 🏡
 - Learning Japanese 🇯🇵 and 🇪🇸 Spanish on [Duolingo](https://www.duolingo.com/profile/kogakure) 🦉and with [Anki](https://apps.ankiweb.net/) ⭐
@@ -27,5 +20,3 @@ The concept of a [Now](https://nownownow.com/) page is an idea by [Derek Silvers
 - Creating and reviewing highlights with [Readwise](https://readwise.io/i/stefan805) 📝 every day
 - Connecting ideas with the [Zettelkasten](https://en.wikipedia.org/wiki/Zettelkasten) 🗃️ note-taking method, using [Obsidian](https://obsidian.md/)
 - Always reading at least two or three [books](https://www.goodreads.com/kogakure) 📚 at the same time
-
-</div>

src/pages/projects.astro

@@ -6,8 +6,6 @@ import { getCollection } from 'astro:content';
 
 import { sortBySortKey } from '../utils';
 
-import { animation } from '../data/site';
-
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
 import ProjectContainer from '../components/ProjectContainer.astro';
@@ -39,7 +37,7 @@ const description =
 		Projects
 	</PageTitle>
 
-	<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14" {...animation}>
+	<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14">
 		<Intro components={mapping} />
 	</article>
 

src/pages/sketchnotes.astro

@@ -5,7 +5,6 @@ type Sketchnotes = CollectionEntry<'sketchnotes'>;
 import { getCollection } from 'astro:content';
 
 import { sortBySortKey } from '../utils';
-import { animation } from '../data/site';
 
 import GridLayout from '../layouts/GridLayout.astro';
 import Image from '../components/Image.astro';
@@ -27,7 +26,6 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 
 	<article
 		class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11 print:block"
-		{...animation}
 	>
 		<Intro components={mapping} />
 	</article>
@@ -59,7 +57,6 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 									data.images[0].aspectRatio < 1 && data.coverSize === 'large',
 							},
 						]}
-						{...animation}
 					>
 						<Link title={data.title} href={`/sketchnotes/${slug}/`}>
 							<Image

src/pages/tag.astro

@@ -4,8 +4,6 @@ import type { CollectionEntry } from 'astro:content';
 type Journal = CollectionEntry<'journal'>;
 import { getCollection } from 'astro:content';
 
-import { animation } from '../data/site';
-
 import GridLayout from '../layouts/GridLayout.astro';
 import PageTitle from '../components/PageTitle.astro';
 import TagComponent from '../components/Tag.astro';
@@ -27,7 +25,7 @@ const description = 'This is a list of all the tags used in my journal.';
 	title={title}
 >
 	<PageTitle grid="wide" innerGrid>Tags</PageTitle>
-	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3" {...animation}>
+	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
 		{uniqueTags.map((t) => <TagComponent href={`/tag/${t}/`}>{t}</TagComponent>)}
 	</aside>
 </GridLayout>

src/pages/tag/[tag].astro

@@ -5,7 +5,6 @@ type Journal = CollectionEntry<'journal'>;
 import { getCollection } from 'astro:content';
 
 import { formatPosts, titleCase } from '../../utils';
-import { animationDelay } from '../../data/site';
 
 import GridLayout from '../../layouts/GridLayout.astro';
 import PageTitle from '../../components/PageTitle.astro';
@@ -58,7 +57,7 @@ const description = `These are all the articles categorized with the tag "${titl
 	<PageTitle slot="title" class="capitalize">
 		{tag}
 	</PageTitle>
-	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3" {...animationDelay}>
+	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
 		{
 			uniqueTags.map((uTag) => (
 				<TagComponent active={uTag === tag} href={`/tag/${uTag}/`}>

src/pages/traditional-colors-of-japan.astro

@@ -11,7 +11,6 @@ import { Content as Intro } from '../text/traditional-colors-of-japan/intro.mdx'
 import colors from '../data/colors-japan.json';
 
 import { mapping } from '../mdx-components';
-import { animation, animationDelay } from '../data/site';
 
 const title = 'The Traditional Colors of Japan';
 const description =
@@ -21,14 +20,11 @@ const description =
 <GridLayout title={title} description={description} grid="wide" backLink="/" class="grid" innerGrid>
 	<PageTitle grid="wide" innerGrid>The Traditional Colors of&nbsp;Japan</PageTitle>
 
-	<article class="col-start-1 col-end-17 grid md:col-end-8 xl:content-center" {...animation}>
+	<article class="col-start-1 col-end-17 grid md:col-end-8 xl:content-center">
 		<Intro components={mapping} />
 	</article>
 
-	<article
+	<article class="col-start-1 col-end-17 flex grid-cols-2 md:col-start-9 md:justify-end">
-		class="col-start-1 col-end-17 flex grid-cols-2 md:col-start-9 md:justify-end"
-		{...animationDelay}
-	>
 		<AmazonBook
 			alt="The Traditional Colors of Japan"
 			asin="475624100X"
@@ -44,7 +40,7 @@ const description =
 	<ColorStack>
 		{
 			colors.map(({ name, description, color }) => (
-				<div {...animation}>
+				<div>
 					<ColorSwatch color={color} title={name} description={description} />
 				</div>
 			))

src/styles/sal.css

@@ -1,333 +0,0 @@
-[data-sal] {
-	transition-delay: 0s;
-	transition-delay: var(--sal-delay, 0s);
-	transition-duration: 0.2s;
-	transition-duration: var(--sal-duration, 0.2s);
-	transition-timing-function: ease;
-	transition-timing-function: var(--sal-easing, ease);
-}
-[data-sal][data-sal-duration='200'] {
-	transition-duration: 0.2s;
-}
-[data-sal][data-sal-duration='250'] {
-	transition-duration: 0.25s;
-}
-[data-sal][data-sal-duration='300'] {
-	transition-duration: 0.3s;
-}
-[data-sal][data-sal-duration='350'] {
-	transition-duration: 0.35s;
-}
-[data-sal][data-sal-duration='400'] {
-	transition-duration: 0.4s;
-}
-[data-sal][data-sal-duration='450'] {
-	transition-duration: 0.45s;
-}
-[data-sal][data-sal-duration='500'] {
-	transition-duration: 0.5s;
-}
-[data-sal][data-sal-duration='550'] {
-	transition-duration: 0.55s;
-}
-[data-sal][data-sal-duration='600'] {
-	transition-duration: 0.6s;
-}
-[data-sal][data-sal-duration='650'] {
-	transition-duration: 0.65s;
-}
-[data-sal][data-sal-duration='700'] {
-	transition-duration: 0.7s;
-}
-[data-sal][data-sal-duration='750'] {
-	transition-duration: 0.75s;
-}
-[data-sal][data-sal-duration='800'] {
-	transition-duration: 0.8s;
-}
-[data-sal][data-sal-duration='850'] {
-	transition-duration: 0.85s;
-}
-[data-sal][data-sal-duration='900'] {
-	transition-duration: 0.9s;
-}
-[data-sal][data-sal-duration='950'] {
-	transition-duration: 0.95s;
-}
-[data-sal][data-sal-duration='1000'] {
-	transition-duration: 1s;
-}
-[data-sal][data-sal-duration='1050'] {
-	transition-duration: 1.05s;
-}
-[data-sal][data-sal-duration='1100'] {
-	transition-duration: 1.1s;
-}
-[data-sal][data-sal-duration='1150'] {
-	transition-duration: 1.15s;
-}
-[data-sal][data-sal-duration='1200'] {
-	transition-duration: 1.2s;
-}
-[data-sal][data-sal-duration='1250'] {
-	transition-duration: 1.25s;
-}
-[data-sal][data-sal-duration='1300'] {
-	transition-duration: 1.3s;
-}
-[data-sal][data-sal-duration='1350'] {
-	transition-duration: 1.35s;
-}
-[data-sal][data-sal-duration='1400'] {
-	transition-duration: 1.4s;
-}
-[data-sal][data-sal-duration='1450'] {
-	transition-duration: 1.45s;
-}
-[data-sal][data-sal-duration='1500'] {
-	transition-duration: 1.5s;
-}
-[data-sal][data-sal-duration='1550'] {
-	transition-duration: 1.55s;
-}
-[data-sal][data-sal-duration='1600'] {
-	transition-duration: 1.6s;
-}
-[data-sal][data-sal-duration='1650'] {
-	transition-duration: 1.65s;
-}
-[data-sal][data-sal-duration='1700'] {
-	transition-duration: 1.7s;
-}
-[data-sal][data-sal-duration='1750'] {
-	transition-duration: 1.75s;
-}
-[data-sal][data-sal-duration='1800'] {
-	transition-duration: 1.8s;
-}
-[data-sal][data-sal-duration='1850'] {
-	transition-duration: 1.85s;
-}
-[data-sal][data-sal-duration='1900'] {
-	transition-duration: 1.9s;
-}
-[data-sal][data-sal-duration='1950'] {
-	transition-duration: 1.95s;
-}
-[data-sal][data-sal-duration='2000'] {
-	transition-duration: 2s;
-}
-[data-sal][data-sal-delay='50'] {
-	transition-delay: 0.05s;
-}
-[data-sal][data-sal-delay='100'] {
-	transition-delay: 0.1s;
-}
-[data-sal][data-sal-delay='150'] {
-	transition-delay: 0.15s;
-}
-[data-sal][data-sal-delay='200'] {
-	transition-delay: 0.2s;
-}
-[data-sal][data-sal-delay='250'] {
-	transition-delay: 0.25s;
-}
-[data-sal][data-sal-delay='300'] {
-	transition-delay: 0.3s;
-}
-[data-sal][data-sal-delay='350'] {
-	transition-delay: 0.35s;
-}
-[data-sal][data-sal-delay='400'] {
-	transition-delay: 0.4s;
-}
-[data-sal][data-sal-delay='450'] {
-	transition-delay: 0.45s;
-}
-[data-sal][data-sal-delay='500'] {
-	transition-delay: 0.5s;
-}
-[data-sal][data-sal-delay='550'] {
-	transition-delay: 0.55s;
-}
-[data-sal][data-sal-delay='600'] {
-	transition-delay: 0.6s;
-}
-[data-sal][data-sal-delay='650'] {
-	transition-delay: 0.65s;
-}
-[data-sal][data-sal-delay='700'] {
-	transition-delay: 0.7s;
-}
-[data-sal][data-sal-delay='750'] {
-	transition-delay: 0.75s;
-}
-[data-sal][data-sal-delay='800'] {
-	transition-delay: 0.8s;
-}
-[data-sal][data-sal-delay='850'] {
-	transition-delay: 0.85s;
-}
-[data-sal][data-sal-delay='900'] {
-	transition-delay: 0.9s;
-}
-[data-sal][data-sal-delay='950'] {
-	transition-delay: 0.95s;
-}
-[data-sal][data-sal-delay='1000'] {
-	transition-delay: 1s;
-}
-[data-sal][data-sal-easing='linear'] {
-	transition-timing-function: linear;
-}
-[data-sal][data-sal-easing='ease'] {
-	transition-timing-function: ease;
-}
-[data-sal][data-sal-easing='ease-in'] {
-	transition-timing-function: ease-in;
-}
-[data-sal][data-sal-easing='ease-out'] {
-	transition-timing-function: ease-out;
-}
-[data-sal][data-sal-easing='ease-in-out'] {
-	transition-timing-function: ease-in-out;
-}
-[data-sal][data-sal-easing='ease-in-cubic'] {
-	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-}
-[data-sal][data-sal-easing='ease-out-cubic'] {
-	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-[data-sal][data-sal-easing='ease-in-out-cubic'] {
-	transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-[data-sal][data-sal-easing='ease-in-circ'] {
-	transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-}
-[data-sal][data-sal-easing='ease-out-circ'] {
-	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-}
-[data-sal][data-sal-easing='ease-in-out-circ'] {
-	transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-}
-[data-sal][data-sal-easing='ease-in-expo'] {
-	transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-}
-[data-sal][data-sal-easing='ease-out-expo'] {
-	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
-}
-[data-sal][data-sal-easing='ease-in-out-expo'] {
-	transition-timing-function: cubic-bezier(1, 0, 0, 1);
-}
-[data-sal][data-sal-easing='ease-in-quad'] {
-	transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-}
-[data-sal][data-sal-easing='ease-out-quad'] {
-	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-[data-sal][data-sal-easing='ease-in-out-quad'] {
-	transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-}
-[data-sal][data-sal-easing='ease-in-quart'] {
-	transition-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-}
-[data-sal][data-sal-easing='ease-out-quart'] {
-	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-[data-sal][data-sal-easing='ease-in-out-quart'] {
-	transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-}
-[data-sal][data-sal-easing='ease-in-quint'] {
-	transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-[data-sal][data-sal-easing='ease-out-quint'] {
-	transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-[data-sal][data-sal-easing='ease-in-out-quint'] {
-	transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-}
-[data-sal][data-sal-easing='ease-in-sine'] {
-	transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
-}
-[data-sal][data-sal-easing='ease-out-sine'] {
-	transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
-}
-[data-sal][data-sal-easing='ease-in-out-sine'] {
-	transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-}
-[data-sal][data-sal-easing='ease-in-back'] {
-	transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-}
-[data-sal][data-sal-easing='ease-out-back'] {
-	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-[data-sal][data-sal-easing='ease-in-out-back'] {
-	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-[data-sal|='fade'] {
-	opacity: 0;
-	transition-property: opacity;
-}
-[data-sal|='fade'].sal-animate,
-body.sal-disabled [data-sal|='fade'] {
-	opacity: 1;
-}
-[data-sal|='slide'] {
-	opacity: 0;
-	transition-property: opacity, transform;
-}
-[data-sal='slide-up'] {
-	transform: translateY(20%);
-}
-[data-sal='slide-down'] {
-	transform: translateY(-20%);
-}
-[data-sal='slide-left'] {
-	transform: translateX(20%);
-}
-[data-sal='slide-right'] {
-	transform: translateX(-20%);
-}
-[data-sal|='slide'].sal-animate,
-body.sal-disabled [data-sal|='slide'] {
-	opacity: 1;
-	transform: none;
-}
-[data-sal|='zoom'] {
-	opacity: 0;
-	transition-property: opacity, transform;
-}
-[data-sal='zoom-in'] {
-	transform: scale(0.5);
-}
-[data-sal='zoom-out'] {
-	transform: scale(1.1);
-}
-[data-sal|='zoom'].sal-animate,
-body.sal-disabled [data-sal|='zoom'] {
-	opacity: 1;
-	transform: none;
-}
-[data-sal|='flip'] {
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
-	transition-property: transform;
-}
-[data-sal='flip-left'] {
-	transform: perspective(2000px) rotateY(-91deg);
-}
-[data-sal='flip-right'] {
-	transform: perspective(2000px) rotateY(91deg);
-}
-[data-sal='flip-up'] {
-	transform: perspective(2000px) rotateX(-91deg);
-}
-[data-sal='flip-down'] {
-	transform: perspective(2000px) rotateX(91deg);
-}
-[data-sal|='flip'].sal-animate,
-body.sal-disabled [data-sal|='flip'] {
-	transform: none;
-}
-
-/*# sourceMappingURL=sal.css.map*/