From 4158968e1eb7aede02ce22413fa5b487c36b5ab9 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Fri, 15 May 2026 14:08:21 +0200
Subject: [PATCH] fixed markdown render

---
 frontend/src/pages/admin/editor.astro |  1 -
 frontend/src/pages/posts/[slug].astro |  1 -
 frontend/src/styles/global.css        | 59 +++++++++++++++------------
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/frontend/src/pages/admin/editor.astro b/frontend/src/pages/admin/editor.astro
index 5e4dfbc..f2cfea9 100644
--- a/frontend/src/pages/admin/editor.astro
+++ b/frontend/src/pages/admin/editor.astro
@@ -1,6 +1,5 @@
 ---
 import 'katex/dist/katex.min.css';
-import 'highlight.js/styles/atom-one-dark.css';
 import AdminLayout from '../../layouts/AdminLayout.astro';
 import Editor from '../../components/react/admin/Editor';
 
diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro
index a7640ec..4114cee 100644
--- a/frontend/src/pages/posts/[slug].astro
+++ b/frontend/src/pages/posts/[slug].astro
@@ -1,6 +1,5 @@
 ---
 import 'katex/dist/katex.min.css';
-import 'highlight.js/styles/atom-one-dark.css';
 import Layout from '../../layouts/Layout.astro';
 import DeletePostButton from '../../components/react/DeletePostButton';
 import { renderMarkdown } from '../../lib/markdown';
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 75776aa..0b2d02d 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -376,28 +376,18 @@ code, pre, kbd, samp {
   font-style: italic;
   margin: 1rem 0 0.5rem;
 }
+.prose :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 5rem; }
 .prose p { margin: 0 0 1.15rem; }
 
 .prose blockquote {
-  border-left: 3px double var(--mauve);
-  padding: 0.5rem 0 0.5rem 1.4rem;
+  border-left: 3px solid var(--mauve);
+  padding: 0.25rem 0 0.25rem 1.4rem;
   margin: 1.75rem 0;
   color: var(--subtext1);
-  font-family: var(--font-display);
   font-style: italic;
-  font-size: 1.15em;
-  line-height: 1.55;
-}
-.prose blockquote::before {
-  content: "“";
-  font-family: var(--font-display);
-  color: var(--mauve);
-  font-size: 2.5em;
-  line-height: 0;
-  vertical-align: -0.35em;
-  margin-right: 0.1em;
-  opacity: 0.55;
 }
+.prose blockquote p { margin: 0 0 0.6rem; }
+.prose blockquote p:last-child { margin: 0; }
 
 .prose pre {
   padding: 1rem 1.1rem;
@@ -426,6 +416,8 @@ code, pre, kbd, samp {
   color: inherit;
   font-size: inherit;
 }
+.prose a code,
+.prose :is(h1, h2, h3, h4) code { color: inherit; }
 
 .prose a {
   color: var(--mauve);
@@ -459,6 +451,17 @@ code, pre, kbd, samp {
 .prose ol { list-style: decimal-leading-zero; }
 .prose ol > li::marker { color: var(--mauve); font-family: var(--font-display); font-style: italic; }
 .prose li { margin: 0.3rem 0; }
+/* Loose lists wrap items in <p>; drop the paragraph block-margin inside li. */
+.prose li > p { margin: 0; }
+.prose li > p + p { margin-top: 0.6rem; }
+/* GFM task lists — kill the diamond, keep the checkbox. */
+.prose ul > li:has(input[type="checkbox"]) { padding-left: 0; }
+.prose ul > li:has(input[type="checkbox"])::before { content: none; }
+.prose li > input[type="checkbox"] {
+  margin: 0 0.5rem 0 0;
+  vertical-align: 0.04em;
+  accent-color: var(--mauve);
+}
 
 .prose hr {
   margin: 3rem auto;
@@ -487,18 +490,15 @@ code, pre, kbd, samp {
   font-size: 0.85rem;
 }
 
-.prose strong { color: var(--mauve); font-weight: 700; }
+.prose strong { color: inherit; font-weight: 700; }
 .prose em { color: inherit; font-style: italic; font-family: var(--font-display); }
 .prose del { color: var(--overlay0); text-decoration: line-through; }
 
 /* ───── Figure / image plate — the heart of the gallery body ───── */
-.prose figure,
-.prose p > img:only-child {
-  margin: 2.5rem 0;
-}
 .prose figure {
   display: block;
   text-align: center;
+  margin: 2.5rem 0;
 }
 .prose figure img,
 .prose img {
@@ -608,7 +608,10 @@ code, pre, kbd, samp {
 
 /* GFM tables — keep, slightly more editorial */
 .prose table {
+  display: block;
   width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
   margin: 1.75rem 0;
   border-collapse: collapse;
   border: 1px solid var(--surface2);
@@ -966,13 +969,17 @@ code, pre, kbd, samp {
 
 /* hljs token colors — driven by theme tokens, slightly muted for parchment bg */
 .hljs { color: var(--text); background: transparent; }
-.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--mauve); font-weight: 600; }
-.hljs-string, .hljs-attr { color: var(--green); }
-.hljs-number, .hljs-literal { color: var(--peach); }
+.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-operator { color: var(--mauve); font-weight: 600; }
+.hljs-string, .hljs-attr, .hljs-regexp, .hljs-addition { color: var(--green); }
+.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--peach); }
 .hljs-comment, .hljs-quote { color: var(--overlay0); font-style: italic; }
-.hljs-title, .hljs-section, .hljs-name { color: var(--blue); }
-.hljs-type, .hljs-class .hljs-title { color: var(--yellow); }
-.hljs-variable, .hljs-template-variable { color: var(--red); }
+.hljs-title, .hljs-section, .hljs-name, .hljs-title.function_ { color: var(--blue); }
+.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ { color: var(--yellow); }
+.hljs-variable, .hljs-template-variable, .hljs-params, .hljs-property { color: var(--red); }
+.hljs-attribute, .hljs-meta, .hljs-meta .hljs-keyword { color: var(--subtext0); }
+.hljs-deletion { color: var(--red); }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 700; }
 
 /* KaTeX */
 .katex { color: var(--text); }