add styles for hero text

Trombach · Dec 31, 2024 · 824c687 · 824c687
1 parent ece9d48
commit 824c687
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 15 deletions.
diff --git a/src/components/AppLink.astro b/src/components/AppLink.astro
@@ -17,6 +17,7 @@ const {
 
 <Tag
   class:list={[
+    "!no-underline",
     "rounded-full border bg-background px-5 py-2 transition-colors",
     "flex items-center gap-2",
     "disabled:pointer-events-none disabled:opacity-50",

diff --git a/src/components/ExternalLink.astro b/src/components/ExternalLink.astro
@@ -45,7 +45,7 @@ const imageProps = {
     <span class="whitespace-nowrap">
       {position === "before" && (
         <>
-          <img {...imageProps} class="w-4 inline-block my-0 mr-1 not-prose" />
+          <img {...imageProps} class="w-4 inline-block my-0 mr-1" />
           <a {href} {...props} class="whitespace-normal">
             <Fragment set:html={content} />
           </a>
@@ -56,7 +56,7 @@ const imageProps = {
           <a {href} {...props} class="whitespace-normal">
             <Fragment set:html={content} />
           </a>
-          <img {...imageProps} class="w-4 inline-block my-0 ml-1 not-prose" />
+          <img {...imageProps} class="w-4 inline-block my-0 ml-1" />
         </>
       )}
     </span>

diff --git a/src/components/Home/About/AboutText.astro b/src/components/Home/About/AboutText.astro
@@ -1,6 +1,7 @@
 ---
 import { getEntry, render } from "astro:content";
 import Heading from "@components/Heading.astro";
+import ProseAbout from "./ProseAbout.astro";
 
 const aboutMe = await getEntry("about", "about-me");
 
@@ -14,7 +15,7 @@ const { Content } = await render(aboutMe);
 
 <div class="p-10 sm:p-20 lg:p-10 shrink-0 lg:w-1/2 lg:ml-auto">
   <Heading class="motion-safe:timeline-slide-in-bottom">{title}</Heading>
-  <div class="prose-p:text-justify prose md:prose-lg lg:prose-xl dark:prose-invert motion-safe:*:timeline-slide-in-bottom">
+  <ProseAbout>
     <Content />
-  </div>
+  </ProseAbout>
 </div>
diff --git a/src/components/Home/About/ProseAbout.astro b/src/components/Home/About/ProseAbout.astro
@@ -0,0 +1,19 @@
+---
+type Props = {
+  class?: string;
+};
+
+const { class: className } = Astro.props;
+---
+
+<div
+  class:list={[
+    "text-xl",
+    "[&_a]:font-medium [&_a]:underline",
+    "[&_p]:text-justify [&_p]:leading-9 [&>*:not(:first-child)]:mt-6",
+    "motion-safe:*:timeline-slide-in-bottom",
+    className,
+  ]}
+>
+  <slot />
+</div>
diff --git a/src/components/Home/About/Tech.astro b/src/components/Home/About/Tech.astro
@@ -2,6 +2,7 @@
 import { getEntry, render } from "astro:content";
 import Heading from "@components/Heading.astro";
 import TechGrid from "@components/Home/About/TechGrid.astro";
+import ProseAbout from "./ProseAbout.astro";
 
 const tech = await getEntry("about", "tech");
 
@@ -21,14 +22,9 @@ const { Content } = await render(tech);
   <div
     class="flex space-y-10 w-full max-w-screen-xl flex-col justify-around items-center xl:flex-row"
   >
-    <div
-      class:list={[
-        "prose-p:text-justify prose md:prose-lg lg:prose-xl dark:prose-invert xl:px-20",
-        "motion-safe:*:timeline-slide-in-bottom",
-      ]}
-    >
+    <ProseAbout class="xl:px-20">
       <Content />
-    </div>
+    </ProseAbout>
     <TechGrid class="my-auto w-full basis-2/3" />
   </div>
 </section>
diff --git a/src/data/about/about-me.mdx b/src/data/about/about-me.mdx
@@ -18,6 +18,6 @@ also familiar with low-level languages such as [Golang](https://go.dev), [Rust](
 
 In my free time I like to code 🧑🏻‍💻, tinker with my NAS 🛠️, play my guitar 🎸 or go snowboarding 🏂.
 
-<AppLink as="a" href="/cv.pdf" title="Download CV" class="group w-fit not-prose text-base mx-auto">
-  <IconDownload class="group-hover:-translate-y-1 group-hover:-rotate-12 transition-transform" /><span>Download CV</span>
+<AppLink as="a" href="/cv.pdf" title="Download CV" class="group w-fit text-base mx-auto flex flex-row">
+  <IconDownload class="group-hover:-translate-y-1 group-hover:-rotate-12 transition-transform" /><>Download CV</>
 </AppLink>
diff --git a/src/data/about/tech.mdx b/src/data/about/tech.mdx
@@ -17,7 +17,7 @@ programming languages and frameworks.
 My background in high-performance computing has also given me a solid understanding of computer hardware and linux 
 administration.
 
-<AppLink as="a" href="/projects" class="group mx-auto not-prose w-fit text-base">
-  <span>Learn more about my work</span>
+<AppLink as="a" href="/projects" class="group mx-auto w-fit text-base">
+  <>Learn more about my work</>
   <RightArrow class="transition-transform group-hover:translate-x-1" />
 </AppLink>