feat: markdown rendering, daisyUI 5 compliance fixes, garden/luxury themes

1 files changed, 77 insertions, 1 deletions

diff --git a/packages/frontend/src/app.css b/packages/frontend/src/app.css
index 5602e1f..a9ee1b6 100644
--- a/packages/frontend/src/app.css
+++ b/packages/frontend/src/app.css
@@ -1,4 +1,80 @@
 @import "tailwindcss";
+@import "highlight.js/styles/atom-one-dark.min.css";
 @plugin "daisyui" {
-	themes: light, dark, dracula, night, nord, sunset, cyberpunk, forest, cmyk, coffee, caramellatte;
+	themes: light, dark, dracula, night, nord, sunset, cyberpunk, forest, cmyk, coffee, caramellatte, garden, luxury;
+}
+
+.markdown-body {
+	& p {
+		margin-block: 0.5em;
+		&:first-child { margin-block-start: 0; }
+		&:last-child { margin-block-end: 0; }
+	}
+	& h1, & h2, & h3, & h4, & h5, & h6 {
+		font-weight: 600;
+		line-height: 1.25;
+		margin-block: 0.75em 0.25em;
+		&:first-child { margin-block-start: 0; }
+	}
+	& h1 { font-size: 1.4em; }
+	& h2 { font-size: 1.2em; }
+	& h3 { font-size: 1.1em; }
+	& ul, & ol {
+		padding-inline-start: 1.5em;
+		margin-block: 0.5em;
+	}
+	& ul { list-style-type: disc; }
+	& ol { list-style-type: decimal; }
+	& li { margin-block: 0.15em; }
+	& pre {
+		overflow-x: auto;
+		border-radius: var(--radius-box);
+		margin-block: 0.5em;
+		background-color: oklch(var(--color-neutral));
+		color: oklch(var(--color-neutral-content));
+	}
+	& pre code {
+		display: block;
+		padding: 0.75em 1em;
+		font-size: 0.8125em;
+		line-height: 1.5;
+	}
+	& :not(pre) > code {
+		font-size: 0.875em;
+		padding: 0.15em 0.4em;
+		border-radius: var(--radius-selector);
+		background-color: oklch(var(--color-base-content) / 0.1);
+	}
+	& blockquote {
+		border-inline-start: 3px solid oklch(var(--color-base-content) / 0.2);
+		padding-inline-start: 0.75em;
+		margin-block: 0.5em;
+		opacity: 0.8;
+	}
+	& a {
+		color: oklch(var(--color-primary));
+		text-decoration: underline;
+		&:hover { opacity: 0.8; }
+	}
+	& strong { font-weight: 600; }
+	& table {
+		width: 100%;
+		border-collapse: collapse;
+		margin-block: 0.5em;
+		font-size: 0.875em;
+	}
+	& th, & td {
+		border: 1px solid oklch(var(--color-base-content) / 0.15);
+		padding: 0.4em 0.75em;
+		text-align: start;
+	}
+	& th {
+		font-weight: 600;
+		background-color: oklch(var(--color-base-200));
+	}
+	& hr {
+		border: none;
+		border-top: 1px solid oklch(var(--color-base-content) / 0.2);
+		margin-block: 0.75em;
+	}
 }