src/layouts/InteractiveDemoLayout.astro

@@ -1,22 +1,74 @@
 ---
 import Divider from "../components/misc/Divider.astro";
 import Layout from "./Layout.astro";
-import '../styles/Markdown.css';
+//import '../styles/Markdown.css';
 
 const { frontmatter } = Astro.props;
 ---
 
 <Layout>
-    <main class="w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
+    <main
+        class="w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center"
+    >
         <div class="relative mb-4">
-            <img class="aspect-video object-cover" src={frontmatter.image} alt="">
-            <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
-                <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
+            <img
+                class="aspect-video object-cover"
+                src={frontmatter.image}
+                alt=""
+            />
+            <a
+                href={frontmatter.imageattr}
+                class="absolute bottom-0 right-0 h-[24px]"
+            >
+                <span class="material-symbols-outlined opacity-25 mr-[4px]"
+                    >link</span
+                >
             </a>
         </div>
         <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
         <p>{frontmatter.date}</p>
         <Divider />
+        <!-- Render our markdown with the normal header styling and some extra padding. -->
+        <style is:inline>
+            .astro-code {
+                margin-bottom: 1rem;
+                padding: 8px;
+            }
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p,
+            hr {
+                margin-bottom: 1rem;
+            }
+
+            h1 {
+                font-size: 3rem;
+                line-height: 1;
+            }
+
+            h2 {
+                font-size: 2.25rem;
+                line-height: 2.5rem;
+            }
+
+            h3 {
+                font-size: 1.875rem;
+                line-height: 2.25rem;
+            }
+
+            img {
+                margin: auto;
+            }
+
+            a {
+                text-decoration: underline;
+            }
+        </style>
         <slot />
     </main>
 </Layout>

src/styles/Markdown.css

@@ -1,27 +0,0 @@
-.astro-code{
-    margin-bottom: 1rem;
-    padding: 8px;
-}
-
-h1,h2,h3,h4,h5,h6,p,hr{
-    margin-bottom: 1rem;
-}
-
-h1{
-    font-size: 3rem;
-    line-height: 1;
-}
-
-h2{
-    font-size: 2.25rem; 
-    line-height: 2.5rem;
-}
-
-h3{
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-}
-
-img{
-    margin: auto;
-}