Better styles

2 files changed, 40 insertions, 41 deletions

diff --git a/src/components/Prose.astro b/src/components/Prose.astro
index aecfca2..43a8ca2 100644
--- a/src/components/Prose.astro
+++ b/src/components/Prose.astro
@@ -3,25 +3,26 @@
 ---
 
 <div
-    class="prose prose-lg max-w-none mx-auto px-4 sm:px-6 lg:px-8 py-8
+    class="prose prose-lg prose-custom max-w-none mx-auto px-4 sm:px-6 lg:px-8 py-8
     prose-headings:font-bold prose-headings:text-gray-900 prose-headings:mb-4 prose-headings:mt-8
     prose-h1:text-4xl prose-h1:mt-0
-    prose-h2:text-2xl prose-h2:border-b prose-h2:border-gray-200 prose-h2:pb-2
+    prose-h2:text-2xl prose-h2:pb-2
     prose-h3:text-xl
-    prose-p:text-gray-700 prose-p:my-4 prose-p:leading-relaxed
+    prose-p:text-gray-900 prose-p:my-4 prose-p:leading-relaxed
     prose-a:text-blue-600 prose-a:font-medium prose-a:no-underline hover:prose-a:underline
     prose-strong:font-bold prose-strong:text-gray-900
     prose-ul:my-6 prose-ul:list-disc prose-ul:pl-6
     prose-ol:my-6 prose-ol:list-decimal prose-ol:pl-6
-    prose-li:my-2 prose-li:text-gray-700
+    prose-li:my-2 prose-li:text-gray-900
     prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:pl-4 prose-blockquote:py-1 prose-blockquote:my-6 prose-blockquote:bg-blue-50 prose-blockquote:rounded-r-md
-    prose-blockquote:text-gray-700 prose-blockquote:italic
+    prose-blockquote:text-gray-900 prose-blockquote:italic
     prose-img:rounded-lg prose-img:shadow-md prose-img:my-8
-    prose-hr:my-8 prose-hr:border-gray-200
-    prose-code:text-gray-800 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm
-    prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:p-4 prose-pre:rounded-lg prose-pre:overflow-x-auto prose-pre:my-6
-    prose-pre:shadow-md prose-pre:text-sm
-    dark:prose-invert dark:prose-pre:bg-gray-800 dark:prose-code:bg-gray-800 dark:prose-blockquote:bg-gray-800"
+    prose-hr:hidden
+    prose-code:font-mono prose-code:text-blue-700 prose-code:bg-blue-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:border prose-code:border-blue-100
+    prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-200 prose-pre:p-4 prose-pre:rounded-lg prose-pre:overflow-x-auto prose-pre:my-6
+    prose-pre:shadow-sm prose-pre:text-sm
+    [&_pre_code]:text-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:border-0
+    dark:prose-invert dark:prose-pre:bg-gray-800 dark:prose-pre:border-gray-700 dark:prose-code:bg-gray-700 dark:prose-code:border-gray-600 dark:prose-code:text-blue-300 dark:prose-blockquote:bg-gray-800 dark:[&_pre_code]:text-gray-900"
 >
     <slot />
 </div>
diff --git a/src/pages/cidr-calculator-subnet-guide.astro b/src/pages/cidr-calculator-subnet-guide.astro
index 09b553a..9d9161e 100644
--- a/src/pages/cidr-calculator-subnet-guide.astro
+++ b/src/pages/cidr-calculator-subnet-guide.astro
@@ -26,16 +26,8 @@ import { Content as GuideContent } from "../content/cidr-guide.md";
 ---
 
 <Layout title={title} description={description}>
-    {
-        /**
-    ────────────────────────────────────────────────────────────
-    Hero
-    ────────────────────────────────────────────────────────────*/
-    }
-    <header
-        class="relative isolate overflow-hidden bg-gradient-to-br from-blue-50 via-indigo-50 to-white rounded-xl shadow-sm"
-    >
-        <div class="mx-auto max-w-7xl px-4 py-20 sm:py-24 lg:px-6 text-center">
+    <header>
+        <div class="mx-auto max-w-7xl px-4 py-2 sm:py-4 lg:px-6 text-center">
             <h1
                 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-6xl"
             >
@@ -48,51 +40,57 @@ import { Content as GuideContent } from "../content/cidr-guide.md";
         </div>
     </header>
 
-    {
-        /**
-    ────────────────────────────────────────────────────────────
-    Calculator block
-    ────────────────────────────────────────────────────────────*/
-    }
-    <section class="mx-auto mt-12 max-w-4xl px-2 sm:px-4">
+    <section>
         <Cidr client:load />
     </section>
 
-    {
-        /**
-    ────────────────────────────────────────────────────────────
-    Table of Contents (desktop only for cleanliness)
-    ────────────────────────────────────────────────────────────*/
-    }
     <nav
         aria-label="Page sections"
-        class="hidden lg:block sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-gray-200"
+        class="hidden sm:block sticky top-0 z-10 pt-1 my-6 border-0 sm:border border-gray-300 rounded-lg bg-white/70 shadow-md"
     >
         <div class="mx-auto max-w-4xl px-4">
             <ul
-                class="flex flex-wrap justify-center gap-6 py-3 text-sm font-medium text-gray-600"
+                class="flex flex-wrap justify-center gap-8 py-3 text-base font-medium text-gray-700"
             >
                 <li>
-                    <a href="#what-is-cidr" class="hover:text-blue-600"
+                    <a
+                        href="#what-is-cidr"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                         >What is CIDR?</a
                     >
                 </li>
                 <li>
-                    <a href="#cidr-to-ip" class="hover:text-blue-600"
+                    <a
+                        href="#cidr-to-ip"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                         >CIDR → IP range</a
                     >
                 </li>
                 <li>
-                    <a href="#subnetting-tutorial" class="hover:text-blue-600"
+                    <a
+                        href="#subnetting-tutorial"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                         >Subnetting tutorial</a
                     >
                 </li>
                 <li>
-                    <a href="#ipv6" class="hover:text-blue-600">IPv6 basics</a>
+                    <a
+                        href="#ipv6"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >IPv6 basics</a
+                    >
+                </li>
+                <li>
+                    <a
+                        href="#faq"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                        >FAQ</a
+                    >
                 </li>
-                <li><a href="#faq" class="hover:text-blue-600">FAQ</a></li>
                 <li>
-                    <a href="#resources" class="hover:text-blue-600"
+                    <a
+                        href="#resources"
+                        class="px-3 py-2 rounded-md hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
                         >Resources</a
                     >
                 </li>