zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layouts): extract common layout components to base template

Browse Source 
Move shared HTML structure, head metadata, and theme scripts to Layout.astro
Remove duplicate code from BlogLayout, BlogPostLayout, and AboutLayout
Keep page-specific content and styling in individual layout files
This commit is contained in:
joyzhao
2025-06-19 17:37:48 +08:00
parent 21fba08741
commit b4a8d13cdd
3 changed files with 141 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/layouts/AboutLayout.astro
View File

@@ -1,10 +1,10 @@
--- ---
import Layout from './Layout.astro';
import type { MarkdownLayoutProps } from 'astro'; import type { MarkdownLayoutProps } from 'astro';
import { type Lang, type FrontmatterProps } from '@/types'; import { type Lang, type FrontmatterProps } from '@/types';
import { defaultLang } from '@/i18n/ui'; import { defaultLang } from '@/i18n/ui';
import GlassHeader from '@/components/GlassHeader'; import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer'; import Footer from '@/components/Footer';
import "../styles/global.css";
// Use Astro's MarkdownLayoutProps for proper type safety // Use Astro's MarkdownLayoutProps for proper type safety
export type Props = MarkdownLayoutProps<FrontmatterProps>; export type Props = MarkdownLayoutProps<FrontmatterProps>;
@@ -16,93 +16,73 @@ const { title, description } = frontmatter;
const lang = Astro.currentLocale as Lang || defaultLang; const lang = Astro.currentLocale as Lang || defaultLang;
--- ---
<!doctype html> <Layout title={title} description={description}>
<html lang={lang}> <!-- Enhanced background with gradient overlay -->
<head> <div class="fixed inset-0 -z-10 h-full w-full bg-background">
<meta charset="UTF-8" /> <!-- Additional subtle gradient for about page -->
<meta name="description" content={description} /> <div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="min-h-screen bg-background font-sans antialiased selection:bg-purple-500/20 selection:text-purple-500">
<!-- Enhanced background with gradient overlay -->
<div class="fixed inset-0 -z-10 h-full w-full bg-background">
<!-- Base radial gradient -->
<div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.2),rgba(0,0,0,0))]">
</div>
<!-- Additional subtle gradient for about page -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10">
</div>
</div> </div>
</div>
<!-- Glass Header with navigation -->
<GlassHeader lang={lang} client:load /> <!-- Glass Header with navigation -->
<GlassHeader lang={lang} client:load />
<!-- Main content with proper spacing for fixed header -->
<div class="pt-16 sm:pt-20"> <!-- Main content with proper spacing for fixed header -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8"> <div class="pt-16 sm:pt-20">
<div class="max-w-7xl mx-auto"> <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
<div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8"> <div class="max-w-7xl mx-auto">
<!-- Main Content --> <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
<main class="xl:col-span-3 order-2 xl:order-1"> <!-- Main Content -->
<!-- About page header --> <main class="xl:col-span-3 order-2 xl:order-1">
<header class="mb-10"> <!-- About page header -->
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight"> <header class="mb-10">
✨ {title} <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight">
</h1> ✨ {title}
</h1>
{description && (
<p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
📝 {description}
</p>
)}
</header>
<!-- About page content with typography styles --> {description && (
<article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed"> <p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
<slot /> 📝 {description}
</article> </p>
</main> )}
</header>
<!-- Sidebar with Table of Contents --> <!-- About page content with typography styles -->
<aside class="xl:col-span-1 order-1 xl:order-2"> <article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed">
<div class="xl:sticky xl:top-24 space-y-6 sm:space-y-8 xl:space-y-12 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto"> <slot />
<!-- Table of Contents --> </article>
<div class="max-xl:hidden"> </main>
<div id="nav-content" class="sticky xl:w-72 w-full top-14">
<div class="flex flex-col gap-3 p-4"> <!-- Sidebar with Table of Contents -->
<h3 class="dark:text-zinc-200 text-blacktext font-bold tracking-wide text-sm sm:text-base uppercase flex items-center"> <aside class="xl:col-span-1 order-1 xl:order-2">
<svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <div class="xl:sticky xl:top-24 space-y-6 sm:space-y-8 xl:space-y-12 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /> <!-- Table of Contents -->
</svg> <div class="max-xl:hidden">
{lang === 'zh' ? '目录' : 'Table of Contents'} <div id="nav-content" class="sticky xl:w-72 w-full top-14">
</h3> <div class="flex flex-col gap-3 p-4">
<div class="text-neutral-500 dark:text-neutral-300 pr-4"> <h3 class="dark:text-zinc-200 text-blacktext font-bold tracking-wide text-sm sm:text-base uppercase flex items-center">
<ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20 mt-4"> <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
</ul> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
</div> </svg>
{lang === 'zh' ? '目录' : 'Table of Contents'}
</h3>
<div class="text-neutral-500 dark:text-neutral-300 pr-4">
<ul id="toc-list" class="leading-relaxed text-sm sm:text-base border-l dark:border-neutral-500/20 border-blacktext/20 mt-4">
</ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</aside> </div>
</div> </aside>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Footer -->
<Footer lang={lang} client:load /> <!-- Footer -->
</body> <Footer lang={lang} client:load />
</html> </Layout>
<script> <script>
/** /**
@@ -206,30 +186,6 @@ const lang = Astro.currentLocale as Lang || defaultLang;
}); });
</script> </script>
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
return localStorage.getItem("theme");
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};
const isDark = getThemePreference() === "dark";
document.documentElement.classList[isDark ? "add" : "remove"]("dark");
if (typeof localStorage !== "undefined") {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
}
</script>
<style> <style>
/* Additional styling for smooth transitions */ /* Additional styling for smooth transitions */
#toc-list a:hover { #toc-list a:hover {
@@ -245,23 +201,4 @@ const lang = Astro.currentLocale as Lang || defaultLang;
#toc-list a { #toc-list a {
transition: all 0.2s ease; transition: all 0.2s ease;
} }
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
}
:root {
--transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
transition:
background-color var(--transition-standard),
color var(--transition-standard);
}
</style> </style>

101
src/layouts/BlogLayout.astro
View File

@@ -1,9 +1,9 @@
--- ---
import Layout from './Layout.astro';
import { type Lang } from '@/i18n/utils'; import { type Lang } from '@/i18n/utils';
import { defaultLang } from '@/i18n/ui'; import { defaultLang } from '@/i18n/ui';
import GlassHeader from '@/components/GlassHeader'; import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer'; import Footer from '@/components/Footer';
import "../styles/global.css";
export interface Props { export interface Props {
title: string; title: string;
@@ -14,84 +14,21 @@ const { title, description = 'Explore my latest thoughts on coding, tech trends,
const lang = Astro.currentLocale as Lang || defaultLang; const lang = Astro.currentLocale as Lang || defaultLang;
--- ---
<!doctype html> <Layout title={title} description={description}>
<html lang={lang}> <!-- Enhanced background with gradient overlay for better visual consistency -->
<head> <div class="fixed inset-0 -z-10 h-full w-full bg-background">
<meta charset="UTF-8" /> <!-- Additional subtle gradient for blog pages -->
<meta name="description" content={description} /> <div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10"></div>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> </div>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <!-- Glass Header with navigation -->
<title>{title}</title> <GlassHeader lang={lang} client:load />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <!-- Main content with proper spacing for fixed header -->
<link <div class="pt-16">
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" <slot />
rel="stylesheet" </div>
/>
</head> <!-- Footer -->
<body class="min-h-screen bg-background font-sans antialiased selection:bg-purple-500/20 selection:text-purple-500"> <Footer client:load />
<!-- Enhanced background with gradient overlay for better visual consistency --> </Layout>
<div class="fixed inset-0 -z-10 h-full w-full bg-background">
<!-- Base radial gradient -->
<div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.2),rgba(0,0,0,0))]"></div>
<!-- Additional subtle gradient for blog pages -->
<div class="absolute inset-0 bg-gradient-to-br from-purple-50/30 via-transparent to-blue-50/20 dark:from-purple-950/20 dark:via-transparent dark:to-blue-950/10"></div>
</div>
<!-- Glass Header with navigation -->
<GlassHeader lang={lang} client:load />
<!-- Main content with proper spacing for fixed header -->
<div class="pt-16">
<slot />
</div>
<!-- Footer -->
<Footer client:load />
</body>
</html>
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
return localStorage.getItem("theme");
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};
const isDark = getThemePreference() === "dark";
document.documentElement.classList[isDark ? "add" : "remove"]("dark");
if (typeof localStorage !== "undefined") {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
}
</script>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
}
:root {
--transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
transition:
background-color var(--transition-standard),
color var(--transition-standard);
}
</style>

195
src/layouts/BlogPostLayout.astro
View File

@@ -1,4 +1,5 @@
--- ---
import Layout from './Layout.astro';
import type { MarkdownLayoutProps } from 'astro'; import type { MarkdownLayoutProps } from 'astro';
import { type Lang } from '@/i18n/utils'; import { type Lang } from '@/i18n/utils';
import { type FrontmatterProps } from '@/types'; import { type FrontmatterProps } from '@/types';
@@ -10,8 +11,6 @@ import TableOfContents from '@/components/layout/TableOfContents.astro';
import BlogNavigation from '@/components/layout/BlogNavigation.astro'; import BlogNavigation from '@/components/layout/BlogNavigation.astro';
import PostMeta from '@/components/blog/PostMeta.astro'; import PostMeta from '@/components/blog/PostMeta.astro';
import "../styles/global.css";
// Use Astro's MarkdownLayoutProps for proper type safety // Use Astro's MarkdownLayoutProps for proper type safety
export type Props = MarkdownLayoutProps<FrontmatterProps>; export type Props = MarkdownLayoutProps<FrontmatterProps>;
@@ -36,143 +35,77 @@ const finalPublishDate = publishDate || date;
const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : undefined; const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : undefined;
--- ---
<!doctype html> <Layout title={title} description={description}>
<html lang={lang}> <!-- Glass Header with navigation -->
<head> <GlassHeader lang={lang} client:load />
<meta charset="UTF-8" />
<meta name="description" content={description} /> <!-- Main content with proper spacing for fixed header -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <div class="pt-16 sm:pt-20">
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
<meta name="generator" content={Astro.generator} /> <div class="max-w-7xl mx-auto">
<title>{title}</title> <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
<link rel="preconnect" href="https://fonts.googleapis.com" /> <!-- Main Content -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <main class="xl:col-span-3 order-2 xl:order-1">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" <!-- Blog post header -->
rel="stylesheet" <header class="mb-10">
/> <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight">
</head> {title}
<body class="min-h-screen bg-background font-sans antialiased selection:bg-purple-500/20 selection:text-purple-500"> </h1>
<div
class="fixed inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" {description && (
> <p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
</div> {description}
<!-- Glass Header with navigation --> </p>
<GlassHeader lang={lang} client:load /> )}
<PostMeta
lang={lang}
<!-- Main content with proper spacing for fixed header --> publishDate={finalPublishDate}
<div class="pt-16 sm:pt-20"> readingTime={finalReadingTime}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8"> tags={tags}
<div class="max-w-7xl mx-auto"> tagId={tagId}
<div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8"> category={category}
<!-- Main Content --> categoryId={categoryId}
<main class="xl:col-span-3 order-2 xl:order-1"> className="justify-start"
/>
</header>
<!-- Blog post header --> <!-- Blog post content with typography styles -->
<header class="mb-10"> <article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight"> <slot />
{title} </article>
</h1>
{description && (
<p class="text-lg sm:text-xl text-muted-foreground mb-8 leading-relaxed max-w-4xl">
{description}
</p>
)}
<PostMeta
lang={lang}
publishDate={finalPublishDate}
readingTime={finalReadingTime}
tags={tags}
tagId={tagId}
category={category}
categoryId={categoryId}
className="justify-start"
/>
</header>
<!-- Blog post content with typography styles -->
<article class="prose prose-lg dark:prose-invert max-w-none prose-headings:scroll-mt-24 prose-headings:font-bold prose-headings:tracking-tight prose-h1:text-2xl sm:prose-h1:text-3xl prose-h2:text-xl sm:prose-h2:text-2xl prose-h3:text-lg sm:prose-h3:text-xl prose-h4:text-base sm:prose-h4:text-lg prose-p:text-base sm:prose-p:text-lg prose-p:leading-relaxed prose-p:mb-6 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-foreground prose-code:text-sm prose-code:px-2 prose-code:py-1 prose-code:rounded prose-pre:bg-muted prose-pre:border prose-pre:text-sm prose-blockquote:border-l-primary prose-blockquote:bg-muted/30 prose-blockquote:text-base prose-li:text-base sm:prose-li:text-lg prose-li:leading-relaxed">
<slot />
</article>
<!-- Blog Navigation -->
<div class="mt-8 sm:mt-12">
<BlogNavigation />
</div>
<!-- Author Card moved to bottom with enhanced styling -->
<div class="mt-10 sm:mt-16 border-t border-border pt-10">
<div class="bg-card/30 backdrop-blur-sm rounded-2xl border border-border p-6 shadow-sm hover:shadow-md transition-all duration-300">
<AuthorCard lang={lang} />
</div>
</div>
</main>
<!-- Sidebar with Table of Contents --> <!-- Blog Navigation -->
<aside class="xl:col-span-1 order-1 xl:order-2 md:mb-0 mb-6"> <div class="mt-8 sm:mt-12">
<div class="xl:sticky xl:top-24"> <BlogNavigation />
<!-- Table of Contents without height restriction --> </div>
<TableOfContents lang={lang} />
<!-- Author Card moved to bottom with enhanced styling -->
<div class="mt-10 sm:mt-16 border-t border-border pt-10">
<div class="bg-card/30 backdrop-blur-sm rounded-2xl border border-border p-6 shadow-sm hover:shadow-md transition-all duration-300">
<AuthorCard lang={lang} />
</div> </div>
</aside> </div>
</div> </main>
<!-- Sidebar with Table of Contents -->
<aside class="xl:col-span-1 order-1 xl:order-2 md:mb-0 mb-6">
<div class="xl:sticky xl:top-24">
<!-- Table of Contents without height restriction -->
<TableOfContents lang={lang} />
</div>
</aside>
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Footer -->
<Footer lang={lang} client:load /> <!-- Footer -->
</body> <Footer lang={lang} client:load />
</html> </Layout>
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
return localStorage.getItem("theme");
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};
const isDark = getThemePreference() === "dark";
document.documentElement.classList[isDark ? "add" : "remove"]("dark");
if (typeof localStorage !== "undefined") {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
}
</script>
<style> <style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
}
:root {
--transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
transition:
background-color var(--transition-standard),
color var(--transition-standard);
}
/* Enhanced prose styles for better readability */ /* Enhanced prose styles for better readability */
.prose { .prose {
line-height: 1.75; line-height: 1.75;