Merge branch 'partial-uwu' into uwu-search-page

# Conflicts:
#	astro.config.ts
#	package-lock.json
#	package.json
#	src/types/plausible.d.ts
#	src/utils/debounce.ts

astro.config.ts

@@ -70,7 +70,7 @@ export default defineConfig({
 			/* start remark plugins here */
 			[behead, { depth: 1 }],
 			[
-				remarkEmbedder as never,
+				remarkEmbedder,
 				{
 					transformers: [oembedTransformer, TwitchTransformer],
 				} as RemarkEmbedderOptions,

build-scripts/generate-epubs.ts

@@ -40,7 +40,7 @@ async function generateEpubHTML(slug: string, content: string) {
 			createRehypePlugins({
 				format: "epub",
 				path: resolve(process.cwd(), `content/blog/${slug}/`),
-			})
+			}),
 		)
 		// Voids: [] is required for epub generation, and causes little/no harm for non-epub usage
 		.use(rehypeStringify, { allowDangerousHtml: true, voids: [] });
@@ -55,7 +55,7 @@ type EpubOptions = ConstructorParameters<typeof EPub>[0];
 async function generateCollectionEPub(
 	collection: RawCollectionInfo & Pick<CollectionInfo, "coverImgMeta">,
 	collectionPosts: ExtendedPostInfo[],
-	fileLocation: string
+	fileLocation: string,
 ) {
 	const authors = collection.authors.map((id) => {
 		return unicorns.find((u) => u.id === id).name;
@@ -115,10 +115,10 @@ async function generateCollectionEPub(
 				collectionPosts.map(async (post) => ({
 					title: post.title,
 					data: await generateEpubHTML(post.slug, post.contentMeta),
-				}))
+				})),
 			),
 		} as Partial<EpubOptions> as EpubOptions,
-		fileLocation
+		fileLocation,
 	);
 
 	await epub.render();
@@ -128,12 +128,12 @@ const posts = [...getAllExtendedPosts("en")];
 
 for (const collection of collections) {
 	const collectionPosts = posts.filter(
-		(post) => post.collection === collection.slug
+		(post) => post.collection === collection.slug,
 	);
 
 	generateCollectionEPub(
 		collection,
 		collectionPosts,
-		resolve(process.cwd(), `public/${collection.slug}.epub`)
+		resolve(process.cwd(), `public/${collection.slug}.epub`),
 	);
 }

build-scripts/search-index.ts

@@ -38,7 +38,7 @@ const createPostIndex = () => {
 			{ name: "description", weight: 1.2 },
 			{ name: "excerpt", weight: 1.2 },
 		],
-		posts
+		posts,
 	).toJSON();
 };
 
@@ -74,7 +74,7 @@ const createCollectionIndex = () => {
 				weight: 1.2,
 			},
 		],
-		collections
+		collections,
 	).toJSON();
 };
 

build-scripts/social-previews/index.ts

@@ -71,7 +71,7 @@ const page = await context.newPage();
 async function renderPostImage(
 	layout: Layout,
 	post: ExtendedPostInfo,
-	path: string
+	path: string,
 ) {
 	const label = `${post.slug} (${layout.name})`;
 	console.time(label);
@@ -97,7 +97,7 @@ for (const post of getAllExtendedPosts("en")) {
 		await renderPostImage(
 			twitterPreview,
 			post,
-			resolve(outDir, `.${post.socialImg}`)
+			resolve(outDir, `.${post.socialImg}`),
 		);
 	}
 }

build-scripts/social-previews/layouts/banner.tsx

@@ -1,18 +1,20 @@
-import * as React from 'preact';
+import * as React from "preact";
-import { readFileAsBase64 } from '../utils';
+import { readFileAsBase64 } from "../utils";
-import { ComponentProps, Layout } from '../base';
+import { ComponentProps, Layout } from "../base";
-import style from './banner-css';
+import style from "./banner-css";
-import classnames from 'classnames';
+import classnames from "classnames";
 
 const tagStickers: Record<string, string> = {
-	"default": readFileAsBase64("public/stickers/role_devops.png"),
+	default: readFileAsBase64("public/stickers/role_devops.png"),
 	"html,webdev": readFileAsBase64("public/stickers/html.png"),
-	"vue": readFileAsBase64("public/stickers/vue.png"),
+	vue: readFileAsBase64("public/stickers/vue.png"),
 	"documentation,opinion": readFileAsBase64("public/stickers/role_author.png"),
-	'computer science,bash,javascript': readFileAsBase64("public/stickers/role_developer.png"),
+	"computer science,bash,javascript": readFileAsBase64(
-	"design": readFileAsBase64("public/stickers/role_designer.png"),
+		"public/stickers/role_developer.png",
-	"rust": readFileAsBase64("public/stickers/ferris.png"),
+	),
-	"git": readFileAsBase64("public/stickers/git.png"),
+	design: readFileAsBase64("public/stickers/role_designer.png"),
+	rust: readFileAsBase64("public/stickers/ferris.png"),
+	git: readFileAsBase64("public/stickers/git.png"),
 };
 
 function BannerCodeScreen({
@@ -20,16 +22,18 @@ function BannerCodeScreen({
 	postHtml,
 	blur,
 }: {
-	post: ComponentProps['post'],
+	post: ComponentProps["post"];
-	postHtml: string,
+	postHtml: string;
-	blur?: boolean,
+	blur?: boolean;
 }) {
 	const rotX = (post.description.length % 20) - 10;
-	const rotY = ((post.title.length * 3) % 20);
+	const rotY = (post.title.length * 3) % 20;
 
 	let tagImg = tagStickers["default"];
 	for (const tag of post.tags) {
-		const key = Object.keys(tagStickers).find(k => k.split(",").includes(tag));
+		const key = Object.keys(tagStickers).find((k) =>
+			k.split(",").includes(tag),
+		);
 		if (key) {
 			tagImg = tagStickers[key];
 			break;
@@ -38,38 +42,45 @@ function BannerCodeScreen({
 
 	const theme = post.title.length % 3;
 
-	return <>
+	return (
-		<div class={classnames("absoluteFill", "codeScreenBg", blur && "blur", "theme-" + theme)} style={`--rotX: ${rotX}deg; --rotY: ${rotY}deg; --left: ${rotY}%;`}>
+		<>
-			<div class="codeScreen">
+			<div
-				<pre dangerouslySetInnerHTML={{ __html: postHtml }} />
+				class={classnames(
-				<div class="tags">
+					"absoluteFill",
-					{
+					"codeScreenBg",
-						post.tags.map((tag) => (
+					blur && "blur",
+					"theme-" + theme,
+				)}
+				style={`--rotX: ${rotX}deg; --rotY: ${rotY}deg; --left: ${rotY}%;`}
+			>
+				<div class="codeScreen">
+					<pre dangerouslySetInnerHTML={{ __html: postHtml }} />
+					<div class="tags">
+						{post.tags.map((tag) => (
 							<span key={tag}>{tag}</span>
-						))
+						))}
-					}
+					</div>
+				</div>
+				<div class="rect" style="--z: 60px; --x: -80px; --y: -150px;">
+					<img src={tagImg} />
 				</div>
 			</div>
-			<div class="rect" style="--z: 60px; --x: -80px; --y: -150px;">
+		</>
-				<img src={tagImg} />
+	);
-			</div>
-		</div>
-	</>;
 }
 
-function Banner({
+function Banner({ post, postHtml }: ComponentProps) {
-	post,
+	return (
-	postHtml,
+		<>
-}: ComponentProps) {
+			<BannerCodeScreen post={post} postHtml={postHtml} />
-	return <>
+			<div
-		<BannerCodeScreen post={post} postHtml={postHtml} />
+				className="absoluteFill codeScreenOverlay"
-		<div
+				style={{
-			className="absoluteFill codeScreenOverlay"
+					zIndex: -1,
-			style={{
+				}}
-				zIndex: -1,
+			/>
-			}}
+		</>
-		/>
+	);
-	</>;
 }
 
 export default {

build-scripts/social-previews/layouts/twitter-preview.test.tsx

@@ -1,54 +1,54 @@
-import * as React from 'preact';
+import * as React from "preact";
 import { render } from "@testing-library/preact";
 import { MockPost } from "__mocks__/data/mock-post";
 import TwitterLargeCard, { splitSentence } from "./twitter-preview";
 
 test("Social previews splitSentence", () => {
-  // doesn't split at start/end of short titles
+	// doesn't split at start/end of short titles
-  expect(splitSentence("Topic: Topic")).toStrictEqual(["Topic: Topic", ""]);
+	expect(splitSentence("Topic: Topic")).toStrictEqual(["Topic: Topic", ""]);
 
-  // splits by colon (including the colon char)
+	// splits by colon (including the colon char)
-  expect(splitSentence("A Topic: an Attribute")).toStrictEqual([
+	expect(splitSentence("A Topic: an Attribute")).toStrictEqual([
-    "A Topic",
+		"A Topic",
-    ": an Attribute",
+		": an Attribute",
-  ]);
+	]);
 
-  // splits by commas
+	// splits by commas
-  expect(
+	expect(
-    splitSentence("An Attribute of Topic, Topic, and Topic")
+		splitSentence("An Attribute of Topic, Topic, and Topic"),
-  ).toStrictEqual(["An Attribute of ", "Topic, Topic, and Topic"]);
+	).toStrictEqual(["An Attribute of ", "Topic, Topic, and Topic"]);
 
-  // splits by apostrophe
+	// splits by apostrophe
-  expect(splitSentence("A Topic's Attribute")).toStrictEqual([
+	expect(splitSentence("A Topic's Attribute")).toStrictEqual([
-    "A Topic's",
+		"A Topic's",
-    " Attribute",
+		" Attribute",
-  ]);
+	]);
 
-  // splits by apostrophe (plural)
+	// splits by apostrophe (plural)
-  expect(splitSentence("Some Topics' Attributes")).toStrictEqual([
+	expect(splitSentence("Some Topics' Attributes")).toStrictEqual([
-    "Some Topics'",
+		"Some Topics'",
-    " Attributes",
+		" Attributes",
-  ]);
+	]);
 
-  // splits by lowercase words
+	// splits by lowercase words
-  expect(splitSentence("An Attribute in a Topic")).toStrictEqual([
+	expect(splitSentence("An Attribute in a Topic")).toStrictEqual([
-    "An Attribute in ",
+		"An Attribute in ",
-    "a Topic",
+		"a Topic",
-  ]);
+	]);
 });
 
 test("Social preview renders", async () => {
-  const post = MockPost;
+	const post = MockPost;
-  const { baseElement, findByText } = render(
+	const { baseElement, findByText } = render(
-    <TwitterLargeCard.Component
+		<TwitterLargeCard.Component
-      post={post}
+			post={post}
-      postHtml="<code>test();</code>"
+			postHtml="<code>test();</code>"
-      width={1280}
+			width={1280}
-      height={640}
+			height={640}
-      authorImageMap={{ [post.authors[0]]: "test.jpg" }}
+			authorImageMap={{ [post.authors[0]]: "test.jpg" }}
-    />
+		/>,
-  );
+	);
 
-  expect(baseElement).toBeInTheDocument();
+	expect(baseElement).toBeInTheDocument();
-  expect(await findByText(post.title)).toBeInTheDocument();
+	expect(await findByText(post.title)).toBeInTheDocument();
 });

build-scripts/social-previews/layouts/twitter-preview.tsx

@@ -1,130 +1,134 @@
-import * as React from 'preact';
+import * as React from "preact";
-import { readFileAsBase64 } from '../utils';
+import { readFileAsBase64 } from "../utils";
-import { ComponentProps, Layout } from '../base';
+import { ComponentProps, Layout } from "../base";
-import style from './twitter-preview-css';
+import style from "./twitter-preview-css";
 
 export function splitSentence(str: string): [string, string] {
-  const splitStr = str.split(" ");
+	const splitStr = str.split(" ");
-  const splitBy = (
+	const splitBy = (
-    regex: RegExp,
+		regex: RegExp,
-    matchLast: boolean = true
+		matchLast: boolean = true,
-  ): [string, string] | null => {
+	): [string, string] | null => {
-    const matches = splitStr.map((word, i) => ({ reg: regex.exec(word), i }));
+		const matches = splitStr.map((word, i) => ({ reg: regex.exec(word), i }));
-    const match = (matchLast ? matches.reverse() : matches)
+		const match = (matchLast ? matches.reverse() : matches)
-      .slice(1, -1)
+			.slice(1, -1)
-      .find(({ reg }) => !!reg);
+			.find(({ reg }) => !!reg);
 
-    // if match is not found, fail
+		// if match is not found, fail
-    if (!match || !match.reg) return null;
+		if (!match || !match.reg) return null;
 
-    const firstHalf = [
+		const firstHalf = [
-      ...splitStr.slice(0, match.i),
+			...splitStr.slice(0, match.i),
-      match.reg.input.substring(0, match.reg.index),
+			match.reg.input.substring(0, match.reg.index),
-    ].join(" ");
+		].join(" ");
-    const secondHalf = [match.reg[0], ...splitStr.slice(match.i + 1)].join(" ");
+		const secondHalf = [match.reg[0], ...splitStr.slice(match.i + 1)].join(" ");
-    return [firstHalf, secondHalf];
+		return [firstHalf, secondHalf];
-  };
+	};
 
-  let ret;
+	let ret;
-  // try to split by "Topic[: Attribute]" or "Topic [- Attribute]" (hyphens/colons)
+	// try to split by "Topic[: Attribute]" or "Topic [- Attribute]" (hyphens/colons)
-  if ((ret = splitBy(/(?<=^\w+):$|^[-—]$/))) return ret;
+	if ((ret = splitBy(/(?<=^\w+):$|^[-—]$/))) return ret;
-  // try to split by "Attribute in [Topic, Topic, and Topic]" (commas)
+	// try to split by "Attribute in [Topic, Topic, and Topic]" (commas)
-  if ((ret = splitBy(/^\w+,$/, false))) return ret;
+	if ((ret = splitBy(/^\w+,$/, false))) return ret;
-  // try to split by "Topic['s Attribute]" (apostrophe)
+	// try to split by "Topic['s Attribute]" (apostrophe)
-  if ((ret = splitBy(/(?<=^\w+\'s?)$/))) return ret;
+	if ((ret = splitBy(/(?<=^\w+\'s?)$/))) return ret;
-  // try to split by "Attribute [in Topic]" (lowercase words)
+	// try to split by "Attribute [in Topic]" (lowercase words)
-  if ((ret = splitBy(/^[a-z][A-Za-z]*$/))) return ret;
+	if ((ret = splitBy(/^[a-z][A-Za-z]*$/))) return ret;
-  // otherwise, don't split the string
+	// otherwise, don't split the string
-  return [str, ""];
+	return [str, ""];
 }
 
-const unicornUtterancesHead = readFileAsBase64("src/assets/unicorn_head_1024.png");
+const unicornUtterancesHead = readFileAsBase64(
+	"src/assets/unicorn_head_1024.png",
+);
 
 interface TwitterCodeScreenProps {
-  title: string;
+	title: string;
-  html: string;
+	html: string;
-  blur: boolean;
+	blur: boolean;
 }
 
 const TwitterCodeScreen = ({ title, html, blur }: TwitterCodeScreenProps) => {
-  const rotations = [
+	const rotations = [
-    "rotateX(-17deg) rotateY(32deg) rotateZ(-3deg) translate(16%, 0%)",
+		"rotateX(-17deg) rotateY(32deg) rotateZ(-3deg) translate(16%, 0%)",
-    "rotateX(5deg) rotateY(35deg) rotateZ(345deg) translate(18%, 0)",
+		"rotateX(5deg) rotateY(35deg) rotateZ(345deg) translate(18%, 0)",
-    "rotateX(15deg) rotateY(25deg) rotateZ(12deg) translate(3%, -15%)",
+		"rotateX(15deg) rotateY(25deg) rotateZ(12deg) translate(3%, -15%)",
-  ];
+	];
 
-  // use second char of title as "deterministic" random value
+	// use second char of title as "deterministic" random value
-  const transform = rotations[title.charCodeAt(1) % rotations.length];
+	const transform = rotations[title.charCodeAt(1) % rotations.length];
 
-  return (
+	return (
-    <div className={`absoluteFill codeScreenBg ${blur ? "blur" : ""}`}>
+		<div className={`absoluteFill codeScreenBg ${blur ? "blur" : ""}`}>
-      <div
+			<div
-        className="absoluteFill codeScreen"
+				className="absoluteFill codeScreen"
-        style={`transform: ${transform};`}
+				style={`transform: ${transform};`}
-      >
+			>
-        <div className="absoluteFill">
+				<div className="absoluteFill">
-          <pre dangerouslySetInnerHTML={{ __html: html }} />
+					<pre dangerouslySetInnerHTML={{ __html: html }} />
-        </div>
+				</div>
-      </div>
+			</div>
-    </div>
+		</div>
-  );
+	);
 };
 const TwitterLargeCard = ({
-  post,
+	post,
-  postHtml,
+	postHtml,
-  width,
+	width,
-  authorImageMap,
+	authorImageMap,
 }: ComponentProps) => {
-  const title = post.title;
+	const title = post.title;
-  const [firstHalfTitle, secondHalfTitle] = splitSentence(title);
+	const [firstHalfTitle, secondHalfTitle] = splitSentence(title);
 
-  return <>
+	return (
-    <TwitterCodeScreen title={post.title} html={postHtml} blur={true} />
+		<>
-    <TwitterCodeScreen title={post.title} html={postHtml} blur={false} />
+			<TwitterCodeScreen title={post.title} html={postHtml} blur={true} />
-    <div className="absoluteFill codeScreenOverlay" />
+			<TwitterCodeScreen title={post.title} html={postHtml} blur={false} />
-    <div className="absoluteFill centerAll">
+			<div className="absoluteFill codeScreenOverlay" />
-      <h1
+			<div className="absoluteFill centerAll">
-        style={{
+				<h1
-          maxWidth: "90%",
+					style={{
-          textAlign: "center",
+						maxWidth: "90%",
-          fontSize: `clamp(300%, 4.5rem, ${
+						textAlign: "center",
-            Math.round(width / title.length) * 3
+						fontSize: `clamp(300%, 4.5rem, ${
-          }px)`,
+							Math.round(width / title.length) * 3
-        }}
+						}px)`,
-      >
+					}}
-        {firstHalfTitle}
+				>
-        <span className="secondHalfTitle">{secondHalfTitle}</span>
+					{firstHalfTitle}
-      </h1>
+					<span className="secondHalfTitle">{secondHalfTitle}</span>
-    </div>
+				</h1>
-    <div
+			</div>
-      className="absoluteFill backgroundColor"
+			<div
-      style={{
+				className="absoluteFill backgroundColor"
-        zIndex: -1,
+				style={{
-      }}
+					zIndex: -1,
-    />
+				}}
-    <div className="bottomContainer">
+			/>
-      <div className="bottomImagesContainer centerAll">
+			<div className="bottomContainer">
-        {post.authors.map((author) => (
+				<div className="bottomImagesContainer centerAll">
-          <img
+					{post.authors.map((author) => (
-            key={author}
+						<img
-            src={authorImageMap[author]}
+							key={author}
-            alt=""
+							src={authorImageMap[author]}
-            className="bottomProfImg"
+							alt=""
-            height={80}
+							className="bottomProfImg"
-            width={80}
+							height={80}
-          />
+							width={80}
-        ))}
+						/>
-      </div>
+					))}
-      <div className="bottomImagesContainer centerAll">
+				</div>
-        <p>unicorn-utterances.com</p>
+				<div className="bottomImagesContainer centerAll">
-        <img src={unicornUtterancesHead} alt="" height={80} width={80} />
+					<p>unicorn-utterances.com</p>
-      </div>
+					<img src={unicornUtterancesHead} alt="" height={80} width={80} />
-    </div>
+				</div>
-  </>;
+			</div>
+		</>
+	);
 };
 
 export default {
-  name: "twitter-preview",
+	name: "twitter-preview",
-  css: style,
+	css: style,
-  Component: TwitterLargeCard,
+	Component: TwitterLargeCard,
 } as Layout;

content/data/i18n/es.json

@@ -4,4 +4,4 @@
 	"title.where_to_find_us": "Dónde encontrarnos",
 	"title.sponsors": "Patrocinadores",
 	"desc.about_us": "Acerca de Unicorn Utterances - quiénes somos, cuáles son nuestros objetivos, y cómo queremos ayudar a que otros aprendan"
-}
+}

content/data/i18n/fr.json

@@ -4,4 +4,4 @@
 	"title.where_to_find_us": "Où Nous Trouver",
 	"title.sponsors": "Partenaires",
 	"desc.about_us": "À propos de Unicorn Utterances - qui nous sommes, quels sont nos buts, et comment nous voulons aidez les gens à apprendre"
-}
+}

content/data/i18n/pt.json

@@ -4,4 +4,4 @@
 	"title.where_to_find_us": "Onde nos podes encontrar?",
 	"title.sponsors": "Patrocinadores",
 	"desc.about_us": "Sobre Unicorn Utterances - quem somos nós, quais são os nossos objetivos e como queremos ajudar no processo de aprendizagem dos outros"
-}
+}

package.json

@@ -52,18 +52,18 @@
 		"@testing-library/preact": "^3.2.3",
 		"@types/jest": "^29.5.2",
 		"@types/json5": "^2.2.0",
-		"@types/node": "^20.4.4",
+		"@types/node": "^20.4.5",
 		"@types/uuid": "^9.0.2",
-		"@typescript-eslint/eslint-plugin": "^6.1.0",
+		"@typescript-eslint/eslint-plugin": "^6.2.0",
-		"@typescript-eslint/parser": "^6.1.0",
+		"@typescript-eslint/parser": "^6.2.0",
 		"@vercel/node": "^2.15.6",
-		"astro": "^2.9.2",
+		"astro": "^2.9.3",
 		"astro-icon": "^0.8.1",
 		"autoprefixer": "^10.4.14",
 		"classnames": "^2.3.2",
 		"dayjs": "^1.11.9",
 		"env-cmd": "^10.1.0",
-		"esbuild": "^0.18.16",
+		"esbuild": "^0.18.17",
 		"esbuild-jest": "^0.5.0",
 		"eslint": "^8.44.0",
 		"eslint-plugin-astro": "^0.27.1",
@@ -86,7 +86,7 @@
 		"lint-staged": "^13.2.3",
 		"npm-run-all": "^4.1.5",
 		"plausible-tracker": "^0.3.8",
-		"playwright": "^1.36.1",
+		"playwright": "^1.36.2",
 		"postcss": "^8.4.27",
 		"postcss-csso": "^6.0.1",
 		"preact-render-to-string": "^6.1.0",
@@ -112,7 +112,7 @@
 		"unist-util-is": "^6.0.0",
 		"unist-util-replace-all-between": "^0.1.1",
 		"unist-util-visit": "^5.0.0",
-		"vercel": "^31.0.4",
+		"vercel": "^31.1.1",
 		"vite-plugin-svgr": "^3.2.0"
 	},
 	"lint-staged": {

postcss.config.cjs

@@ -1,7 +1,4 @@
 // @ts-nocheck
 module.exports = {
-	plugins: [
+	plugins: [require("autoprefixer"), require("postcss-csso")],
-		require("autoprefixer"),
-		require("postcss-csso"),
-	],
 };

src/components/banner-stickers/banner-stickers.ts

@@ -12,7 +12,7 @@ export type StickerInfo = {
 export async function createSticker(
 	name: string,
 	width: number = STICKER_SIZE,
-	height: number = STICKER_SIZE
+	height: number = STICKER_SIZE,
 ): Promise<StickerInfo> {
 	const image = await getImage({
 		src: `/stickers/${name}.png`,

src/components/button/button.tsx

@@ -33,7 +33,7 @@ const ButtonWrapper = forwardRef(
 			rightIcon,
 			...props
 		}: ButtonProps<T>,
-		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>
+		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
 	) => {
 		const Wrapper: any = tag;
 
@@ -49,13 +49,13 @@ const ButtonWrapper = forwardRef(
 				{rightIcon && <div class="buttonIcon">{rightIcon}</div>}
 			</Wrapper>
 		);
-	}
+	},
 );
 
 export const Button = forwardRef(
 	<T extends AllowedTags = "a">(
 		{ class: className = "", ...props }: ButtonProps<T>,
-		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>
+		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
 	) => {
 		return (
 			<ButtonWrapper
@@ -64,13 +64,13 @@ export const Button = forwardRef(
 				ref={ref}
 			/>
 		);
-	}
+	},
 );
 
 export const LargeButton = forwardRef(
 	<T extends AllowedTags = "a">(
 		{ class: className = "", ...props }: ButtonProps<T>,
-		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>
+		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
 	) => {
 		return (
 			<ButtonWrapper
@@ -79,7 +79,7 @@ export const LargeButton = forwardRef(
 				ref={ref}
 			/>
 		);
-	}
+	},
 );
 
 type IconOnlyButtonProps<T extends AllowedTags = "a"> = Omit<
@@ -90,7 +90,7 @@ type IconOnlyButtonProps<T extends AllowedTags = "a"> = Omit<
 export const IconOnlyButton = forwardRef(
 	<T extends AllowedTags = "a">(
 		{ class: className = "", children, ...props }: IconOnlyButtonProps<T>,
-		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>
+		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
 	) => {
 		return (
 			<ButtonWrapper
@@ -101,18 +101,18 @@ export const IconOnlyButton = forwardRef(
 				<div class="iconOnlyButtonIcon">{children}</div>
 			</ButtonWrapper>
 		);
-	}
+	},
 );
 
 export const LargeIconOnlyButton = forwardRef(
 	<T extends AllowedTags = "a">(
 		{ class: className = "", children, ...props }: IconOnlyButtonProps<T>,
-		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>
+		ref: Ref<T extends "a" ? HTMLAnchorElement : HTMLButtonElement>,
 	) => {
 		return (
 			<ButtonWrapper {...props} class={`iconOnly large ${className}`} ref={ref}>
 				<div class="iconOnlyButtonIcon">{children}</div>
 			</ButtonWrapper>
 		);
-	}
+	},
 );

src/components/chip/chip.module.scss

@@ -55,7 +55,8 @@
 		outline-offset: 0;
 		border-color: transparent;
 		@include transition(color background-color box-shadow);
-		outline: var(--chip_focus-outline_color) solid var(--chip_focus-outline_width);
+		outline: var(--chip_focus-outline_color) solid
+			var(--chip_focus-outline_width);
 		color: var(--chip_foreground-color);
 	}
 

src/components/chip/chip.tsx

@@ -24,5 +24,5 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(
 				<span class={`${style.chip_content}`}>{children}</span>
 			</Wrapper>
 		);
-	}
+	},
 );

src/components/collection-card/collection-card.module.scss

@@ -1,7 +1,6 @@
 @import "src/tokens/index";
 
 :root {
-
 	--collection-card_corner-radius: var(--corner-radius_xl);
 
 	--collection-card_author_padding-top: var(--spc-3x);
@@ -90,7 +89,8 @@
 	}
 }
 
-.forwardIcon, .forwardIcon svg {
+.forwardIcon,
+.forwardIcon svg {
 	height: 100%;
 	width: 100%;
 }

src/components/hero/hero.module.scss

@@ -1,48 +1,48 @@
-@import "src/tokens/index";
+@import "src/tokens/index";
-
+
-.header {
+.header {
-	align-items: center;
+	align-items: center;
-	position: relative;
+	position: relative;
-}
+}
-
+
-.buttons {
+.buttons {
-	gap: var(--spc-4x) var(--spc-6x);
+	gap: var(--spc-4x) var(--spc-6x);
-	padding: var(--spc-4x) 0;
+	padding: var(--spc-4x) 0;
-}
+}
-
+
-.bannerLogo {
+.bannerLogo {
-	display: none;
+	display: none;
-}
+}
-
+
-.bannerLogoMobile {
+.bannerLogoMobile {
-	display: block;
+	display: block;
-	position: absolute;
+	position: absolute;
-	top: calc(-1 * var(--site-spacing));
+	top: calc(-1 * var(--site-spacing));
-	left: calc(-1 * var(--site-spacing));
+	left: calc(-1 * var(--site-spacing));
-	right: calc(-1 * var(--site-spacing));
+	right: calc(-1 * var(--site-spacing));
-	z-index: -1;
+	z-index: -1;
-}
+}
-
+
-.bannerTextShadow {
+.bannerTextShadow {
-	text-shadow:
+	text-shadow:
-		0 0 5px var(--background_primary),
+		0 0 5px var(--background_primary),
-		0 0 6px var(--background_primary),
+		0 0 6px var(--background_primary),
-		0 0 8px var(--background_primary),
+		0 0 8px var(--background_primary),
-		0 0 8px var(--background_primary);
+		0 0 8px var(--background_primary);
-}
+}
-
+
-@include from($desktopSmall) {
+@include from($desktopSmall) {
-	.header {
+	.header {
-		display: grid;
+		display: grid;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
+		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: var(--site-spacing);
+		gap: var(--site-spacing);
-	}
+	}
-
+
-	.bannerLogo {
+	.bannerLogo {
-		display: block;
+		display: block;
-	}
+	}
-
+
-	.bannerLogoMobile {
+	.bannerLogoMobile {
-		display: none;
+		display: none;
-	}
+	}
-}
+}

src/components/image/picture.tsx

@@ -3,26 +3,23 @@ import { JSX } from "preact";
 
 interface PictureProps {
 	picture: GetPictureResult;
-	alt: string,
+	alt: string;
 	class?: string;
 	imgAttrs?: JSX.HTMLAttributes<HTMLImageElement>;
 }
 
 export const Picture = ({
-	picture, alt,
+	picture,
+	alt,
 	class: className,
 	imgAttrs,
 }: PictureProps) => {
 	return (
-		<picture class={`${className || ''}`}>
+		<picture class={`${className || ""}`}>
 			{picture.sources.map((attrs) => (
 				<source {...attrs} />
 			))}
-			<img
+			<img {...(picture.image as any)} {...imgAttrs} alt={alt} />
-				{...(picture.image as any)}
-				{...imgAttrs}
-				alt={alt}
-			/>
 		</picture>
 	);
 };

src/components/page-card/page-card.module.scss

@@ -1,203 +1,230 @@
-@import "src/tokens/index";
+@import "src/tokens/index";
-
+
-:root {
+:root {
-  --page-card_container_corner-radius: calc(var(--site-spacing) * 2);
+	--page-card_container_corner-radius: calc(var(--site-spacing) * 2);
-  --page-card_container_padding: calc(var(--site-spacing) * 2);
+	--page-card_container_padding: calc(var(--site-spacing) * 2);
-  --page-card_container_compound-padding: calc(var(--page-card_image_border_width) + var(--page-card_container_padding));
+	--page-card_container_compound-padding: calc(
-  --page-card_description_padding-top: var(--spc-4x);
+		var(--page-card_image_border_width) + var(--page-card_container_padding)
-
+	);
-  --page-card_image_size: 240px;
+	--page-card_description_padding-top: var(--spc-4x);
-  --page-card_image_border_width: 16px;
+
-  --page-card_image_inset: var(--spc-12x);
+	--page-card_image_size: 240px;
-  --page_card_image_corner-radius: 48px;
+	--page-card_image_border_width: 16px;
-
+	--page-card_image_inset: var(--spc-12x);
-  --page-card_button-gap: var(--site-spacing);
+	--page_card_image_corner-radius: 48px;
-
+
-  --page-card_image_border_color: var(--background_primary);
+	--page-card_button-gap: var(--site-spacing);
-  --page-card_container_background-color: var(--surface_primary_emphasis-none);
+
-
+	--page-card_image_border_color: var(--background_primary);
-  --page-card_title_color: var(--foreground_emphasis-high);
+	--page-card_container_background-color: var(--surface_primary_emphasis-none);
-  --page-card_supporting-text_color: var(--foreground_emphasis-medium);
+
-
+	--page-card_title_color: var(--foreground_emphasis-high);
-  @include from($tabletSmall) {
+	--page-card_supporting-text_color: var(--foreground_emphasis-medium);
-    --page-card_container_padding: var(--spc-6x);
+
-    --page-card_image_size: 240px;
+	@include from($tabletSmall) {
-    --page-card_max-width: 640px;
+		--page-card_container_padding: var(--spc-6x);
-  }
+		--page-card_image_size: 240px;
-
+		--page-card_max-width: 640px;
-  @include from($tabletLarge) {
+	}
-    --page-card_container_padding: var(--spc-12x);
+
-    --page-card_image_size: 320px;
+	@include from($tabletLarge) {
-    --page-card_max-width: 960px;
+		--page-card_container_padding: var(--spc-12x);
-  }
+		--page-card_image_size: 320px;
-
+		--page-card_max-width: 960px;
-  @include from($desktopSmall) {
+	}
-    --page-card_container_padding: var(--spc-12x);
+
-    --page-card_image_inset: var(--spc-16x);
+	@include from($desktopSmall) {
-    --page-card_image_size: 360px;
+		--page-card_container_padding: var(--spc-12x);
-    --page-card_max-width: 960px;
+		--page-card_image_inset: var(--spc-16x);
-  }
+		--page-card_image_size: 360px;
-}
+		--page-card_max-width: 960px;
-
+	}
-.pageCardContainer {
+}
-  background: var(--page-card_container_background-color);
+
-  display: grid;
+.pageCardContainer {
-  border-radius: var(--page-card_container_corner-radius);
+	background: var(--page-card_container_background-color);
-  grid-template-columns: 1fr;
+	display: grid;
-  grid-row-gap: var(--page-card_container_padding);
+	border-radius: var(--page-card_container_corner-radius);
-  padding: 0 var(--page-card_container_padding) var(--page-card_container_padding) var(--page-card_container_padding);
+	grid-template-columns: 1fr;
-
+	grid-row-gap: var(--page-card_container_padding);
-  margin-top: var(--page-card_image_inset);
+	padding: 0 var(--page-card_container_padding)
-
+		var(--page-card_container_padding) var(--page-card_container_padding);
-  @include from($tabletSmall) {
+
-    max-width: var(--page-card_max-width);
+	margin-top: var(--page-card_image_inset);
-    grid-template-columns: auto 1fr;
+
-    grid-template-rows: auto auto auto;
+	@include from($tabletSmall) {
-    grid-row-gap: var(--page-card_container_padding);
+		max-width: var(--page-card_max-width);
-    grid-column-gap: var(--page-card_container_padding);
+		grid-template-columns: auto 1fr;
-    padding: var(--page-card_container_padding) var(--page-card_container_compound-padding) var(--page-card_container_compound-padding) var(--page-card_container_compound-padding);
+		grid-template-rows: auto auto auto;
-  }
+		grid-row-gap: var(--page-card_container_padding);
-
+		grid-column-gap: var(--page-card_container_padding);
-  @include from($tabletLarge) {
+		padding: var(--page-card_container_padding)
-    grid-template-columns: auto 1fr;
+			var(--page-card_container_compound-padding)
-    grid-template-rows: 1fr 1fr var(--page-card_container_padding) auto;
+			var(--page-card_container_compound-padding)
-    grid-row-gap: unset;
+			var(--page-card_container_compound-padding);
-    grid-column-gap: var(--page-card_container_padding);
+	}
-    padding: var(--page-card_container_padding) var(--page-card_container_compound-padding);
+
-  }
+	@include from($tabletLarge) {
-
+		grid-template-columns: auto 1fr;
-  @include from($desktopSmall) {
+		grid-template-rows: 1fr 1fr var(--page-card_container_padding) auto;
-    margin-top: unset;
+		grid-row-gap: unset;
-    grid-template-columns: auto 1fr;
+		grid-column-gap: var(--page-card_container_padding);
-    grid-template-rows: auto auto 1fr auto;
+		padding: var(--page-card_container_padding)
-    grid-column-gap: var(--page-card_container_padding);
+			var(--page-card_container_compound-padding);
-    grid-row-gap: var(--page-card_description_padding-top);
+	}
-    padding: var(--page-card_container_padding) var(--page-card_container_compound-padding) var(--page-card_container_padding) 0;
+
-  }
+	@include from($desktopSmall) {
-}
+		margin-top: unset;
-
+		grid-template-columns: auto 1fr;
-.imageContainer {
+		grid-template-rows: auto auto 1fr auto;
-  display: inline-block;
+		grid-column-gap: var(--page-card_container_padding);
-
+		grid-row-gap: var(--page-card_description_padding-top);
-  margin-left: auto;
+		padding: var(--page-card_container_padding)
-  margin-right: auto;
+			var(--page-card_container_compound-padding)
-  margin-top: calc(0px - var(--page-card_image_inset));
+			var(--page-card_container_padding) 0;
-
+	}
-  @include from($tabletSmall) {
+}
-    margin-left: unset;
+
-    margin-right: unset;
+.imageContainer {
-    grid-row: 1/1;
+	display: inline-block;
-    grid-column: 1/1;
+
-    margin-top: calc(0px - var(--page-card_image_inset) - var(--page-card_container_padding));
+	margin-left: auto;
-  }
+	margin-right: auto;
-
+	margin-top: calc(0px - var(--page-card_image_inset));
-  @include from($tabletLarge) {
+
-    grid-row: 1/3;
+	@include from($tabletSmall) {
-    grid-column: 1/1;
+		margin-left: unset;
-    margin-top: calc(0px - var(--page-card_image_inset) - var(--page-card_container_padding));
+		margin-right: unset;
-  }
+		grid-row: 1/1;
-
+		grid-column: 1/1;
-  @include from($desktopSmall) {
+		margin-top: calc(
-    grid-row: 1/5;
+			0px - var(--page-card_image_inset) - var(--page-card_container_padding)
-    grid-column: unset;
+		);
-    margin-top: unset;
+	}
-    margin-left: calc(0px - var(--page-card_image_inset));
+
-  }
+	@include from($tabletLarge) {
-}
+		grid-row: 1/3;
-
+		grid-column: 1/1;
-.image {
+		margin-top: calc(
-  height: var(--page-card_image_size);
+			0px - var(--page-card_image_inset) - var(--page-card_container_padding)
-  width: var(--page-card_image_size);
+		);
-  border-style: solid;
+	}
-  border-radius: var(--page_card_image_corner-radius);
+
-  border-width: var(--page-card_image_border_width);
+	@include from($desktopSmall) {
-  border-color: var(--page-card_image_border_color);
+		grid-row: 1/5;
-  overflow: hidden;
+		grid-column: unset;
-}
+		margin-top: unset;
-
+		margin-left: calc(0px - var(--page-card_image_inset));
-.title {
+	}
-  margin: 0;
+}
-  color: var(--foreground_emphasis-high);
+
-
+.image {
-  @include from($tabletSmall) {
+	height: var(--page-card_image_size);
-    display: flex;
+	width: var(--page-card_image_size);
-    align-items: center;
+	border-style: solid;
-    padding-bottom: var(--page-card_container_padding);
+	border-radius: var(--page_card_image_corner-radius);
-  }
+	border-width: var(--page-card_image_border_width);
-
+	border-color: var(--page-card_image_border_color);
-  @include from($tabletLarge) {
+	overflow: hidden;
-    display: flex;
+}
-    align-items: flex-end;
+
-    padding-bottom: unset;
+.title {
-    margin-bottom: var(--page-card_description_padding-top);
+	margin: 0;
-  }
+	color: var(--foreground_emphasis-high);
-
+
-  @include from($desktopSmall) {
+	@include from($tabletSmall) {
-    display: unset;
+		display: flex;
-    align-items: unset;
+		align-items: center;
-    margin-bottom: unset;
+		padding-bottom: var(--page-card_container_padding);
-    margin-top: calc(var(--page-card_container_compound-padding) - var(--page-card_container_padding));
+	}
-  }
+
-}
+	@include from($tabletLarge) {
-
+		display: flex;
-.description {
+		align-items: flex-end;
-  margin: 0;
+		padding-bottom: unset;
-  color: var(--foreground_emphasis-medium);
+		margin-bottom: var(--page-card_description_padding-top);
-
+	}
-  @include from($tabletSmall) {
+
-    grid-column: 1/3;
+	@include from($desktopSmall) {
-    padding: 0 calc(var(--page-card_container_compound-padding) - var(--page-card_container_padding));
+		display: unset;
-  }
+		align-items: unset;
-
+		margin-bottom: unset;
-  @include from($tabletLarge) {
+		margin-top: calc(
-    grid-column: unset;
+			var(--page-card_container_compound-padding) -
-    padding: unset;
+				var(--page-card_container_padding)
-  }
+		);
-}
+	}
-
+}
-.pageCardSpacer {
+
-  display: none;
+.description {
-
+	margin: 0;
-  @include from($tabletLarge) {
+	color: var(--foreground_emphasis-medium);
-    all: unset;
+
-  }
+	@include from($tabletSmall) {
-}
+		grid-column: 1/3;
-
+		padding: 0
-.buttonsContainer {
+			calc(
-  display: flex;
+				var(--page-card_container_compound-padding) -
-  flex-direction: column;
+					var(--page-card_container_padding)
-  gap: var(--page-card_button-gap);
+			);
-
+	}
-  @include from($tabletSmall) {
+
-    flex-direction: row;
+	@include from($tabletLarge) {
-    grid-column: 1/3;
+		grid-column: unset;
-    padding: 0 calc(var(--page-card_container_compound-padding) - var(--page-card_container_padding));
+		padding: unset;
-  }
+	}
-
+}
-  @include from($desktopSmall) {
+
-    grid-column: unset;
+.pageCardSpacer {
-    justify-content: space-between;
+	display: none;
-    margin-bottom: calc(var(--page-card_container_compound-padding) - var(--page-card_container_padding));
+
-    padding: unset;
+	@include from($tabletLarge) {
-  }
+		all: unset;
-}
+	}
-
+}
-.buttonsContainer.twoButtons > * {
+
-  @include from($tabletSmall) {
+.buttonsContainer {
-    flex-basis: 50%;
+	display: flex;
-  }
+	flex-direction: column;
-
+	gap: var(--page-card_button-gap);
-  @include from($desktopSmall) {
+
-    flex-basis: unset;
+	@include from($tabletSmall) {
-  }
+		flex-direction: row;
-}
+		grid-column: 1/3;
-
+		padding: 0
-.buttonsContainer:not(.twoButtons) > * {
+			calc(
-  @include from($tabletSmall) {
+				var(--page-card_container_compound-padding) -
-    flex-basis: 100%;
+					var(--page-card_container_padding)
-  }
+			);
-
+	}
-  @include from($desktopSmall) {
+
-    flex-basis: unset;
+	@include from($desktopSmall) {
-  }
+		grid-column: unset;
-}
+		justify-content: space-between;
+		margin-bottom: calc(
+			var(--page-card_container_compound-padding) -
+				var(--page-card_container_padding)
+		);
+		padding: unset;
+	}
+}
+
+.buttonsContainer.twoButtons > * {
+	@include from($tabletSmall) {
+		flex-basis: 50%;
+	}
+
+	@include from($desktopSmall) {
+		flex-basis: unset;
+	}
+}
+
+.buttonsContainer:not(.twoButtons) > * {
+	@include from($tabletSmall) {
+		flex-basis: 100%;
+	}
+
+	@include from($desktopSmall) {
+		flex-basis: unset;
+	}
+}

src/components/pagination/pagination-popover.test.tsx

@@ -8,7 +8,7 @@ test("when the menu button is clicked, the menu popup is opened", async () => {
 				currentPage: 2,
 				lastPage: 11,
 			}}
-		/>
+		/>,
 	);
 
 	// click the "..." menu
@@ -27,7 +27,7 @@ test("when '+' is clicked, the page number is incremented", async () => {
 				currentPage: 2,
 				lastPage: 11,
 			}}
-		/>
+		/>,
 	);
 
 	// click the "..." menu
@@ -54,7 +54,7 @@ test("when '-' is clicked, the page number is decremented", async () => {
 				currentPage: 2,
 				lastPage: 11,
 			}}
-		/>
+		/>,
 	);
 
 	// click the "..." menu
@@ -84,7 +84,7 @@ test("when 'Go to page' is clicked, softNavigate is invoked with the input page
 			}}
 			getPageHref={(pageNum: number) => `./${pageNum}`}
 			softNavigate={softNavigate}
-		/>
+		/>,
 	);
 
 	// click the "..." menu

src/components/pagination/pagination-popover.tsx

@@ -21,7 +21,7 @@ import { DOMProps } from "@react-types/shared";
 function PopupContents(
 	props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate"> & {
 		close: () => void;
-	}
+	},
 ) {
 	const [count, setCount] = useState(props.page.currentPage);
 	return (
@@ -123,7 +123,7 @@ function PaginationPopover({
 			popoverRef,
 			triggerRef,
 		},
-		state
+		state,
 	);
 
 	/* Setup dialog */
@@ -167,7 +167,7 @@ function PaginationPopover({
 }
 
 export function PaginationMenuAndPopover(
-	props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate">
+	props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate">,
 ) {
 	/* Setup trigger */
 	const triggerRef = useRef(null);
@@ -175,7 +175,7 @@ export function PaginationMenuAndPopover(
 	const { triggerProps, overlayProps } = useOverlayTrigger(
 		{ type: "dialog" },
 		state,
-		triggerRef
+		triggerRef,
 	);
 
 	return (

src/components/pagination/pagination.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/preact";
-import { Pagination } from './pagination';
+import { Pagination } from "./pagination";
 
 test("Pagination renders", () => {
 	const { baseElement, getByText } = render(
@@ -8,7 +8,7 @@ test("Pagination renders", () => {
 				currentPage: 3,
 				lastPage: 8,
 			}}
-		/>
+		/>,
 	);
 
 	expect(baseElement).toBeInTheDocument();
@@ -22,7 +22,7 @@ test("when there is only one page, nothing is rendered", () => {
 				currentPage: 1,
 				lastPage: 1,
 			}}
-		/>
+		/>,
 	);
 
 	expect(container.childNodes).toHaveLength(0);
@@ -35,7 +35,7 @@ test("when there is more than one page, the pages are rendered", () => {
 				currentPage: 1,
 				lastPage: 2,
 			}}
-		/>
+		/>,
 	);
 
 	expect(container.childNodes).not.toHaveLength(0);
@@ -50,7 +50,7 @@ test("when page 1 is selected, its button has the selected state", () => {
 				currentPage: 1,
 				lastPage: 11,
 			}}
-		/>
+		/>,
 	);
 
 	const button1 = getByText("1");
@@ -67,7 +67,7 @@ test("when the previous button is clicked, softNavigate is called for the previo
 				lastPage: 11,
 			}}
 			softNavigate={softNavigate}
-		/>
+		/>,
 	);
 
 	const previous = getByTestId("pagination-previous");
@@ -86,7 +86,7 @@ test("when the next button is clicked, softNavigate is called for the next page"
 				lastPage: 11,
 			}}
 			softNavigate={softNavigate}
-		/>
+		/>,
 	);
 
 	const next = getByTestId("pagination-next");
@@ -105,7 +105,7 @@ test("when a page button is clicked, softNavigate is called for its page", () =>
 				lastPage: 11,
 			}}
 			softNavigate={softNavigate}
-		/>
+		/>,
 	);
 
 	const button5 = getByText("5");

src/components/pagination/pagination.tsx

@@ -3,7 +3,10 @@ import forward from "src/icons/arrow_right.svg?raw";
 import back from "src/icons/arrow_left.svg?raw";
 import { PaginationMenuAndPopover } from "components/pagination/pagination-popover";
 import { useEffect, useState } from "preact/hooks";
-import { PaginationButtonProps, PaginationProps } from "components/pagination/types";
+import {
+	PaginationButtonProps,
+	PaginationProps,
+} from "components/pagination/types";
 import { usePagination } from "./use-pagination";
 import { onSoftNavClick } from "./on-click-base";
 
@@ -14,11 +17,18 @@ function PaginationButton({
 	selected,
 	softNavigate,
 }: PaginationButtonProps) {
-	const pageOptionalMin = Math.min(Math.max(1, pageInfo.currentPage - 1), pageInfo.lastPage - 3);
+	const pageOptionalMin = Math.min(
+		Math.max(1, pageInfo.currentPage - 1),
+		pageInfo.lastPage - 3,
+	);
 	const isOptional = pageNum < pageOptionalMin || pageNum > pageOptionalMin + 3;
 
 	return (
-		<li className={`${styles.paginationItem} ${isOptional ? styles.paginationItemExtra : ''}`}>
+		<li
+			className={`${styles.paginationItem} ${
+				isOptional ? styles.paginationItemExtra : ""
+			}`}
+		>
 			<a
 				className={`text-style-body-medium-bold ${styles.paginationButton} ${
 					selected ? styles.selected : ""
@@ -38,7 +48,7 @@ function PaginationButton({
  * This prevents the pagination menu from rendering on SSR, which throws errors
  */
 function PaginationMenuWrapper(
-	props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate">
+	props: Pick<PaginationProps, "page" | "getPageHref" | "softNavigate">,
 ) {
 	const [shouldRender, setShouldRender] = useState(false);
 

src/components/pagination/use-pagination.ts

@@ -16,7 +16,7 @@ export function usePagination(page: PageInfo) {
 
 		const firstPageNum = Math.max(
 			2,
-			Math.min(page.lastPage - PAGE_BUTTON_COUNT, page.currentPage - 1)
+			Math.min(page.lastPage - PAGE_BUTTON_COUNT, page.currentPage - 1),
 		);
 
 		const pages = [
@@ -32,7 +32,7 @@ export function usePagination(page: PageInfo) {
 			page.lastPage,
 		].filter(
 			// ensure that displayed pages are within the desired range
-			(i) => (i === "..." && isDotsEnabled) || (+i > 0 && +i <= page.lastPage)
+			(i) => (i === "..." && isDotsEnabled) || (+i > 0 && +i <= page.lastPage),
 		);
 
 		return {

src/components/post-card/post-card-grid.tsx

@@ -26,9 +26,12 @@ export function PostCardGrid({ postsToDisplay, ...props }: PostGridProps) {
 						unicornProfilePicMap={props.unicornProfilePicMap}
 					/>
 				) : (
-					<PostCard post={post} unicornProfilePicMap={props.unicornProfilePicMap} />
+					<PostCard
+						post={post}
+						unicornProfilePicMap={props.unicornProfilePicMap}
+					/>
 				);
 			})}
 		</ul>
-	)
+	);
 }

src/components/post-card/post-card.module.scss

@@ -119,7 +119,8 @@
 	text-decoration: none;
 }
 
-.authorName:hover, .authorName:focus {
+.authorName:hover,
+.authorName:focus {
 	text-decoration: underline;
 }
 

src/components/related-posts/related-posts-card.module.scss

@@ -8,7 +8,7 @@
 	gap: var(--spc-1x);
 	border-radius: var(--corner-radius_m);
 	text-decoration: none;
-	
+
 	@include transition(background-color);
 }
 

src/components/select/select.module.scss

@@ -11,7 +11,9 @@
 	--popup_item_padding: var(--spc-2x);
 	--popup_item_label_padding: var(--spc-1x);
 	--popup_item_min-height: var(--min-target-size_m);
-	--popup_item_corner-radius: calc(var(--popup_corner-radius) - var(--popup_padding));
+	--popup_item_corner-radius: calc(
+		var(--popup_corner-radius) - var(--popup_padding)
+	);
 	--popup_item_icon-size: var(--icon-size_dense);
 
 	--popup_item_background-color_hovered: var(--surface_primary_emphasis-medium);

src/components/select/select.tsx

@@ -7,9 +7,9 @@ import {
 	useSelect,
 	AriaListBoxOptions,
 	DismissButton,
-  Overlay,
+	Overlay,
-  usePopover,
+	usePopover,
-  AriaPopoverProps,
+	AriaPopoverProps,
 } from "react-aria";
 import { PropsWithChildren } from "preact/compat";
 import down from "src/icons/chevron_down.svg?raw";
@@ -21,25 +21,29 @@ import { Node } from "@react-types/shared";
 
 export { Item, Section } from "react-stately";
 
-interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
+interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
 	state: OverlayTriggerState;
 }
 
-function Popover({ children, state, ...props }: PropsWithChildren<PopoverProps>) {
+function Popover({
+	children,
+	state,
+	...props
+}: PropsWithChildren<PopoverProps>) {
 	const popoverRef = useRef(null);
-	const { popoverProps, underlayProps } = usePopover({
+	const { popoverProps, underlayProps } = usePopover(
-		...props,
+		{
-    offset: 8,
+			...props,
-		popoverRef
+			offset: 8,
-	}, state);
+			popoverRef,
+		},
+		state,
+	);
 
 	return (
 		<Overlay>
 			<div {...underlayProps} className={styles.underlay} />
-			<div
+			<div {...popoverProps} ref={popoverRef}>
-				{...popoverProps}
-				ref={popoverRef}
-			>
 				<DismissButton onDismiss={state.close} />
 				{children}
 				<DismissButton onDismiss={state.close} />
@@ -65,34 +69,36 @@ export function Select<T extends object>({
 	const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
 		props,
 		state,
-		ref
+		ref,
 	);
 
 	return (
-		<div  style={{ display: 'inline-block' }}>
+		<div style={{ display: "inline-block" }}>
 			<div {...labelProps} class={"visually-hidden"}>
 				Post sort order
 			</div>
-      <HiddenSelect
+			<HiddenSelect
-        isDisabled={props.isDisabled}
+				isDisabled={props.isDisabled}
-        state={state}
+				state={state}
-        triggerRef={ref}
+				triggerRef={ref}
-        label={props.label}
+				label={props.label}
-        name={props.name}
+				name={props.name}
-      />
+			/>
-      {/* onPress and onPressStart isn't working for Preact */}
+			{/* onPress and onPressStart isn't working for Preact */}
 			<Button
 				class={`${className} ${classNameName}`}
 				tag="button"
 				type="button"
-        variant={state.isOpen ? "primary-emphasized" : "primary"}
+				variant={state.isOpen ? "primary-emphasized" : "primary"}
 				ref={ref}
-        onMouseDown={triggerProps.onPressStart as never}
+				onMouseDown={triggerProps.onPressStart as never}
-        onClick={triggerProps.onPress as never}
+				onClick={triggerProps.onPress as never}
 				{...triggerProps}
 				rightIcon={
 					<span
-            style={{transform: state.isOpen ? 'rotate(-180deg)' : 'rotate(0deg)'}}
+						style={{
+							transform: state.isOpen ? "rotate(-180deg)" : "rotate(0deg)",
+						}}
 						className={styles.downSpan}
 						dangerouslySetInnerHTML={{ __html: down }}
 					></span>
@@ -106,9 +112,9 @@ export function Select<T extends object>({
 			</Button>
 
 			{state.isOpen && (
-					<Popover state={state} triggerRef={ref} placement="bottom end">
+				<Popover state={state} triggerRef={ref} placement="bottom end">
-						<ListBox {...menuProps} state={state} />
+					<ListBox {...menuProps} state={state} />
-					</Popover>
+				</Popover>
 			)}
 		</div>
 	);
@@ -145,7 +151,7 @@ export function Option({ item, state }: OptionProps) {
 			key: item.key,
 		},
 		state,
-		ref
+		ref,
 	);
 
 	return (
@@ -154,7 +160,9 @@ export function Option({ item, state }: OptionProps) {
 			ref={ref}
 			class={`${styles.option} ${isSelected ? styles.selected : ""}`}
 		>
-			<span className={`text-style-button-regular ${styles.optionText}`}>{item.rendered}</span>
+			<span className={`text-style-button-regular ${styles.optionText}`}>
+				{item.rendered}
+			</span>
 			{isSelected && (
 				<span
 					className={styles.checkmark}

src/components/subheader/subheader.module.scss

@@ -1,21 +1,21 @@
 :root {
-    --subheader_padding-top: calc(var(--site-spacing) * 2);
+	--subheader_padding-top: calc(var(--site-spacing) * 2);
-    --subheader_padding-bottom: var(--spc-4x);
+	--subheader_padding-bottom: var(--spc-4x);
-    --subheader_gap: var(--spc-4x);
+	--subheader_gap: var(--spc-4x);
 
-    --subheader_label_color: var(--foreground_emphasis-high);
+	--subheader_label_color: var(--foreground_emphasis-high);
 }
 
 .container {
-    padding-top: var(--subheader_padding-top);
+	padding-top: var(--subheader_padding-top);
-    padding-bottom: var(--subheader_padding-bottom);
+	padding-bottom: var(--subheader_padding-bottom);
-    display: flex;
+	display: flex;
-    flex-direction: row;
+	flex-direction: row;
-    align-items: center;
+	align-items: center;
-    gap: var(--subheader_gap);
+	gap: var(--subheader_gap);
 }
 
 .heading {
-    color: var(--subheader_label_color);
+	color: var(--subheader_label_color);
-    margin: 0;
+	margin: 0;
-}
+}

src/components/subheader/subheader.tsx

@@ -3,25 +3,38 @@ import styles from "./subheader.module.scss";
 import { createElement } from "preact";
 
 type SubHeaderProps = PropsWithOptionalChildren<{
-    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+	tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    class?: string;
+	class?: string;
-    style?: string;
+	style?: string;
-    text: string;
+	text: string;
 }>;
 
-export function SubHeader({ tag, children, text, class: className, ...props }: SubHeaderProps) {
+export function SubHeader({
-    const Heading = (props: any) => createElement(tag, {
+	tag,
-        ...props,
+	children,
-    }, props.children);
+	text,
+	class: className,
+	...props
+}: SubHeaderProps) {
+	const Heading = (props: any) =>
+		createElement(
+			tag,
+			{
+				...props,
+			},
+			props.children,
+		);
 
-    return (
+	return (
-        <div className={styles.container}>
+		<div className={styles.container}>
-            <Heading className={[
+			<Heading
-                styles.heading,
+				className={[styles.heading, "text-style-headline-4", className]
-                "text-style-headline-4",
+					.filter((c) => !!c)
-                className
+					.join(" ")}
-            ].filter(c => !!c).join(" ")}>{text}</Heading>
+			>
-            {children}
+				{text}
-        </div>
+			</Heading>
-    );
+			{children}
+		</div>
+	);
 }

src/env.d.ts

@@ -1 +1 @@
-/// <reference types="@astrojs/image/client" />
+/// <reference types="@astrojs/image/client" />

src/global.scss

@@ -68,7 +68,8 @@ body {
 	margin: 0;
 	padding: 0;
 	color: var(--foreground_emphasis-high);
-	transition: color $animStyle $animSpeed,
+	transition:
+		color $animStyle $animSpeed,
 		background-color $animStyle $animSpeed;
 }
 
@@ -94,7 +95,8 @@ body {
 	height: auto;
 }
 
-img.circleImg, .circleImg img {
+img.circleImg,
+.circleImg img {
 	flex-shrink: 0;
 	flex-grow: 0;
 	border-radius: 50%;

src/pages/rss.xml.ts

@@ -5,7 +5,7 @@ import { ExtendedPostInfo } from "types/index";
 
 const postImportResult = import.meta.glob<MarkdownInstance<ExtendedPostInfo>>(
 	"../../content/blog/**/*.md",
-	{ eager: true }
+	{ eager: true },
 );
 const posts = Object.values(postImportResult);
 
@@ -30,7 +30,7 @@ export const get = () => {
 		.sort((a, b) =>
 			new Date(b.frontmatter.published) > new Date(a.frontmatter.published)
 				? 1
-				: -1
+				: -1,
 		)
 		.forEach((post) => {
 			const nodeUrl = `${siteUrl}/posts/${post.frontmatter.slug}`;

src/styles/markdown/blockquote.scss

@@ -8,12 +8,14 @@ blockquote:not([class]) {
 	position: relative;
 	margin: var(--site-spacing) 0;
 	padding: 0;
-	padding-left: calc(var(--blockquote_border-width) + var(--blockquote_padding-start));
+	padding-left: calc(
+		var(--blockquote_border-width) + var(--blockquote_padding-start)
+	);
 
 	color: var(--foreground_emphasis-medium);
 
 	&::before {
-		content: '';
+		content: "";
 		display: block;
 		position: absolute;
 		left: 0;

src/styles/markdown/codeblock.scss

@@ -4,7 +4,10 @@
 :root {
 	--code-block_padding: var(--spc-2x);
 	--code-block_corner-radius: var(--corner-radius_l);
-	--code-block_inner-corner-radius: calc(var(--code-block_corner-radius) - var(--code-block_padding) - var(--code-block_border_width));
+	--code-block_inner-corner-radius: calc(
+		var(--code-block_corner-radius) - var(--code-block_padding) -
+			var(--code-block_border_width)
+	);
 
 	--code-block_header_gap: var(--spc-4x);
 	--code-block_header_min-height: var(--min-target-size_xl);
@@ -30,7 +33,9 @@ pre.shiki {
 
 		color: var(--code-block_header_title_color);
 
-		min-height: calc(var(--code-block_header_min-height) - 2*var(--code-block_padding));
+		min-height: calc(
+			var(--code-block_header_min-height) - 2 * var(--code-block_padding)
+		);
 		padding: 0 var(--code-block_header_title_margin-horizontal);
 
 		display: flex;

src/styles/markdown/embed.scss

@@ -5,13 +5,17 @@
 	--embed_header_gap: var(--spc-2x);
 	--embed_corner-radius: var(--corner-radius_l);
 
-	--embed-iframe_margin: calc( var(--embed_header_padding) / 2 );
+	--embed-iframe_margin: calc(var(--embed_header_padding) / 2);
-	--embed-iframe_corner-radius: calc( var(--embed_corner-radius) - var(--embed-iframe_margin) );
+	--embed-iframe_corner-radius: calc(
+		var(--embed_corner-radius) - var(--embed-iframe_margin)
+	);
 	--embed-iframe_border-width: var(--border-width_s);
 
 	--embed_background-color: var(--surface_primary_emphasis-none);
 	--embed_favicon_container_size: var(--min-target-size_m);
-	--embed_favicon_container_background-color: var(--surface_primary_emphasis-low);
+	--embed_favicon_container_background-color: var(
+		--surface_primary_emphasis-low
+	);
 	--embed_favicon_icon-size: var(--icon-size_regular);
 	--embed_favicon_icon_color: var(--primary_on-variant);
 	--embed_iframe_background-color: var(--surface_primary_emphasis-low);
@@ -41,12 +45,16 @@
 			width: var(--embed_favicon_container_size);
 			height: var(--embed_favicon_container_size);
 			flex-shrink: 0;
-			padding: calc((var(--embed_favicon_container_size) - var(--embed_favicon_icon-size)) / 2);
+			padding: calc(
+				(var(--embed_favicon_container_size) - var(--embed_favicon_icon-size)) /
+					2
+			);
 
 			background-color: var(--embed_favicon_container_background-color);
 			border-radius: 50%;
 
-			& picture, & img {
+			& picture,
+			& img {
 				width: var(--embed_favicon_icon-size);
 				height: var(--embed_favicon_icon-size);
 			}
@@ -56,12 +64,12 @@
 			flex: 1;
 			min-width: 0;
 
-			&> p {
+			& > p {
 				@extend .text-style-body-medium-bold;
 				margin: 0;
 			}
 
-			&> a {
+			& > a {
 				@extend .text-style-body-small-bold;
 				white-space: nowrap;
 				overflow: hidden;
@@ -89,7 +97,8 @@
 
 	&__placeholder {
 		background-color: var(--embed_iframe_background-color);
-		border: var(--embed-iframe_border-width) solid var(--embed_iframe_border_color);
+		border: var(--embed-iframe_border-width) solid
+			var(--embed_iframe_border_color);
 		border-radius: var(--embed-iframe_corner-radius);
 		margin: var(--embed-iframe_margin);
 
@@ -99,7 +108,7 @@
 			margin-top: 0;
 		}
 
-		&> .button {
+		& > .button {
 			position: absolute;
 			top: 50%;
 			left: 50%;
@@ -107,10 +116,11 @@
 		}
 	}
 
-	&> iframe {
+	& > iframe {
 		box-sizing: border-box;
 		display: block;
-		border: var(--embed-iframe_border-width) solid var(--embed_iframe_border_color);
+		border: var(--embed-iframe_border-width) solid
+			var(--embed_iframe_border_color);
 		border-radius: var(--embed-iframe_corner-radius);
 		margin: var(--embed-iframe_margin);
 		overflow: hidden;

src/styles/markdown/hints.scss

@@ -9,7 +9,9 @@
 	--hint-container_corner-radius_expanded: var(--corner-radius_m);
 
 	// We calculate the content radius off of two tokens so they update accordingly if any of the values is changed
-	--hint-content_corner-radius: calc(var(--hint-container_corner-radius_expanded) - var(--hint-container_padding));
+	--hint-content_corner-radius: calc(
+		var(--hint-container_corner-radius_expanded) - var(--hint-container_padding)
+	);
 	--hint-content_background-color: var(--background_primary);
 	--hint-content_padding: var(--spc-4x);
 
@@ -20,8 +22,12 @@
 	--hint-header_gap: var(--spc-2x);
 
 	--hint-container_background-color: var(--surface_primary_emphasis-low);
-	--hint-container_background-color_hovered: var(--surface_primary_emphasis-medium);
+	--hint-container_background-color_hovered: var(
-	--hint-container_background-color_pressed: var(--surface_primary_emphasis-high);
+		--surface_primary_emphasis-medium
+	);
+	--hint-container_background-color_pressed: var(
+		--surface_primary_emphasis-high
+	);
 	--hint-container_background-color_focused: var(--background_focus);
 
 	--hint-container_foreground-color: var(--foreground_emphasis-high);
@@ -41,7 +47,7 @@
 .hint {
 	margin: var(--site-spacing) 0;
 
-	&> .hint__container {
+	& > .hint__container {
 		display: inline-block;
 		overflow: hidden;
 		max-width: 100%;
@@ -55,9 +61,9 @@
 			transform: rotateZ(180deg);
 		}
 
-		&> .hint__title {
+		& > .hint__title {
 			&::marker {
-				content: '';
+				content: "";
 			}
 
 			display: flex;
@@ -74,7 +80,7 @@
 			outline: none !important;
 		}
 
-		&> .hint__content {
+		& > .hint__content {
 			margin: var(--hint-container_padding);
 			background-color: var(--hint-content_background-color);
 			border-radius: var(--hint-content_corner-radius);
@@ -82,12 +88,12 @@
 
 			@include transition(background-color);
 
-			&> *:first-child {
+			& > *:first-child {
 				margin-top: 0;
 				padding-top: 0;
 			}
 
-			&> *:last-child {
+			& > *:last-child {
 				margin-bottom: 0;
 				padding-bottom: 0;
 			}
@@ -107,7 +113,8 @@
 		@supports selector(:has(*)) {
 			&:has(.hint__title:focus-visible) {
 				background-color: var(--hint-container_background-color_focused);
-				outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color);
+				outline: var(--hint_focus-outline_width) solid
+					var(--hint_focus-outline_color);
 			}
 		}
 
@@ -117,7 +124,8 @@
 		@supports not selector(:has(*)) {
 			&:focus-within {
 				background-color: var(--hint-container_background-color_focused);
-				outline: var(--hint_focus-outline_width) solid var(--hint_focus-outline_color);
+				outline: var(--hint_focus-outline_width) solid
+					var(--hint_focus-outline_color);
 			}
 		}
 	}

src/styles/markdown/lists.scss

@@ -8,7 +8,10 @@
 
 	// should match public/icons/list-bowtie-*.svg
 	--list_bowtie_size: 16px;
-	--list_bowtie_top: calc((var(--list_item_padding-vertical) / 2) + ((var(--p_medium_line-height) - var(--list_bowtie_size)) / 2))
+	--list_bowtie_top: calc(
+		(var(--list_item_padding-vertical) / 2) +
+			((var(--p_medium_line-height) - var(--list_bowtie_size)) / 2)
+	);
 }
 
 .post-body ul:not([class]) {
@@ -17,16 +20,20 @@
 	padding: calc(var(--list_item_padding-vertical) / 2) 0;
 	padding-left: var(--list_padding-start);
 
-	&> li {
+	& > li {
-		background: url('/icons/list-bowtie-light.svg') no-repeat 0 var(--list_bowtie_top);
+		background: url("/icons/list-bowtie-light.svg") no-repeat 0
+			var(--list_bowtie_top);
 		padding: calc(var(--list_item_padding-vertical) / 2) 0;
-		padding-left: calc(var(--list_bowtie_size) + var(--list_item_padding-start));
+		padding-left: calc(
+			var(--list_bowtie_size) + var(--list_item_padding-start)
+		);
 
 		@include darkTheme {
-			background: url('/icons/list-bowtie-dark.svg') no-repeat 0 var(--list_bowtie_top);
+			background: url("/icons/list-bowtie-dark.svg") no-repeat 0
+				var(--list_bowtie_top);
 		}
 
-		&> *:first-child {
+		& > *:first-child {
 			margin-top: 0;
 		}
 	}

src/styles/markdown/table.scss

@@ -7,7 +7,9 @@
 
 	--table_header_padding: var(--spc-3x);
 	--table_grid-wrapper_cell-gap: var(--border-width_s);
-	--table_grid-wrapper_corner-radius: calc(var(--table_corner-radius) - var(--table_padding-horizontal));
+	--table_grid-wrapper_corner-radius: calc(
+		var(--table_corner-radius) - var(--table_padding-horizontal)
+	);
 	--table_cell_padding-horizontal: var(--spc-3x);
 	--table_cell_padding-vertical: var(--spc-2x);
 
@@ -101,7 +103,7 @@ thead {
 		position: relative;
 
 		&:not(:last-child)::after {
-			content: '';
+			content: "";
 			display: block;
 			position: absolute;
 			top: 50%;
@@ -121,17 +123,31 @@ tbody {
 	border-radius: var(--table_grid-wrapper_corner-radius);
 
 	td {
-		padding: var(--table_cell_padding-vertical) var(--table_cell_padding-horizontal);
+		padding: var(--table_cell_padding-vertical)
-		background: linear-gradient(var(--table_cell_background-color), var(--table_cell_background-color)),
+			var(--table_cell_padding-horizontal);
-			linear-gradient(var(--table_grid-wrapper_background-color), var(--table_grid-wrapper_background-color));
+		background: linear-gradient(
+				var(--table_cell_background-color),
+				var(--table_cell_background-color)
+			),
+			linear-gradient(
+				var(--table_grid-wrapper_background-color),
+				var(--table_grid-wrapper_background-color)
+			);
 
-		border: var(--table_grid-wrapper_cell-gap) solid var(--table_grid-wrapper_background-color);
+		border: var(--table_grid-wrapper_cell-gap) solid
+			var(--table_grid-wrapper_background-color);
 	}
 
 	tr:nth-child(even) {
 		td {
-			background: linear-gradient(var(--table_cell-alternate_background-color), var(--table_cell-alternate_background-color)),
+			background: linear-gradient(
-				linear-gradient(var(--table_grid-wrapper_background-color), var(--table_grid-wrapper_background-color));
+					var(--table_cell-alternate_background-color),
+					var(--table_cell-alternate_background-color)
+				),
+				linear-gradient(
+					var(--table_grid-wrapper_background-color),
+					var(--table_grid-wrapper_background-color)
+				);
 		}
 	}
 
@@ -152,6 +168,7 @@ tbody {
 	}
 }
 
-th > code, td > code {
+th > code,
+td > code {
 	word-break: break-word;
 }

src/styles/markdown/tabs.scss

@@ -50,7 +50,8 @@
 	user-select: none;
 }
 
-.tabs__tab[aria-selected="true"], .tabs__tab[aria-selected=""] {
+.tabs__tab[aria-selected="true"],
+.tabs__tab[aria-selected=""] {
 	background-color: var(--tab_background-color_selected);
 	color: var(--tab_foreground-color_selected);
 }
@@ -76,7 +77,8 @@
 	background-color: var(--tabbed-wrapper_background-color);
 }
 
-.tabs__tab-panel[aria-hidden="true"], .tabs__tab-panel[aria-hidden=""] {
+.tabs__tab-panel[aria-hidden="true"],
+.tabs__tab-panel[aria-hidden=""] {
 	display: none;
 }
 
@@ -111,7 +113,8 @@
 			grid-row-start: 2;
 			grid-column: 1 / 3;
 
-			&[aria-hidden="true"], &[aria-hidden=""] {
+			&[aria-hidden="true"],
+			&[aria-hidden=""] {
 				display: block;
 				visibility: hidden;
 			}

src/styles/markdown/tooltips.scss

@@ -31,14 +31,14 @@
 		align-items: center;
 		gap: var(--tooltip_icon-margin);
 
-		&> svg {
+		& > svg {
 			padding: var(--icon-size-dense-padding);
 			width: var(--tooltip_icon-size);
 			height: var(--tooltip_icon-size);
 			color: var(--tooltip_icon-color);
 		}
 
-		&> p {
+		& > p {
 			@extend .text-style-body-medium-bold;
 			margin: 0;
 		}
@@ -48,18 +48,16 @@
 		padding-left: calc(var(--tooltip_icon-size) + var(--tooltip_icon-margin));
 		margin-top: var(--tooltip_desc-gap);
 
-		&> * {
+		& > * {
 			@extend .text-style-body-small;
 		}
 
-		&> *:first-child {
+		& > *:first-child {
 			margin-top: 0;
 		}
 
-		&> *:last-child {
+		& > *:last-child {
 			margin-bottom: 0;
 		}
 	}
 }
-
-

src/styles/post-body.scss

@@ -57,16 +57,21 @@
 
 	color: var(--foreground_emphasis-high);
 
-	h1, .text-style-headline-1,
+	h1,
-	h2, .text-style-headline-2,
+	.text-style-headline-1,
-	h3, .text-style-headline-3,
+	h2,
-	h4, .text-style-headline-4,
+	.text-style-headline-2,
-	h5, .text-style-headline-5,
+	h3,
-	h6, .text-style-headline-6 {
+	.text-style-headline-3,
+	h4,
+	.text-style-headline-4,
+	h5,
+	.text-style-headline-5,
+	h6,
+	.text-style-headline-6 {
 		color: var(--foreground_emphasis-high);
 	}
 
-
 	// Fix autolink-headings anchors positioning
 	.anchor {
 		line-height: 1;
@@ -135,7 +140,8 @@
 		background-color: #eee;
 		border-radius: 3px;
 		border: 1px solid #b4b4b4;
-		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+		box-shadow:
+			0 1px 1px rgba(0, 0, 0, 0.2),
 			0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
 		color: #333;
 		display: inline-block;

src/styles/text-styles.scss

@@ -1,28 +1,32 @@
 @import "src/tokens/index";
 
 @font-face {
-	font-family: 'Figtree';
+	font-family: "Figtree";
-	src: url('/fonts/Figtree/Figtree-VariableFont_wght.ttf') format("truetype-variations");
+	src: url("/fonts/Figtree/Figtree-VariableFont_wght.ttf")
+		format("truetype-variations");
 	font-weight: 1 999;
 }
 
 @font-face {
-	font-family: 'Figtree';
+	font-family: "Figtree";
 	font-style: italic;
-	src: url('/fonts/Figtree/Figtree-Italic-VariableFont_wght.ttf') format("truetype-variations");
+	src: url("/fonts/Figtree/Figtree-Italic-VariableFont_wght.ttf")
+		format("truetype-variations");
 	font-weight: 1 999;
 }
 
 @font-face {
-	font-family: 'Roboto Mono';
+	font-family: "Roboto Mono";
-	src: url('/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format("truetype-variations");
+	src: url("/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf")
+		format("truetype-variations");
 	font-weight: 1 999;
 }
 
 @font-face {
-	font-family: 'Roboto Mono';
+	font-family: "Roboto Mono";
 	font-style: italic;
-	src: url('/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf') format("truetype-variations");
+	src: url("/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf")
+		format("truetype-variations");
 	font-weight: 1 999;
 }
 
@@ -35,49 +39,56 @@
 	font-family: var(--uu-font-family);
 }
 
-h1, .text-style-headline-1 {
+h1,
+.text-style-headline-1 {
 	font-family: var(--uu-font-family);
 	font-size: var(--h1_font-size);
 	font-weight: var(--weight_black);
 	line-height: var(--h1_line-height);
 }
 
-h2, .text-style-headline-2 {
+h2,
+.text-style-headline-2 {
 	font-family: var(--uu-font-family);
 	font-size: var(--h2_font-size);
 	font-weight: var(--weight_extrabold);
 	line-height: var(--h2_line-height);
 }
 
-h3, .text-style-headline-3 {
+h3,
+.text-style-headline-3 {
 	font-family: var(--uu-font-family);
 	font-size: var(--h3_font-size);
 	font-weight: var(--weight_bold);
 	line-height: var(--h3_line-height);
 }
 
-h4, .text-style-headline-4 {
+h4,
+.text-style-headline-4 {
 	font-family: var(--uu-font-family);
 	font-size: var(--h4_font-size);
 	font-weight: var(--weight_bold);
 	line-height: var(--h4_line-height);
 }
 
-h5, .text-style-headline-5 {
+h5,
+.text-style-headline-5 {
 	font-family: var(--uu-font-family);
 	font-size: var(--h5_font-size);
 	font-weight: var(--weight_bold);
 	line-height: var(--h5_line-height);
 }
 
-h6, .text-style-headline-6 {
+h6,
+.text-style-headline-6 {
 	font-family: var(--uu-font-family);
 	font-size: var(--h6_font-size);
 	font-weight: var(--weight_bold);
 	line-height: var(--h6_line-height);
 }
 
-p, .text-style-body-large {
+p,
+.text-style-body-large {
 	font-family: var(--uu-font-family);
 	font-size: var(--p_large_font-size);
 	font-weight: var(--weight_regular);
@@ -124,7 +135,8 @@ p, .text-style-body-large {
 	margin: 0;
 }
 
-button, .text-style-button-regular {
+button,
+.text-style-button-regular {
 	font-family: var(--uu-font-family);
 	font-size: var(--button_regular_font-size);
 	font-weight: var(--weight_semibold);
@@ -132,7 +144,9 @@ button, .text-style-button-regular {
 	margin: 0;
 }
 
-pre, code, .text-style-code {
+pre,
+code,
+.text-style-code {
 	@extend .text-style-body-large;
 	font-family: var(--uu-font-family-code);
 }

src/styles/variables/border_widths.scss

@@ -1,7 +1,7 @@
-:root {
+:root {
-  --border-width_s: 1px;
+	--border-width_s: 1px;
-  --border-width_m: 2px;
+	--border-width_m: 2px;
-  --border-width_l: 4px;
+	--border-width_l: 4px;
-  --border-width_xl: 8px;
+	--border-width_xl: 8px;
-  --border-width_focus: var(--border-width_l);
+	--border-width_focus: var(--border-width_l);
-}
+}

src/styles/variables/corner_radius.scss

@@ -1,7 +1,7 @@
-:root {
+:root {
-  --corner-radius_s: 8px;
+	--corner-radius_s: 8px;
-  --corner-radius_m: 16px;
+	--corner-radius_m: 16px;
-  --corner-radius_l: 24px;
+	--corner-radius_l: 24px;
-  --corner-radius_xl: 32px;
+	--corner-radius_xl: 32px;
-  --corner-radius_circular: 9999px;
+	--corner-radius_circular: 9999px;
-}
+}

src/styles/variables/fonts.scss

@@ -1,108 +1,106 @@
 @import "src/tokens/index";
 
 :root {
-  --uu-font-family: "Figtree", "Arial", "Roboto", sans-serif;
+	--uu-font-family: "Figtree", "Arial", "Roboto", sans-serif;
-  --uu-font-family-code: "Roboto Mono", monospace;
+	--uu-font-family-code: "Roboto Mono", monospace;
-  --weight_regular: 400;
+	--weight_regular: 400;
-  --weight_semibold: 600;
+	--weight_semibold: 600;
-  --weight_bold: 700;
+	--weight_bold: 700;
-  --weight_extrabold: 800;
+	--weight_extrabold: 800;
-  --weight_black: 900;
+	--weight_black: 900;
 
-  --h1_font-size: #{pxToRem(32)};
+	--h1_font-size: #{pxToRem(32)};
-  --h1_line-height: 100%;
+	--h1_line-height: 100%;
-  --h1_block-padding-top: #{pxToRem(16)};
+	--h1_block-padding-top: #{pxToRem(16)};
-  --h1_block-padding-bottom: #{pxToRem(16)};
+	--h1_block-padding-bottom: #{pxToRem(16)};
 
-  --h2_font-size: #{pxToRem(28)};
+	--h2_font-size: #{pxToRem(28)};
-  --h2_line-height: #{pxToRem(32)};
+	--h2_line-height: #{pxToRem(32)};
-  --h2_block-padding-top: #{pxToRem(16)};
+	--h2_block-padding-top: #{pxToRem(16)};
-  --h2_block-padding-bottom: #{pxToRem(8)};
+	--h2_block-padding-bottom: #{pxToRem(8)};
 
-  --h3_font-size: #{pxToRem(24)};
+	--h3_font-size: #{pxToRem(24)};
-  --h3_line-height: #{pxToRem(28)};
+	--h3_line-height: #{pxToRem(28)};
-  --h3_block-padding-top: #{pxToRem(16)};
+	--h3_block-padding-top: #{pxToRem(16)};
-  --h3_block-padding-bottom: #{pxToRem(4)};
+	--h3_block-padding-bottom: #{pxToRem(4)};
 
-  --h4_font-size: #{pxToRem(22)};
+	--h4_font-size: #{pxToRem(22)};
-  --h4_line-height: #{pxToRem(24)};
+	--h4_line-height: #{pxToRem(24)};
-  --h4_block-padding-top: #{pxToRem(16)};
+	--h4_block-padding-top: #{pxToRem(16)};
-  --h4_block-padding-bottom: #{pxToRem(0)};
+	--h4_block-padding-bottom: #{pxToRem(0)};
 
-  --h5_font-size: #{pxToRem(20)};
+	--h5_font-size: #{pxToRem(20)};
-  --h5_line-height: #{pxToRem(24)};
+	--h5_line-height: #{pxToRem(24)};
-  --h5_block-padding-top: #{pxToRem(16)};
+	--h5_block-padding-top: #{pxToRem(16)};
-  --h5_block-padding-bottom: #{pxToRem(0)};
+	--h5_block-padding-bottom: #{pxToRem(0)};
 
-  --h6_font-size: #{pxToRem(18)};
+	--h6_font-size: #{pxToRem(18)};
-  --h6_line-height: #{pxToRem(20)};
+	--h6_line-height: #{pxToRem(20)};
-  --h6_block-padding-top: #{pxToRem(16)};
+	--h6_block-padding-top: #{pxToRem(16)};
-  --h6_block-padding-bottom: #{pxToRem(0)};
+	--h6_block-padding-bottom: #{pxToRem(0)};
 
-  --p_block-padding-vertical: #{pxToRem(16)};
+	--p_block-padding-vertical: #{pxToRem(16)};
 
-  --p_large_font-size: #{pxToRem(16)};
+	--p_large_font-size: #{pxToRem(16)};
-  --p_large_line-height: #{pxToRem(20)};
+	--p_large_line-height: #{pxToRem(20)};
 
-  --p_medium_font-size: #{pxToRem(14)};
+	--p_medium_font-size: #{pxToRem(14)};
-  --p_medium_line-height: #{pxToRem(20)};
+	--p_medium_line-height: #{pxToRem(20)};
 
-  --p_small_font-size: #{pxToRem(12)};
+	--p_small_font-size: #{pxToRem(12)};
-  --p_small_line-height: #{pxToRem(16)};
+	--p_small_line-height: #{pxToRem(16)};
 
-  --button_block-padding-vertical: var(--spc-3x);
+	--button_block-padding-vertical: var(--spc-3x);
 
+	--button_large_font-size: #{pxToRem(16)};
+	--button_large_line-height: #{pxToRem(20)};
 
-  --button_large_font-size: #{pxToRem(16)};
+	--button_regular_font-size: #{pxToRem(14)};
-  --button_large_line-height: #{pxToRem(20)};
+	--button_regular_line-height: #{pxToRem(20)};
 
-  --button_regular_font-size: #{pxToRem(14)};
+	@include from($desktopSmall) {
-  --button_regular_line-height: #{pxToRem(20)};
+		--h1_font-size: #{pxToRem(48)};
+		--h1_line-height: 100%;
+		--h1_block-padding-top: #{pxToRem(24)};
+		--h1_block-padding-bottom: #{pxToRem(24)};
 
-  @include from($desktopSmall) {
+		--h2_font-size: #{pxToRem(40)};
+		--h2_line-height: 100%;
+		--h2_block-padding-top: #{pxToRem(24)};
+		--h2_block-padding-bottom: #{pxToRem(16)};
 
-    --h1_font-size: #{pxToRem(48)};
+		--h3_font-size: #{pxToRem(32)};
-    --h1_line-height: 100%;
+		--h3_line-height: #{pxToRem(36)};
-    --h1_block-padding-top: #{pxToRem(24)};
+		--h3_block-padding-top: #{pxToRem(24)};
-    --h1_block-padding-bottom: #{pxToRem(24)};
+		--h3_block-padding-bottom: #{pxToRem(8)};
 
-    --h2_font-size: #{pxToRem(40)};
+		--h4_font-size: #{pxToRem(28)};
-    --h2_line-height: 100%;
+		--h4_line-height: #{pxToRem(32)};
-    --h2_block-padding-top: #{pxToRem(24)};
+		--h4_block-padding-top: #{pxToRem(24)};
-    --h2_block-padding-bottom: #{pxToRem(16)};
+		--h4_block-padding-bottom: #{pxToRem(8)};
 
-    --h3_font-size: #{pxToRem(32)};
+		--h5_font-size: #{pxToRem(24)};
-    --h3_line-height: #{pxToRem(36)};
+		--h5_line-height: #{pxToRem(28)};
-    --h3_block-padding-top: #{pxToRem(24)};
+		--h5_block-padding-top: #{pxToRem(24)};
-    --h3_block-padding-bottom: #{pxToRem(8)};
+		--h5_block-padding-bottom: #{pxToRem(8)};
 
-    --h4_font-size: #{pxToRem(28)};
+		--h6_font-size: #{pxToRem(20)};
-    --h4_line-height: #{pxToRem(32)};
+		--h6_line-height: #{pxToRem(24)};
-    --h4_block-padding-top: #{pxToRem(24)};
+		--h6_block-padding-top: #{pxToRem(24)};
-    --h4_block-padding-bottom: #{pxToRem(8)};
+		--h6_block-padding-bottom: #{pxToRem(8)};
 
-    --h5_font-size: #{pxToRem(24)};
+		--p_block-padding-vertical: #{pxToRem(24)};
-    --h5_line-height: #{pxToRem(28)};
-    --h5_block-padding-top: #{pxToRem(24)};
-    --h5_block-padding-bottom: #{pxToRem(8)};
 
-    --h6_font-size: #{pxToRem(20)};
+		--p_large_font-size: #{pxToRem(18)};
-    --h6_line-height: #{pxToRem(24)};
+		--p_large_line-height: #{pxToRem(24)};
-    --h6_block-padding-top: #{pxToRem(24)};
-    --h6_block-padding-bottom: #{pxToRem(8)};
 
-    --p_block-padding-vertical: #{pxToRem(24)};
+		--p_medium_font-size: #{pxToRem(16)};
+		--p_medium_line-height: #{pxToRem(20)};
 
-    --p_large_font-size: #{pxToRem(18)};
+		--p_small_font-size: #{pxToRem(14)};
-    --p_large_line-height: #{pxToRem(24)};
+		--p_small_line-height: #{pxToRem(20)};
 
-    --p_medium_font-size: #{pxToRem(16)};
+		--button_large_font-size: #{pxToRem(18)};
-    --p_medium_line-height: #{pxToRem(20)};
+		--button_large_line-height: #{pxToRem(24)};
-
+	}
-    --p_small_font-size: #{pxToRem(14)};
-    --p_small_line-height: #{pxToRem(20)};
-
-    --button_large_font-size: #{pxToRem(18)};
-    --button_large_line-height: #{pxToRem(24)};
-  }
 }

src/styles/variables/icons.scss

@@ -1,15 +1,15 @@
-:root {
+:root {
-  /*
+	/*
-  ** Default size for icons.
+  ** Default size for icons.
-  */
+  */
-
+
-  --icon-size_regular: 1.5rem;
+	--icon-size_regular: 1.5rem;
-
+
-  /*
+	/*
-  ** Size for dense layouts with small text sizes.
+  ** Size for dense layouts with small text sizes.
-  ** The fixed dimension and the padding serve to
+  ** The fixed dimension and the padding serve to
-  ** automatically resize the icon to the desired 18pt.
+  ** automatically resize the icon to the desired 18pt.
-  */
+  */
-  --icon-size_dense: 1.25rem;
+	--icon-size_dense: 1.25rem;
-  --icon-size-dense-padding: 0.0625rem;
+	--icon-size-dense-padding: 0.0625rem;
-};
+}

src/styles/variables/max_widths.scss

@@ -1,7 +1,7 @@
-:root {
+:root {
-  --max-width_xs: 480px;
+	--max-width_xs: 480px;
-  --max-width_s: 640px;
+	--max-width_s: 640px;
-  --max-width_m: 960px;
+	--max-width_m: 960px;
-  --max-width_l: 1280px;
+	--max-width_l: 1280px;
-  --max-width_xl: 1920px;
+	--max-width_xl: 1920px;
-};
+}

src/styles/variables/shadows.scss

@@ -1,6 +1,10 @@
-:root {
+:root {
-  --shadow_sticker_light: 0px 1px 1.5px rgba(0, 0, 0, 0.24), 0px 0.5px 0px rgba(0, 0, 0, 0.12);
+	--shadow_sticker_light: 0px 1px 1.5px rgba(0, 0, 0, 0.24),
-  --shadow_popup_light: 0px 8px 16px rgba(79, 97, 109, 0.24), 0px 4px 6px rgba(79, 97, 109, 0.24);
+		0px 0.5px 0px rgba(0, 0, 0, 0.12);
-  --shadow_sticker_dark: 0px 1px 1.5px rgba(0, 0, 0, 0.72), 0px 0.5px 0px rgba(0, 0, 0, 0.36);
+	--shadow_popup_light: 0px 8px 16px rgba(79, 97, 109, 0.24),
-  --shadow_popup_dark: 0px 8px 16px rgba(0, 0, 0, 0.72), 0px 4px 6px rgba(0, 0, 0, 0.72);
+		0px 4px 6px rgba(79, 97, 109, 0.24);
-}
+	--shadow_sticker_dark: 0px 1px 1.5px rgba(0, 0, 0, 0.72),
+		0px 0.5px 0px rgba(0, 0, 0, 0.36);
+	--shadow_popup_dark: 0px 8px 16px rgba(0, 0, 0, 0.72),
+		0px 4px 6px rgba(0, 0, 0, 0.72);
+}

src/styles/variables/spacing.scss

@@ -20,11 +20,11 @@
 	--chip-gap: var(--spc-2x);
 	--site-spacing: var(--spc-4x);
 
-  @include from($tabletLarge) {
+	@include from($tabletLarge) {
-    --site-spacing: var(--spc-6x);
+		--site-spacing: var(--spc-6x);
-  }
+	}
 
-  @include from($desktopSmall) {
+	@include from($desktopSmall) {
-    --site-spacing: var(--spc-8x);
+		--site-spacing: var(--spc-8x);
-  }
+	}
 }

src/styles/variables/target_sizes.scss

@@ -1,6 +1,6 @@
-:root {
+:root {
-  --min-target-size_s: 32px;
+	--min-target-size_s: 32px;
-  --min-target-size_m: 40px;
+	--min-target-size_m: 40px;
-  --min-target-size_l: 48px;
+	--min-target-size_l: 48px;
-  --min-target-size_xl: 56px;
+	--min-target-size_xl: 56px;
-}
+}

src/tokens/_breakpoints.scss

@@ -1,18 +1,18 @@
-// Update breakpoints.ts when updating this file
+// Update breakpoints.ts when updating this file
-$desktopLarge: 1920px;
+$desktopLarge: 1920px;
-$desktopSmall: 1280px;
+$desktopSmall: 1280px;
-$tabletLarge: 960px;
+$tabletLarge: 960px;
-$tabletSmall: 640px;
+$tabletSmall: 640px;
-$mobile: 400px;
+$mobile: 400px;
-
+
-@mixin until($breakpoint) {
+@mixin until($breakpoint) {
-  @media screen and (max-width: $breakpoint) {
+	@media screen and (max-width: $breakpoint) {
-    @content;
+		@content;
-  }
+	}
-}
+}
-
+
-@mixin from($breakpoint) {
+@mixin from($breakpoint) {
-  @media screen and (min-width: $breakpoint) {
+	@media screen and (min-width: $breakpoint) {
-    @content;
+		@content;
-  }
+	}
-}
+}

src/tokens/_index.scss

@@ -1,3 +1,3 @@
-@import "./_breakpoints.scss";
+@import "./_breakpoints.scss";
-@import "./_utils.scss";
+@import "./_utils.scss";
-@import "./_vars.scss";
+@import "./_vars.scss";

src/utils/api.ts

@@ -8,16 +8,16 @@ export function getPostsByLang(language: Languages): PostInfo[] {
 
 export function getPostsByUnicorn(
 	authorId: string,
-	language: Languages
+	language: Languages,
 ): PostInfo[] {
 	return getPostsByLang(language).filter((post) =>
-		post.authors.find((postAuthor) => postAuthor === authorId)
+		post.authors.find((postAuthor) => postAuthor === authorId),
 	);
 }
 
 export function getPostsByCollection(
 	collection: string,
-	language: Languages
+	language: Languages,
 ): PostInfo[] {
 	return getPostsByLang(language)
 		.filter((post) => post.collection === collection)

src/utils/data.ts

@@ -48,12 +48,12 @@ const fullUnicorns: UnicornInfo[] = unicornsRaw.map((unicorn) => {
 	 */
 	const relativeServerPath = getFullRelativePath(
 		"/content/data/",
-		unicorn.profileImg
+		unicorn.profileImg,
 	);
 	const profileImgSize = getImageSize(
 		unicorn.profileImg,
 		dataDirectory,
-		dataDirectory
+		dataDirectory,
 	);
 
 	// Mutation go BRR
@@ -68,7 +68,7 @@ const fullUnicorns: UnicornInfo[] = unicornsRaw.map((unicorn) => {
 	};
 
 	newUnicorn.rolesMeta = unicorn.roles.map(
-		(role) => rolesRaw.find((rRole) => rRole.id === role)! as RolesEnum
+		(role) => rolesRaw.find((rRole) => rRole.id === role)! as RolesEnum,
 	);
 
 	// normalize social links - if a URL or "@name" is entered, only preserve the last part
@@ -99,7 +99,7 @@ function getCollections(): CollectionInfo[] {
 		return files.map((file, i): CollectionInfo => {
 			const fileContents = fs.readFileSync(
 				join(collectionsDirectory, slug, file),
-				"utf8"
+				"utf8",
 			);
 
 			const frontmatter = matter(fileContents).data as RawCollectionInfo;
@@ -107,7 +107,7 @@ function getCollections(): CollectionInfo[] {
 			const coverImgSize = getImageSize(
 				frontmatter.coverImg,
 				join(collectionsDirectory, slug),
-				join(collectionsDirectory, slug)
+				join(collectionsDirectory, slug),
 			);
 
 			const coverImgMeta = {
@@ -116,13 +116,13 @@ function getCollections(): CollectionInfo[] {
 				relativePath: frontmatter.coverImg,
 				relativeServerPath: getFullRelativePath(
 					`/content/collections/${slug}`,
-					frontmatter.coverImg
+					frontmatter.coverImg,
 				),
 				absoluteFSPath: join(collectionsDirectory, slug, frontmatter.coverImg),
 			};
 
 			const authorsMeta = frontmatter.authors.map((authorId) =>
-				fullUnicorns.find((u) => u.id === authorId)
+				fullUnicorns.find((u) => u.id === authorId),
 			);
 
 			return {
@@ -155,7 +155,7 @@ function getPosts(): Array<PostInfo> {
 		return files.map((file, i): PostInfo => {
 			const fileContents = fs.readFileSync(
 				join(postsDirectory, slug, file),
-				"utf8"
+				"utf8",
 			);
 
 			const frontmatter = matter(fileContents).data as RawPostInfo;
@@ -175,7 +175,7 @@ function getPosts(): Array<PostInfo> {
 				locales,
 				locale: locales[i],
 				authorsMeta: frontmatter.authors.map((authorId) =>
-					fullUnicorns.find((u) => u.id === authorId)
+					fullUnicorns.find((u) => u.id === authorId),
 				),
 				wordCount: (counts.InlineCodeWords || 0) + (counts.WordNode || 0),
 				publishedMeta:

src/utils/get-suggested-articles.ts

@@ -57,13 +57,13 @@ const getOrderRange = (arr: PostInfo[]) => {
 		{
 			largest: null as PostInfo,
 			smallest: null as PostInfo,
-		}
+		},
 	);
 };
 
 export const getSuggestedArticles = (
 	postNode: ExtendedPostInfo,
-	lang: Languages
+	lang: Languages,
 ) => {
 	const suggestedPosts = getPostsByLang(lang);
 
@@ -119,7 +119,7 @@ export const getSuggestedArticles = (
 		}
 		const howManyTagsSimilar = howManySimilarBetween(
 			post.tags,
-			postNode.tags || []
+			postNode.tags || [],
 		);
 		if (howManyTagsSimilar > 0) {
 			similarTags.push({ post, howManyTagsSimilar });

src/utils/get-unicorn-profile-pic-map.ts

@@ -16,7 +16,7 @@ const unicornProfilePicMap = Promise.all(
 			alt: "",
 		})),
 		id: unicorn.id,
-	}))
+	})),
 );
 
 export const getUnicornProfilePicMap = async () => {

src/utils/markdown/file-tree/file-list.tsx

@@ -26,7 +26,7 @@ const FolderIcon = makeSVGIcon(
 	`<svg viewBox="0 0 20 20">
 <path d="M4 3C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H16C17.1046 17 18 16.1046 18 15V8C18 6.89543 17.1046 6 16 6H11L10.0528 4.10557C9.714 3.428 9.02148 3 8.26393 3H4Z"/>
 </svg>
-`
+`,
 );
 
 export interface File {

src/utils/markdown/get-picture-hack.ts

@@ -6,7 +6,7 @@ import {
 import squoosh_service from "../../../node_modules/@astrojs/image/dist/loaders/squoosh.js";
 
 export function getPicture(
-	params: GetPictureParams
+	params: GetPictureParams,
 ): Promise<GetPictureResult> {
 	// HACK: This is a hack that heavily relies on `getImage`'s internals :(
 	globalThis.astroImage = {

src/utils/markdown/hints/hints.tsx

@@ -8,7 +8,7 @@ const chevron_down = await fs.readFile("src/icons/chevron_down.svg", "utf8");
 interface HintProps {
 	title: string;
 	children: Node[];
-};
+}
 
 /** @jsxImportSource hastscript */
 export function Hint({ title, children }: HintProps): Element {
@@ -20,9 +20,7 @@ export function Hint({ title, children }: HintProps): Element {
 					{title}
 				</summary>
 
-				<div class="hint__content">
+				<div class="hint__content">{children}</div>
-					{children}
-				</div>
 			</details>
 		</div>
 	) as never;

src/utils/markdown/iframes/iframe-placeholder.tsx

@@ -16,7 +16,11 @@ export interface IFramePlaceholderProps {
 }
 
 /** @jsxImportSource hastscript */
-export function IFramePlaceholder({ height, width, ...props }: IFramePlaceholderProps): Element {
+export function IFramePlaceholder({
+	height,
+	width,
+	...props
+}: IFramePlaceholderProps): Element {
 	return (
 		<div class="embed">
 			<div class="embed__header">
@@ -26,7 +30,7 @@ export function IFramePlaceholder({ height, width, ...props }: IFramePlaceholder
 							<source {...source} />
 						))}
 						<img
-							{...props.pageIcon.image as any}
+							{...(props.pageIcon.image as any)}
 							alt=""
 							loading="lazy"
 							decoding="async"
@@ -54,9 +58,7 @@ export function IFramePlaceholder({ height, width, ...props }: IFramePlaceholder
 					target="_blank"
 				>
 					<div class="buttonIcon">{fromHtml(launch)}</div>
-					<div class="innerText">
+					<div class="innerText">New tab</div>
-						New tab
-					</div>
 				</a>
 			</div>
 			<div

src/utils/markdown/iframes/iframe-script.ts

@@ -3,7 +3,7 @@
  */
 export const iFrameClickToRun = () => {
 	const iframeButtons: HTMLElement[] = document.querySelectorAll(
-		"[data-iframeurl] > button"
+		"[data-iframeurl] > button",
 	) as never;
 
 	[...iframeButtons].forEach((el) => {

src/utils/markdown/iframes/rehype-transform.ts

@@ -40,7 +40,7 @@ function fetchPageIcon(src: URL, srcHast: Root): Promise<GetPictureResult> {
 		// <link rel="manifest" href="/manifest.json">
 		const manifestPath: Element = find(
 			srcHast,
-			(node: unknown) => (node as Element)?.properties?.rel?.[0] === "manifest"
+			(node: unknown) => (node as Element)?.properties?.rel?.[0] === "manifest",
 		);
 
 		let iconLink: string;
@@ -63,8 +63,10 @@ function fetchPageIcon(src: URL, srcHast: Root): Promise<GetPictureResult> {
 		if (!iconLink) {
 			// fetch `favicon.ico`
 			// <link rel="shortcut icon" type="image/png" href="https://example.com/img.png">
-			const favicon: Element = find(srcHast, (node: unknown) =>
+			const favicon: Element = find(
-				(node as Element)?.properties?.rel?.toString()?.includes("icon")
+				srcHast,
+				(node: unknown) =>
+					(node as Element)?.properties?.rel?.toString()?.includes("icon"),
 			);
 
 			if (favicon) {
@@ -155,7 +157,7 @@ export const rehypeUnicornIFrameClickToRun: Plugin<
 				const width = iframeNode.properties.width ?? EMBED_SIZE.w;
 				const height = iframeNode.properties.height ?? EMBED_SIZE.h;
 				const info: PageInfo = (await fetchPageInfo(
-					iframeNode.properties.src.toString()
+					iframeNode.properties.src.toString(),
 				).catch(() => null)) || { icon: await fetchDefaultPageIcon() };
 
 				const iframeReplacement = IFramePlaceholder({
@@ -167,7 +169,7 @@ export const rehypeUnicornIFrameClickToRun: Plugin<
 				});
 
 				Object.assign(iframeNode, iframeReplacement);
-			})
+			}),
 		);
 	};
 };

src/utils/markdown/rehype-header-text.ts

@@ -8,29 +8,29 @@ import { visit } from "unist-util-visit";
  * Plugin to add `data-header-text`s to headings.
  */
 export const rehypeHeaderText = () => {
-  return (tree: Root, file) => {
+	return (tree: Root, file) => {
-    visit(tree, "element", (node: Parent["children"][number]) => {
+		visit(tree, "element", (node: Parent["children"][number]) => {
-      if (
+			if (
-        headingRank(node) &&
+				headingRank(node) &&
-        "properties" in node &&
+				"properties" in node &&
-        node.properties &&
+				node.properties &&
-        !hasProperty(node, "data-header-text")
+				!hasProperty(node, "data-header-text")
-      ) {
+			) {
-        const headerText = toString(node);
+				const headerText = toString(node);
-        node.properties["data-header-text"] = headerText;
+				node.properties["data-header-text"] = headerText;
 
-        const headingWithID = {
+				const headingWithID = {
-          value: headerText,
+					value: headerText,
-          depth: headingRank(node)!,
+					depth: headingRank(node)!,
-          slug: node.properties["id"] as string,
+					slug: node.properties["id"] as string,
-        };
+				};
 
-        if (file.data.astro.frontmatter.headingsWithId) {
+				if (file.data.astro.frontmatter.headingsWithId) {
-          file.data.astro.frontmatter.headingsWithId.push(headingWithID);
+					file.data.astro.frontmatter.headingsWithId.push(headingWithID);
-        } else {
+				} else {
-          file.data.astro.frontmatter.headingsWithId = [headingWithID];
+					file.data.astro.frontmatter.headingsWithId = [headingWithID];
-        }
+				}
-      }
+			}
-    });
+		});
-  };
+	};
 };

src/utils/markdown/rehype-unicorn-element-map.ts

@@ -25,7 +25,7 @@ export const rehypeUnicornElementMap: Plugin<[], Root> = () => {
 					"/content/",
 					parentFolder,
 					slug,
-					node.properties.src.toString()
+					node.properties.src.toString(),
 				);
 			}
 

src/utils/markdown/tables/tables-script.ts

@@ -4,7 +4,7 @@ export const enableTables = () => {
 			(e.target as HTMLElement).dataset.sticky =
 				e.intersectionRatio < 1 ? "pinned" : "";
 		},
-		{ threshold: [1] }
+		{ threshold: [1] },
 	);
 
 	document.querySelectorAll("thead").forEach((e) => observer.observe(e));

src/utils/markdown/tabs/rehype-transform.ts

@@ -33,7 +33,7 @@ const getApproxLineCount = (nodes: Node[], inParagraph?: boolean): number => {
 		if ("children" in n) {
 			lines += getApproxLineCount(
 				(n as Parent).children as Node[],
-				isInParagraph
+				isInParagraph,
 			);
 		}
 		// assume that any div/p/br causes a line break
@@ -125,7 +125,7 @@ export const rehypeTabs: Plugin<[], Root> = () => {
 
 			// Determine if the set of tabs should use a constant height (via the "tabs-small" class)
 			const tabHeights = tabs.map(({ contents }) =>
-				getApproxLineCount(contents)
+				getApproxLineCount(contents),
 			);
 			const isSmall =
 				// all tabs must be <= 30 approx. lines (less than the height of most desktop viewports)
@@ -145,13 +145,13 @@ export const rehypeTabs: Plugin<[], Root> = () => {
 			tree,
 			{ type: "raw", value: "<!-- tabs:start -->" } as never,
 			{ type: "raw", value: "<!-- tabs:end -->" } as never,
-			replaceTabNodes
+			replaceTabNodes,
 		);
 		replaceAllBetween(
 			tree,
 			{ type: "comment", value: " tabs:start " } as never,
 			{ type: "comment", value: " tabs:end " } as never,
-			replaceTabNodes
+			replaceTabNodes,
 		);
 		return tree;
 	};

src/utils/markdown/tabs/tabs-script.ts

@@ -85,7 +85,7 @@ export const enableTabs = () => {
 
 		tabs.forEach((tab) => {
 			const panel = parent.querySelector<HTMLElement>(
-				`#${tab.getAttribute("aria-controls")}`
+				`#${tab.getAttribute("aria-controls")}`,
 			);
 			entry.set(tab.dataset.tabname, {
 				tab,

src/utils/markdown/tabs/tabs.tsx

@@ -14,7 +14,7 @@ export interface TabInfo {
 interface TabsProps {
 	tabs: TabInfo[];
 	isSmall: boolean;
-};
+}
 
 /** @jsxImportSource hastscript */
 export function Tabs({ tabs, isSmall }: TabsProps): Element {
@@ -46,9 +46,7 @@ export function Tabs({ tabs, isSmall }: TabsProps): Element {
 					aria-labelledby={`tab-${index}`}
 					aria-hidden={index === 0 ? undefined : true}
 				>
-					<div class="tabs__tab-panel__inner">
+					<div class="tabs__tab-panel__inner">{contents}</div>
-					{contents}
-					</div>
 				</div>
 			))}
 		</div>

src/utils/markdown/tooltips/tooltips.tsx

@@ -10,7 +10,7 @@ interface TooltipProps {
 	icon: "info" | "warning";
 	title: string;
 	children: Node[];
-};
+}
 
 /** @jsxImportSource hastscript */
 export function Tooltip({ icon, title, children }: TooltipProps): Element {
@@ -20,9 +20,7 @@ export function Tooltip({ icon, title, children }: TooltipProps): Element {
 				{icon === "info" ? fromHtml(info) : fromHtml(warning)}
 				<p>{title}</p>
 			</div>
-			<div class="tooltip__content">
+			<div class="tooltip__content">{children}</div>
-				{children}
-			</div>
 		</blockquote>
 	) as never;
 }

src/utils/translations.test.ts

@@ -32,7 +32,7 @@ describe("utils/translations.ts", () => {
 
 		test("returns 'fr' from '/posts/test/index.fr.md'", () => {
 			const lang = translations.getLanguageFromFilename(
-				"/posts/test/index.fr.md"
+				"/posts/test/index.fr.md",
 			);
 			expect(lang).toBe("fr");
 		});
@@ -42,7 +42,7 @@ describe("utils/translations.ts", () => {
 		test("returns an initial prefix", () => {
 			const expected: Languages = "fr";
 			const actual = translations.getPrefixLanguageFromPath(
-				`/${expected}/something/extra/en/fr/hi`
+				`/${expected}/something/extra/en/fr/hi`,
 			);
 
 			expect(actual).toEqual(expected);
@@ -51,7 +51,7 @@ describe("utils/translations.ts", () => {
 		test("returns an initial prefix with no preceding slash", () => {
 			const expected: Languages = "fr";
 			const actual = translations.getPrefixLanguageFromPath(
-				`${expected}/something/extra/en/fr/hi`
+				`${expected}/something/extra/en/fr/hi`,
 			);
 
 			expect(actual).toEqual(expected);
@@ -69,7 +69,7 @@ describe("utils/translations.ts", () => {
 		test("removes an initial prefix", () => {
 			const lang: Languages = "fr";
 			const actual = translations.removePrefixLanguageFromPath(
-				`/${lang}/something/extra/hi`
+				`/${lang}/something/extra/hi`,
 			);
 
 			expect(actual).toEqual("/something/extra/hi");
@@ -78,7 +78,7 @@ describe("utils/translations.ts", () => {
 		test("removes an initial prefix with no preceding slash", () => {
 			const lang: Languages = "fr";
 			const actual = translations.removePrefixLanguageFromPath(
-				`${lang}/something/extra/hi`
+				`${lang}/something/extra/hi`,
 			);
 
 			expect(actual).toEqual("something/extra/hi");
@@ -94,7 +94,7 @@ describe("utils/translations.ts", () => {
 		test("is not confused by prefixes that appear after the start of the path", () => {
 			const lang: Languages = "en";
 			const actual = translations.removePrefixLanguageFromPath(
-				`/${lang}/${lang}/es/fr/something/hi`
+				`/${lang}/${lang}/es/fr/something/hi`,
 			);
 
 			expect(actual).toEqual(`/${lang}/es/fr/something/hi`);

src/utils/translations.ts

@@ -14,7 +14,7 @@ function isLanguageKey(str: string): str is Languages {
  * code handles the parsing and converting of translation formats
  */
 export function fileToOpenGraphConverter<T extends Languages>(
-	lang: T
+	lang: T,
 ): T extends `${infer Lang}-${infer Region}`
 	? `${Lang}_${Uppercase<Region>}`
 	: T {
@@ -89,7 +89,7 @@ export function removePrefixLanguageFromPath(path: string) {
  */
 export function getTranslatedPage(
 	astro: { url: URL },
-	glob: MarkdownInstance<Record<string, unknown>>[]
+	glob: MarkdownInstance<Record<string, unknown>>[],
 ): {
 	locales: Languages[];
 	page: MarkdownInstance<Record<string, unknown>>;
@@ -98,7 +98,7 @@ export function getTranslatedPage(
 	const lang = getPrefixLanguageFromPath(astro.url.pathname);
 
 	const matchedResult = globResults.find((md) =>
-		md.file.endsWith(`${lang}.md`)
+		md.file.endsWith(`${lang}.md`),
 	);
 	const enResult = globResults.find((md) => md.file.split(".")[1] === "md");
 
@@ -128,8 +128,8 @@ const i18n: Partial<Record<Languages, Map<string, string>>> =
 			([file, content]: [string, { default: Record<string, string> }]) => [
 				basename(file).split(".")[0],
 				new Map(Object.entries(content.default)),
-			]
+			],
-		)
+		),
 	);
 
 // warn about any values that do not have full translations
@@ -140,7 +140,7 @@ for (const key of i18n.en?.keys() || []) {
 
 	if (missing.length) {
 		console.log(
-			`i18n: key "${key}" is missing from /content/data/i18n for languages: ${missing}`
+			`i18n: key "${key}" is missing from /content/data/i18n for languages: ${missing}`,
 		);
 	}
 }
@@ -157,7 +157,7 @@ export function translate(astro: { url: URL }, key: string, ...args: string[]) {
 
 	if (!value) {
 		console.warn(
-			`Translation key "${key}" is not specified in /content/data/i18n/${lang}.json`
+			`Translation key "${key}" is not specified in /content/data/i18n/${lang}.json`,
 		);
 		value = i18n.en?.get(key);
 	}

src/views/about/about.module.scss

@@ -28,7 +28,7 @@
 
 	margin: var(--spc-2x);
 
-	background-color: #FFF;
+	background-color: #fff;
 	border-radius: var(--corner-radius_s);
 	overflow: hidden;
 }

src/views/about/translations-header/about-us-translations-header.module.scss

@@ -1,8 +1,8 @@
 .translationContainer {
-  font-weight: bold;
+	font-weight: bold;
-  border: var(--cardOutlineStyle);
+	border: var(--cardOutlineStyle);
-  border-radius: var(--cardRadius);
+	border-radius: var(--cardRadius);
-  padding: 0.75rem;
+	padding: 0.75rem;
-  background: var(--cardActiveBackground);
+	background: var(--cardActiveBackground);
-  margin: 1rem 0;
+	margin: 1rem 0;
 }

src/views/base/translations/translations-header.module.scss

@@ -2,7 +2,7 @@
 
 .text {
 	margin: 0 !important;
-	margin-left: var(--spc-2x) !important;;
+	margin-left: var(--spc-2x) !important;
 }
 
 .card {

src/views/blog-post/article-nav/article-nav.module.scss

@@ -15,8 +15,12 @@
 	--article-nav_item_overline-color: var(--primary_default);
 
 	--article-nav_item_background-color: var(--transparent);
-	--article-nav_item_background-color_hovered: var(--surface_primary_emphasis-low);
+	--article-nav_item_background-color_hovered: var(
-	--article-nav_item_background-color_pressed: var(--surface_primary_emphasis-low);
+		--surface_primary_emphasis-low
+	);
+	--article-nav_item_background-color_pressed: var(
+		--surface_primary_emphasis-low
+	);
 	--article-nav_item_background-color_focused: var(--background_focus);
 
 	--article-nav_item_border_color: var(--surface_primary_emphasis-low);
@@ -42,10 +46,12 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--article-nav_item_gap);
-	padding: var(--article-nav_item_padding-vertical) var(--article-nav_item_padding-horizontal);
+	padding: var(--article-nav_item_padding-vertical)
+		var(--article-nav_item_padding-horizontal);
 
 	background-color: var(--article-nav_item_background-color);
-	border: var(--article-nav_item_border-width) solid var(--article-nav_item_border_color);
+	border: var(--article-nav_item_border-width) solid
+		var(--article-nav_item_border_color);
 	border-radius: var(--article-nav_item_corner-radius);
 	@include transition(background-color border-color);
 

src/views/blog-post/article-nav/article-nav.tsx

@@ -16,30 +16,28 @@ function ArticleNavItem({ post, type }: ArticleNavItemProps) {
 			class={`${style.item} ${style[`item--${type}`]}`}
 			data-navigation-path={href}
 		>
-			{
+			{type === "previous" ? (
-				type === "previous"
+				<span class={`${style.item__overline} text-style-button-regular`}>
-					? (
+					<span
-						<span class={`${style.item__overline} text-style-button-regular`}>
+						class={`${style.icon}`}
-							<span
+						dangerouslySetInnerHTML={{ __html: arrow_left }}
-								class={`${style.icon}`}
+					/>
-								dangerouslySetInnerHTML={{ __html: arrow_left }}
+					Previous article
-							/>
+				</span>
-							Previous article
+			) : (
-						</span>
+				<span class={`${style.item__overline} text-style-button-regular`}>
-					)
+					Next article
-					: (
+					<span
-						<span class={`${style.item__overline} text-style-button-regular`}>
+						class={`${style.icon}`}
-							Next article
+						dangerouslySetInnerHTML={{ __html: arrow_right }}
-							<span
+					/>
-								class={`${style.icon}`}
+				</span>
-								dangerouslySetInnerHTML={{ __html: arrow_right }}
+			)}
-							/>
+			<a href={href} class="text-style-body-medium-bold">
-						</span>
+				{getShortTitle(post)}
-					)
+			</a>
-			}
-			<a href={href} class="text-style-body-medium-bold">{getShortTitle(post)}</a>
 		</div>
-	)
+	);
 }
 
 export interface ArticleNavProps {
@@ -57,5 +55,5 @@ export function ArticleNav({ post, postSeries }: ArticleNavProps) {
 			{prevPost && <ArticleNavItem post={prevPost} type="previous" />}
 			{nextPost && <ArticleNavItem post={nextPost} type="next" />}
 		</div>
-	)
+	);
 }

src/views/blog-post/blog-post-layout/blog-post-layout.module.scss

@@ -14,7 +14,8 @@
 	padding: var(--site-spacing);
 }
 
-.sidebarLeft, .sidebarRight {
+.sidebarLeft,
+.sidebarRight {
 	flex-basis: 25%;
 	flex-grow: 0;
 	flex-shrink: 0;
@@ -42,8 +43,6 @@
 @keyframes fadeIn {
 	0% {
 		opacity: 0;
-
-
 	}
 	100% {
 		opacity: 1;

src/views/blog-post/post-title-header/post-title-header.module.scss

@@ -33,7 +33,8 @@
 
 	padding: var(--article-header_details_padding-vertical) 0;
 
-	.date, .authors {
+	.date,
+	.authors {
 		display: flex;
 		align-items: center;
 
@@ -59,7 +60,7 @@
 			color: var(--article-header_details_date_edited_color);
 
 			&::before {
-				content: '•';
+				content: "•";
 				margin-left: var(--article-header_details_date-gap);
 				padding-right: var(--article-header_details_date-gap);
 			}

src/views/blog-post/series/base.ts

@@ -16,7 +16,7 @@ interface ActivePostMeta extends ExtendedPostInfo {
 
 export function findActivePost(
 	post: ExtendedPostInfo,
-	seriesPosts: ExtendedPostInfo[]
+	seriesPosts: ExtendedPostInfo[],
 ) {
 	const newPosts = [...seriesPosts] as ActivePostMeta[];
 

src/views/blog-post/series/series-toc.module.scss

@@ -147,7 +147,6 @@
 	height: 100%;
 	width: var(--series-nav_chapter-item_border_width);
 	background: var(--series-nav_chapter-item_border_color_selected);
-
 }
 
 .navigationItem[data-is-active]::after {

src/views/blog-post/table-of-contents/table-of-contents.module.scss

@@ -1,7 +1,6 @@
 @import "src/tokens/index";
 
 :root {
-
 	--toc_header_padding-top: var(--site-spacing);
 	--toc_header_padding-horizontal: var(--site-spacing);
 	--toc_header_padding-bottom: var(--spc-4x);
@@ -63,7 +62,8 @@
 }
 
 .tocTitle {
-	margin: var(--toc_header_padding-top) var(--toc_header_padding-horizontal) var(--toc_header_padding-bottom);
+	margin: var(--toc_header_padding-top) var(--toc_header_padding-horizontal)
+		var(--toc_header_padding-bottom);
 }
 
 .tableList {
@@ -89,7 +89,8 @@
 }
 
 .tableListItem:not(.depth2) > a {
-	padding: var(--toc_item_padding-vertical) var(--toc_item_padding-end) var(--toc_item_padding-vertical) var(--toc_item_padding-start);
+	padding: var(--toc_item_padding-vertical) var(--toc_item_padding-end)
+		var(--toc_item_padding-vertical) var(--toc_item_padding-start);
 }
 
 .tableListItem:hover > a {
@@ -105,7 +106,8 @@
 	pointer-events: none;
 }
 
-.tableListItem:hover > a > *, :global(.toc-is-active) .tableListItemLinkInner {
+.tableListItem:hover > a > *,
+:global(.toc-is-active) .tableListItemLinkInner {
 	color: var(--foreground_emphasis-high);
 }
 
@@ -113,7 +115,10 @@
 }
 
 .depth2 > a > * {
-	margin-left: calc(var(--toc_sub-item_dot_size) + var(--toc_sub-item_dot_margin-end) + var(--toc_sub-item_padding-start));
+	margin-left: calc(
+		var(--toc_sub-item_dot_size) + var(--toc_sub-item_dot_margin-end) +
+			var(--toc_sub-item_padding-start)
+	);
 	position: relative;
 }
 
@@ -122,41 +127,64 @@
 	border: none !important;
 }
 
-.depth2:not(:global(.toc-is-active)):not(:hover):not(:active) > a:not(:focus-visible) > *::before {
+.depth2:not(:global(.toc-is-active)):not(:hover):not(:active)
+	> a:not(:focus-visible)
+	> *::before {
 	content: " ";
 	background: var(--toc_divider_color);
 	height: 100%;
 	width: 2px;
 	position: absolute;
-	left: calc(-2px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size) / 2));
+	left: calc(
+		-2px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size) /
+					2)
+	);
 	top: 0;
 }
 
 /* Extended line */
 @supports selector(:has(*)) {
-	.depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(:has(:focus-visible))
+	.depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(
-		+ .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(:has(:focus-visible))
+			:has(:focus-visible)
-		> a > *::before {
+		)
+		+ .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(
+			:has(:focus-visible)
+		)
+		> a
+		> *::before {
 		content: " ";
 		background: var(--toc_divider_color);
 		height: calc(100% + var(--toc_item_min-height));
 		width: 2px;
 		position: absolute;
-		left: calc(-2px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size) / 2));
+		left: calc(
+			-2px - var(--toc_sub-item_padding-start) - calc(var(
+							--toc_sub-item_dot_size
+						) / 2)
+		);
 		bottom: 0;
 		top: unset;
 	}
 }
 @supports not selector(:has(*)) {
-	.depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(:focus-within)
+	.depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(
-		+ .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(:focus-within)
+			:focus-within
-		> a > *::before {
+		)
+		+ .depth2:not(:global(.toc-is-active)):not(:hover):not(:active):not(
+			:focus-within
+		)
+		> a
+		> *::before {
 		content: " ";
 		background: var(--toc_divider_color);
 		height: calc(100% + var(--toc_item_min-height));
 		width: 2px;
 		position: absolute;
-		left: calc(-2px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size) / 2));
+		left: calc(
+			-2px - var(--toc_sub-item_padding-start) - calc(var(
+							--toc_sub-item_dot_size
+						) / 2)
+		);
 		bottom: 0;
 		top: unset;
 	}
@@ -174,7 +202,9 @@
 	height: 100%;
 	width: var(--toc_sub-item_dot_size);
 	position: absolute;
-	left: calc(0px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size)));
+	left: calc(
+		0px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size))
+	);
 	top: 0;
 }
 
@@ -192,7 +222,9 @@
 	height: 100%;
 	width: var(--toc_sub-item_dot_size);
 	position: absolute;
-	left: calc(0px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size)));
+	left: calc(
+		0px - var(--toc_sub-item_padding-start) - calc(var(--toc_sub-item_dot_size))
+	);
 	top: 0;
 }
 

src/views/collections/collection-page.module.scss

@@ -1,277 +1,278 @@
 @import "src/tokens/index";
 
 :root {
-  --collection-page_banner_corner-radius: var(--corner-radius_l);
+	--collection-page_banner_corner-radius: var(--corner-radius_l);
 
-  --collection-page_padding: var(--site-spacing);
+	--collection-page_padding: var(--site-spacing);
-  --collection-page_gap: var(--site-spacing);
+	--collection-page_gap: var(--site-spacing);
 
-  --collection-page_content_gap: var(--site-spacing);
+	--collection-page_content_gap: var(--site-spacing);
-  --collection-page_content_button-gap: var(--spc-4x);
+	--collection-page_content_button-gap: var(--spc-4x);
 
-  --collection-page_title_padding-top: var(--site-spacing);
+	--collection-page_title_padding-top: var(--site-spacing);
-  --collection-page_title_padding-bottom: var(--spc-2x);
+	--collection-page_title_padding-bottom: var(--spc-2x);
 
-  --collection-page_title_color: var(--foreground_emphasis-high);
+	--collection-page_title_color: var(--foreground_emphasis-high);
-  --collection-page_subtitle_color: var(--foreground_emphasis-medium);
+	--collection-page_subtitle_color: var(--foreground_emphasis-medium);
-  --collection-page_description_color: var(--foreground_emphasis-high);
+	--collection-page_description_color: var(--foreground_emphasis-high);
 
-  // Author section
+	// Author section
-  --collection-page_author_padding: var(--spc-6x);
+	--collection-page_author_padding: var(--spc-6x);
-  --collection-page_author_corner-radius: var(--corner-radius_l);
+	--collection-page_author_corner-radius: var(--corner-radius_l);
-  --collection-page_author_avatar_size: 48px;
+	--collection-page_author_avatar_size: 48px;
-  --collection-page_author_avatar_border-width: var(--border-width_m);
+	--collection-page_author_avatar_border-width: var(--border-width_m);
-  --collection-page_author_details_gap: var(--spc-4x);
+	--collection-page_author_details_gap: var(--spc-4x);
-  --collection-page_author_details_dot_padding-horizontal: var(--spc-1x);
+	--collection-page_author_details_dot_padding-horizontal: var(--spc-1x);
-  --collection-page_author_description_padding-top: var(--spc-4x);
+	--collection-page_author_description_padding-top: var(--spc-4x);
 
-  --collection-page_author_name_color: var(--foreground_emphasis-high);
+	--collection-page_author_name_color: var(--foreground_emphasis-high);
-  --collection-page_author_count-articles_color: var(--foreground_emphasis-high);
+	--collection-page_author_count-articles_color: var(
-  --collection-page_author_count-words_color: var(--foreground_emphasis-medium);
+		--foreground_emphasis-high
-  --collection-page_author_dot_color: var(--foreground_emphasis-medium);
+	);
-  --collection-page_author_description_color: var(--foreground_emphasis-high);
+	--collection-page_author_count-words_color: var(--foreground_emphasis-medium);
+	--collection-page_author_dot_color: var(--foreground_emphasis-medium);
+	--collection-page_author_description_color: var(--foreground_emphasis-high);
 
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    --collection-page_banner_max-width: 240px;
+		--collection-page_banner_max-width: 240px;
-    --collection-page_title_padding-top: 0px;
+		--collection-page_title_padding-top: 0px;
-  }
+	}
 
-  @include from($tabletLarge) {
+	@include from($tabletLarge) {
-    --collection-page_banner_max-width: 400px;
+		--collection-page_banner_max-width: 400px;
-  }
+	}
 
-  @include from($desktopSmall) {
+	@include from($desktopSmall) {
-    --collection-page_banner_corner-radius: var(--corner-radius_xl);
+		--collection-page_banner_corner-radius: var(--corner-radius_xl);
-    --collection-page_banner_max-width: 480px;
+		--collection-page_banner_max-width: 480px;
-  }
+	}
 }
 
 .collectionPageContainer {
-  padding: var(--collection-page_padding);
+	padding: var(--collection-page_padding);
-  max-width: var(--max-width_l);
+	max-width: var(--max-width_l);
-  margin: 0 auto;
+	margin: 0 auto;
 }
 
 .collectionPageInnerContainer {
-  display: grid;
+	display: grid;
-  grid-template-columns: 1fr;
+	grid-template-columns: 1fr;
-  grid-template-rows: repeat(3, min-content);
+	grid-template-rows: repeat(3, min-content);
 
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    grid-template-columns: min-content 1fr;
+		grid-template-columns: min-content 1fr;
-    grid-template-rows: repeat(2, min-content);
+		grid-template-rows: repeat(2, min-content);
-    grid-column-gap: var(--collection-page_gap);
+		grid-column-gap: var(--collection-page_gap);
-  }
+	}
 
-  @include from($desktopSmall) {
+	@include from($desktopSmall) {
-    grid-template-columns: min-content 1fr;
+		grid-template-columns: min-content 1fr;
-    grid-template-rows: min-content 1fr;
+		grid-template-rows: min-content 1fr;
-    grid-column-gap: var(--collection-page_gap);
+		grid-column-gap: var(--collection-page_gap);
-  }
+	}
 }
 
 .titleAndDescContainer {
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    grid-column: 2;
+		grid-column: 2;
-    grid-row: 1;
+		grid-row: 1;
-    display: flex;
+		display: flex;
-    justify-content: center;
+		justify-content: center;
-    flex-direction: column;
+		flex-direction: column;
-  }
+	}
 
-  @include from($desktopSmall) {
+	@include from($desktopSmall) {
-    grid-column: 2;
+		grid-column: 2;
-    grid-row: 1;
+		grid-row: 1;
-    display: unset;
+		display: unset;
-    justify-content: unset;
+		justify-content: unset;
-    flex-direction: unset;
+		flex-direction: unset;
-  }
+	}
 }
 
 .title {
-  color: var(--collection-page_title_color);
+	color: var(--collection-page_title_color);
-  margin: 0;
+	margin: 0;
-  margin-bottom: var(--collection-page_title_padding-bottom);
+	margin-bottom: var(--collection-page_title_padding-bottom);
-  margin-top: var(--collection-page_title_padding-top);
+	margin-top: var(--collection-page_title_padding-top);
 }
 
 .description {
-  color: var(--collection-page_subtitle_color);
+	color: var(--collection-page_subtitle_color);
-  margin: 0;
+	margin: 0;
 }
 
 .contentContainer {
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  gap: var(--collection-page_content_gap);
+	gap: var(--collection-page_content_gap);
-  margin-top: var(--collection-page_content_gap);
+	margin-top: var(--collection-page_content_gap);
 
+	@include from($tabletSmall) {
+		grid-column: 1 / 3;
+		grid-row: 2;
+	}
 
-  @include from($tabletSmall) {
+	@include from($desktopSmall) {
-    grid-column: 1 / 3;
+		grid-column: 2;
-    grid-row: 2;
+		grid-row: 2;
-  }
+	}
-
-  @include from($desktopSmall) {
-    grid-column: 2;
-    grid-row: 2;
-  }
 }
 
-.content>*:first-child {
+.content > *:first-child {
-  margin-top: 0 !important;
+	margin-top: 0 !important;
 }
 
-.content>*:last-child {
+.content > *:last-child {
-  margin-bottom: 0 !important;
+	margin-bottom: 0 !important;
 }
 
 .coverImage {
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    grid-column: 1;
+		grid-column: 1;
-    grid-row: 1;
+		grid-row: 1;
-  }
+	}
 
-  @include from($desktopSmall) {
+	@include from($desktopSmall) {
-    grid-column: 1;
+		grid-column: 1;
-    grid-row: 1 / 3;
+		grid-row: 1 / 3;
-  }
+	}
 }
 
 .coverImage img {
-  max-width: 368px;
+	max-width: 368px;
-  max-height: 552px;
+	max-height: 552px;
-  width: 100%;
+	width: 100%;
 
-  border-radius: var(--collection-page_banner_corner-radius);
+	border-radius: var(--collection-page_banner_corner-radius);
 
-  margin: 0 auto;
+	margin: 0 auto;
-  margin-bottom: var(--collection-page_gap);
+	margin-bottom: var(--collection-page_gap);
-  display: block;
+	display: block;
 
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    margin: unset;
+		margin: unset;
-    display: unset;
+		display: unset;
-    max-width: unset;
+		max-width: unset;
-    max-height: unset;
+		max-height: unset;
-    width: 240px;
+		width: 240px;
-    height: 360px;
+		height: 360px;
-  }
+	}
 
-  @include from($desktopSmall) {
+	@include from($desktopSmall) {
-    height: 720px;
+		height: 720px;
-    width: 480px;
+		width: 480px;
-  }
+	}
 }
 
 .buttonContainer {
-  display: flex;
+	display: flex;
-  flex-direction: row;
+	flex-direction: row;
-  gap: var(--collection-page_content_button-gap);
+	gap: var(--collection-page_content_button-gap);
 }
 
-.buttonContainer>* {
+.buttonContainer > * {
-  width: 1px;
+	width: 1px;
-  flex-grow: 1;
+	flex-grow: 1;
 }
 
 .authorsList {
-  list-style: none;
+	list-style: none;
-  margin: 0;
+	margin: 0;
-  padding: 0;
+	padding: 0;
 }
 
 .authorContainer {
-  padding: var(--collection-page_author_padding);
+	padding: var(--collection-page_author_padding);
-  background-color: var(--surface_primary_emphasis-none);
+	background-color: var(--surface_primary_emphasis-none);
-  border-radius: var(--collection-page_author_corner-radius);
+	border-radius: var(--collection-page_author_corner-radius);
-  display: grid;
+	display: grid;
 
-  grid-template-columns: min-content 1fr;
+	grid-template-columns: min-content 1fr;
-  grid-template-rows: repeat(3, min-content);
+	grid-template-rows: repeat(3, min-content);
 
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    grid-template-columns: min-content 1fr min-content;
+		grid-template-columns: min-content 1fr min-content;
-    grid-column-gap: var(--collection-page_description_padding-top);
+		grid-column-gap: var(--collection-page_description_padding-top);
-  }
+	}
 }
 
 .authorImage {
-  height: var(--collection-page_author_avatar_size);
+	height: var(--collection-page_author_avatar_size);
-  width: var(--collection-page_author_avatar_size);
+	width: var(--collection-page_author_avatar_size);
-  align-self: center;
+	align-self: center;
-  border-radius: 50%;
+	border-radius: 50%;
-  overflow: hidden;
+	overflow: hidden;
-  border-style: solid;
+	border-style: solid;
-  border-width: var(--collection-page_author_avatar_border-width);
+	border-width: var(--collection-page_author_avatar_border-width);
-  margin-right: var(--collection-page_author_details_gap);
+	margin-right: var(--collection-page_author_details_gap);
 
-  grid-row: 1;
+	grid-row: 1;
-  grid-column: 1;
+	grid-column: 1;
 
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    grid-row: 1;
+		grid-row: 1;
-    grid-column: 1;
+		grid-column: 1;
-  }
+	}
 }
 
 .authorImage img {
-  height: 100%;
+	height: 100%;
-  width: 100%;
+	width: 100%;
 }
 
 .authorMetaData {
-  height: max-content;
+	height: max-content;
-  align-self: center;
+	align-self: center;
 
-  grid-row: 1;
+	grid-row: 1;
-  grid-column: 2;
+	grid-column: 2;
 
-  @include from($desktopSmall) {
+	@include from($desktopSmall) {
-    grid-row: 1;
+		grid-row: 1;
-    grid-column: 2;
+		grid-column: 2;
-  }
+	}
 }
 
 .authorName {
-  margin: 0;
+	margin: 0;
-  color: var(--collection-page_author_name_color);
+	color: var(--collection-page_author_name_color);
 }
 
 .authorArticles {
-  margin: 0;
+	margin: 0;
-  color: var(--collection-page_author_count-articles_color);
+	color: var(--collection-page_author_count-articles_color);
 }
 
 .authorWordCount,
 .authorMetaSeperatorDot {
-  margin: 0;
+	margin: 0;
-  color: var(--collection-page_author_count-words_color);
+	color: var(--collection-page_author_count-words_color);
 }
 
 .viewProfileBtn {
-  height: fit-content;
+	height: fit-content;
-  align-self: center;
+	align-self: center;
 
-  grid-row: 3;
+	grid-row: 3;
-  grid-column: 1 / 3;
+	grid-column: 1 / 3;
 
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    grid-row: 1;
+		grid-row: 1;
-    grid-column: 3;
+		grid-column: 3;
-  }
+	}
 }
 
 .authorDescription {
-  padding-top: var(--collection-page_author_description_padding-top);
+	padding-top: var(--collection-page_author_description_padding-top);
-  padding-bottom: var(--collection-page_title_padding-bottom);
+	padding-bottom: var(--collection-page_title_padding-bottom);
 
-  grid-row: 2;
+	grid-row: 2;
-  grid-column: 1 / 3;
+	grid-column: 1 / 3;
 
-  @include from($tabletSmall) {
+	@include from($tabletSmall) {
-    padding-bottom: unset;
+		padding-bottom: unset;
-    grid-row: 2;
+		grid-row: 2;
-    grid-column: 1 / span 3;
+		grid-column: 1 / span 3;
-  }
+	}
 }

src/views/collections/framework-field-guide/components/pricing-card.module.scss

@@ -1,291 +1,294 @@
-@import "../tokens/utils";
+@import "../tokens/utils";
-@import "../tokens/breakpoints";
+@import "../tokens/breakpoints";
-
+
-.pricingCardContainerLi {
+.pricingCardContainerLi {
-	display: block;
+	display: block;
-	padding: var(--section-ver-padding) var(--section-hor-padding);
+	padding: var(--section-ver-padding) var(--section-hor-padding);
-	border-radius: var(--pricing-container-radius);
+	border-radius: var(--pricing-container-radius);
-	background: var(--pricing-container_default);
+	background: var(--pricing-container_default);
-	transition: background var(--color-transition-time)
+	transition:
-			var(--color-transition-ease),
+		background var(--color-transition-time) var(--color-transition-ease),
-		color var(--color-transition-time) var(--color-transition-ease);
+		color var(--color-transition-time) var(--color-transition-ease);
-	position: relative;
+	position: relative;
-}
+}
-
+
-.pricingCardContainerLi.highlighted {
+.pricingCardContainerLi.highlighted {
-	background: var(--pricing-container_highlighted);
+	background: var(--pricing-container_highlighted);
-}
+}
-
+
-@include from($desktop) {
+@include from($desktop) {
-	.pricingCardContainerLi {
+	.pricingCardContainerLi {
-		width: calc(100% / 3 - var(--pricing-container-radius));
+		width: calc(100% / 3 - var(--pricing-container-radius));
-	}
+	}
-	.pricingCardContainerLi.highlighted {
+	.pricingCardContainerLi.highlighted {
-		width: calc(100% / 3);
+		width: calc(100% / 3);
-	}
+	}
-}
+}
-
+
-.pricingCardContainer {
+.pricingCardContainer {
-	display: flex;
+	display: flex;
-	flex-direction: column;
+	flex-direction: column;
-	gap: var(--section-gap);
+	gap: var(--section-gap);
-	text-align: center;
+	text-align: center;
-}
+}
-
+
-.topTextContainer {
+.topTextContainer {
-	display: flex;
+	display: flex;
-	flex-direction: column;
+	flex-direction: column;
-	flex-wrap: nowrap;
+	flex-wrap: nowrap;
-	gap: var(--section-gap);
+	gap: var(--section-gap);
-}
+}
-
+
-@include from($tablet) {
+@include from($tablet) {
-	.topTextContainer {
+	.topTextContainer {
-		flex-direction: row;
+		flex-direction: row;
-	}
+	}
-
+
-	.topTextContainer > div {
+	.topTextContainer > div {
-		width: 50%;
+		width: 50%;
-	}
+	}
-
+
-	.topTextContainer > div:first-child {
+	.topTextContainer > div:first-child {
-		text-align: start;
+		text-align: start;
-	}
+	}
-
+
-	.topTextContainer > div:last-child {
+	.topTextContainer > div:last-child {
-		text-align: end;
+		text-align: end;
-	}
+	}
-}
+}
-
+
-@include from($desktop) {
+@include from($desktop) {
-	.topTextContainer {
+	.topTextContainer {
-		flex-direction: column;
+		flex-direction: column;
-	}
+	}
-
+
-	.topTextContainer > div {
+	.topTextContainer > div {
-		width: 100%;
+		width: 100%;
-	}
+	}
-
+
-	.topTextContainer > div:first-child,
+	.topTextContainer > div:first-child,
-	.topTextContainer > div:last-child {
+	.topTextContainer > div:last-child {
-		text-align: center;
+		text-align: center;
-	}
+	}
-}
+}
-
+
-.saleTag {
+.saleTag {
-	position: absolute;
+	position: absolute;
-	height: var(--sale-badge-size);
+	height: var(--sale-badge-size);
-	width: var(--sale-badge-size);
+	width: var(--sale-badge-size);
-	top: var(--sale-badge-offset);
+	top: var(--sale-badge-offset);
-	right: var(--sale-badge-offset);
+	right: var(--sale-badge-offset);
-	transform: rotate(var(--sale-badge-rotation));
+	transform: rotate(var(--sale-badge-rotation));
-}
+}
-
+
-.pricingTitle {
+.pricingTitle {
-	color: var(--on-dark-emphasis-high);
+	color: var(--on-dark-emphasis-high);
-	margin: 0;
+	margin: 0;
-	margin-bottom: var(--spc-1x);
+	margin-bottom: var(--spc-1x);
-}
+}
-
+
-.pricingDescription {
+.pricingDescription {
-	color: var(--on-dark-emphasis-medium);
+	color: var(--on-dark-emphasis-medium);
-	margin: 0;
+	margin: 0;
-}
+}
-
+
-.pricingPrice {
+.pricingPrice {
-	color: var(--on-dark-emphasis-high);
+	color: var(--on-dark-emphasis-high);
-	margin: 0;
+	margin: 0;
-	margin-bottom: var(--spc-1x);
+	margin-bottom: var(--spc-1x);
-}
+}
-
+
-.enterpriseToggleContainer {
+.enterpriseToggleContainer {
-	display: grid;
+	display: grid;
-	grid-template-rows: 1fr;
+	grid-template-rows: 1fr;
-	grid-template-columns: 1fr auto 1fr;
+	grid-template-columns: 1fr auto 1fr;
-	align-items: center;
+	align-items: center;
-}
+}
-
+
-.enterpriseToggleText {
+.enterpriseToggleText {
-	margin: 0;
+	margin: 0;
-	color: var(--slate-300);
+	color: var(--slate-300);
-	padding: 0 var(--spc-2x);
+	padding: 0 var(--spc-2x);
-}
+}
-
+
-@include from($desktop) {
+@include from($desktop) {
-	.enterpriseToggleText {
+	.enterpriseToggleText {
-		padding: 0 var(--spc-1x);
+		padding: 0 var(--spc-1x);
-	}
+	}
-}
+}
-
+
-.enterpriseToggleText {
+.enterpriseToggleText {
-	text-align: right;
+	text-align: right;
-}
+}
-
+
-.enterpriseToggleText + .enterpriseToggleText {
+.enterpriseToggleText + .enterpriseToggleText {
-	text-align: left;
+	text-align: left;
-}
+}
-
+
-.enterpriseToggle:not(:checked) + .enterpriseToggleText {
+.enterpriseToggle:not(:checked) + .enterpriseToggleText {
-	color: var(--slate-050);
+	color: var(--slate-050);
-}
+}
-
+
-.enterpriseToggle:checked + .enterpriseToggleText + .enterpriseToggleText {
+.enterpriseToggle:checked + .enterpriseToggleText + .enterpriseToggleText {
-	color: var(--slate-050);
+	color: var(--slate-050);
-}
+}
-
+
-.individualText {
+.individualText {
-	order: -1;
+	order: -1;
-}
+}
-
+
-input[type="checkbox"].enterpriseToggle {
+input[type="checkbox"].enterpriseToggle {
-	appearance: none;
+	appearance: none;
-	width: var(--pricing-toggle-width);
+	width: var(--pricing-toggle-width);
-	height: var(--pricing-toggle-height);
+	height: var(--pricing-toggle-height);
-	position: relative;
+	position: relative;
-	border-radius: 50px;
+	border-radius: 50px;
-	box-sizing: content-box;
+	box-sizing: content-box;
-	cursor: pointer;
+	cursor: pointer;
-	transition: background 150ms ease-in-out;
+	transition: background 150ms ease-in-out;
-	background: var(--pricing-toggle-track-color);
+	background: var(--pricing-toggle-track-color);
-}
+}
-
+
-input[type="checkbox"].enterpriseToggle:hover {
+input[type="checkbox"].enterpriseToggle:hover {
-	background: var(--pricing-toggle-track-color_hovered);
+	background: var(--pricing-toggle-track-color_hovered);
-}
+}
-
+
-input[type="checkbox"].enterpriseToggle:active {
+input[type="checkbox"].enterpriseToggle:active {
-	background: var(--pricing-toggle-track-color_pressed);
+	background: var(--pricing-toggle-track-color_pressed);
-}
+}
-
+
-/* Thumb */
+/* Thumb */
-input[type="checkbox"].enterpriseToggle::before {
+input[type="checkbox"].enterpriseToggle::before {
-	top: 50%;
+	top: 50%;
-	left: var(--pricing-toggle-gap);
+	left: var(--pricing-toggle-gap);
-	transform: translateY(-50%);
+	transform: translateY(-50%);
-	transition: left 150ms ease-in-out, background-color 150ms ease-in-out,
+	transition:
-		height 150ms ease-in-out, width 150ms ease-in-out;
+		left 150ms ease-in-out,
-	content: " ";
+		background-color 150ms ease-in-out,
-	width: var(--pricing-toggle-thumb-size);
+		height 150ms ease-in-out,
-	height: var(--pricing-toggle-thumb-size);
+		width 150ms ease-in-out;
-	background: var(--slate-200);
+	content: " ";
-	position: absolute;
+	width: var(--pricing-toggle-thumb-size);
-	border-radius: 50px;
+	height: var(--pricing-toggle-thumb-size);
-}
+	background: var(--slate-200);
-
+	position: absolute;
-input[type="checkbox"].enterpriseToggle:hover::before {
+	border-radius: 50px;
-	width: var(--pricing-toggle-thumb-size_hovered);
+}
-	height: var(--pricing-toggle-thumb-size_hovered);
+
-}
+input[type="checkbox"].enterpriseToggle:hover::before {
-
+	width: var(--pricing-toggle-thumb-size_hovered);
-input[type="checkbox"].enterpriseToggle:active::before {
+	height: var(--pricing-toggle-thumb-size_hovered);
-	width: var(--pricing-toggle-thumb-size_pressed);
+}
-	height: var(--pricing-toggle-thumb-size_pressed);
+
-}
+input[type="checkbox"].enterpriseToggle:active::before {
-
+	width: var(--pricing-toggle-thumb-size_pressed);
-input[type="checkbox"].enterpriseToggle:hover::before {
+	height: var(--pricing-toggle-thumb-size_pressed);
-	left: var(--pricing-toggle-gap_hovered);
+}
-}
+
-
+input[type="checkbox"].enterpriseToggle:hover::before {
-input[type="checkbox"].enterpriseToggle:active::before {
+	left: var(--pricing-toggle-gap_hovered);
-	left: var(--pricing-toggle-gap_pressed);
+}
-}
+
-
+input[type="checkbox"].enterpriseToggle:active::before {
-input[type="checkbox"].enterpriseToggle:checked {
+	left: var(--pricing-toggle-gap_pressed);
-	background: var(--slate-500);
+}
-}
+
-
+input[type="checkbox"].enterpriseToggle:checked {
-input[type="checkbox"].enterpriseToggle:checked::before {
+	background: var(--slate-500);
-	left: calc(
+}
-		100% - var(--pricing-toggle-thumb-size) - var(--pricing-toggle-gap)
+
-	);
+input[type="checkbox"].enterpriseToggle:checked::before {
-}
+	left: calc(
-
+		100% - var(--pricing-toggle-thumb-size) - var(--pricing-toggle-gap)
-input[type="checkbox"].enterpriseToggle:checked:hover::before {
+	);
-	left: calc(
+}
-		100% - var(--pricing-toggle-thumb-size_hovered) -
+
-			var(--pricing-toggle-gap_hovered)
+input[type="checkbox"].enterpriseToggle:checked:hover::before {
-	);
+	left: calc(
-}
+		100% - var(--pricing-toggle-thumb-size_hovered) -
-
+			var(--pricing-toggle-gap_hovered)
-input[type="checkbox"].enterpriseToggle:checked:active::before {
+	);
-	left: calc(
+}
-		100% - var(--pricing-toggle-thumb-size_pressed) -
+
-			var(--pricing-toggle-gap_pressed)
+input[type="checkbox"].enterpriseToggle:checked:active::before {
-	);
+	left: calc(
-}
+		100% - var(--pricing-toggle-thumb-size_pressed) -
-
+			var(--pricing-toggle-gap_pressed)
-.pricingEnterpriseExplainer {
+	);
-	color: var(--on-dark-emphasis-medium);
+}
-	margin: 0;
+
-	opacity: 0;
+.pricingEnterpriseExplainer {
-	transition: opacity 300ms ease-in-out;
+	color: var(--on-dark-emphasis-medium);
-}
+	margin: 0;
-
+	opacity: 0;
-.divider {
+	transition: opacity 300ms ease-in-out;
-	display: none;
+}
-	border: none;
+
-	border-top: 2px dotted #607090;
+.divider {
-}
+	display: none;
-
+	border: none;
-@include from($tablet) {
+	border-top: 2px dotted #607090;
-	.divider {
+}
-		display: block;
+
-	}
+@include from($tablet) {
-}
+	.divider {
-
+		display: block;
-.listItems {
+	}
-	text-align: start;
+}
-	display: flex;
+
-	flex-direction: column;
+.listItems {
-	flex-wrap: nowrap;
+	text-align: start;
-	gap: var(--section-gap);
+	display: flex;
-}
+	flex-direction: column;
-
+	flex-wrap: nowrap;
-@include from($tablet) {
+	gap: var(--section-gap);
-	.listItems {
+}
-		flex-direction: row;
+
-	}
+@include from($tablet) {
-
+	.listItems {
-	.listItems > ul {
+		flex-direction: row;
-		width: 50%;
+	}
-	}
+
-}
+	.listItems > ul {
-
+		width: 50%;
-@include from($desktop) {
+	}
-	.listItems {
+}
-		flex-direction: column;
+
-	}
+@include from($desktop) {
-
+	.listItems {
-	.listItems > ul {
+		flex-direction: column;
-		width: 100%;
+	}
-	}
+
-}
+	.listItems > ul {
-
+		width: 100%;
-.listItemBullet {
+	}
-	height: var(--bullet-list-item-icon-size);
+}
-	width: var(--bullet-list-item-icon-size);
+
-	margin-right: var(--spc-1x);
+.listItemBullet {
-}
+	height: var(--bullet-list-item-icon-size);
-
+	width: var(--bullet-list-item-icon-size);
-.starPoints,
+	margin-right: var(--spc-1x);
-.bulletPoints {
+}
-	list-style: none;
+
-	margin: 0;
+.starPoints,
-	padding: 0;
+.bulletPoints {
-	display: flex;
+	list-style: none;
-	flex-direction: column;
+	margin: 0;
-	flex-wrap: nowrap;
+	padding: 0;
-	gap: var(--bullet-list-item-gap);
+	display: flex;
-}
+	flex-direction: column;
-
+	flex-wrap: nowrap;
-.starPoints > li,
+	gap: var(--bullet-list-item-gap);
-.bulletPoints > li {
+}
-	display: flex;
+
-	align-items: center;
+.starPoints > li,
-}
+.bulletPoints > li {
-
+	display: flex;
-@include until($tablet) {
+	align-items: center;
-	.removeOnMobile {
+}
-		display: none;
+
-	}
+@include until($tablet) {
-}
+	.removeOnMobile {
+		display: none;
+	}
+}

src/views/collections/framework-field-guide/components/prominent-quote.module.scss

@@ -1,77 +1,76 @@
-.quoteContainer {
+.quoteContainer {
-	padding: var(--section-ver-padding) var(--section-hor-padding);
+	padding: var(--section-ver-padding) var(--section-hor-padding);
-	text-align: center;
+	text-align: center;
-	position: relative;
+	position: relative;
-	z-index: 1;
+	z-index: 1;
-	margin: 0;
+	margin: 0;
-}
+}
-
+
-.quoteText {
+.quoteText {
-	margin: 0;
+	margin: 0;
-	position: relative;
+	position: relative;
-}
+}
-
+
-.quoteText::after, 
+.quoteText::after,
-.quoteText::before {
+.quoteText::before {
-	content: " ";
+	content: " ";
-	position: absolute;
+	position: absolute;
-	height: var(--quote-marks-height_prominent);
+	height: var(--quote-marks-height_prominent);
-	aspect-ratio: var(--quote-mark-aspect-ratio);
+	aspect-ratio: var(--quote-mark-aspect-ratio);
-	background-image: url("../icons/big_quotation_mark.svg");
+	background-image: url("../icons/big_quotation_mark.svg");
-	background-repeat: no-repeat;
+	background-repeat: no-repeat;
-	background-size: contain;
+	background-size: contain;
-	z-index: -1;
+	z-index: -1;
-	opacity: var(--quote-mark-opacity);
+	opacity: var(--quote-mark-opacity);
-}
+}
-
+
-// Top right corner quote
+// Top right corner quote
-.quoteText::after {
+.quoteText::after {
-	top: calc(0px - var(--quote-mark-offset_prominent));
+	top: calc(0px - var(--quote-mark-offset_prominent));
-	right: calc(0px - var(--quote-mark-offset_prominent));
+	right: calc(0px - var(--quote-mark-offset_prominent));
-}
+}
-
+
-// Bottom left corner quote
+// Bottom left corner quote
-.quoteText::before {
+.quoteText::before {
-	bottom: calc(0px - var(--quote-mark-offset_prominent));
+	bottom: calc(0px - var(--quote-mark-offset_prominent));
-	left: calc(0px - var(--quote-mark-offset_prominent));
+	left: calc(0px - var(--quote-mark-offset_prominent));
-	transform: rotate(180deg);
+	transform: rotate(180deg);
-}
+}
-
+
-.quoteAvatar {
+.quoteAvatar {
-	margin-top: var(--section-gap);
+	margin-top: var(--section-gap);
-	margin-bottom: var(--spc-1x);
+	margin-bottom: var(--spc-1x);
-	margin-left: auto;
+	margin-left: auto;
-	margin-right: auto;
+	margin-right: auto;
-	height: var(--quote-avatar-size_prominent);
+	height: var(--quote-avatar-size_prominent);
-	width: var(--quote-avatar-size_prominent);
+	width: var(--quote-avatar-size_prominent);
-	border-radius: var(--corner-radius-circular);
+	border-radius: var(--corner-radius-circular);
-}
+}
-
+
-.quotePersonName {
+.quotePersonName {
-	margin: 0;
+	margin: 0;
-	color: var(--on-dark-emphasis-high);
+	color: var(--on-dark-emphasis-high);
-	text-decoration-line: underline !important;
+	text-decoration-line: underline !important;
-	text-decoration-color: var(--quote-arrow-link-color) !important;
+	text-decoration-color: var(--quote-arrow-link-color) !important;
-	text-decoration-thickness: 1.5px !important;
+	text-decoration-thickness: 1.5px !important;
-	position: relative;	
+	position: relative;
-	display: inline-block;
+	display: inline-block;
-}
+}
-
+
-.quotePersonName::before {
+.quotePersonName::before {
-	content: " ";
+	content: " ";
-	position: absolute;
+	position: absolute;
-	right: calc(-4px - 0.5rem);
+	right: calc(-4px - 0.5rem);
-	top: 50%;
+	top: 50%;
-	transform: translateY(-50%);
+	transform: translateY(-50%);
-	height: 0.5rem;
+	height: 0.5rem;
-	width: 0.5rem;
+	width: 0.5rem;
-	background-image: url("../icons/link_arrow.svg");
+	background-image: url("../icons/link_arrow.svg");
-	background-repeat: no-repeat;
+	background-repeat: no-repeat;
-}
+}
-
+
-
+.quotePersonTitle {
-.quotePersonTitle {
+	margin-top: 4px;
-	margin-top: 4px;
+	margin-bottom: 0;
-	margin-bottom: 0;
+	color: var(--on-dark-emphasis-medium);
-	color: var(--on-dark-emphasis-medium);
+}
-}

src/views/collections/framework-field-guide/components/quote-card.module.scss

@@ -1,84 +1,84 @@
-.quoteCardContainerLi {
+.quoteCardContainerLi {
-	display: block;
+	display: block;
-}
+}
-
+
-.quoteCardContainer {
+.quoteCardContainer {
-	display: flex;
+	display: flex;
-	flex-direction: column;
+	flex-direction: column;
-	gap: var(--quote-spacing);
+	gap: var(--quote-spacing);
-	padding: var(--quote-spacing);
+	padding: var(--quote-spacing);
-	position: relative;
+	position: relative;
-	overflow: hidden;
+	overflow: hidden;
-	z-index: 1;
+	z-index: 1;
-	background: var(--slate-800);
+	background: var(--slate-800);
-	transition: background var(--color-transition-time)
+	transition: background var(--color-transition-time)
-		var(--color-transition-ease);
+		var(--color-transition-ease);
-	border-radius: var(--quote-corner-radius);
+	border-radius: var(--quote-corner-radius);
-}
+}
-
+
-// Top right corner quote
+// Top right corner quote
-.quoteCardContainer::after {
+.quoteCardContainer::after {
-	content: " ";
+	content: " ";
-	position: absolute;
+	position: absolute;
-	height: var(--quote-marks-height_contained);
+	height: var(--quote-marks-height_contained);
-	aspect-ratio: var(--quote-mark-aspect-ratio);
+	aspect-ratio: var(--quote-mark-aspect-ratio);
-	background-image: url("../icons/big_quotation_mark.svg");
+	background-image: url("../icons/big_quotation_mark.svg");
-	background-repeat: no-repeat;
+	background-repeat: no-repeat;
-	background-size: contain;
+	background-size: contain;
-	z-index: -1;
+	z-index: -1;
-	opacity: var(--quote-mark-opacity);
+	opacity: var(--quote-mark-opacity);
-	top: calc(0px - var(--quote-mark-offset));
+	top: calc(0px - var(--quote-mark-offset));
-	right: calc(0px - var(--quote-mark-offset));
+	right: calc(0px - var(--quote-mark-offset));
-}
+}
-
+
-.quoteText {
+.quoteText {
-	margin: 0;
+	margin: 0;
-}
+}
-
+
-.personDetailsContainer picture {
+.personDetailsContainer picture {
-	height: var(--quote-avatar-size);
+	height: var(--quote-avatar-size);
-	width: var(--quote-avatar-size);
+	width: var(--quote-avatar-size);
-}
+}
-
+
-.personAvatar {
+.personAvatar {
-	height: var(--quote-avatar-size);
+	height: var(--quote-avatar-size);
-	width: var(--quote-avatar-size);
+	width: var(--quote-avatar-size);
-	border-radius: var(--corner-radius-circular);
+	border-radius: var(--corner-radius-circular);
-}
+}
-
+
-.personDetailsContainer {
+.personDetailsContainer {
-	display: flex;
+	display: flex;
-	flex-wrap: nowrap;
+	flex-wrap: nowrap;
-	gap: var(--spc-2x);
+	gap: var(--spc-2x);
-	align-items: center;
+	align-items: center;
-}
+}
-
+
-.personTextContainer {
+.personTextContainer {
-}
+}
-
+
-.personName {
+.personName {
-	margin: 0;
+	margin: 0;
-	text-decoration-line: underline !important;
+	text-decoration-line: underline !important;
-	text-decoration-color: var(--quote-arrow-link-color) !important;
+	text-decoration-color: var(--quote-arrow-link-color) !important;
-	text-decoration-thickness: 1.5px !important;
+	text-decoration-thickness: 1.5px !important;
-	position: relative;
+	position: relative;
-	width: fit-content;
+	width: fit-content;
-	color: var(--on-dark-emphasis-high);
+	color: var(--on-dark-emphasis-high);
-}
+}
-
+
-.personName::before {
+.personName::before {
-	content: " ";
+	content: " ";
-	position: absolute;
+	position: absolute;
-	right: calc(-4px - 0.5rem);
+	right: calc(-4px - 0.5rem);
-	top: 50%;
+	top: 50%;
-	transform: translateY(-50%);
+	transform: translateY(-50%);
-	height: 0.5rem;
+	height: 0.5rem;
-	width: 0.5rem;
+	width: 0.5rem;
-	background-image: url("../icons/link_arrow.svg");
+	background-image: url("../icons/link_arrow.svg");
-	background-repeat: no-repeat;
+	background-repeat: no-repeat;
-}
+}
-
+
-.personTitle {
+.personTitle {
-	margin: 0;
+	margin: 0;
-	color: var(--on-dark-emphasis-medium);
+	color: var(--on-dark-emphasis-medium);
-}
+}

src/views/collections/framework-field-guide/components/quotes-container.module.scss

@@ -1,72 +1,74 @@
-@import "../tokens/utils";
+@import "../tokens/utils";
-@import "../tokens/breakpoints.scss";
+@import "../tokens/breakpoints.scss";
-
+
-.quotesContainer {
+.quotesContainer {
-	column-count: 1;
+	column-count: 1;
-	column-gap: var(--quote-grid-gap);
+	column-gap: var(--quote-grid-gap);
-    margin: 0;
+	margin: 0;
-    padding: 0;
+	padding: 0;
-    list-style: none;
+	list-style: none;
-    margin-bottom: 5rem;
+	margin-bottom: 5rem;
-}
+}
-
+
-.quotesContainer > * {
+.quotesContainer > * {
-	break-inside: avoid;
+	break-inside: avoid;
-	margin-bottom: var(--quote-grid-gap);
+	margin-bottom: var(--quote-grid-gap);
-}
+}
-
+
-@include from($tablet) {
+@include from($tablet) {
-	.quotesContainer {
+	.quotesContainer {
-		column-count: 2;
+		column-count: 2;
-	}
+	}
-}
+}
-
+
-@include from($desktop) {
+@include from($desktop) {
-	.quotesContainer {
+	.quotesContainer {
-		column-count: 3;
+		column-count: 3;
-	}
+	}
-}
+}
-
+
-.quotesAndButtonsContainer {
+.quotesAndButtonsContainer {
-    position: relative;
+	position: relative;
-    display: flex;
+	display: flex;
-    flex-direction: column;
+	flex-direction: column;
-}
+}
-
+
-.showMoreLessContainer {
+.showMoreLessContainer {
-    order: -1;
+	order: -1;
-    flex-grow: 0;
+	flex-grow: 0;
-    position: sticky;
+	position: sticky;
-    z-index: 2;
+	z-index: 2;
-    top: 100vh;
+	top: 100vh;
-    pointer-events: none;
+	pointer-events: none;
-}
+}
-
+
-.fullHeightSizer {
+.fullHeightSizer {
-    position: absolute;
+	position: absolute;
-    top: -100vh;
+	top: -100vh;
-    left: 0;
+	left: 0;
-    height: 100vh;
+	height: 100vh;
-    width: 100%;
+	width: 100%;
-    pointer-events: none;
+	pointer-events: none;
-}
+}
-
+
-.showMoreButton, .showLessButton {
+.showMoreButton,
-    position: absolute !important;
+.showLessButton {
-    bottom: 1rem;
+	position: absolute !important;
-    left: 50%;
+	bottom: 1rem;
-    transform: translateX(-50%);
+	left: 50%;
-    pointer-events: all;
+	transform: translateX(-50%);
-}
+	pointer-events: all;
-
+}
-.quotesScrim {
+
-    background: var(--section-background);
+.quotesScrim {
-    transition: background var(--color-transition-time) var(--color-transition-ease);
+	background: var(--section-background);
-    height: 100%;
+	transition: background var(--color-transition-time)
-    position: absolute;
+		var(--color-transition-ease);
-    inset: 0;
+	height: 100%;
-    z-index: 1;
+	position: absolute;
-    mask-image: linear-gradient(0deg, black 0%, transparent 50%);
+	inset: 0;
-    -webkit-mask-image: linear-gradient(0deg, black 0%, transparent 50%);
+	z-index: 1;
-    pointer-events: none;
+	mask-image: linear-gradient(0deg, black 0%, transparent 50%);
-}
+	-webkit-mask-image: linear-gradient(0deg, black 0%, transparent 50%);
+	pointer-events: none;
+}

src/views/collections/framework-field-guide/components/shared-section-styling.scss

@@ -1,105 +1,108 @@
-@import "../tokens/utils";
+@import "../tokens/utils";
-@import "../tokens/breakpoints";
+@import "../tokens/breakpoints";
-
+
-.book-section {
+.book-section {
-    padding: var(--section-ver-padding) 0;
+	padding: var(--section-ver-padding) 0;
-    text-align: center;
+	text-align: center;
-    transition: background-color var(--color-transition-time) var(--color-transition-ease);
+	transition: background-color var(--color-transition-time)
-    will-change: transition;
+		var(--color-transition-ease);
-}
+	will-change: transition;
-
+}
-.book-section > :not([data-no-horiz-pad]) {
+
-    padding: 0 var(--section-ver-padding);
+.book-section > :not([data-no-horiz-pad]) {
-}
+	padding: 0 var(--section-ver-padding);
-
+}
-.book-section > :not([data-no-max-width]) {
+
-    max-width: var(--max-width_small);
+.book-section > :not([data-no-max-width]) {
-    margin-left: auto;
+	max-width: var(--max-width_small);
-    margin-right: auto;
+	margin-left: auto;
-}
+	margin-right: auto;
-
+}
-.book-title {
+
-    background: var(--text-gradient);
+.book-title {
-    transition: background var(--color-transition-time) var(--color-transition-ease);
+	background: var(--text-gradient);
-    will-change: transition;
+	transition: background var(--color-transition-time)
-    -webkit-background-clip: text;
+		var(--color-transition-ease);
-    background-clip: text;
+	will-change: transition;
-    color: transparent;
+	-webkit-background-clip: text;
-    margin: 0 auto;
+	background-clip: text;
-    line-height: normal !important;
+	color: transparent;
-}
+	margin: 0 auto;
-
+	line-height: normal !important;
-.book-subtitle {
+}
-    color: var(--on-dark-emphasis-medium);
+
-    margin: var(--section-gap) 0;
+.book-subtitle {
-}
+	color: var(--on-dark-emphasis-medium);
-
+	margin: var(--section-gap) 0;
-.book-bio {
+}
-    color: var(--on-dark-emphasis-high)
+
-}
+.book-bio {
-
+	color: var(--on-dark-emphasis-high);
-.book-ctas {
+}
-    display: grid;
+
-    grid-template-columns: repeat(auto-fit, 100%);
+.book-ctas {
-    justify-content: center;
+	display: grid;
-    gap: var(--section-gap);
+	grid-template-columns: repeat(auto-fit, 100%);
-    margin-left: auto;
+	justify-content: center;
-    margin-right: auto;
+	gap: var(--section-gap);
-    margin-top: var(--spc-6x);
+	margin-left: auto;
-    margin-bottom: var(--section-gap);
+	margin-right: auto;
-    @include from($tablet) {
+	margin-top: var(--spc-6x);
-        grid-template-columns: repeat(auto-fit, minmax(min-content, 280px));
+	margin-bottom: var(--section-gap);
-    }
+	@include from($tablet) {
-}
+		grid-template-columns: repeat(auto-fit, minmax(min-content, 280px));
-
+	}
-.book-coming-soon {
+}
-    color: var(--on-dark-emphasis-medium);
+
-}
+.book-coming-soon {
-
+	color: var(--on-dark-emphasis-medium);
-.section-metrics-main-container {
+}
-    display: flex;
+
-    justify-content: space-around;
+.section-metrics-main-container {
-}
+	display: flex;
-
+	justify-content: space-around;
-.section-metric-container {
+}
-    padding: var(--spc-2x) var(--spc-1x);
+
-    @include from($desktop) {
+.section-metric-container {
-        padding: var(--spc-4x) var(--spc-2x);
+	padding: var(--spc-2x) var(--spc-1x);
-    }
+	@include from($desktop) {
-}
+		padding: var(--spc-4x) var(--spc-2x);
-
+	}
-.section-metric-text {
+}
-    margin: 0;
+
-}
+.section-metric-text {
-
+	margin: 0;
-.text-style-main-text-only, .section-metric-asterisk {
+}
-    background: var(--text-gradient);
+
-    -webkit-background-clip: text;
+.text-style-main-text-only,
-    background-clip: text;
+.section-metric-asterisk {
-    color: transparent;
+	background: var(--text-gradient);
-}
+	-webkit-background-clip: text;
-
+	background-clip: text;
-.section-metric-subtitle {
+	color: transparent;
-    color: var(--on-dark-emphasis-medium);
+}
-    display: block;
+
-}
+.section-metric-subtitle {
-
+	color: var(--on-dark-emphasis-medium);
-.text-style-main-text {
+	display: block;
-    position: relative;
+}
-    display: inline-block;
+
-}
+.text-style-main-text {
-
+	position: relative;
-.section-metric-asterisk {
+	display: inline-block;
-    position: absolute;
+}
-    left: 100%;
+
-    top: calc(0px - var(--spc-1x));
+.section-metric-asterisk {
-}
+	position: absolute;
-
+	left: 100%;
-.section-chip-group-container {
+	top: calc(0px - var(--spc-1x));
-    margin: var(--section-gap) auto;
+}
-}
+
-
+.section-chip-group-container {
-.section-disclaimer {
+	margin: var(--section-gap) auto;
-    margin: 0;
+}
-    color: var(--on-dark-emphasis-medium);
+
-}
+.section-disclaimer {
+	margin: 0;
+	color: var(--on-dark-emphasis-medium);
+}

src/views/collections/framework-field-guide/components/signup-form.module.scss

@@ -1,86 +1,88 @@
-@import "../tokens/utils";
+@import "../tokens/utils";
-@import "../tokens/breakpoints";
+@import "../tokens/breakpoints";
-
+
-.signUpFormContainer {
+.signUpFormContainer {
-	display: flex;
+	display: flex;
-	flex-direction: column;
+	flex-direction: column;
-	gap: 24px;
+	gap: 24px;
-}
+}
-
+
-@include from($desktop) {
+@include from($desktop) {
-	.signUpFormContainer {
+	.signUpFormContainer {
-		flex-direction: row;
+		flex-direction: row;
-		align-items: flex-end;
+		align-items: flex-end;
-		gap: 0;
+		gap: 0;
-	}
+	}
-}
+}
-
+
-.inputContainer {
+.inputContainer {
-	display: inline-block;
+	display: inline-block;
-	text-align: start;
+	text-align: start;
-}
+}
-
+
-@include from($desktop) {
+@include from($desktop) {
-	.inputContainer {
+	.inputContainer {
-		flex-basis: 100%;
+		flex-basis: 100%;
-	}
+	}
-}
+}
-
+
-.emailInput {
+.emailInput {
-}
+}
-
+
-@include from($desktop) {
+@include from($desktop) {
-	.emailInput {
+	.emailInput {
-		margin-left: var(--section-gap);
+		margin-left: var(--section-gap);
-		margin-right: var(--sign-up-btn-gap);
+		margin-right: var(--sign-up-btn-gap);
-	}
+	}
-}
+}
-
+
-.inputLabel {
+.inputLabel {
-	margin-left: var(--spc-2x);
+	margin-left: var(--spc-2x);
-	margin-bottom: var(--spc-1x);
+	margin-bottom: var(--spc-1x);
-	display: block;
+	display: block;
-}
+}
-
+
-.input {
+.input {
-	box-sizing: border-box;
+	box-sizing: border-box;
-	width: 100%;
+	width: 100%;
-	border-style: solid;
+	border-style: solid;
-	border-radius: var(--form-border-radius);
+	border-radius: var(--form-border-radius);
-	border-width: var(--form-border-width);
+	border-width: var(--form-border-width);
-	border-color: var(--outline);
+	border-color: var(--outline);
-	background: transparent;
+	background: transparent;
-	color: white;
+	color: white;
-	padding: var(--form-padding-vertical) 0 var(--form-padding-vertical)
+	padding: var(--form-padding-vertical) 0 var(--form-padding-vertical)
-		var(--form-padding-horizontal);
+		var(--form-padding-horizontal);
-	transition: background var(--btn-state-transition-duration)
+	transition:
-		var(--btn-state-transition-easing), border-color var(--btn-state-transition-duration)
+		background var(--btn-state-transition-duration)
-		var(--btn-state-transition-easing);
+			var(--btn-state-transition-easing),
-}
+		border-color var(--btn-state-transition-duration)
-
+			var(--btn-state-transition-easing);
-.input:hover {
+}
-	background: var(--slate-800);
+
-}
+.input:hover {
-
+	background: var(--slate-800);
-.input:focus {
+}
-	background: var(--slate-700);
+
-	border-color: var(--outline-focused);
+.input:focus {
-}
+	background: var(--slate-700);
-
+	border-color: var(--outline-focused);
-@include until($desktop) {
+}
-	.input {
+
-		line-height: 1.5rem !important;
+@include until($desktop) {
-	}
+	.input {
-}
+		line-height: 1.5rem !important;
-
+	}
-.signUpButton {
+}
-	flex-shrink: 0;
+
-	border-radius: var(--form-border-radius) !important;
+.signUpButton {
-	height: fit-content;
+	flex-shrink: 0;
-}
+	border-radius: var(--form-border-radius) !important;
-
+	height: fit-content;
-@include from($desktop) {
+}
-	.hideOnDesktop {
+
-		display: none;
+@include from($desktop) {
-	}
+	.hideOnDesktop {
-}
+		display: none;
+	}
+}

src/views/collections/framework-field-guide/cover-layers/ecosystem/forest_background.tsx

@@ -1,13 +1,13 @@
-import { useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
-import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
+import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
-import { RepeatBackground } from "../shared/repeat-background";
+import { RepeatBackground } from "../shared/repeat-background";
-
+
-export const ForestBackground = () => {
+export const ForestBackground = () => {
-	const forestBackgroundColor = useCSSPropertyValue('--ecos-700', "#366E47");
+	const forestBackgroundColor = useCSSPropertyValue("--ecos-700", "#366E47");
-
+
-	const svg = useMemo(() => {
+	const svg = useMemo(() => {
-		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g><path fill='${forestBackgroundColor}' fill-rule='evenodd' d='M0 0v1342l8 5c1 2 10 6 20 9 15 5 20 13 41 69 14 35 29 64 31 68 32 60-76 427-76 427h26c27-81 52-191 73-285 19-82 35-150 45-174 15-27 75-97 81-93 3 2 12-4 21-13 8-9 20-17 27-18 6-1 17-8 23-15 9-11 11-12 11-3 0 6 5 10 12 10a539 539 0 0 1 121 257c18 107 21 121 28 118 8-2 8-56 0-201-6-100-6-100 8-125 13-23 28-32 32-20 1 3 10 9 20 13 23 11 25 25 30 169 4 101 60 258 60 258h20s-53-175-58-241c-7-88-2-182 7-198 7-15 12-18 22-14 7 2 18 8 23 13 10 8 11 8 11-1 0-8 11-16 33-24 22 8 33 16 33 24 0 9 1 9 11 1 5-5 16-11 23-13 10-4 15-1 22 14 9 16 9 28 3 111-8 96 17 410 45 410 10 10-26-151-19-340 5-144 7-158 30-169 10-4 19-10 20-13 4-12 19-3 32 20 14 25 14 25 8 125-8 145 20 385 28 388 22 3-18-198 0-305 12-71 34-129 77-201 23-40 36-56 44-56 7 0 12-4 12-10 0-9 2-8 11 3 6 7 17 14 23 15 7 1 19 9 27 18 9 9 18 15 21 13 6-4 66 66 81 93 10 24 26 92 45 174 21 94 46 204 73 285h26s-108-367-76-427c2-4 18-33 31-68 21-56 26-64 41-69 10-3 19-7 20-9l15-9c7-4 12-13 12-22 1-19 8-27 14-17 3 5 8 7 13 4 12-8 35-9 35-1 0 4 2 4 7-1 9-9 16-9 16 1 0 5 4 8 8 8 27-1 45 3 44 9-1 3 9 9 22 12 42 11 66 46 94 137 26 87 169 427 169 427l35 4s-119-279-158-395c-29-88-32-103-30-137 2-39 15-58 33-51 7 3 8-1 6-15-3-18 0-19 19-4 14 12 35 17 35 8 0-5 5-11 11-15 9-6 13-5 19 2 4 5 12 8 18 6 5-1 11 0 12 3s15 9 31 13c29 7 30 8 31 31 18 241 217 558 217 558h20s-224-376-201-573c8-13 21-11 16 3-2 5 1 8 6 8 4 0 8-2 8-5 0-7 29-19 36-15 3 2 8-2 12-9 6-8 12-11 21-8 9 2 14 1 14-5 0-5 1-6 7 0 13 13 22 7 26-16 2-16 6-22 11-20 4 1 14-1 21-5 8-4 16-7 19-6 2 0 6-3 8-8 1-5 7-9 11-9h3c4 8 10 9 26 8 12-1 18 0 14 3-10 7 1 17 22 20 8 1 15 6 17 13 1 6 7 17 14 24 10 12 14 13 21 7 6-5 10-5 15 2 5 8 17 15 33 20 23 8 35 17 35 25 0 9 1 9 11 1 5-5 16-11 23-13 10-4 15-1 22 14 9 16 21 175 21 307 0 127-30 169-11 169 49 0 13-421 49-464 6-7 19-10 20-13 4-12 19-3 32 20 14 25 11 76 11 131 0 70-11 277 23 394h19s-33-224-14-338c12-72 31-108 74-180 23-40 36-56 44-56 7 0 12-4 12-10 0-9 2-8 11 3 6 7 17 14 23 15 7 1 19 9 27 18 9 9 18 15 21 13 6-4 66 66 81 93 10 24 26 92 45 174 21 94 46 204 73 285h26s-108-367-76-427c2-4 18-33 31-68 21-56 26-64 41-69 10-3 19-7 20-9l8-5V0H0Zm397 1334c-5 2-3 7 6 20 9 14 13 16 17 10 8-12 6-17-3-13-5 2-9-1-10-8s-6-11-10-9Zm58 18c0 4-4 5-8 3-5-1-11 4-15 15-7 15-5 21 13 57l21 41v-57c0-32-2-59-5-61-4-2-6-1-6 2Zm-368 15c-12 7-12 7 4 51l16 44v-48c0-27-1-50-4-51-2-1-10 1-16 4Zm916-33c5 2 3 7-6 20-9 14-13 16-17 10-8-12-6-17 3-13 5 2 9-1 10-8s6-11 10-9Zm-58 18c0 4 4 5 8 3 5-1 11 4 15 15 7 15 5 21-13 57l-21 41s3-47 0-69c-4-29 2-47 5-49 4-2 6-1 6 2Zm368 15c12 7 12 7-4 51l-16 44v-48c0-27 1-50 4-51 2-1 10 1 16 4Zm1306-13c9-13 11-18 6-20-4-2-9 2-10 9s-5 10-10 8c-9-4-11 1-3 13 4 6 8 4 17-10Zm-44 1c-4 2-8 1-8-3 0-3-2-4-6-2-3 2-5 29-5 61v57l21-41c18-36 20-42 13-57-4-11-10-16-15-15Zm356 63c16-44 16-44 4-51-6-3-14-5-16-4-3 1-4 24-4 51v48l16-44Z' clip-rule='evenodd'></path></g></svg>`
+		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g><path fill='${forestBackgroundColor}' fill-rule='evenodd' d='M0 0v1342l8 5c1 2 10 6 20 9 15 5 20 13 41 69 14 35 29 64 31 68 32 60-76 427-76 427h26c27-81 52-191 73-285 19-82 35-150 45-174 15-27 75-97 81-93 3 2 12-4 21-13 8-9 20-17 27-18 6-1 17-8 23-15 9-11 11-12 11-3 0 6 5 10 12 10a539 539 0 0 1 121 257c18 107 21 121 28 118 8-2 8-56 0-201-6-100-6-100 8-125 13-23 28-32 32-20 1 3 10 9 20 13 23 11 25 25 30 169 4 101 60 258 60 258h20s-53-175-58-241c-7-88-2-182 7-198 7-15 12-18 22-14 7 2 18 8 23 13 10 8 11 8 11-1 0-8 11-16 33-24 22 8 33 16 33 24 0 9 1 9 11 1 5-5 16-11 23-13 10-4 15-1 22 14 9 16 9 28 3 111-8 96 17 410 45 410 10 10-26-151-19-340 5-144 7-158 30-169 10-4 19-10 20-13 4-12 19-3 32 20 14 25 14 25 8 125-8 145 20 385 28 388 22 3-18-198 0-305 12-71 34-129 77-201 23-40 36-56 44-56 7 0 12-4 12-10 0-9 2-8 11 3 6 7 17 14 23 15 7 1 19 9 27 18 9 9 18 15 21 13 6-4 66 66 81 93 10 24 26 92 45 174 21 94 46 204 73 285h26s-108-367-76-427c2-4 18-33 31-68 21-56 26-64 41-69 10-3 19-7 20-9l15-9c7-4 12-13 12-22 1-19 8-27 14-17 3 5 8 7 13 4 12-8 35-9 35-1 0 4 2 4 7-1 9-9 16-9 16 1 0 5 4 8 8 8 27-1 45 3 44 9-1 3 9 9 22 12 42 11 66 46 94 137 26 87 169 427 169 427l35 4s-119-279-158-395c-29-88-32-103-30-137 2-39 15-58 33-51 7 3 8-1 6-15-3-18 0-19 19-4 14 12 35 17 35 8 0-5 5-11 11-15 9-6 13-5 19 2 4 5 12 8 18 6 5-1 11 0 12 3s15 9 31 13c29 7 30 8 31 31 18 241 217 558 217 558h20s-224-376-201-573c8-13 21-11 16 3-2 5 1 8 6 8 4 0 8-2 8-5 0-7 29-19 36-15 3 2 8-2 12-9 6-8 12-11 21-8 9 2 14 1 14-5 0-5 1-6 7 0 13 13 22 7 26-16 2-16 6-22 11-20 4 1 14-1 21-5 8-4 16-7 19-6 2 0 6-3 8-8 1-5 7-9 11-9h3c4 8 10 9 26 8 12-1 18 0 14 3-10 7 1 17 22 20 8 1 15 6 17 13 1 6 7 17 14 24 10 12 14 13 21 7 6-5 10-5 15 2 5 8 17 15 33 20 23 8 35 17 35 25 0 9 1 9 11 1 5-5 16-11 23-13 10-4 15-1 22 14 9 16 21 175 21 307 0 127-30 169-11 169 49 0 13-421 49-464 6-7 19-10 20-13 4-12 19-3 32 20 14 25 11 76 11 131 0 70-11 277 23 394h19s-33-224-14-338c12-72 31-108 74-180 23-40 36-56 44-56 7 0 12-4 12-10 0-9 2-8 11 3 6 7 17 14 23 15 7 1 19 9 27 18 9 9 18 15 21 13 6-4 66 66 81 93 10 24 26 92 45 174 21 94 46 204 73 285h26s-108-367-76-427c2-4 18-33 31-68 21-56 26-64 41-69 10-3 19-7 20-9l8-5V0H0Zm397 1334c-5 2-3 7 6 20 9 14 13 16 17 10 8-12 6-17-3-13-5 2-9-1-10-8s-6-11-10-9Zm58 18c0 4-4 5-8 3-5-1-11 4-15 15-7 15-5 21 13 57l21 41v-57c0-32-2-59-5-61-4-2-6-1-6 2Zm-368 15c-12 7-12 7 4 51l16 44v-48c0-27-1-50-4-51-2-1-10 1-16 4Zm916-33c5 2 3 7-6 20-9 14-13 16-17 10-8-12-6-17 3-13 5 2 9-1 10-8s6-11 10-9Zm-58 18c0 4 4 5 8 3 5-1 11 4 15 15 7 15 5 21-13 57l-21 41s3-47 0-69c-4-29 2-47 5-49 4-2 6-1 6 2Zm368 15c12 7 12 7-4 51l-16 44v-48c0-27 1-50 4-51 2-1 10 1 16 4Zm1306-13c9-13 11-18 6-20-4-2-9 2-10 9s-5 10-10 8c-9-4-11 1-3 13 4 6 8 4 17-10Zm-44 1c-4 2-8 1-8-3 0-3-2-4-6-2-3 2-5 29-5 61v57l21-41c18-36 20-42 13-57-4-11-10-16-15-15Zm356 63c16-44 16-44 4-51-6-3-14-5-16-4-3 1-4 24-4 51v48l16-44Z' clip-rule='evenodd'></path></g></svg>`;
-	}, [forestBackgroundColor]);
+	}, [forestBackgroundColor]);
-
+
-	return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;
+	return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;
-};
+};

src/views/collections/framework-field-guide/cover-layers/ecosystem/forest_foreground.tsx

@@ -1,13 +1,13 @@
-import { useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
-import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
+import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
-import { RepeatBackground } from "../shared/repeat-background";
+import { RepeatBackground } from "../shared/repeat-background";
-
+
-export const ForestForeground = () => {
+export const ForestForeground = () => {
-	const forestForegroundColor = useCSSPropertyValue('--ecos-900', "#153D29");
+	const forestForegroundColor = useCSSPropertyValue("--ecos-900", "#153D29");
-
+
-	const svg = useMemo(() => {
+	const svg = useMemo(() => {
-		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g ><path fill='${forestForegroundColor}' fill-rule='evenodd' d='M0 763s4 0 7-5c3-4 8-5 19-5 11-1 20 1 20 4 0 4 4 4 12 0 10-5 13-5 17 0 3 6 10 5 33-2l35-9c12 0 57-25 56-31-1-3 9-6 23-6 19-1 25 1 28 9v16c-5 7 4 12 14 6 5-3 11-3 15 0 4 4 8 4 10 0 2-3 9-4 17 0 8 3 21 4 30 3 17-2 18 0 56 76l39 78-18 72c-48 196-49 375-3 547 23 87 23 87 12 78-9-7-11-7-19 4-7 10-13 12-26 10-11-2-25 2-37 8-21 12-39 15-33 6 2-4-3-3-11 0-8 4-14 9-13 11 0 1-5 9-12 16-13 13-28 12-37-1-3-4-7-2-13 5-5 7-9 9-9 7 0-3-4-2-8 2-6 5-9 5-9 1s-4-7-9-7c-10 0-20 12-43 12-12 0-17-9-21-6-5 4-7 3-7-4 0-8-2-9-9-3-13 11-60 14-60 4 0-6-6-8-20-7-12 2-17-12-26-12v280h3022v-280c0-18-10-24-30-30-8-2-28-18-30-24-2-3-5-3-7-1-7 4-29-15-29-25 0-4-2-7-5-7-4 0-6 3-6 6 0 4-4 5-9 3s-14-1-20 3c-9 4-11 4-11-3 0-5-4-9-9-9s-8-2-8-5c0-7-23-5-38 3-14 8-51 6-51-3 0-4-3-7-6-7s-8-4-10-8c-3-6-11-7-28-5-24 3-40 14-47 31-2 6-4 5-7-5-5-18-14-15-14 5 0 9-2 17-6 17-3 0-5-3-4-7 1-3-2-7-6-9-5-2-7 0-4 4 3 6 1 7-26 8-14 1-23 10-23 23 0 15-25 44-38 44l-25 3c-20 2-81-13-86-21-4-5-5-6-5-1 0 3-8 8-18 10-14 4-20 2-24-6-3-6-12-16-19-23-11-10-14-18-14-46 0-78-33-234-74-354l-27-81c-3-14 32-89 68-144 27-41 60-65 153-112 46-23 60-28 63-22 4 6 9 7 23 2 15-5 18-5 23 4 4 6 6 7 6 1 0-4 4-6 8-4 5 1 13-2 18-8 12-13 23-15 18-3-2 6 0 9 5 9s8-5 8-12c0-6 4-13 8-14 5-2 10-9 12-16 4-12 4-12 8-1 4 13 33 18 45 8 4-4 8-4 10 0s9 4 17 1c10-4 15-4 17 1s4 5 7 1c8-9 25-14 25-7 0 4 7 5 17 3 13-3 18-2 18 5 0 11 7 10 20-3 13-15 20-15 20 1 0 12 0 12 14-3 17-18 19-19 33-6 10 10 11 10 18-1 6-11 7-14 8-30 1-7 53-8 53 0 0 9 14 4 21-7V0H0v763Zm383-24 16-17 17-17 16 16c13 14 16 15 29 7 24-12 30 0 16 33-6 15-16 41-21 58l-2 4c-4 12-6 19-9 20-5 0-13-14-33-50l-5-9-24-45Zm870 20c2 1 13-2 24-8 23-12 34-14 34-5 0 3 5 7 11 9 12 5 24 17 24 24 0 3 10 9 21 13 12 4 30 15 41 26 19 19 35 25 35 13 0-10 22 17 24 30 1 7 5 13 9 12s7 1 7 4 4 4 8 3c4-2 10 1 12 7 3 9 5 8 13-4 7-10 16-15 29-15 10-1 18 1 18 4s6 5 12 5 11 2 11 5c0 8 60 1 67-8 3-4 10-8 15-8s10-3 11-6 12-7 25-8c12-1 27-4 33-6 7-3 10-2 10 5 0 8 2 8 12 3 9-5 13-5 16 1 4 5 8 4 18-3 17-12 18-12 37 5 9 8 23 16 31 18 11 2 22 16 42 49 42 69 122 173 184 238l54 57 12 103c23 204 26 253 18 261-7 6-7 5-4-3 4-12-11-14-15-2-2 5-13 7-31 6-15 0-34 3-41 7-7 5-19 7-27 4-11-2-14-1-14 6 0 14-10 11-31-10-15-15-23-19-34-17-12 3-15 1-16-10l-2-12-14 12c-8 7-17 12-22 12-4 0-7 3-7 6s-6 8-14 12c-7 3-16 15-20 25-4 11-9 20-11 20l-17 4c-8 2-13 0-13-4 0-3 3-5 6-3s6 0 6-5-4-9-9-9-8-3-8-6-8-6-17-6c-10 0-19-3-21-6s-7-5-12-3c-4 2-8 1-8-2s-3-6-8-6-11-4-14-9c-4-7-9-9-23-6-12 2-18 1-18-3s-10 3-22 15-24 19-26 16c-4-7-16-6-27 2-19 15-23 15-19 2 3-11 2-12-7-9-26 11-30 11-30-2 0-14-10-15-32-4-11 6-21 7-38 3-12-3-29-5-38-4-18 2-32-5-27-13 2-3 1-5-2-5s-8 3-10 6-8 4-14 2c-9-3-11 0-11 14 0 22-16 37-30 27-6-4-10-10-10-14s-4-5-10-2a402 402 0 0 1-68 26c-6 6-15 5-11-1a7 7 0 1 0-11-7c-4 6-41 5-47-1-2-2-11 0-20 5-15 7-17 7-20 0-5-14-17-11-29 5a41 41 0 0 1-49 15c-10-4-16-2-26 7s-13 10-13 3c0-6-4-9-14-8-9 1-14-1-16-8-2-8-11-11-37-14-20-2-39-2-44 0-6 2-9 0-9-6 0-11-4-11-28-3-10 4-18 10-18 15 0 11-10 10-27-4-9-7-22-11-34-10-10 0-20 0-22-2-1-2 2-26 9-54 24-111 30-183 31-343v-155l30-46 50-83c28-50 35-58 45-54s51-10 94-31c13-7 32-12 42-12 13 0 19-3 23-15 5-12 8-15 21-12 11 2 23-3 48-20 18-12 34-26 36-31s5-8 8-6Zm-685 51c-13 15-15 12-13-16 2-26 4-28 20-22 10 3 6 23-7 38Zm-18 87c0-37 1-39 21-57l21-18 19 22c11 13 19 28 19 33 0 7 5 12 13 13 12 1 13 5 16 47a511 511 0 0 1-51 275c-6 3-25-61-37-123-12-56-21-144-21-192Zm1838-7c7-14 50-49 65-53s44-4 44 0a450 450 0 0 1-109 53Zm-450 36-25-40c-8-13-11-20-6-17s15 4 23 3c19-2 28 17 23 48l-3 23-12-17Zm404-31c0-5 7-14 16-19 20-13 26-13 19 0-11 18-42 50-38 39 2-5 3-14 3-20Zm-52 24c1-3 8-9 16-12 16-5 16-4 18 16 1 17-3 29-20 55-11 18-29 51-40 74-15 33-19 38-23 29l-20-48c-9-21-16-39-16-42 0-9 33-40 35-33 5 13 50-22 50-39Zm-291 92c-38-51-41-68-16-80 7-3 14-3 15-1 1 3 5 5 10 5 4 0 8 2 8 6 0 3 5 4 11 2 8-3 12-1 12 6 0 5 2 7 6 5 3-2 9 0 14 4 4 3 12 5 17 3 6-2 11 2 15 12 8 22 32 124 38 163 5 29 4 32-3 26-13-10-87-99-127-151ZM834 952c-1 0-4-42-2-48s10 3 13 3c2 0 19-8-3 33-3 7-7 12-8 12Z' clip-rule='evenodd'></path></g></svg>`
+		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g ><path fill='${forestForegroundColor}' fill-rule='evenodd' d='M0 763s4 0 7-5c3-4 8-5 19-5 11-1 20 1 20 4 0 4 4 4 12 0 10-5 13-5 17 0 3 6 10 5 33-2l35-9c12 0 57-25 56-31-1-3 9-6 23-6 19-1 25 1 28 9v16c-5 7 4 12 14 6 5-3 11-3 15 0 4 4 8 4 10 0 2-3 9-4 17 0 8 3 21 4 30 3 17-2 18 0 56 76l39 78-18 72c-48 196-49 375-3 547 23 87 23 87 12 78-9-7-11-7-19 4-7 10-13 12-26 10-11-2-25 2-37 8-21 12-39 15-33 6 2-4-3-3-11 0-8 4-14 9-13 11 0 1-5 9-12 16-13 13-28 12-37-1-3-4-7-2-13 5-5 7-9 9-9 7 0-3-4-2-8 2-6 5-9 5-9 1s-4-7-9-7c-10 0-20 12-43 12-12 0-17-9-21-6-5 4-7 3-7-4 0-8-2-9-9-3-13 11-60 14-60 4 0-6-6-8-20-7-12 2-17-12-26-12v280h3022v-280c0-18-10-24-30-30-8-2-28-18-30-24-2-3-5-3-7-1-7 4-29-15-29-25 0-4-2-7-5-7-4 0-6 3-6 6 0 4-4 5-9 3s-14-1-20 3c-9 4-11 4-11-3 0-5-4-9-9-9s-8-2-8-5c0-7-23-5-38 3-14 8-51 6-51-3 0-4-3-7-6-7s-8-4-10-8c-3-6-11-7-28-5-24 3-40 14-47 31-2 6-4 5-7-5-5-18-14-15-14 5 0 9-2 17-6 17-3 0-5-3-4-7 1-3-2-7-6-9-5-2-7 0-4 4 3 6 1 7-26 8-14 1-23 10-23 23 0 15-25 44-38 44l-25 3c-20 2-81-13-86-21-4-5-5-6-5-1 0 3-8 8-18 10-14 4-20 2-24-6-3-6-12-16-19-23-11-10-14-18-14-46 0-78-33-234-74-354l-27-81c-3-14 32-89 68-144 27-41 60-65 153-112 46-23 60-28 63-22 4 6 9 7 23 2 15-5 18-5 23 4 4 6 6 7 6 1 0-4 4-6 8-4 5 1 13-2 18-8 12-13 23-15 18-3-2 6 0 9 5 9s8-5 8-12c0-6 4-13 8-14 5-2 10-9 12-16 4-12 4-12 8-1 4 13 33 18 45 8 4-4 8-4 10 0s9 4 17 1c10-4 15-4 17 1s4 5 7 1c8-9 25-14 25-7 0 4 7 5 17 3 13-3 18-2 18 5 0 11 7 10 20-3 13-15 20-15 20 1 0 12 0 12 14-3 17-18 19-19 33-6 10 10 11 10 18-1 6-11 7-14 8-30 1-7 53-8 53 0 0 9 14 4 21-7V0H0v763Zm383-24 16-17 17-17 16 16c13 14 16 15 29 7 24-12 30 0 16 33-6 15-16 41-21 58l-2 4c-4 12-6 19-9 20-5 0-13-14-33-50l-5-9-24-45Zm870 20c2 1 13-2 24-8 23-12 34-14 34-5 0 3 5 7 11 9 12 5 24 17 24 24 0 3 10 9 21 13 12 4 30 15 41 26 19 19 35 25 35 13 0-10 22 17 24 30 1 7 5 13 9 12s7 1 7 4 4 4 8 3c4-2 10 1 12 7 3 9 5 8 13-4 7-10 16-15 29-15 10-1 18 1 18 4s6 5 12 5 11 2 11 5c0 8 60 1 67-8 3-4 10-8 15-8s10-3 11-6 12-7 25-8c12-1 27-4 33-6 7-3 10-2 10 5 0 8 2 8 12 3 9-5 13-5 16 1 4 5 8 4 18-3 17-12 18-12 37 5 9 8 23 16 31 18 11 2 22 16 42 49 42 69 122 173 184 238l54 57 12 103c23 204 26 253 18 261-7 6-7 5-4-3 4-12-11-14-15-2-2 5-13 7-31 6-15 0-34 3-41 7-7 5-19 7-27 4-11-2-14-1-14 6 0 14-10 11-31-10-15-15-23-19-34-17-12 3-15 1-16-10l-2-12-14 12c-8 7-17 12-22 12-4 0-7 3-7 6s-6 8-14 12c-7 3-16 15-20 25-4 11-9 20-11 20l-17 4c-8 2-13 0-13-4 0-3 3-5 6-3s6 0 6-5-4-9-9-9-8-3-8-6-8-6-17-6c-10 0-19-3-21-6s-7-5-12-3c-4 2-8 1-8-2s-3-6-8-6-11-4-14-9c-4-7-9-9-23-6-12 2-18 1-18-3s-10 3-22 15-24 19-26 16c-4-7-16-6-27 2-19 15-23 15-19 2 3-11 2-12-7-9-26 11-30 11-30-2 0-14-10-15-32-4-11 6-21 7-38 3-12-3-29-5-38-4-18 2-32-5-27-13 2-3 1-5-2-5s-8 3-10 6-8 4-14 2c-9-3-11 0-11 14 0 22-16 37-30 27-6-4-10-10-10-14s-4-5-10-2a402 402 0 0 1-68 26c-6 6-15 5-11-1a7 7 0 1 0-11-7c-4 6-41 5-47-1-2-2-11 0-20 5-15 7-17 7-20 0-5-14-17-11-29 5a41 41 0 0 1-49 15c-10-4-16-2-26 7s-13 10-13 3c0-6-4-9-14-8-9 1-14-1-16-8-2-8-11-11-37-14-20-2-39-2-44 0-6 2-9 0-9-6 0-11-4-11-28-3-10 4-18 10-18 15 0 11-10 10-27-4-9-7-22-11-34-10-10 0-20 0-22-2-1-2 2-26 9-54 24-111 30-183 31-343v-155l30-46 50-83c28-50 35-58 45-54s51-10 94-31c13-7 32-12 42-12 13 0 19-3 23-15 5-12 8-15 21-12 11 2 23-3 48-20 18-12 34-26 36-31s5-8 8-6Zm-685 51c-13 15-15 12-13-16 2-26 4-28 20-22 10 3 6 23-7 38Zm-18 87c0-37 1-39 21-57l21-18 19 22c11 13 19 28 19 33 0 7 5 12 13 13 12 1 13 5 16 47a511 511 0 0 1-51 275c-6 3-25-61-37-123-12-56-21-144-21-192Zm1838-7c7-14 50-49 65-53s44-4 44 0a450 450 0 0 1-109 53Zm-450 36-25-40c-8-13-11-20-6-17s15 4 23 3c19-2 28 17 23 48l-3 23-12-17Zm404-31c0-5 7-14 16-19 20-13 26-13 19 0-11 18-42 50-38 39 2-5 3-14 3-20Zm-52 24c1-3 8-9 16-12 16-5 16-4 18 16 1 17-3 29-20 55-11 18-29 51-40 74-15 33-19 38-23 29l-20-48c-9-21-16-39-16-42 0-9 33-40 35-33 5 13 50-22 50-39Zm-291 92c-38-51-41-68-16-80 7-3 14-3 15-1 1 3 5 5 10 5 4 0 8 2 8 6 0 3 5 4 11 2 8-3 12-1 12 6 0 5 2 7 6 5 3-2 9 0 14 4 4 3 12 5 17 3 6-2 11 2 15 12 8 22 32 124 38 163 5 29 4 32-3 26-13-10-87-99-127-151ZM834 952c-1 0-4-42-2-48s10 3 13 3c2 0 19-8-3 33-3 7-7 12-8 12Z' clip-rule='evenodd'></path></g></svg>`;
-	}, [forestForegroundColor]);
+	}, [forestForegroundColor]);
-
+
-	return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;
+	return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;
-};
+};

src/views/collections/framework-field-guide/cover-layers/ecosystem/forest_middleground.tsx

@@ -1,13 +1,13 @@
-import { useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
-import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
+import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
-import { RepeatBackground } from "../shared/repeat-background";
+import { RepeatBackground } from "../shared/repeat-background";
-
+
-export const ForestMiddleground = () => {
+export const ForestMiddleground = () => {
-	const forestMiddlegroundColor = useCSSPropertyValue('--ecos-800', "#245538");
+	const forestMiddlegroundColor = useCSSPropertyValue("--ecos-800", "#245538");
-
+
-	const svg = useMemo(() => {
+	const svg = useMemo(() => {
-		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g ><path fill='${forestMiddlegroundColor}' fill-rule='evenodd' d='M3022 0v1104s-23 11-35 13c-17 3-22 9-22 19 0 4 2 5 6 3 12-8-3 18-18 32-10 8-23 13-35 12-11-1-27 5-43 16-14 9-28 14-31 11-3-2-9-3-14-1-12 4-40-11-40-21 0-13-11-10-15 3-3 11-19 13-34 4-5-3-20 7-48 35l-39 40-7 115c-8 128-3 330 8 349 4 6 16 15 26 19 11 4 25 14 32 21 7 8 22 16 32 18 13 3 23 11 31 26 6 11 14 21 18 21s13 5 19 11c13 11 15 31 6 56l-4 14H0v-130c0-12 9-18 14-16 5 1 13-6 21-19 12-20 25-28 25-14 0 5 3 5 9-1 5-4 10-11 10-16 0-8 4-9 31-11 5 0 10-5 11-11s10-12 23-14c11-2 22-7 23-10s10-7 20-9c10-1 27-5 37-9s20-5 24-1c9 7 30 7 25 0-1-3 1-6 7-6 5 0 12-4 15-10 6-11 7-10 7 0 0 11 2 10 16-4 9-9 19-15 22-13s5 0 5-4 6-6 15-3c9 2 17 1 19-3 3-3 8-4 12-2 4 3 12 6 18 7h6c6-2 9-17 22-96l1-5 20-116 7-41-27-36a853 853 0 0 0-113-133c-10-6-14-5-21 4-5 7-13 9-23 7-9-1-10 1-13 3-7 4-16-4-20-2-15 7-39 5-45-5-3-4-6-5-9-2-6 11-59-2-77-19-10-9-19-17-22-17s-16-9-30-21-33-23-44-25c-10-3-19-8-21-11V0h3022ZM1262 1074c-27 3-54 2-58-4-2-3 0-6 5-6 4-1-1-3-11-6-13-3-21-1-26 5-5 5-8 6-11 2-6-10-49-9-73 1-11 5-35 8-52 8l-33-1-16 53c-9 29-30 87-47 129-36 91-40 113-31 167 12 66 45 176 52 171 4-2 10 2 15 8 6 9 10 10 13 4 3-4 16-8 28-9 13 0 23-3 23-7s7 1 15 10c15 17 34 18 34 1 0-10 16-12 22-3s52 7 55-3c5-12 21-11 28 1 3 7 7 8 10 4 2-4 8-5 13-4 6 3 9 0 9-9 0-12 2-13 12-7l3 1c27-172 31-375 21-506Zm342 473c8 0 17 3 21 7 5 5 10 5 16 1 14-12 98-3 98 10 0 5 5 6 36 7 8 0 14 4 14 11 0 9 1 9 8 0 9-12 29-5 29 11 0 5 3 8 6 5 4-2 11 1 16 6s14 7 22 5c12-3 13-1 10 11-2 8-2 12 0 10s8 0 12 3c6 6 9 5 9 0s5-7 12-5 15 0 17-4c7-13 43-5 47 10 3 8 7 11 13 9 7-2 10 0 10 5s3 10 7 10c3 0 5 2 2 6-2 3-1 6 3 6 6 0 21 37 14 38-2 0 1 3 7 6 6 4 11 9 11 13 0 3 5 14 12 22 7 9 13 13 13 10s13-6 29-6l38-2c8 0 9-17 5-104-8-223-14-239-164-432-40-51-75-90-81-91-30-2-42-5-46-10-3-4-12-3-23 2-16 6-21 6-29-2-5-5-7-11-4-14 2-2-2-2-10 0-9 3-14 0-19-5l-27 44-22 35-63 101-15 97c-10 62-21 119-34 174Zm68-495c23-7 38-2 56 16l7 6v1c-1 17-12 33-35 67l-1 1c-22 34-38 54-37 45a1326 1326 0 0 0 10-136Zm-245-42c3 0 6 3 9 8 5 10 8 11 12 4 2-3 4-4 6-3 12 4 17 20 21 58l4 43-5 8c-29-29-53-57-57-67-6-15-2-52 9-51h1Zm-13 86 1 61v69l45-75-46-55Zm58 70c-10 15-21 35-34 58-23 41-24 46-29 123-3 45-7 99-10 120-3 35-3 38 5 27 7-8 11-9 14-4 2 4 7 5 10 3s6-1 6 2 11 5 25 5c19 0 30 3 39 13 10 10 16 12 21 7 6-4 8-3 8 4 0 6 2 8 7 9 12-48 32-153 40-209 2-14-49-90-102-158Zm16-23c39 39 82 77 93 74 9-3 11-30 16-98l1-14 2-36c-6-6-27 3-58 23-21 14-37 28-54 51Zm-625-66c-3-3-12-7-18-8-25-6-42-5-50 4-5 5-12 10-16 11-4 2 10 37 36 89l43 86 10-18c11-21 54-144 54-153 0-4-3-4-9 1s-10 5-12 0c-3-3-11-6-18-6-8 0-17-3-20-6Zm-139 76a443 443 0 0 0-39-76c-14 1-55 17-53 22 1 6 92 59 92 54Zm67 133c-22-46-30-53-139-111-30-16-57-28-60-25-18 18-106 467-95 484 4 7 23 2 28-6 2-3 35-6 73-7s67-4 65-7 7-4 21-1c13 2 25 7 26 10 2 4 6 3 11-1s9-5 9-2 4-1 10-9c6-9 13-13 21-10 6 2 14 0 16-5 8-13 25-17 34-9 6 6 6 6 3 0-6-11 2-10 13 2 19 19 30 8 28-29-1-18-5-46-8-62l-15-80c-9-58-13-69-41-132Zm-302-36 11-54c0-6-8-7-29-6-16 2-30 5-30 8s9 27 19 52l18 46 11-46Zm-32 60c0-6-39-95-46-107-9-13-39-16-36-3 1 7 82 115 82 110Zm1790-268c6 0 15-2 20-5 23-15 41 22 35 67-11 78-26 118-63 166-30 39-37 45-41 36l-26-84-23-73 13-22c7-11 18-22 24-24 7-2 13-11 16-26 2-12 7-21 10-19s9-1 14-6c6-5 15-10 21-10Zm-704 22c6-8 15-16 20-17l12-4c1 0 2 2 2 5s-10 11-22 18l-22 13 10-15Zm-53 21c0-11 5-21 14-27 28-20 31-9 5 22l-19 21v-16Zm842 68c-1-2 10-68 14-79 3-7 4-8 8-2 3 5 9 6 15 4 5-2 11 1 13 7 3 6-5 21-22 40l-28 30Zm-282 39c-32-37-51-68-47-75 5-7 16-8 27-1 4 3 14 26 23 51l15 46-18-21Zm102-78c0 4-4 15-5 15-3 0-5-25 0-25 3 0 5 7 5 10Zm88 279c19-33 101-138 163-210 26-30 49-52 51-49 2 2 12 5 22 6 21 2 43 25 67 68l14 26-17 89c-26 136-32 198-32 318 0 103-2 122-13 104-3-4-10-5-16-4-7 2-12 1-12-2 0-4-9-5-22-2-19 3-22 2-29-12-7-16-8-16-20-6-7 6-10 8-8 4 8-13-10-17-19-5-7 10-9 11-14 3-6-10-54-10-67 1-6 5-8 3-8-9 0-8-12-78-28-155l-27-139 15-26Zm314-225c-10-14-19-27-19-29s5-3 10-3 9 4 9 9 6 10 13 13c8 2 11 7 9 13-2 5-3 12-3 16s-9-5-19-19Zm108 40c2-6 4-19 4-28 0-16 1-16 10-4 11 16 11 18-5 32-13 11-13 11-9 0Z' clip-rule='evenodd'></path></g></svg>`
+		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3022 1920' ><g ><path fill='${forestMiddlegroundColor}' fill-rule='evenodd' d='M3022 0v1104s-23 11-35 13c-17 3-22 9-22 19 0 4 2 5 6 3 12-8-3 18-18 32-10 8-23 13-35 12-11-1-27 5-43 16-14 9-28 14-31 11-3-2-9-3-14-1-12 4-40-11-40-21 0-13-11-10-15 3-3 11-19 13-34 4-5-3-20 7-48 35l-39 40-7 115c-8 128-3 330 8 349 4 6 16 15 26 19 11 4 25 14 32 21 7 8 22 16 32 18 13 3 23 11 31 26 6 11 14 21 18 21s13 5 19 11c13 11 15 31 6 56l-4 14H0v-130c0-12 9-18 14-16 5 1 13-6 21-19 12-20 25-28 25-14 0 5 3 5 9-1 5-4 10-11 10-16 0-8 4-9 31-11 5 0 10-5 11-11s10-12 23-14c11-2 22-7 23-10s10-7 20-9c10-1 27-5 37-9s20-5 24-1c9 7 30 7 25 0-1-3 1-6 7-6 5 0 12-4 15-10 6-11 7-10 7 0 0 11 2 10 16-4 9-9 19-15 22-13s5 0 5-4 6-6 15-3c9 2 17 1 19-3 3-3 8-4 12-2 4 3 12 6 18 7h6c6-2 9-17 22-96l1-5 20-116 7-41-27-36a853 853 0 0 0-113-133c-10-6-14-5-21 4-5 7-13 9-23 7-9-1-10 1-13 3-7 4-16-4-20-2-15 7-39 5-45-5-3-4-6-5-9-2-6 11-59-2-77-19-10-9-19-17-22-17s-16-9-30-21-33-23-44-25c-10-3-19-8-21-11V0h3022ZM1262 1074c-27 3-54 2-58-4-2-3 0-6 5-6 4-1-1-3-11-6-13-3-21-1-26 5-5 5-8 6-11 2-6-10-49-9-73 1-11 5-35 8-52 8l-33-1-16 53c-9 29-30 87-47 129-36 91-40 113-31 167 12 66 45 176 52 171 4-2 10 2 15 8 6 9 10 10 13 4 3-4 16-8 28-9 13 0 23-3 23-7s7 1 15 10c15 17 34 18 34 1 0-10 16-12 22-3s52 7 55-3c5-12 21-11 28 1 3 7 7 8 10 4 2-4 8-5 13-4 6 3 9 0 9-9 0-12 2-13 12-7l3 1c27-172 31-375 21-506Zm342 473c8 0 17 3 21 7 5 5 10 5 16 1 14-12 98-3 98 10 0 5 5 6 36 7 8 0 14 4 14 11 0 9 1 9 8 0 9-12 29-5 29 11 0 5 3 8 6 5 4-2 11 1 16 6s14 7 22 5c12-3 13-1 10 11-2 8-2 12 0 10s8 0 12 3c6 6 9 5 9 0s5-7 12-5 15 0 17-4c7-13 43-5 47 10 3 8 7 11 13 9 7-2 10 0 10 5s3 10 7 10c3 0 5 2 2 6-2 3-1 6 3 6 6 0 21 37 14 38-2 0 1 3 7 6 6 4 11 9 11 13 0 3 5 14 12 22 7 9 13 13 13 10s13-6 29-6l38-2c8 0 9-17 5-104-8-223-14-239-164-432-40-51-75-90-81-91-30-2-42-5-46-10-3-4-12-3-23 2-16 6-21 6-29-2-5-5-7-11-4-14 2-2-2-2-10 0-9 3-14 0-19-5l-27 44-22 35-63 101-15 97c-10 62-21 119-34 174Zm68-495c23-7 38-2 56 16l7 6v1c-1 17-12 33-35 67l-1 1c-22 34-38 54-37 45a1326 1326 0 0 0 10-136Zm-245-42c3 0 6 3 9 8 5 10 8 11 12 4 2-3 4-4 6-3 12 4 17 20 21 58l4 43-5 8c-29-29-53-57-57-67-6-15-2-52 9-51h1Zm-13 86 1 61v69l45-75-46-55Zm58 70c-10 15-21 35-34 58-23 41-24 46-29 123-3 45-7 99-10 120-3 35-3 38 5 27 7-8 11-9 14-4 2 4 7 5 10 3s6-1 6 2 11 5 25 5c19 0 30 3 39 13 10 10 16 12 21 7 6-4 8-3 8 4 0 6 2 8 7 9 12-48 32-153 40-209 2-14-49-90-102-158Zm16-23c39 39 82 77 93 74 9-3 11-30 16-98l1-14 2-36c-6-6-27 3-58 23-21 14-37 28-54 51Zm-625-66c-3-3-12-7-18-8-25-6-42-5-50 4-5 5-12 10-16 11-4 2 10 37 36 89l43 86 10-18c11-21 54-144 54-153 0-4-3-4-9 1s-10 5-12 0c-3-3-11-6-18-6-8 0-17-3-20-6Zm-139 76a443 443 0 0 0-39-76c-14 1-55 17-53 22 1 6 92 59 92 54Zm67 133c-22-46-30-53-139-111-30-16-57-28-60-25-18 18-106 467-95 484 4 7 23 2 28-6 2-3 35-6 73-7s67-4 65-7 7-4 21-1c13 2 25 7 26 10 2 4 6 3 11-1s9-5 9-2 4-1 10-9c6-9 13-13 21-10 6 2 14 0 16-5 8-13 25-17 34-9 6 6 6 6 3 0-6-11 2-10 13 2 19 19 30 8 28-29-1-18-5-46-8-62l-15-80c-9-58-13-69-41-132Zm-302-36 11-54c0-6-8-7-29-6-16 2-30 5-30 8s9 27 19 52l18 46 11-46Zm-32 60c0-6-39-95-46-107-9-13-39-16-36-3 1 7 82 115 82 110Zm1790-268c6 0 15-2 20-5 23-15 41 22 35 67-11 78-26 118-63 166-30 39-37 45-41 36l-26-84-23-73 13-22c7-11 18-22 24-24 7-2 13-11 16-26 2-12 7-21 10-19s9-1 14-6c6-5 15-10 21-10Zm-704 22c6-8 15-16 20-17l12-4c1 0 2 2 2 5s-10 11-22 18l-22 13 10-15Zm-53 21c0-11 5-21 14-27 28-20 31-9 5 22l-19 21v-16Zm842 68c-1-2 10-68 14-79 3-7 4-8 8-2 3 5 9 6 15 4 5-2 11 1 13 7 3 6-5 21-22 40l-28 30Zm-282 39c-32-37-51-68-47-75 5-7 16-8 27-1 4 3 14 26 23 51l15 46-18-21Zm102-78c0 4-4 15-5 15-3 0-5-25 0-25 3 0 5 7 5 10Zm88 279c19-33 101-138 163-210 26-30 49-52 51-49 2 2 12 5 22 6 21 2 43 25 67 68l14 26-17 89c-26 136-32 198-32 318 0 103-2 122-13 104-3-4-10-5-16-4-7 2-12 1-12-2 0-4-9-5-22-2-19 3-22 2-29-12-7-16-8-16-20-6-7 6-10 8-8 4 8-13-10-17-19-5-7 10-9 11-14 3-6-10-54-10-67 1-6 5-8 3-8-9 0-8-12-78-28-155l-27-139 15-26Zm314-225c-10-14-19-27-19-29s5-3 10-3 9 4 9 9 6 10 13 13c8 2 11 7 9 13-2 5-3 12-3 16s-9-5-19-19Zm108 40c2-6 4-19 4-28 0-16 1-16 10-4 11 16 11 18-5 32-13 11-13 11-9 0Z' clip-rule='evenodd'></path></g></svg>`;
-	}, [forestMiddlegroundColor]);
+	}, [forestMiddlegroundColor]);
-
+
-	return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;
+	return <RepeatBackground aspectRatio={"3022/1920"} svg={svg} />;
-};
+};

src/views/collections/framework-field-guide/cover-layers/fundamentals/background_repeat.tsx

@@ -1,16 +1,22 @@
-import { useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
-import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
+import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
-import { RepeatBackground } from "../shared/repeat-background";
+import { RepeatBackground } from "../shared/repeat-background";
-
+
-export const BackgroundRepeat = () => {
+export const BackgroundRepeat = () => {
-	const groundColor = useCSSPropertyValue('--fund-900', "#17383F");
+	const groundColor = useCSSPropertyValue("--fund-900", "#17383F");
-
+
-	const svg = useMemo(() => {
+	const svg = useMemo(() => {
-		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 6400 1680'><path fill='${groundColor}' d='m2871 980-21 2c-40 4-117 11-152 9-32-1-79 6-128 13-43 6-87 12-124 14-24 1-46 6-46 6l-64 2-33-2s-11-5-23-6c-19-2-42-8-64-14-25-7-50-14-66-13-18 2-58-5-78-9l-11-2-12-1c-17-2-45-5-53-8-11-4-95-14-105-14-9 0-93 10-104 14-9 3-37 6-53 8l-12 1-11 2c-20 4-60 11-78 9-17-1-41 6-66 13-22 6-45 12-64 14-12 1-24 6-24 6l-786 50-25-4-46-8a3657 3657 0 0 0-168 8c-7 3-48 7-82 11a669 669 0 0 0-55 6l-51-1h-23v1l-198-1H0v594h6400v-594c-96 0-303 9-325 0l-47-5c-34-4-75-8-82-11-12-4-161-8-168-8l-46 8-27 5-700-52v-1s-11-3-23-4c-19-1-42-6-64-11-25-5-49-11-65-10-18 0-58-6-79-9l-10-1-12-1-53-7c-11-3-95-12-104-13a1690 1690 0 0 0-158 9h-12l-11 1c-21 2-61 5-79 3-16-1-40 2-66 6-22 3-45 7-64 7-12 0-23 3-23 3l-394 3c-33-5-63-8-86-7a1532 1532 0 0 1-196-12c-33-2-86-5-103-8-21-4-185-14-203-14s-182 10-203 14c-17 3-70 6-103 8l-23 1Z'/></svg>`
+		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 6400 1680'><path fill='${groundColor}' d='m2871 980-21 2c-40 4-117 11-152 9-32-1-79 6-128 13-43 6-87 12-124 14-24 1-46 6-46 6l-64 2-33-2s-11-5-23-6c-19-2-42-8-64-14-25-7-50-14-66-13-18 2-58-5-78-9l-11-2-12-1c-17-2-45-5-53-8-11-4-95-14-105-14-9 0-93 10-104 14-9 3-37 6-53 8l-12 1-11 2c-20 4-60 11-78 9-17-1-41 6-66 13-22 6-45 12-64 14-12 1-24 6-24 6l-786 50-25-4-46-8a3657 3657 0 0 0-168 8c-7 3-48 7-82 11a669 669 0 0 0-55 6l-51-1h-23v1l-198-1H0v594h6400v-594c-96 0-303 9-325 0l-47-5c-34-4-75-8-82-11-12-4-161-8-168-8l-46 8-27 5-700-52v-1s-11-3-23-4c-19-1-42-6-64-11-25-5-49-11-65-10-18 0-58-6-79-9l-10-1-12-1-53-7c-11-3-95-12-104-13a1690 1690 0 0 0-158 9h-12l-11 1c-21 2-61 5-79 3-16-1-40 2-66 6-22 3-45 7-64 7-12 0-23 3-23 3l-394 3c-33-5-63-8-86-7a1532 1532 0 0 1-196-12c-33-2-86-5-103-8-21-4-185-14-203-14s-182 10-203 14c-17 3-70 6-103 8l-23 1Z'/></svg>`;
-	}, [groundColor]);
+	}, [groundColor]);
-
+
-	return <RepeatBackground aspectRatio={"6400/1680"} svg={svg} javascriptEnabledStyle={{	
+	return (
-		height: "1px",
+		<RepeatBackground
-		flexGrow: '1',
+			aspectRatio={"6400/1680"}
-	}} />;
+			svg={svg}
-};
+			javascriptEnabledStyle={{
+				height: "1px",
+				flexGrow: "1",
+			}}
+		/>
+	);
+};

src/views/collections/framework-field-guide/cover-layers/fundamentals/ground_and_man.tsx

@@ -1,6 +1,11 @@
 export const GroundAndManSvg = () => {
 	return (
-		<svg class="nofill colorTransitionSVG" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1680 1680">
+		<svg
+			class="nofill colorTransitionSVG"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 1680 1680"
+		>
 			<g>
 				<path
 					fill="var(--fund-900)"

src/views/collections/framework-field-guide/cover-layers/fundamentals/mountains.tsx

@@ -1,13 +1,13 @@
-import { useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
-import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
+import { useCSSPropertyValue } from "../../hooks/use-css-property-value";
-import { RepeatBackground } from "../shared/repeat-background";
+import { RepeatBackground } from "../shared/repeat-background";
-
+
-export const Mountains = () => {
+export const Mountains = () => {
-	const mountainColor = useCSSPropertyValue('--fund-300', "#94CEDB");
+	const mountainColor = useCSSPropertyValue("--fund-300", "#94CEDB");
-
+
-	const svg = useMemo(() => {
+	const svg = useMemo(() => {
-		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3200 1680'><path fill='${mountainColor}' d='M325 1067h2550s-73-219-79-229c-19-33-96-137-98-138l-23-11a953 953 0 0 1-79-59l-26-22-26-24c-18-15-30-27-42-42-7-10-14-18-25-28l-20-23c-7-11-10-13-24-21l-17-13a654 654 0 0 0-63-64l-14-14-13-14c-7-10-14-16-23-23-6-5-9-9-17-22-5-10-7-12-11-12-3 0-10 4-18 11a593 593 0 0 0-52 60l-13 15c-6 8-11 14-15 15-2 1-4 0-10-3-4-2-10-5-14-5-9-3-13-5-19-11-8-9-12-7-32 16-14 16-20 22-20 20s-9 5-19 15l-10 11-4-4-12-5-13-9c-7-6-20-14-24-14l-12 4c-14 5-15 5-20 3-6-2-8-2-11 3-6 9-11 22-13 29l-6 17c-3 8-5 10-8 12l-8 8-10 11-22 31c-3 6-5 8-10 9-6 2-9 5-13 12l-15 25-8 8c-17 13-25 21-30 29-3 5-6 8-9 10l-10 6-9 6h-8c-5 0-7 0-12 4l-10 10c-6 8-14 13-23 14-13 2-14 3-23 12-8 8-9 9-16 11l-15 7c-9 7-15 9-22 9-6 0-6 0-10 5l-6 10c-3 7-19 22-31 30l-16 12-10 7c-2 1-5 0-13-2l-24-6-28-7c-21-6-28-8-49-12l-58-15a2012 2012 0 0 0-114-33c-10-4-71-33-80-39l-21-15-25-18c-6-4-17-11-23-17l-20-17-22-18a431 431 0 0 0-57-46 462 462 0 0 0-44-33l-10-8c-3-1-3-1-8 2l-14 10c-10 10-17 15-29 23-10 6-32 23-46 34-15 12-28 21-53 38a534 534 0 0 0-103 85l-20 18c-14 13-18 16-41 30a157 157 0 0 0-63 57c-2 6-4 9-8 12l-15 15a44799 44799 0 0 0-34 39l-17 16c-12 11-21 18-31 24l-14 10-13 11c-12 9-32 27-38 35l-17 14-29 27a1334 1334 0 0 0-26 27l-10 8-17 16c-10 9-17 17-20 21l-5 7Z'/></svg>`
+		return `<svg class="nofill" data-repeated="true" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 3200 1680'><path fill='${mountainColor}' d='M325 1067h2550s-73-219-79-229c-19-33-96-137-98-138l-23-11a953 953 0 0 1-79-59l-26-22-26-24c-18-15-30-27-42-42-7-10-14-18-25-28l-20-23c-7-11-10-13-24-21l-17-13a654 654 0 0 0-63-64l-14-14-13-14c-7-10-14-16-23-23-6-5-9-9-17-22-5-10-7-12-11-12-3 0-10 4-18 11a593 593 0 0 0-52 60l-13 15c-6 8-11 14-15 15-2 1-4 0-10-3-4-2-10-5-14-5-9-3-13-5-19-11-8-9-12-7-32 16-14 16-20 22-20 20s-9 5-19 15l-10 11-4-4-12-5-13-9c-7-6-20-14-24-14l-12 4c-14 5-15 5-20 3-6-2-8-2-11 3-6 9-11 22-13 29l-6 17c-3 8-5 10-8 12l-8 8-10 11-22 31c-3 6-5 8-10 9-6 2-9 5-13 12l-15 25-8 8c-17 13-25 21-30 29-3 5-6 8-9 10l-10 6-9 6h-8c-5 0-7 0-12 4l-10 10c-6 8-14 13-23 14-13 2-14 3-23 12-8 8-9 9-16 11l-15 7c-9 7-15 9-22 9-6 0-6 0-10 5l-6 10c-3 7-19 22-31 30l-16 12-10 7c-2 1-5 0-13-2l-24-6-28-7c-21-6-28-8-49-12l-58-15a2012 2012 0 0 0-114-33c-10-4-71-33-80-39l-21-15-25-18c-6-4-17-11-23-17l-20-17-22-18a431 431 0 0 0-57-46 462 462 0 0 0-44-33l-10-8c-3-1-3-1-8 2l-14 10c-10 10-17 15-29 23-10 6-32 23-46 34-15 12-28 21-53 38a534 534 0 0 0-103 85l-20 18c-14 13-18 16-41 30a157 157 0 0 0-63 57c-2 6-4 9-8 12l-15 15a44799 44799 0 0 0-34 39l-17 16c-12 11-21 18-31 24l-14 10-13 11c-12 9-32 27-38 35l-17 14-29 27a1334 1334 0 0 0-26 27l-10 8-17 16c-10 9-17 17-20 21l-5 7Z'/></svg>`;
-	}, [mountainColor]);
+	}, [mountainColor]);
-
+
-	return <RepeatBackground aspectRatio={"3200/1680"} svg={svg} />;
+	return <RepeatBackground aspectRatio={"3200/1680"} svg={svg} />;
-};
+};

src/views/collections/framework-field-guide/cover-layers/fundamentals/sign_ground_reflection.tsx

@@ -1,6 +1,11 @@
 export const SignGroundReflection = () => {
 	return (
-		<svg class="nofill colorTransitionSVG" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1680 1680">
+		<svg
+			class="nofill colorTransitionSVG"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 1680 1680"
+		>
 			<g>
 				<path
 					fill="var(--fund-300)"