update css

Author: ivikramsahu

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

@@ -76,15 +76,15 @@ function renderInlineCode(input: string) {
 
 <BaseLayout title={post.data.title} description={post.data.description} containerClass="max-w-6xl">
   <div class="lg:grid lg:grid-cols-[minmax(0,1fr)_20rem] lg:gap-10">
-    <article class="prose prose-zinc prose-lg dark:prose-invert max-w-none">
+    <article class="openai-prose mx-auto w-full max-w-[46rem] min-w-0">
       <div class="not-prose mb-8 space-y-3">
         <a
           href="/"
           class="text-sm text-zinc-600 no-underline hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
         >
           ← Back
         </a>
-        <h1 class="mb-0 text-[32px] font-semibold tracking-tight">
+        <h1 class="mb-0 text-[40px] leading-[1.1] font-semibold tracking-tight">
           <span set:html={renderInlineCode(post.data.title)} />
         </h1>
         <div class="text-base text-zinc-600 dark:text-zinc-400">{formattedDate}</div>
@@ -203,7 +203,7 @@ function renderInlineCode(input: string) {
     </script>
 
     <aside class="hidden lg:block">
-      <div class="sticky top-24 max-h-[calc(100vh-8rem)] overflow-auto">
+      <div class="sticky top-24 max-h-[calc(100vh-8rem)] overflow-auto border-l border-zinc-200 pl-6 dark:border-zinc-800">
         <div class="text-sm font-semibold text-zinc-700 dark:text-zinc-50">Table of content</div>
         {toc.length > 0 ? (
           <nav class="mt-3">

src/styles/global.css

@@ -59,6 +59,102 @@
   .prose :where(h2[id], h3[id], h4[id], h5[id], h6[id]):hover {
     @apply underline decoration-zinc-300 underline-offset-4 dark:decoration-zinc-700;
   }
+
+  .openai-prose {
+    @apply prose prose-zinc dark:prose-invert;
+  }
+
+  .openai-prose {
+    font-size: 17px;
+    line-height: 1.75;
+  }
+
+  .openai-prose :where(p):not(:where(.not-prose, .not-prose *)) {
+    margin-top: 1.1em;
+    margin-bottom: 1.1em;
+  }
+
+  .openai-prose :where(h1):not(:where(.not-prose, .not-prose *)) {
+    @apply tracking-tight;
+    font-size: 40px;
+    line-height: 1.1;
+    margin-top: 0;
+    margin-bottom: 0.6em;
+  }
+
+  .openai-prose :where(h2):not(:where(.not-prose, .not-prose *)) {
+    @apply tracking-tight;
+    font-size: 28px;
+    line-height: 1.2;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+  }
+
+  .openai-prose :where(h3):not(:where(.not-prose, .not-prose *)) {
+    @apply tracking-tight;
+    font-size: 22px;
+    line-height: 1.25;
+    margin-top: 1.4em;
+    margin-bottom: 0.5em;
+  }
+
+  .openai-prose :where(ul, ol):not(:where(.not-prose, .not-prose *)) {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  .openai-prose :where(li):not(:where(.not-prose, .not-prose *)) {
+    margin-top: 0.35em;
+    margin-bottom: 0.35em;
+  }
+
+  .openai-prose :where(a):not(:where(.not-prose, .not-prose *)) {
+    @apply no-underline;
+    border-bottom: 1px solid rgb(212 212 216);
+    transition: border-color 150ms ease, color 150ms ease;
+  }
+
+  .openai-prose :where(a:hover):not(:where(.not-prose, .not-prose *)) {
+    border-bottom-color: rgb(24 24 27);
+  }
+
+  .openai-prose :where(.dark a):not(:where(.not-prose, .not-prose *)) {
+    border-bottom-color: rgb(82 82 91);
+  }
+
+  .openai-prose :where(.dark a:hover):not(:where(.not-prose, .not-prose *)) {
+    border-bottom-color: rgb(244 244 245);
+  }
+
+  .openai-prose :where(pre):not(:where(.not-prose, .not-prose *)) {
+    @apply rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950;
+    padding: 16px;
+    overflow-x: auto;
+  }
+
+  .openai-prose :where(pre code):not(:where(.not-prose, .not-prose *)) {
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+    font-size: 0.9em;
+    color: inherit;
+  }
+
+  .openai-prose :where(blockquote):not(:where(.not-prose, .not-prose *)) {
+    @apply rounded-xl border border-zinc-200 bg-zinc-50 px-5 py-4 text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200;
+    border-left-width: 4px;
+    border-left-color: rgb(161 161 170);
+  }
+
+  .openai-prose :where(hr):not(:where(.not-prose, .not-prose *)) {
+    @apply border-zinc-200 dark:border-zinc-800;
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .openai-prose :where(img):not(:where(.not-prose, .not-prose *)) {
+    @apply rounded-2xl;
+  }
 }
 
 @layer base {