fix a lot of the templates

src/components/resume/templates/azurill.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -8,68 +7,61 @@ import { PagePicture } from "../shared/page-picture";
 import { useResumeStore } from "../store/resume";
 import type { TemplateProps } from "./types";
 
+const sectionClassName = cn(
+	// Heading Decoration in Sidebar Layout
+	"group-data-[layout=sidebar]:[&>h6]:px-4",
+	"group-data-[layout=sidebar]:[&>h6]:relative",
+	"group-data-[layout=sidebar]:[&>h6]:inline-flex",
+	"group-data-[layout=sidebar]:[&>h6]:items-center",
+	"group-data-[layout=sidebar]:[&>h6]:before:content-['']",
+	"group-data-[layout=sidebar]:[&>h6]:before:absolute",
+	"group-data-[layout=sidebar]:[&>h6]:before:left-0",
+	"group-data-[layout=sidebar]:[&>h6]:before:rounded-full",
+	"group-data-[layout=sidebar]:[&>h6]:before:size-2",
+	"group-data-[layout=sidebar]:[&>h6]:before:border",
+	"group-data-[layout=sidebar]:[&>h6]:before:border-(--page-primary-color)",
+	"group-data-[layout=sidebar]:[&>h6]:after:content-['']",
+	"group-data-[layout=sidebar]:[&>h6]:after:absolute",
+	"group-data-[layout=sidebar]:[&>h6]:after:right-0",
+	"group-data-[layout=sidebar]:[&>h6]:after:rounded-full",
+	"group-data-[layout=sidebar]:[&>h6]:after:size-2",
+	"group-data-[layout=sidebar]:[&>h6]:after:border",
+	"group-data-[layout=sidebar]:[&>h6]:after:border-(--page-primary-color)",
+
+	// Section in Sidebar Layout
+	"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",
+	"group-data-[layout=sidebar]:[&_.section-item-header>div]:items-start",
+
+	// Section in Main Layout
+	"group-data-[layout=main]:[&>.section-content]:relative",
+	"group-data-[layout=main]:[&>.section-content]:ml-4",
+	"group-data-[layout=main]:[&>.section-content]:pl-4",
+	"group-data-[layout=main]:[&>.section-content]:border-l",
+	"group-data-[layout=main]:[&>.section-content]:border-(--page-primary-color)",
+
+	// Timeline Marker in Main Layout
+	"group-data-[layout=main]:[&>.section-content]:after:content-['']",
+	"group-data-[layout=main]:[&>.section-content]:after:absolute",
+	"group-data-[layout=main]:[&>.section-content]:after:top-5",
+	"group-data-[layout=main]:[&>.section-content]:after:left-0",
+	"group-data-[layout=main]:[&>.section-content]:after:size-2.5",
+	"group-data-[layout=main]:[&>.section-content]:after:translate-x-[-50%]",
+	"group-data-[layout=main]:[&>.section-content]:after:translate-y-[-50%]",
+	"group-data-[layout=main]:[&>.section-content]:after:rounded-full",
+	"group-data-[layout=main]:[&>.section-content]:after:border",
+	"group-data-[layout=main]:[&>.section-content]:after:border-(--page-primary-color)",
+	"group-data-[layout=main]:[&>.section-content]:after:bg-(--page-background-color)",
+);
+
 /**
  * Template: Azurill
  */
 export function AzurillTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
-
-	const sectionClassName = cn(
-		// Heading Decoration in Sidebar Layout
-		"group-data-[layout=sidebar]:[&>h6]:px-4",
-		"group-data-[layout=sidebar]:[&>h6]:relative",
-		"group-data-[layout=sidebar]:[&>h6]:inline-flex",
-		"group-data-[layout=sidebar]:[&>h6]:items-center",
-		"group-data-[layout=sidebar]:[&>h6]:before:content-['']",
-		"group-data-[layout=sidebar]:[&>h6]:before:absolute",
-		"group-data-[layout=sidebar]:[&>h6]:before:start-0",
-		"group-data-[layout=sidebar]:[&>h6]:before:rounded-full",
-		"group-data-[layout=sidebar]:[&>h6]:before:size-2",
-		"group-data-[layout=sidebar]:[&>h6]:before:border",
-		"group-data-[layout=sidebar]:[&>h6]:before:border-(--page-primary-color)",
-		"group-data-[layout=sidebar]:[&>h6]:after:content-['']",
-		"group-data-[layout=sidebar]:[&>h6]:after:absolute",
-		"group-data-[layout=sidebar]:[&>h6]:after:end-0",
-		"group-data-[layout=sidebar]:[&>h6]:after:rounded-full",
-		"group-data-[layout=sidebar]:[&>h6]:after:size-2",
-		"group-data-[layout=sidebar]:[&>h6]:after:border",
-		"group-data-[layout=sidebar]:[&>h6]:after:border-(--page-primary-color)",
-
-		// Section in Sidebar Layout
-		"group-data-[layout=sidebar]:[&_.section-item-header>div]:flex-col",
-		"group-data-[layout=sidebar]:[&_.section-item-header>div]:items-start",
-
-		// Section in Main Layout
-		"group-data-[layout=main]:[&>.section-content]:relative",
-		"group-data-[layout=main]:[&>.section-content]:ms-4",
-		"group-data-[layout=main]:[&>.section-content]:ps-4",
-		"group-data-[layout=main]:[&>.section-content]:border-s",
-		"group-data-[layout=main]:[&>.section-content]:border-(--page-primary-color)",
-
-		// Timeline Marker in Main Layout
-		"group-data-[layout=main]:[&>.section-content]:after:content-['']",
-		"group-data-[layout=main]:[&>.section-content]:after:absolute",
-		"group-data-[layout=main]:[&>.section-content]:after:top-5",
-		"group-data-[layout=main]:[&>.section-content]:after:start-0",
-		"group-data-[layout=main]:[&>.section-content]:after:size-2.5",
-		rtlDirection
-			? "group-data-[layout=main]:[&>.section-content]:after:[transform:translate(50%,-50%)]"
-			: "group-data-[layout=main]:[&>.section-content]:after:translate-x-[-50%]",
-		"group-data-[layout=main]:[&>.section-content]:after:translate-y-[-50%]",
-		"group-data-[layout=main]:[&>.section-content]:after:rounded-full",
-		"group-data-[layout=main]:[&>.section-content]:after:border",
-		"group-data-[layout=main]:[&>.section-content]:after:border-(--page-primary-color)",
-		"group-data-[layout=main]:[&>.section-content]:after:bg-(--page-background-color)",
-	);
 
 	return (
-		<div
-			className="template-azurill page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0"
-			style={{ direction: rtlDirection ? "rtl" : "ltr" }}
-		>
+		<div className="template-azurill page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
 			{isFirstPage && <Header />}
 
 			<div className="flex gap-x-(--page-gap-x)">
@@ -100,10 +92,10 @@ function Header() {
 	const basics = useResumeStore((state) => state.resume.data.basics);
 
 	return (
-		<div className="page-header flex flex-col items-center gap-y-2">
+		<div className="page-header flex flex-col items-center gap-y-(--page-gap-y)">
 			<PagePicture />
 
-			<div className="page-basics space-y-2 text-center">
+			<div className="page-basics space-y-(--page-gap-y) text-center">
 				<div className="basics-header">
 					<h2 className="basics-name">{basics.name}</h2>
 					<p className="basics-headline">{basics.headline}</p>

src/components/resume/templates/bronzor.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -22,14 +21,9 @@ const sectionClassName = cn(
 export function BronzorTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div
-			className="template-bronzor page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0"
-			style={{ direction: rtlDirection ? "rtl" : "ltr" }}
-		>
+		<div className="template-bronzor page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
 			{isFirstPage && <Header />}
 
 			<div className="space-y-(--page-gap-y)">

src/components/resume/templates/chikorita.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -34,16 +33,12 @@ const sectionClassName = cn(
 export function ChikoritaTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div className="template-chikorita page-content" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
+		<div className="template-chikorita page-content">
 			{/* Sidebar Background */}
 			{!fullWidth && (
-				<div
-					className={`page-sidebar-background absolute inset-y-0 ${rtlDirection ? "start-0" : "end-0"} z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)`}
-				/>
+				<div className="page-sidebar-background absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color) ltr:end-0 rtl:start-0" />
 			)}
 
 			{isFirstPage && <Header />}

src/components/resume/templates/ditgar.tsx

@@ -1,4 +1,3 @@
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -29,32 +28,18 @@ const sectionClassName = cn(
 export function DitgarTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	const SummaryComponent = getSectionComponent("summary", {
 		sectionClassName: cn(sectionClassName, "px-(--page-margin-x) pt-(--page-margin-y)"),
 	});
 
 	return (
-		<div
-			className="template-ditgar page-content grid min-h-[inherit] grid-cols-3"
-			style={{ direction: rtlDirection ? "rtl" : "ltr" }}
-		>
+		<div className="template-ditgar page-content">
 			{/* Sidebar Background */}
 			{(!fullWidth || isFirstPage) && (
-				<div
-					className={`page-sidebar-background absolute inset-y-0 ${rtlDirection ? "end-0" : "start-0"} z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20`}
-				/>
+				<div className="page-sidebar-background absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:start-0 rtl:end-0" />
 			)}
 
-			<div
-				data-layout="sidebar"
-				className={cn("sidebar group flex flex-col", !(isFirstPage || !fullWidth) && "hidden")}
-			>
-				{isFirstPage && <Header />}
-			</div>
-
 			<div className="flex">
 				{(!fullWidth || isFirstPage) && (
 					<aside data-layout="sidebar" className="sidebar group z-10 flex w-(--page-sidebar-width) shrink-0 flex-col">

src/components/resume/templates/ditto.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -20,11 +19,9 @@ const sectionClassName = cn(
 export function DittoTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div className="template-ditto page-content" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
+		<div className="template-ditto page-content">
 			{isFirstPage && <Header />}
 
 			<div className="flex pt-(--page-margin-y)">

src/components/resume/templates/gengar.tsx

@@ -1,4 +1,3 @@
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -23,16 +22,12 @@ const sectionClassName = cn(
 export function GengarTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div className="template-gengar page-content" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
+		<div className="template-gengar page-content">
 			{/* Sidebar Background */}
 			{(!fullWidth || isFirstPage) && (
-				<div
-					className={`page-sidebar-background absolute inset-y-0 ${rtlDirection ? "end-0" : "start-0"} z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20`}
-				/>
+				<div className="page-sidebar-background absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:start-0 rtl:end-0" />
 			)}
 
 			<div className="flex">

src/components/resume/templates/glalie.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -23,34 +22,32 @@ const sectionClassName = cn(
 export function GlalieTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div className="template-glalie page-content" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
+		<div className="template-glalie page-content">
 			{/* Sidebar Background */}
 			{(!fullWidth || isFirstPage) && (
-				<div
-					className={`page-sidebar-background absolute inset-y-0 ${rtlDirection ? "end-0" : "start-0"} z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20`}
-				/>
+				<div className="page-sidebar-background absolute inset-y-0 z-0 w-(--page-sidebar-width) shrink-0 bg-(--page-primary-color)/20 ltr:start-0 rtl:end-0" />
 			)}
 
 			<div className="flex">
-				<aside
-					data-layout="sidebar"
-					className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-4 px-(--page-margin-x) pt-(--page-margin-y)"
-				>
-					{isFirstPage && <Header />}
+				{(!fullWidth || isFirstPage) && (
+					<aside
+						data-layout="sidebar"
+						className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-4 px-(--page-margin-x) pt-(--page-margin-y)"
+					>
+						{isFirstPage && <Header />}
 
-					{!fullWidth && (
-						<div className="shrink-0 space-y-4 overflow-x-hidden">
-							{sidebar.map((section) => {
-								const Component = getSectionComponent(section, { sectionClassName });
-								return <Component key={section} id={section} />;
-							})}
-						</div>
-					)}
-				</aside>
+						{!fullWidth && (
+							<div className="shrink-0 space-y-4 overflow-x-hidden">
+								{sidebar.map((section) => {
+									const Component = getSectionComponent(section, { sectionClassName });
+									return <Component key={section} id={section} />;
+								})}
+							</div>
+						)}
+					</aside>
+				)}
 
 				<main data-layout="main" className="group page-main">
 					<div className="space-y-4 px-(--page-margin-x) pt-(--page-margin-y)">

src/components/resume/templates/kakuna.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -19,17 +18,12 @@ const sectionClassName = cn(
 export function KakunaTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div
-			className="template-kakuna page-content space-y-4 px-(--page-margin-x) py-(--page-margin-y) print:p-0"
-			style={{ direction: rtlDirection ? "rtl" : "ltr" }}
-		>
+		<div className="template-kakuna page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
 			{isFirstPage && <Header />}
 
-			<main data-layout="main" className="group page-main space-y-4">
+			<main data-layout="main" className="group page-main space-y-(--page-gap-y)">
 				{main.map((section) => {
 					const Component = getSectionComponent(section, { sectionClassName });
 					return <Component key={section} id={section} />;
@@ -37,7 +31,7 @@ export function KakunaTemplate({ pageIndex, pageLayout }: TemplateProps) {
 			</main>
 
 			{!fullWidth && (
-				<aside data-layout="sidebar" className="group page-sidebar space-y-4">
+				<aside data-layout="sidebar" className="group page-sidebar space-y-(--page-gap-y)">
 					{sidebar.map((section) => {
 						const Component = getSectionComponent(section, { sectionClassName });
 						return <Component key={section} id={section} />;
@@ -52,10 +46,10 @@ function Header() {
 	const basics = useResumeStore((state) => state.resume.data.basics);
 
 	return (
-		<div className="page-header flex flex-col items-center gap-y-2">
+		<div className="page-header flex flex-col items-center gap-y-(--page-gap-y)">
 			<PagePicture />
 
-			<div className="page-basics space-y-2 text-center">
+			<div className="page-basics space-y-(--page-gap-y) text-center">
 				<div>
 					<h2 className="basics-name">{basics.name}</h2>
 					<p className="basics-headline">{basics.headline}</p>

src/components/resume/templates/lapras.tsx

@@ -1,5 +1,5 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
+import { useMemo } from "react";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -22,21 +22,20 @@ const sectionClassName = cn(
 export function LaprasTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	const containerBorderRadius = useResumeStore((state) => Math.min(state.resume.data.picture.borderRadius, 30));
 	const headingNegativeMargin = useResumeStore((state) => state.resume.data.metadata.typography.heading.fontSize + 6);
 
+	const style = useMemo(() => {
+		return {
+			"--container-border-radius": `${containerBorderRadius}pt`,
+			"--heading-negative-margin": `${headingNegativeMargin}pt`,
+		} as React.CSSProperties;
+	}, [containerBorderRadius, headingNegativeMargin]);
+
 	return (
 		<div
-			style={
-				{
-					"--container-border-radius": `${containerBorderRadius}pt`,
-					"--heading-negative-margin": `${headingNegativeMargin}pt`,
-					direction: rtlDirection ? "rtl" : "ltr",
-				} as React.CSSProperties
-			}
+			style={style}
 			className="template-lapras page-content space-y-6 px-(--page-margin-x) pt-(--page-margin-y) print:p-0"
 		>
 			{isFirstPage && <Header />}
@@ -66,13 +65,13 @@ function Header() {
 	return (
 		<div
 			className={cn(
-				"page-header flex items-center gap-x-4",
+				"page-header flex items-center gap-x-(--page-gap-x)",
 				"rounded-(--picture-border-radius) border border-(--page-text-color)/10 bg-(--page-background-color) p-4",
 			)}
 		>
 			<PagePicture />
 
-			<div className="page-basics space-y-2">
+			<div className="page-basics space-y-(--page-gap-y)">
 				<div>
 					<h2 className="basics-name">{basics.name}</h2>
 					<p className="basics-headline">{basics.headline}</p>

src/components/resume/templates/leafish.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -20,15 +19,13 @@ const sectionClassName = cn(
 export function LeafishTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div className="template-leafish page-content space-y-4" style={{ direction: rtlDirection ? "rtl" : "ltr" }}>
+		<div className="template-leafish page-content">
 			{isFirstPage && <Header />}
 
 			<div className="flex gap-x-(--page-margin-x) px-(--page-margin-x) pt-(--page-margin-y)">
-				<main data-layout="main" className="group page-main space-y-4">
+				<main data-layout="main" className="group page-main space-y-(--page-gap-y)">
 					{main
 						.filter((section) => section !== "summary")
 						.map((section) => {
@@ -38,7 +35,10 @@ export function LeafishTemplate({ pageIndex, pageLayout }: TemplateProps) {
 				</main>
 
 				{!fullWidth && (
-					<aside data-layout="sidebar" className="group page-sidebar w-(--page-sidebar-width) shrink-0 space-y-4">
+					<aside
+						data-layout="sidebar"
+						className="group page-sidebar w-(--page-sidebar-width) shrink-0 space-y-(--page-gap-y)"
+					>
 						{sidebar
 							.filter((section) => section !== "summary")
 							.map((section) => {
@@ -60,7 +60,7 @@ function Header() {
 			<div className="flex items-center gap-x-(--page-margin-x) px-(--page-margin-x) py-(--page-margin-y)">
 				<PagePicture />
 
-				<div className="space-y-2">
+				<div className="space-y-(--page-gap-y)">
 					<div>
 						<h2 className="basics-name">{basics.name}</h2>
 						<p className="basics-headline">{basics.headline}</p>

src/components/resume/templates/onyx.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -16,14 +15,9 @@ const sectionClassName = cn();
 export function OnyxTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div
-			className="template-onyx page-content space-y-(--page-gap-y) px-(--page-margin-x) py-(--page-margin-y) print:p-0"
-			style={{ direction: rtlDirection ? "rtl" : "ltr" }}
-		>
+		<div className="template-onyx page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
 			{isFirstPage && <Header />}
 
 			<main data-layout="main" className="group page-main space-y-(--page-gap-y)">
@@ -49,10 +43,10 @@ function Header() {
 	const basics = useResumeStore((state) => state.resume.data.basics);
 
 	return (
-		<div className="page-header flex items-center gap-x-4 border-(--page-primary-color) border-b pb-(--page-margin-y)">
+		<div className="page-header flex items-center gap-x-(--page-gap-x) border-(--page-primary-color) border-b pb-(--page-margin-y)">
 			<PagePicture />
 
-			<div className="page-basics space-y-2">
+			<div className="page-basics space-y-(--page-gap-y)">
 				<div>
 					<h2 className="basics-name">{basics.name}</h2>
 					<p className="basics-headline">{basics.headline}</p>

src/components/resume/templates/pikachu.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -23,21 +22,16 @@ const sectionClassName = cn(
 export function PikachuTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div
-			className="template-pikachu page-content px-(--page-margin-x) py-(--page-margin-y) print:p-0"
-			style={{ direction: rtlDirection ? "rtl" : "ltr" }}
-		>
+		<div className="template-pikachu page-content px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
 			<div className="flex gap-x-(--page-margin-x)">
 				<aside
 					data-layout="sidebar"
-					className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-3"
+					className="group page-sidebar flex w-(--page-sidebar-width) shrink-0 flex-col space-y-(--page-gap-y)"
 				>
 					{isFirstPage && (
-						<div className="flex items-center justify-center">
+						<div className="flex max-w-(--page-sidebar-width) items-center justify-start">
 							<PagePicture />
 						</div>
 					)}
@@ -52,7 +46,7 @@ export function PikachuTemplate({ pageIndex, pageLayout }: TemplateProps) {
 					)}
 				</aside>
 
-				<main data-layout="main" className="group page-main flex-1 space-y-(--page-margin-y)">
+				<main data-layout="main" className="group page-main flex-1 space-y-(--page-gap-y)">
 					{isFirstPage && <Header />}
 
 					<div className="space-y-(--page-gap-y)">
@@ -71,7 +65,7 @@ function Header() {
 	const basics = useResumeStore((state) => state.resume.data.basics);
 
 	return (
-		<div className="page-header w-full space-y-2 rounded-(--picture-border-radius) bg-(--page-primary-color) px-(--page-margin-x) py-(--page-margin-y) text-(--page-background-color)">
+		<div className="page-header w-full space-y-(--page-gap-y) rounded-(--picture-border-radius) bg-(--page-primary-color) px-(--page-margin-x) py-(--page-margin-y) text-(--page-background-color)">
 			<div className="border-(--page-background-color)/50 border-b pb-2">
 				<h2 className="basics-name">{basics.name}</h2>
 				<p className="basics-headline">{basics.headline}</p>

src/components/resume/templates/rhyhorn.tsx

@@ -1,5 +1,4 @@
 import { EnvelopeIcon, GlobeIcon, MapPinIcon, PhoneIcon } from "@phosphor-icons/react";
-import { isRTL } from "@/utils/locale";
 import { cn } from "@/utils/style";
 import { getSectionComponent } from "../shared/get-section-component";
 import { PageIcon } from "../shared/page-icon";
@@ -19,17 +18,12 @@ const sectionClassName = cn(
 export function RhyhornTemplate({ pageIndex, pageLayout }: TemplateProps) {
 	const isFirstPage = pageIndex === 0;
 	const { main, sidebar, fullWidth } = pageLayout;
-	const locale = useResumeStore((state) => state.resume.data.metadata.page.locale);
-	const rtlDirection = isRTL(locale);
 
 	return (
-		<div
-			className="template-rhyhorn page-content space-y-4 px-(--page-margin-x) py-(--page-margin-y) print:p-0"
-			style={{ direction: rtlDirection ? "rtl" : "ltr" }}
-		>
+		<div className="template-rhyhorn page-content space-y-(--page-gap-y) px-(--page-margin-x) pt-(--page-margin-y) print:p-0">
 			{isFirstPage && <Header />}
 
-			<main data-layout="main" className="group page-main space-y-4">
+			<main data-layout="main" className="group page-main space-y-(--page-gap-y)">
 				{main.map((section) => {
 					const Component = getSectionComponent(section, { sectionClassName });
 					return <Component key={section} id={section} />;
@@ -37,7 +31,7 @@ export function RhyhornTemplate({ pageIndex, pageLayout }: TemplateProps) {
 			</main>
 
 			{!fullWidth && (
-				<aside data-layout="sidebar" className="group page-sidebar space-y-4">
+				<aside data-layout="sidebar" className="group page-sidebar space-y-(--page-gap-y)">
 					{sidebar.map((section) => {
 						const Component = getSectionComponent(section, { sectionClassName });
 						return <Component key={section} id={section} />;
@@ -52,8 +46,8 @@ function Header() {
 	const basics = useResumeStore((state) => state.resume.data.basics);
 
 	return (
-		<div className="page-header flex items-center gap-x-4">
-			<div className="page-basics grow space-y-2">
+		<div className="page-header flex items-center gap-x-(--page-gap-x)">
+			<div className="page-basics grow space-y-(--page-gap-y)">
 				<div>
 					<h2 className="basics-name">{basics.name}</h2>
 					<p className="basics-headline">{basics.headline}</p>

src/dialogs/resume/template/data.ts

@@ -28,18 +28,18 @@ export const templates = {
 		imageUrl: "/templates/jpg/chikorita.jpg",
 		tags: ["Two-column", "Soft accent", "Marketing", "HR", "Client-facing"],
 	},
-	ditto: {
-		name: "Ditto",
-		description: msg`Two-column, minimal and text-dense with no decorative elements; perfect for traditional industries or ATS-heavy applications.`,
-		imageUrl: "/templates/jpg/ditto.jpg",
-		tags: ["Two-column", "ATS friendly", "Minimal", "Text-dense", "Traditional", "No decoration"],
-	},
 	ditgar: {
 		name: "Ditgar",
 		description: msg`Two-column with a dark teal sidebar and skills grid; modern feel for developers, data scientists, or technical PMs.`,
 		imageUrl: "/templates/jpg/ditgar.jpg",
 		tags: ["Two-column", "Modern", "Developer", "Data science", "Technical PM", "Dark sidebar"],
 	},
+	ditto: {
+		name: "Ditto",
+		description: msg`Two-column, minimal and text-dense with no decorative elements; perfect for traditional industries or ATS-heavy applications.`,
+		imageUrl: "/templates/jpg/ditto.jpg",
+		tags: ["Two-column", "ATS friendly", "Minimal", "Text-dense", "Traditional", "No decoration"],
+	},
 	gengar: {
 		name: "Gengar",
 		description: msg`Two-column with accent colors and clean typography; balanced choice for business analysts or operations roles.`,

src/schema/templates.ts

@@ -4,8 +4,8 @@ export const templateSchema = z.enum([
 	"azurill",
 	"bronzor",
 	"chikorita",
-	"ditto",
 	"ditgar",
+	"ditto",
 	"gengar",
 	"glalie",
 	"kakuna",