Refactor markdown styles

src/components/Breadcrumbs.astro

@@ -9,7 +9,7 @@ export interface Props {
 const { breadcrumbs, roadmapId } = Astro.props;
 ---
 
-<div class='py-7 pb-6 -mb-7'>
+<div class='py-7 pb-6'>
     <!-- Desktop breadcrums -->
     <p class='text-gray-500 container hidden sm:block'>
       <a href='/roadmaps' class='hover:text-gray-800'>Roadmaps</a>

src/components/MarkdownRoadmap.astro

@@ -1,9 +1,9 @@
 ---
-import "./Prism.css";
+import "../styles/prism.css";
 ---
 
 <div class="bg-gray-50 py-4 sm:py-10">
-  <div class="container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5 ">
+  <div class="container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5">
     <slot />
   </div>
 </div>

src/layouts/BaseLayout.astro

@@ -1,5 +1,5 @@
 ---
-import "../global.css";
+import "../styles/global.css";
 import Navigation from '../components/Navigation.astro';
 
 export interface Props {

src/pages/[...topicId].astro

@@ -1,9 +1,9 @@
 ---
 import Breadcrumbs from '../components/Breadcrumbs.astro';
-import MarkdownContent from '../components/MarkdownContent/MarkdownContent.astro';
 import RoadmapBanner from '../components/RoadmapBanner.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { getTopicFiles, TopicFileType } from '../lib/topic';
+import '../styles/prism.css';
 
 export async function getStaticPaths() {
   const topicPathMapping = await getTopicFiles();
@@ -20,11 +20,13 @@ const { file, breadcrumbs, roadmapId, roadmap } = Astro.props as TopicFileType;
 
 <BaseLayout title="What is this">
   <RoadmapBanner roadmapId={roadmapId} roadmap={roadmap} />
-  <Breadcrumbs breadcrumbs={breadcrumbs} roadmapId={roadmapId} />
+  <div class="bg-gray-50">
+    <Breadcrumbs breadcrumbs={breadcrumbs} roadmapId={roadmapId} />
 
-  <MarkdownContent>
+    <div class="container pb-16 prose prose-p:mt-0 prose-h1:mb-4">
-    <main id="main-content">
+      <main id="main-content">
-      <file.Content />
+        <file.Content />
-    </main>
+      </main>
-  </MarkdownContent>
+    </div>
+  </div>
 </BaseLayout>

src/pages/[roadmapId].astro

@@ -1,6 +1,6 @@
 ---
 import InteractiveRoadamp from "../components/InteractiveRoadmap/InteractiveRoadmap.astro";
-import MarkdownContent from "../components/MarkdownContent/MarkdownContent.astro";
+import MarkdownRoadmap from "../components/MarkdownRoadmap.astro";
 import RoadmapHeader from "../components/RoadmapHeader.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { getRoadmapIds, RoadmapFrontmatter } from "../lib/roadmap";
@@ -41,7 +41,7 @@ const frontmatter = file.frontmatter as RoadmapFrontmatter;
     )
   }
 
-  <MarkdownContent>
+  <MarkdownRoadmap>
     <file.Content />
-  </MarkdownContent>
+  </MarkdownRoadmap>
 </BaseLayout>