project sticky left column, blog link underline opacity

Author: davidlyons

src/layouts/BlogPost.astro

@@ -28,8 +28,10 @@ const { title, description, pubDate, updatedDate, cover, coverAlt } = Astro.prop
   </div>
   <div
     class="prose dark:prose-invert prose-headings:font-medium prose-th:text-left prose-a:text-blue-700
-      prose-a:hover:text-blue-900 prose-a:dark:text-sky-400 prose-a:dark:hover:text-sky-300
-      prose-inline-code:rounded prose-inline-code:bg-neutral-900 prose-inline-code:before:content-none
+      prose-a:hover:text-blue-900 prose-a:decoration-blue-700/50 prose-a:dark:text-sky-400
+      prose-a:dark:hover:text-sky-300 prose-a:underline prose-a:underline-offset-4
+      prose-a:dark:decoration-sky-400/50 prose-a:hover:decoration-current prose-inline-code:rounded
+      prose-inline-code:bg-neutral-900 prose-inline-code:before:content-none
       prose-inline-code:after:content-none prose-inline-code:py-0.5 prose-inline-code:px-1.5
       prose-inline-code:font-medium mx-auto"
   >
@@ -44,7 +46,9 @@ const { title, description, pubDate, updatedDate, cover, coverAlt } = Astro.prop
           </div>
         )
       }
-      <h1 class="mb-11 border-b border-neutral-700 pb-8 text-5xl font-medium dark:text-white">
+      <h1
+        class="mb-11 border-b border-neutral-300 pb-8 text-5xl font-medium dark:border-neutral-700 dark:text-white"
+      >
         {title}
       </h1>
     </div>

src/pages/work/[...slug].astro

@@ -6,7 +6,7 @@ import { components } from '@/components/mdx/index.astro';
 import { iconMap } from '@/consts';
 import { Icon } from 'astro-icon/components';
 
-// This is a dynamic route that generates a page for every Markdown file in src/content/
+// This is a dynamic route that generates a page for every Markdown file in src/content/work/
 // Read more about dynamic routes and this `getStaticPaths` function in the Astro docs:
 // https://docs.astro.build/en/core-concepts/routing/#dynamic-routes
 export async function getStaticPaths() {
@@ -27,24 +27,27 @@ const { Content } = await render(entry);
 <BaseLayout {...entry.data}>
   <div class="grid-cols-12 lg:grid">
     <div class="col-span-3">
-      <h1 class="mb-1 text-4xl font-medium dark:text-white">{title}</h1>
-      <p class="opacity-50">
-        <FormattedDate date={pubDate} />
-      </p>
-      {description && <p class="mb-12">{description}</p>}
-      <div class="mb-1 text-lg dark:text-white">Tools used</div>
-      <ul class="mb-6 flex list-none flex-wrap gap-2">
-        {
-          tags.map((tag) => (
-            <li>
-              <span class="inline-block rounded-md px-2 py-1 text-xs font-medium dark:bg-gray-500 dark:text-white">
-                {iconMap[tag] && <Icon name={iconMap[tag]} size={16} class="me-1" />} {tag}
-              </span>
-            </li>
-          ))
-        }
-      </ul>
+      <div class="sticky top-12">
+        <h1 class="mb-1 text-4xl font-medium dark:text-white">{title}</h1>
+        <p class="opacity-50">
+          <FormattedDate date={pubDate} />
+        </p>
+        {description && <p class="mb-12">{description}</p>}
+        <div class="mb-1 text-lg dark:text-white">Tools used</div>
+        <ul class="mb-6 flex list-none flex-wrap gap-2">
+          {
+            tags.map((tag) => (
+              <li>
+                <span class="inline-block rounded-md px-2 py-1 text-xs font-medium dark:bg-gray-500 dark:text-white">
+                  {iconMap[tag] && <Icon name={iconMap[tag]} size={16} class="me-1" />} {tag}
+                </span>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
     </div>
+
     <div class="col-span-8 col-start-5">
       <Content components={components} />
     </div>

src/styles/base.css

@@ -67,7 +67,7 @@
   }
 
   a {
-    @apply text-blue-700 underline-offset-3 hover:text-blue-900 dark:text-sky-400 dark:hover:text-sky-300;
+    @apply text-blue-700 hover:text-blue-900 dark:text-sky-400 dark:hover:text-sky-300;
   }
 
   strong {