From b958273c881d63b213aeb36d50883895ad5a703f Mon Sep 17 00:00:00 2001
From: Lukas Trombach <me@lukastrombach.dev>
Date: Tue, 31 Dec 2024 17:04:42 +0100
Subject: [PATCH] add article content tw classes

---
 src/components/ExternalLink.astro             |  1 +
 .../Projects/ProjectCard/ProjectCard.astro    |  5 +++-
 .../Projects/ProjectPage/PageBody.astro       | 27 ++++++++++++++-----
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/ExternalLink.astro b/src/components/ExternalLink.astro
index df1cdd8b..56924134 100644
--- a/src/components/ExternalLink.astro
+++ b/src/components/ExternalLink.astro
@@ -37,6 +37,7 @@ const imageProps = {
   fetchpriority: "low",
   loading: "lazy",
   decoding: "async",
+  "data-site-icon": true,
 } as const satisfies HTMLAttributes<"img">;
 ---
 
diff --git a/src/components/Projects/ProjectCard/ProjectCard.astro b/src/components/Projects/ProjectCard/ProjectCard.astro
index 8b26a1cb..93617de7 100644
--- a/src/components/Projects/ProjectCard/ProjectCard.astro
+++ b/src/components/Projects/ProjectCard/ProjectCard.astro
@@ -17,7 +17,10 @@ const { href, title, description, cover, meta } = Astro.props;
   ]}
   transition:name={`border-${dash(title)}`}
 >
-  <a {href} class="flex h-full flex-col transition-colors duration-300 hover:bg-primary/5">
+  <a
+    {href}
+    class="flex h-full flex-col transition-colors duration-300 hover:bg-primary/5"
+  >
     {
       cover?.image && cover.alt && (
         <CardImage image={cover.image} alt={cover.alt} />
diff --git a/src/components/Projects/ProjectPage/PageBody.astro b/src/components/Projects/ProjectPage/PageBody.astro
index 7063d446..9191839e 100644
--- a/src/components/Projects/ProjectPage/PageBody.astro
+++ b/src/components/Projects/ProjectPage/PageBody.astro
@@ -14,11 +14,18 @@ const dashedTitle = dash(title);
 
 <article
   class:list={[
-    "prose min-w-0 shrink lg:prose-lg dark:prose-invert prose-p:hyphens-auto prose-p:break-words prose-p:text-justify",
+    "text-lg",
     "w-auto max-w-[70ch] rounded-xl border bg-background pb-5 lg:max-w-[calc(70ch+(theme(spacing.16)*2))]",
-    "motion-safe:prose-img:timeline-slide-in-bottom motion-safe:prose-img:[animation-range:entry_10%_contain_25%]",
-    "motion-safe:prose-video:timeline-slide-in-bottom motion-safe:prose-video:[animation-range:entry_10%_contain_25%]",
-    "prose-figcaption:break-words prose-figcaption:hyphens-auto prose-figcaption:text-pretty"
+    "[&_h2]:border-b [&_h2]:pb-2 [&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:tracking-tight first:[&_h2]:mt-0",
+    "[&_h3]:text-2xl [&_h3]:font-semibold [&_h3]:tracking-tight",
+    "[&_h4]:text-xl [&_h4]:font-semibold [&_h4]:tracking-tight",
+    "[&_a]:font-medium [&_a]:underline",
+    "[&_p]:text-justify [&_p]:leading-9 [&_p]:hyphens-auto [&_p]:break-words",
+    "[&_p>code]:rounded [&_p>code]:bg-muted [&_p>code]:px-[0.3rem] [&_p>code]:py-[0.2rem] [&_p>code]:font-mono [&_p>code]:text-sm [&_p>code]:font-semibold",
+    "[&_figcaption]:break-words [&_figcaption]:hyphens-auto [&_figcaption]:text-prettyi [&_figcaption]:text-sm [&_figcaption]:text-muted-foreground [&_figcaption]:mt-4",
+    "[&_pre]:text-sm [&_pre]:leading-7 [&_pre]:py-4 [&_pre]:px-6 [&_pre]:rounded-md",
+    "motion-safe:[&_figure>img]:timeline-slide-in-bottom motion-safe:[&_figure>img]:[animation-range:entry_10%_contain_25%]",
+    "motion-safe:[&_video]:timeline-slide-in-bottom motion-safe:[&_video]:[animation-range:entry_10%_contain_25%]",
   ]}
   transition:name={`border-${dashedTitle}`}
 >
@@ -36,12 +43,18 @@ const dashedTitle = dash(title);
     )
   }
 
-  <div class="p-5 pb-0 lg:p-16 lg:pb-0">
+  <div class="p-5 pb-0 lg:p-16 lg:pb-0 [&>*:not(:first-child)]:mt-6">
     <header>
-      <h1 {title} transition:name={dashedTitle}>{titleCase(title)}</h1>
+      <h1
+        {title}
+        transition:name={dashedTitle}
+        class="mb-2 text-4xl font-extrabold tracking-tight lg:text-5xl"
+      >
+        {titleCase(title)}
+      </h1>
       <p
         transition:name={`${dashedTitle}-description`}
-        class="not-prose -mt-8 mb-5 font-mono text-muted-foreground"
+        class="font-mono text-muted-foreground"
       >
         {description}
       </p>