feat(blog): Enhance blog content styling and readability

- Add comprehensive blog content CSS with RTL support
- Implement responsive typography and layout improvements
- Create dedicated CSS for blog prose and content styling
- Optimize code blocks, headings, and typography for better readability
- Add scroll padding and responsive design considerations
- Improve dark mode color contrast and styling
- Enhance code and blockquote styling with better visual hierarchy

app/assets/css/main.css

@@ -3,6 +3,8 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 @import "./transitions.css";
+@import "./prose.css";
+@import "./blog-content.css";
 
 @source "../../components/**/*.{vue,js,ts}";
 @source "../../layouts/**/*.vue";
@@ -62,6 +64,7 @@
   html {
     overflow-y: scroll;
     /* Avoid width variation */
+    scroll-padding-top: 2rem; /* Offset for fixed navbar when using anchor links */
   }
 
   html,
@@ -159,14 +162,16 @@
   }
 
   /* Hide scrollbars for overflow containers */
-  .no-scrollbar {
+  .no-scrollbar,
+  .scrollbar-hide {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
   }
 
-  .no-scrollbar::-webkit-scrollbar {
+  .no-scrollbar::-webkit-scrollbar,
+  .scrollbar-hide::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari, Opera */
   }