From 5ebee52ccdde75970dae4020f94cb5e278f2293a Mon Sep 17 00:00:00 2001
From: Sat Naing <satnaingdev@gmail.com>
Date: Mon, 26 Sep 2022 02:28:54 +0630
Subject: [PATCH] Update prose styling

---
 src/styles/base.css | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/styles/base.css b/src/styles/base.css
index 9421209..f229b38 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -4,16 +4,16 @@
 
 @layer base {
   :root {
-    --color-text-base: 40, 39, 40;
     --color-fill: 251, 254, 251;
+    --color-text-base: 40, 39, 40;
     --color-accent: 0, 108, 172;
     --color-card: 230, 230, 230;
     --color-card-muted: 205, 205, 205;
     --color-border: 236, 233, 233;
   }
   .theme-dark {
-    --color-text-base: 230, 230, 230;
     --color-fill: 47, 55, 65;
+    --color-text-base: 230, 230, 230;
     --color-accent: 26, 217, 217;
     --color-card: 63, 75, 90;
     --color-card-muted: 89, 107, 129;
@@ -52,19 +52,33 @@
     prose-img:mx-auto prose-img:border-2 prose-img:border-skin-line
     prose-headings:!mb-3
     prose-th:border prose-th:border-skin-line
-    prose-td:border prose-td:border-skin-line;
+    prose-td:border prose-td:border-skin-line
+
+    
+    prose-p:!text-skin-base prose-headings:!text-skin-base 
+    prose-ol:!text-skin-base prose-ul:!text-skin-base prose-blockquote:opacity-80 
+    prose-figcaption:!text-skin-base prose-figcaption:opacity-70
+    prose-code:bg-skin-card prose-code:bg-opacity-75 
+    prose-code:!text-skin-base prose-code:p-1 prose-code:rounded
+    prose-code:after:!content-[''] prose-code:before:!content-['']
+    prose-strong:!text-skin-base prose-table:text-skin-base 
+    prose-pre:!text-skin-base prose-a:!text-skin-base 
+    prose-hr:!border-skin-line;
+  }
+  #article a {
+    @apply hover:!text-skin-accent;
   }
   .prose thead th:first-child,
   tbody td:first-child,
   tfoot td:first-child {
     padding-left: 0.5714286em;
   }
-  .theme-dark .prose {
-    @apply prose-invert;
-  }
   #article h2#table-of-contents {
     @apply mb-2;
   }
+  #article details {
+    @apply text-skin-base;
+  }
   #article h2#table-of-contents + p {
     @apply hidden;
   }