feat: optimize pages for print layout

public/assets/styles/print.css

@@ -0,0 +1,55 @@
+body {
+	padding-block-end: 0.5cm;
+	padding-block-start: 1cm;
+	padding-inline-end: 0.5cm;
+	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;
+}
+
+/* Images */
+img {
+	border: 0;
+	max-width: 1200px;
+}
+
+/* Links */
+a {
+	color: #000000;
+	word-wrap: break-word;
+	text-decoration: none !important;
+	font-weight: 100 !important;
+}
+
+a::after {
+	content: '(' attr(href) ')';
+	font-size: 60%;
+	position: relative;
+	top: -0.2em;
+	margin-inline-start: 0.2em;
+	margin-inline-end: 0.2em;
+	opacity: 0.95;
+}
+
+a[href^='mailto:']::after {
+	content: ' (' attr(href) ')';
+}
+
+a[href^='http://']::after,
+a[href^='https://']::after
+{
+	content: ' (' attr(href) ')';
+}
+
+a[href^='#']::after {
+	display: none;
+}

src/components/GalleryDetail.astro

@@ -29,7 +29,7 @@ const imageLength = entry.data.images.length;
 	</div>
 	<div
 		class={cx(
-			'grid grid-cols-5 gap-x-[2vw] gap-y-gap grow bg-[#d0cdc8] dark:bg-[#0e0d0c] lg:w-2/3 ',
+			'grid grid-cols-5 gap-x-[2vw] gap-y-gap grow bg-[#d0cdc8] dark:bg-[#0e0d0c] lg:w-2/3 print:!bg-transparent',
 			{
 				'lg:pbs-[calc(100vh_/_2_-_(max(30vh,_250px)_/_2))]': imageLength > 1,
 				'lg:justify-items-center lg:items-center': imageLength === 1,

src/components/NetflixFlag.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 export const NetflixFlag: FunctionalComponent<Props> = ({ class: className, id, ...props }) => {
 	const classes = cx(
-		'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em]',
+		'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:bg-transparent print:border-gray-500',
 		className
 	);
 

src/components/Pagination.astro

@@ -15,7 +15,7 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
 	previousUrl && (
 		<a
 			aria-label={previousText || 'Previous'}
-			class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-start-[1rem]"
+			class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-start-[1rem] print:hidden"
 			href={previousUrl}
 			rel="prefetch prev"
 			title={previousText || 'Previous'}
@@ -30,7 +30,7 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
 	nextUrl && (
 		<a
 			aria-label={nextText || 'Next'}
-			class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-end-[1rem]"
+			class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-end-[1rem] print:hidden"
 			href={nextUrl}
 			rel="prefetch next"
 			title={nextText || 'Next'}

src/components/PrimeVideoFlag.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 export const PrimeVideoFlag: FunctionalComponent<Props> = ({ class: className, id, ...props }) => {
 	const classes = cx(
-		'rounded-1 border-1 border-solid border-sky-500 bg-sky-500 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em]',
+		'rounded-1 border-1 border-solid border-sky-500 bg-sky-500 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:bg-transparent print:border-gray-500',
 		className
 	);
 

src/components/Sal.astro

@@ -12,17 +12,8 @@ import '../../node_modules/sal.js/dist/sal.css';
 </script>
 
 <style is:global>
-	.no-js [data-sal|='fade'] {
+	.no-js [data-sal|='slide-up'] {
-		opacity: 1;
+		opacity: 1 !important;
-	}
+		transform: none !important;
-
-	.no-js [data-sal|='slide'],
-	.no-js [data-sal|='zoom'] {
-		opacity: 1;
-		transform: none;
-	}
-
-	.no-js [data-sal|='flip'] {
-		transform: none;
 	}
 </style>

src/components/Tag.tsx

@@ -19,7 +19,7 @@ export const Tag: FunctionalComponent<Props> = ({
 	...props
 }) => {
 	const classes = cx(
-		'capitalize border-3 relative inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white min-w-[50px]',
+		'capitalize border-3 relative inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white min-w-[50px] print:hidden',
 		{
 			'!bg-shibui-500 !text-white hover:!bg-shibui-700 dark:!border-shibui-500 dark:!bg-shibui-700 hover:dark:!bg-shibui-400':
 				href,

src/components/Toolbox.astro

@@ -12,11 +12,11 @@ const { tools } = Astro.props;
 ---
 
 <ul
-	class="grid grid-cols-[repeat(auto-fit,_minmax(80px,_1fr))] items-center gap-2 rounded-2 bg-black/5 p-5 mbe-10 dark:bg-white/5"
+	class="grid grid-cols-[repeat(auto-fit,_minmax(80px,_1fr))] items-center gap-2 rounded-2 bg-black/5 p-5 mbe-10 dark:bg-white/5 print:block"
 >
 	{
 		tools.map(({ name, url, image }) => (
-			<li>
+			<li class="print:[&_img]:!hidden">
 				<Link href={url} title={name}>
 					<Img
 						alt={name}

src/layouts/BaseLayout.astro

@@ -72,6 +72,7 @@ const fullImage = site.url + cover;
 			}}
 			extend={{
 				link: [
+					{ rel: 'stylesheet', href: '/assets/styles/print.css', media: 'print' },
 					{ rel: 'icon', href: '/favicon.ico' },
 					{
 						rel: 'icon',

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

@@ -67,7 +67,7 @@ const description = entry.data.description;
 				alt={entry.data.title}
 				aspect={1.6}
 				breakpoints={[300, 500, 700, 1000, 1300, 1500, 1800, 2000]}
-				class="col-span-full aspect-video h-auto !mbe-0 xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
+				class="col-span-full aspect-video h-auto !mbe-0 print:hidden xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
 				format={['webp', 'avif']}
 				src={entry.data.cover}
 			/>

src/pages/haiku.astro

@@ -29,7 +29,10 @@ const description =
 		<Intro components={mapping} />
 	</article>
 
-	<nav class="col-start-1 col-end-17 md:col-start-2 md:col-end-14" aria-label="Haiku">
+	<nav
+		class="col-start-1 col-end-17 print:hidden md:col-start-2 md:col-end-14"
+		aria-label="Haiku"
+	>
 		<ol
 			class="grid list-none grid-cols-[repeat(auto-fill,_minmax(3rem,_1fr))] justify-items-center gap-[1rem]"
 			{...animationDelay}

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

@@ -32,14 +32,14 @@ const description = `Haiku ${entry.slug} in German and English.`;
 ---
 
 <BaseLayout title={title} description={description} header={false} footer={false}>
-	<div class="grid-rows-[clamp(3rem,_5.55vw,_9rem) 1fr] grid h-full grid-cols-18">
+	<div class="grid-rows-[clamp(3rem,_5.55vw,_9rem) 1fr] grid h-full grid-cols-18 print:block">
 		<PageHeader
 			class="z-10 col-span-full row-start-1 bg-transparent !mbe-0 dark:bg-transparent"
 			navigation={false}
 			backLink="/haiku/"
 		/>
 		<div
-			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))]"
+			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}>
@@ -50,7 +50,9 @@ const description = `Haiku ${entry.slug} in German and English.`;
 					</Verse>
 				</div>
 			</div>
-			<div class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c]">
+			<div
+				class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c] print:bg-transparent"
+			>
 				<div {...animationDelay}>
 					<Verse
 						class="justify-center text-center text-3 font-black not-italic !leading-relaxed min-[700px]:text-4"

src/pages/sketchnotes.astro

@@ -25,15 +25,18 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 	<PageTitle grid="wide" innerGrid>Sketchnotes</PageTitle>
 
 	<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"
+		class="col-start-1 col-end-17 grid print:block md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
 		{...animation}
 	>
 		<Intro components={mapping} />
 	</article>
 
-	<nav class="md:col-start-1 md:col-end-16" aria-label="Sketchnotes">
+	<nav
+		class="col-start-1 col-end-18 w-full md:col-start-1 md:col-end-16"
+		aria-label="Sketchnotes"
+	>
 		<ol
-			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
+			class="gap-[max(25px,_2vw)] print:block md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
 		>
 			{
 				allSketchnotes.map(({ slug, data }) => (