adding css

apps/marketing-astro/src/pages/docs/[...path].astro

@@ -10,10 +10,9 @@ import Markdoc from "@markdoc/markdoc";
 import Root from "../../layouts/root.astro";
 import { Feedback } from "./feedback";
 import { PageNavigation } from "./nextPage";
-import { HeadingNav } from "./heading-nav";
-import Link from "../../components/link.astro";
 import { ArrowUpRightIcon } from "@heroicons/react/24/solid";
 import { cx } from "class-variance-authority";
+import "./docs.css";
 
 export const prerender = true;
 
@@ -75,14 +74,7 @@ const sections = await getFiles();
         <div
           class="sticky top-[4.5rem] border-r border-outline-variant md:w-56 lg:w-60"
         >
-          <!-- <ScrollArea
-            className="h-[calc(100vh-4.5rem)] overflow-x-hidden -ml-0.5 py-16 pl-0.5 "
-          >
-            <DocsNavDesktop sections={sections} />
-          </ScrollArea> -->
-
           <!-- DESKTOP NAVIGATION -->
-
           <nav
             class="text-base md:text-sm h-[calc(100vh-4.5rem)] overflow-x-hidden -ml-0.5 py-16 pl-0.5 scrollbar-thin"
             id="docs-sidebar-nav"

apps/marketing-astro/src/pages/docs/docs.css

@@ -0,0 +1,62 @@
+.prose p:not(.not-prose) {
+  @apply text-on-surface my-4;
+}
+
+.prose h1 {
+  @apply text-4xl font-bold mb-6 mt-0;
+}
+
+.prose h2 {
+  @apply text-2xl font-bold mb-4 mt-8 border-t border-outline-variant pt-10 scroll-mt-6;
+}
+
+.prose h3 {
+  @apply text-xl font-bold mt-7 mb-2;
+}
+
+.prose h4 {
+  @apply text-lg font-bold mt-5 mb-1.5;
+}
+
+.prose blockquote {
+  @apply border border-outline-variant my-4 px-4 rounded;
+}
+
+.prose table {
+  @apply my-2 text-sm;
+}
+
+.prose thead {
+  @apply border-b border-outline-variant;
+}
+
+.prose th {
+  @apply font-bold text-left pb-1;
+}
+
+.prose tr {
+  @apply border-b border-outline-variant;
+}
+.prose tr:last-child {
+  @apply border-none;
+}
+
+.prose td {
+  @apply py-1 pr-2;
+}
+
+.prose td:first-child {
+  @apply whitespace-nowrap;
+}
+
+.prose ul {
+  @apply list-disc list-inside my-4;
+}
+
+.prose ol {
+  @apply list-decimal list-inside my-4;
+}
+
+.prose a:not(.not-prose) {
+  @apply text-blue-700 hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-400;
+}