fix: Code block indent and content envvar reading

src/routes/+page.svelte

@@ -75,7 +75,7 @@
 				</div>
 			</div>
 		</div>
-		<article class="prose-bio lg:prose-xl dark:prose-invert">
+		<article id="bio-core" class="prose lg:prose-xl dark:prose-invert">
 			<Content />
 		</article>
 	</div>
@@ -149,9 +149,15 @@
 		height: 20vh;
 		border-radius: 50%;
 	}
-	:global(h1 after) {
+	#bio-core {
-		content: ' ';
+		width: 100%;
-		display: block;
+	}
-		border: 2px solid black;
+	#bio-core > :global(*):not(h1):not(h2) {
+		margin-left: 50px;
+	}
+	#bio-core > :global(h1) {
+		color: theme('colors.eucalyptus.700');
+		font-weight: normal;
+		border-bottom: 1px solid;
 	}
 </style>

src/style/content.css

@@ -1,3 +1,7 @@
+blockquote {
+    background: #fafaee;
+    font-style: italic;
+}
 /* block quotes */
 .note-blockquote {
     border-left: 4px solid #0078d4; /* Blue left border */

svelte.config.js

@@ -2,7 +2,7 @@ import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { mdsvex } from 'mdsvex';
 
-const contentDir = import.meta.env.CHRYSOBLOG_CONTENT || "src/content";
+const contentDir = import.meta.env?.CHRYSOBLOG_CONTENT ?? "src/content";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

tailwind.config.ts

@@ -87,6 +87,9 @@ const config: Config = {
 			},
 			typography: ((theme) => {
 				let markdownCommon = {
+					h1: {
+						color: theme('colors.eucalyptus.700'),
+					},
 					h2: {
 						color: theme('colors.eucalyptus.700'),
 					},
@@ -104,27 +107,13 @@ const config: Config = {
 						listStyleType: "decimal",
 						listStylePosition: "outside",
 					},
+					maxWidth: "100%",
 				};
 
 				return {
-					bio: {
-						css: {
-							...markdownCommon,
-							h1: {
-								color: theme('colors.eucalyptus.700'),
-								"border-bottom": "1px solid",
-							},
-							"*:not(h1):not(h2):not(span):not(code)": {
-								"margin-left": "50px",
-							},
-	 					},
-					},
 					DEFAULT: {
 						css: {
 							...markdownCommon,
-							h1: {
-								color: theme('colors.eucalyptus.700'),
-							},
 						},
 					},
 				};