Tweak text styles

src/components/Link.astro

@@ -8,7 +8,7 @@ const { href, class: className, ...attributes } = Astro.props;
 ---
 
 <a
-  class={`text-teal-600 duration-100 hover:text-teal-500 hover:underline ${
+  class={`text-emerald-700 duration-100 underline underline-offset-2 hover:text-emerald-500 ${
     className ?? ""
   }`}
   {href}

src/content/blog/lorem-2.md

@@ -1,21 +0,0 @@
----
-intro: "Nunc at ex consequat, tincidunt est eu, pellentesque tellus. Sed sodales massa et condimentum pharetra. Curabitur euismod ac arcu id dapibus."
-image: "@assets/images/lorempicsum.jpeg"
-date: 2023-10-19
----
-
-# Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
-## Heading 2
-
-### Heading 3
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at ex consequat, tincidunt est eu, pellentesque tellus. Sed sodales massa et condimentum pharetra. Curabitur euismod ac arcu id dapibus. Aliquam viverra tellus quis sem interdum commodo. Vivamus vel porttitor massa. Fusce vitae risus quis lacus blandit tincidunt. Phasellus pretium condimentum eleifend. Ut sit amet ligula eget sapien luctus bibendum eu in neque. Praesent at commodo augue. Sed a aliquet nibh. Praesent venenatis massa sit amet tempor volutpat. Praesent porttitor ultricies dui, non rutrum tortor eleifend et. Ut et massa a massa bibendum ornare vitae non massa. Donec lacus lacus, tempor id mollis ac, commodo et tortor.
-
-Donec malesuada, mauris id viverra viverra, velit velit finibus nulla, quis elementum orci elit non mauris. Phasellus odio neque, lobortis in dignissim at, aliquet in quam. Nullam et sodales nibh. Integer vulputate lacinia ultrices. Cras pharetra tincidunt vehicula. Maecenas sit amet eleifend dolor, sed accumsan magna. Mauris sed mi quis magna molestie molestie.
-
-Integer dui sem, imperdiet sit amet pretium nec, interdum sit amet justo. Praesent imperdiet ante urna, ac commodo nisl luctus quis. Aenean sit amet pretium dolor. Maecenas efficitur augue eget ipsum vulputate, quis dapibus nulla egestas. Nunc et ullamcorper risus. Morbi mauris neque, malesuada sit amet dictum et, fringilla vel velit. Suspendisse tincidunt neque vitae orci pharetra, vel rhoncus justo maximus. Quisque lacinia feugiat vulputate. Donec quis nunc felis. Donec rhoncus tempor ex sit amet tristique. Integer a ex velit. Nunc nec sapien sit amet massa pretium elementum eget vitae tellus. Curabitur et ligula sit amet turpis viverra convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-
-Curabitur at ex facilisis, tincidunt risus lacinia, maximus arcu. Suspendisse lobortis id orci at laoreet. Donec luctus urna ac condimentum aliquet. Nulla ac libero lacus. Vestibulum fermentum, augue at faucibus laoreet, leo libero blandit mi, et porta libero justo non risus. Etiam sollicitudin facilisis condimentum. Proin a gravida velit, quis pulvinar odio. Nam vehicula risus in nisi euismod, in hendrerit est fermentum. Morbi fermentum elementum urna, non rhoncus libero sodales eget. Curabitur sed felis sit amet dolor facilisis elementum et vitae dolor.
-
-Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam quis tempor lorem. Sed bibendum pulvinar nibh eget feugiat. Sed at vehicula odio. Vivamus porttitor magna tortor, sit amet venenatis sapien lobortis at. Nam placerat condimentum purus in pellentesque. Quisque gravida tincidunt tincidunt. Duis varius, est ac molestie posuere, nisl mauris lacinia ex, tincidunt hendrerit enim eros eget turpis. Nulla facilisi.

src/content/blog/lorem-3.md

@@ -1,21 +0,0 @@
----
-intro: "Nunc at ex consequat, tincidunt est eu, pellentesque tellus. Sed sodales massa et condimentum pharetra. Curabitur euismod ac arcu id dapibus."
-image: "@assets/images/lorempicsum.jpeg"
-date: 2023-10-19
----
-
-# Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
-## Heading 2
-
-### Heading 3
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at ex consequat, tincidunt est eu, pellentesque tellus. Sed sodales massa et condimentum pharetra. Curabitur euismod ac arcu id dapibus. Aliquam viverra tellus quis sem interdum commodo. Vivamus vel porttitor massa. Fusce vitae risus quis lacus blandit tincidunt. Phasellus pretium condimentum eleifend. Ut sit amet ligula eget sapien luctus bibendum eu in neque. Praesent at commodo augue. Sed a aliquet nibh. Praesent venenatis massa sit amet tempor volutpat. Praesent porttitor ultricies dui, non rutrum tortor eleifend et. Ut et massa a massa bibendum ornare vitae non massa. Donec lacus lacus, tempor id mollis ac, commodo et tortor.
-
-Donec malesuada, mauris id viverra viverra, velit velit finibus nulla, quis elementum orci elit non mauris. Phasellus odio neque, lobortis in dignissim at, aliquet in quam. Nullam et sodales nibh. Integer vulputate lacinia ultrices. Cras pharetra tincidunt vehicula. Maecenas sit amet eleifend dolor, sed accumsan magna. Mauris sed mi quis magna molestie molestie.
-
-Integer dui sem, imperdiet sit amet pretium nec, interdum sit amet justo. Praesent imperdiet ante urna, ac commodo nisl luctus quis. Aenean sit amet pretium dolor. Maecenas efficitur augue eget ipsum vulputate, quis dapibus nulla egestas. Nunc et ullamcorper risus. Morbi mauris neque, malesuada sit amet dictum et, fringilla vel velit. Suspendisse tincidunt neque vitae orci pharetra, vel rhoncus justo maximus. Quisque lacinia feugiat vulputate. Donec quis nunc felis. Donec rhoncus tempor ex sit amet tristique. Integer a ex velit. Nunc nec sapien sit amet massa pretium elementum eget vitae tellus. Curabitur et ligula sit amet turpis viverra convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-
-Curabitur at ex facilisis, tincidunt risus lacinia, maximus arcu. Suspendisse lobortis id orci at laoreet. Donec luctus urna ac condimentum aliquet. Nulla ac libero lacus. Vestibulum fermentum, augue at faucibus laoreet, leo libero blandit mi, et porta libero justo non risus. Etiam sollicitudin facilisis condimentum. Proin a gravida velit, quis pulvinar odio. Nam vehicula risus in nisi euismod, in hendrerit est fermentum. Morbi fermentum elementum urna, non rhoncus libero sodales eget. Curabitur sed felis sit amet dolor facilisis elementum et vitae dolor.
-
-Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam quis tempor lorem. Sed bibendum pulvinar nibh eget feugiat. Sed at vehicula odio. Vivamus porttitor magna tortor, sit amet venenatis sapien lobortis at. Nam placerat condimentum purus in pellentesque. Quisque gravida tincidunt tincidunt. Duis varius, est ac molestie posuere, nisl mauris lacinia ex, tincidunt hendrerit enim eros eget turpis. Nulla facilisi.

src/content/blog/lorem.md

@@ -1,21 +0,0 @@
----
-intro: "Nunc at ex consequat, tincidunt est eu, pellentesque tellus. Sed sodales massa et condimentum pharetra. Curabitur euismod ac arcu id dapibus."
-image: "@assets/images/lorempicsum.jpeg"
-date: 2023-10-19
----
-
-# Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
-## Heading 2
-
-### Heading 3
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at ex consequat, tincidunt est eu, pellentesque tellus. Sed sodales massa et condimentum pharetra. Curabitur euismod ac arcu id dapibus. Aliquam viverra tellus quis sem interdum commodo. Vivamus vel porttitor massa. Fusce vitae risus quis lacus blandit tincidunt. Phasellus pretium condimentum eleifend. Ut sit amet ligula eget sapien luctus bibendum eu in neque. Praesent at commodo augue. Sed a aliquet nibh. Praesent venenatis massa sit amet tempor volutpat. Praesent porttitor ultricies dui, non rutrum tortor eleifend et. Ut et massa a massa bibendum ornare vitae non massa. Donec lacus lacus, tempor id mollis ac, commodo et tortor.
-
-Donec malesuada, mauris id viverra viverra, velit velit finibus nulla, quis elementum orci elit non mauris. Phasellus odio neque, lobortis in dignissim at, aliquet in quam. Nullam et sodales nibh. Integer vulputate lacinia ultrices. Cras pharetra tincidunt vehicula. Maecenas sit amet eleifend dolor, sed accumsan magna. Mauris sed mi quis magna molestie molestie.
-
-Integer dui sem, imperdiet sit amet pretium nec, interdum sit amet justo. Praesent imperdiet ante urna, ac commodo nisl luctus quis. Aenean sit amet pretium dolor. Maecenas efficitur augue eget ipsum vulputate, quis dapibus nulla egestas. Nunc et ullamcorper risus. Morbi mauris neque, malesuada sit amet dictum et, fringilla vel velit. Suspendisse tincidunt neque vitae orci pharetra, vel rhoncus justo maximus. Quisque lacinia feugiat vulputate. Donec quis nunc felis. Donec rhoncus tempor ex sit amet tristique. Integer a ex velit. Nunc nec sapien sit amet massa pretium elementum eget vitae tellus. Curabitur et ligula sit amet turpis viverra convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
-
-Curabitur at ex facilisis, tincidunt risus lacinia, maximus arcu. Suspendisse lobortis id orci at laoreet. Donec luctus urna ac condimentum aliquet. Nulla ac libero lacus. Vestibulum fermentum, augue at faucibus laoreet, leo libero blandit mi, et porta libero justo non risus. Etiam sollicitudin facilisis condimentum. Proin a gravida velit, quis pulvinar odio. Nam vehicula risus in nisi euismod, in hendrerit est fermentum. Morbi fermentum elementum urna, non rhoncus libero sodales eget. Curabitur sed felis sit amet dolor facilisis elementum et vitae dolor.
-
-Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam quis tempor lorem. Sed bibendum pulvinar nibh eget feugiat. Sed at vehicula odio. Vivamus porttitor magna tortor, sit amet venenatis sapien lobortis at. Nam placerat condimentum purus in pellentesque. Quisque gravida tincidunt tincidunt. Duis varius, est ac molestie posuere, nisl mauris lacinia ex, tincidunt hendrerit enim eros eget turpis. Nulla facilisi.

src/layouts/ProjectLayout.astro

@@ -1,83 +0,0 @@
----
-import ContainerLayout from "./ContainerLayout.astro";
-import BaseLayout from "./BaseLayout.astro";
-import TextContentLayout from "./TextContentLayout.astro";
-import type { MarkdownLayoutProps } from "astro";
-
-type Props = MarkdownLayoutProps<{
-  title: string;
-  description: string;
-  image: string;
-  technologies: string;
-  website: string;
-  repository?: string;
-  date: string;
-}>;
-
-const { title, website, repository, technologies, date } =
-  Astro.props.frontmatter;
----
-
-<BaseLayout {title}>
-  <ContainerLayout>
-    <TextContentLayout>
-      <h1
-        class="mb-4 text-center font-serif text-4xl font-light tracking-wide text-gray-600 underline decoration-yellow-400 decoration-2 underline-offset-8"
-      >
-        {title}
-      </h1>
-
-      <p class="mx-auto mb-4 text-center text-sm text-gray-500">
-        {
-          new Date(date).toLocaleDateString("en-US", {
-            month: "long",
-            year: "numeric",
-          })
-        }
-      </p>
-
-      <div class="mb-8 flex flex-wrap justify-center">
-        {
-          technologies
-            .split(",")
-            .map((technology) => (
-              <span class="m-1 rounded-full bg-gray-200 px-3 py-0.5 text-sm font-semibold text-gray-600">
-                {technology}
-              </span>
-            ))
-        }
-      </div>
-
-      <div class="mb-6 flex flex-col items-center justify-center sm:flex-row">
-        {
-          website && (
-            <a
-              href={website}
-              target="_blank"
-              class="mx-2 mb-2 block rounded-lg border border-gray-200 bg-white px-4 py-3 font-semibold tracking-wide text-gray-600 shadow duration-100 hover:bg-gray-50"
-            >
-              🖥️ Visit website
-            </a>
-          )
-        }
-
-        {
-          repository && (
-            <a
-              href={repository}
-              target="_blank"
-              class="mx-2 mb-2 block rounded-lg border border-gray-200 bg-white px-4 py-3 font-semibold tracking-wide text-gray-600 shadow duration-100 hover:bg-gray-50"
-            >
-              📦 Code on GitHub
-            </a>
-          )
-        }
-      </div>
-      <div
-        class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h2:font-light prose-a:text-teal-600 prose-a:no-underline prose-a:duration-100 hover:prose-a:text-teal-500 hover:prose-a:underline before:prose-code:content-[''] after:prose-code:content-['']"
-      >
-        <slot />
-      </div>
-    </TextContentLayout>
-  </ContainerLayout>
-</BaseLayout>

src/layouts/ProseLayout.astro

@@ -0,0 +1,5 @@
+<div
+  class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h1:font-light prose-h1:leading-snug prose-h1:underline prose-h1:decoration-yellow-400 prose-h1:decoration-2 prose-h1:underline-offset-8 prose-p:text-gray-700 prose-a:text-emerald-700 prose-a:underline-offset-2 prose-a:duration-100 hover:prose-a:text-emerald-500 prose-strong:text-gray-700 before:prose-code:content-[''] after:prose-code:content-[''] prose-code:font-normal prose-code:text-gray-700 prose-code:bg-slate-200 prose-code:px-1 prose-code:rounded prose-code:tracking-tight"
+>
+  <slot />
+</div>

src/pages/articles/[article].astro

@@ -4,6 +4,7 @@ import BaseLayout from "@layouts/BaseLayout.astro";
 import TextContentLayout from "@layouts/TextContentLayout.astro";
 import type { GetStaticPaths } from "astro";
 import { getCollection } from "astro:content";
+import ProseLayout from "@layouts/ProseLayout.astro";
 
 export const getStaticPaths = (async () => {
   const blogCollection = await getCollection("blog");
@@ -33,11 +34,9 @@ const { title, date } = project.data;
         }
       </p>
 
-      <div
+      <ProseLayout>
-        class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h1:font-light prose-h1:leading-snug prose-h1:underline prose-h1:decoration-yellow-400 prose-h1:decoration-2 prose-h1:underline-offset-8 prose-p:text-gray-700 prose-a:text-teal-600 prose-a:no-underline prose-a:duration-100 hover:prose-a:text-teal-500 hover:prose-a:underline prose-strong:text-gray-700 before:prose-code:content-[''] after:prose-code:content-[''] prose-code:font-semibold prose-code:text-gray-700 prose-code:bg-slate-200 prose-code:px-1 prose-code:rounded prose-code:tracking-tight"
-      >
         <Content />
-      </div>
+      </ProseLayout>
     </TextContentLayout>
   </ContainerLayout>
 </BaseLayout>

src/pages/index.astro

@@ -42,7 +42,7 @@ const latestArticleImage = latestArticle.data.image;
 
       <Paragraph>
         Want to get in touch?
-        <Link href="mailto:hi@mikkelsvartveit.com">Contact me.</Link>
+        <Link href="mailto:hi@mikkelsvartveit.com">Contact me</Link>.
       </Paragraph>
 
       <div class="mt-8 space-x-3">
@@ -72,37 +72,26 @@ const latestArticleImage = latestArticle.data.image;
       class="flex bg-white shadow transition hover:shadow-md hover:underline underline-offset-4 rounded-lg overflow-hidden items-center"
     >
       <Image src={latestArticleImage} alt="" class="w-24 h-16 object-cover" />
-      <h3 class="text-lg font-serif mx-3 line-clamp-2 leading-snug">{latestArticleTitle}</h3>
+      <h3 class="text-lg font-serif mx-3 line-clamp-2 leading-snug">
+        {latestArticleTitle}
+      </h3>
     </div>
   </a>
 
   <footer class="mb-8 mt-20 flex justify-center w-full">
-    <p class="text-xs text-gray-400">
+    <p class="text-xs text-gray-500">
       Built with
-      <Link href="https://astro.build/" target="_blank">Astro</Link>
+      <a
+        class="underline underline-offset-1 hover:text-gray-400"
+        href="https://astro.build/"
+        target="_blank">Astro</a
+      >
        and
-      <Link href="https://tailwindcss.com/" target="_blank">Tailwind CSS</Link>.
+      <a
+        class="underline underline-offset-1 hover:text-gray-400"
+        href="https://tailwindcss.com/"
+        target="_blank">Tailwind CSS</a
+      >.
     </p>
   </footer>
 </BaseLayout>
-
-<!-- <style> -->
-<!--   .footer-fixed { -->
-<!--     position: fixed; -->
-<!--     bottom: 0; -->
-<!--   } -->
-<!-- </style> -->
-<!---->
-<!-- <script> -->
-<!--   window.addEventListener("DOMContentLoaded", checkFooterPosition); -->
-<!--   window.addEventListener("resize", checkFooterPosition); -->
-<!---->
-<!--   function checkFooterPosition() { -->
-<!--     const footer = document.querySelector("footer"); -->
-<!--     if (document.body.clientHeight <= window.innerHeight) { -->
-<!--       footer?.classList.add("footer-fixed"); -->
-<!--     } else { -->
-<!--       footer?.classList.remove("footer-fixed"); -->
-<!--     } -->
-<!--   } -->
-<!-- </script> -->

src/pages/programming/[project].astro

@@ -4,6 +4,7 @@ import BaseLayout from "@layouts/BaseLayout.astro";
 import TextContentLayout from "@layouts/TextContentLayout.astro";
 import type { GetStaticPaths } from "astro";
 import { getCollection } from "astro:content";
+import ProseLayout from "@layouts/ProseLayout.astro";
 
 export const getStaticPaths = (async () => {
   const programmingEntries = await getCollection("programming");
@@ -73,11 +74,10 @@ const { title, date, technologies, website, repository } = project.data;
           )
         }
       </div>
-      <div
+
-        class="prose prose-lg max-w-none font-serif prose-headings:text-gray-600 prose-h2:font-light prose-a:text-teal-600 prose-a:no-underline prose-a:duration-100 hover:prose-a:text-teal-500 hover:prose-a:underline before:prose-code:content-[''] after:prose-code:content-['']"
+      <ProseLayout>
-      >
         <Content />
-      </div>
+      </ProseLayout>
     </TextContentLayout>
   </ContainerLayout>
 </BaseLayout>