Docs: Fix mobile responsiveness

Author: pankajvaghela

apps/sequelize-guard-docs/content/blogs/2024/12/five-years-typescript-rewrite-with-ai.mdx

@@ -67,11 +67,11 @@ By emitting events at key points, the library became extensible without modifica
 
 **The Lesson**: Invest in strong abstractions early. They make migrations painless and keep your code relevant for years.
 
-## Maintainability = Survival in Open Source
+## Maintainability in Open Source
 
-JavaScript evolves at breakneck speed. What was cutting-edge in 2019 became legacy by 2024.
+JavaScript moves quickly. What felt state-of-the-art in 2019 looked a bit dated by 2024.
 
-The v6 rewrite wasn't just about adding types—it was about **ensuring the project's survival**:
+The v6 rewrite wasn't just about adding types—it was about **setting the project up for the next several years**.
 
 ### The Modernization Checklist
 
@@ -84,15 +84,15 @@ The v6 rewrite wasn't just about adding types—it was about **ensuring the proj
 
 ### Why This Matters
 
-Open source isn't "set it and forget it." Projects that don't evolve become abandonware. Users move on. Contributors disappear. The ecosystem leaves you behind.
+Open source projects thrive when they keep evolving at a sustainable pace. A modern toolchain makes it easier for maintainers and contributors to keep improving things without constant friction.
 
-By modernizing the toolchain, I ensured that:
+By modernizing the toolchain, I aimed to make sure that:
 - New contributors can jump in with familiar tools
-- The library works with modern Node.js projects (ESM)
+- The library works smoothly with modern Node.js projects (ESM)
 - TypeScript users get first-class support
 - The documentation stays fresh and accurate
 
-**The Lesson**: Evolve or fade. Maintenance isn't glamorous, but it's what keeps projects alive.
+**The Lesson**: A little ongoing maintenance goes a long way. Investing in your tooling and architecture makes it much easier for your project to keep growing over time.
 
 ## LLMs as Open-Source Superchargers
 
@@ -104,14 +104,14 @@ I approached this massive rewrite by treating Claude and GPT-4 as my **co-pilots
 
 ### What AI Crushed
 
-**The Grunt Work:**
+**The Repetitive Work:**
 - Type definitions across hundreds of lines of code
 - Converting modules from CommonJS to ESM
 - Migrating test suites from Jest to Vitest
 - Generating boilerplate for generic types
 - Updating configuration files for modern tooling
 
-This is the stuff that's tedious, error-prone, and soul-crushing. AI handled it with remarkable accuracy.
+This is the kind of work that's tedious, error-prone, soul-crushing and easy to get wrong when you're tired. AI handled it with remarkable consistency.
 
 ### What I Still Owned
 
@@ -133,7 +133,7 @@ Think of it like this:
 
 The work became more intellectually engaging. I spent less time typing boilerplate and more time thinking about design.
 
-**The Lesson**: AI is a force multiplier for maintainers. It doesn't eliminate the need for expertise—it amplifies it.
+**The Lesson**: AI is a helpful force multiplier for maintainers. It doesn't replace expertise—it gives you more space to use it.
 
 ## The Result: Battle-Tested, Type-Safe, Future-Proof
 
@@ -160,7 +160,7 @@ user.assignRole('admin'); // Autocomplete works perfectly
 
 ## A Message to Open-Source Maintainers
 
-If you have a dusty open-source gem sitting in your GitHub repos, **it's never too late to modernize**.
+If you have an open-source gem sitting quietly in your GitHub repos, **it's never too late to modernize**.
 
 The tools are better than ever:
 - TypeScript makes refactoring safer
@@ -170,7 +170,7 @@ The tools are better than ever:
 
 The community is here. People still care about well-designed libraries that solve real problems.
 
-Don't let your project fade because the tooling aged. Give it new life.
+If your project feels a bit behind on tooling, that's okay—it happens to every codebase. A small round of improvements can give it new life.
 
 ## Try It Out
 

apps/sequelize-guard-docs/src/app/blogs/components/BlogIndexPage.tsx

@@ -1,6 +1,6 @@
 import { blogSource } from '@/lib/source';
 import Link from 'next/link';
-import { Calendar, User, Tag } from 'lucide-react';
+import { Calendar, User, Tag, ShieldCheck } from 'lucide-react';
 
 export function BlogIndexPage() {
   const allBlogs = [...blogSource.getPages()].sort((a, b) => {
@@ -11,7 +11,16 @@ export function BlogIndexPage() {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
-      <div className="max-w-5xl mx-auto px-6 py-16">
+      <div className="max-w-5xl mx-auto px-4 py-10 sm:px-6 sm:py-16">
+        <header className="mb-10 flex items-center justify-between gap-4">
+          <Link href="/" className="flex items-center gap-3 group">
+            <ShieldCheck className="w-8 h-8 text-emerald-600 group-hover:text-emerald-700 transition" />
+            <span className="text-xl font-bold text-slate-900 group-hover:text-slate-950 transition">
+              Sequelize Guard
+            </span>
+          </Link>
+        </header>
+
         <div className="mb-12">
           <Link
             href="/"

apps/sequelize-guard-docs/src/app/blogs/components/BlogPostPage.tsx

@@ -1,6 +1,6 @@
 import { blogSource } from '@/lib/source';
 import { DocsBody } from 'fumadocs-ui/page';
-import { Calendar, User, Tag, ArrowLeft } from 'lucide-react';
+import { Calendar, User, Tag, ArrowLeft, ShieldCheck } from 'lucide-react';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 
@@ -16,7 +16,16 @@ export function BlogPostPage({ slug }: BlogPostPageProps) {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
-      <div className="max-w-4xl mx-auto px-6 py-16">
+      <div className="max-w-4xl mx-auto px-4 py-10 sm:px-6 sm:py-16">
+        <header className="mb-10 flex items-center justify-between gap-4">
+          <Link href="/" className="flex items-center gap-3 group">
+            <ShieldCheck className="w-8 h-8 text-emerald-600 group-hover:text-emerald-700 transition" />
+            <span className="text-xl font-bold text-slate-900 group-hover:text-slate-950 transition">
+              Sequelize Guard
+            </span>
+          </Link>
+        </header>
+
         <Link
           href="/blogs"
           className="inline-flex items-center gap-2 text-emerald-600 hover:text-emerald-700 font-medium mb-8"
@@ -25,7 +34,7 @@ export function BlogPostPage({ slug }: BlogPostPageProps) {
           Back to Blog
         </Link>
 
-        <article className="bg-white rounded-xl shadow-lg p-8 md:p-12 border border-slate-200">
+        <article className="bg-white rounded-xl shadow-lg p-4 sm:p-6 md:p-10 border border-slate-200">
           <header className="mb-8 pb-8 border-b border-slate-200">
             <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
               {page.data.title}
@@ -74,7 +83,7 @@ export function BlogPostPage({ slug }: BlogPostPageProps) {
             )}
           </header>
 
-          <DocsBody className="prose prose-slate max-w-none prose-headings:text-slate-900 prose-p:text-slate-700 prose-p:leading-relaxed prose-li:text-slate-700 prose-strong:text-slate-900 prose-a:text-emerald-600 prose-a:font-medium hover:prose-a:text-emerald-700 prose-code:text-emerald-600 prose-code:font-semibold prose-pre:bg-slate-900 prose-h2:text-slate-900 prose-h3:text-slate-800">
+          <DocsBody className="prose prose-sm sm:prose-base prose-slate max-w-none prose-headings:text-slate-900 prose-p:text-slate-700 prose-p:leading-relaxed prose-li:text-slate-700 prose-strong:text-slate-900 prose-a:text-emerald-600 prose-a:font-medium hover:prose-a:text-emerald-700 prose-code:text-emerald-600 prose-code:font-semibold prose-pre:bg-slate-900 prose-pre:text-sm sm:prose-pre:text-base prose-pre:overflow-x-auto prose-pre:rounded-lg prose-pre:p-4 prose-h2:text-slate-900 prose-h3:text-slate-800">
             <MDX />
           </DocsBody>
         </article>

apps/sequelize-guard-docs/src/app/global.css

@@ -1,3 +1,13 @@
 @import 'tailwindcss';
 @import 'fumadocs-ui/css/neutral.css';
 @import 'fumadocs-ui/css/preset.css';
+
+/* Remove boxed background from inline code inside prose content */
+.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  background: transparent;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+