fix: render markdown styles

themes/starless/layouts/_default/baseof.html

@@ -6,7 +6,7 @@
     <meta name="darkreader-lock">
     <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ .Title }} | {{ site.Title }}{{ end }}</title>
     <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ site.Params.description }}{{ end }}">
-    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
@@ -124,6 +124,85 @@
         padding: 0.5rem 1rem;
       }
 
+      .prose.prose-invert {
+        --tw-prose-invert-body: rgba(234, 228, 226, 0.9);
+        --tw-prose-invert-headings: #eae4e2;
+        --tw-prose-invert-bold: #eae4e2;
+        --tw-prose-invert-links: #d18c81;
+        --tw-prose-invert-quotes: #d2c7c5;
+        --tw-prose-invert-quote-borders: rgba(209, 140, 129, 0.65);
+        --tw-prose-invert-counters: #d2c7c5;
+        --tw-prose-invert-bullets: #d2c7c5;
+        --tw-prose-invert-hr: rgba(234, 228, 226, 0.1);
+        --tw-prose-invert-th-borders: rgba(234, 228, 226, 0.18);
+        --tw-prose-invert-td-borders: rgba(234, 228, 226, 0.12);
+      }
+
+      .prose h1,
+      .prose h2,
+      .prose h3,
+      .prose h4 {
+        font-family: "Cormorant Garamond", serif;
+        font-weight: 400;
+      }
+
+      .prose h2 {
+        font-size: 1.5rem;
+        line-height: 2rem;
+        margin-top: 2rem;
+        margin-bottom: 0.75rem;
+      }
+
+      .prose blockquote {
+        border-left-width: 2px;
+        padding-left: 1rem;
+      }
+
+      .prose blockquote p:first-of-type::before,
+      .prose blockquote p:last-of-type::after,
+      .prose code::before,
+      .prose code::after {
+        content: none;
+      }
+
+      .prose :not(pre) > code {
+        color: #d18c81;
+        font-size: inherit;
+        font-weight: 400;
+      }
+
+      .prose table {
+        border-collapse: collapse;
+        width: 100%;
+      }
+
+      .prose th,
+      .prose td {
+        border: 1px solid rgba(234, 228, 226, 0.12);
+        padding: 0.5rem 0.75rem;
+      }
+
+      .prose th {
+        border-color: rgba(234, 228, 226, 0.18);
+      }
+
+      .prose hr {
+        border-color: rgba(234, 228, 226, 0.1);
+      }
+
+      .prose input[type="checkbox"] {
+        accent-color: #d18c81;
+        background-color: #161413;
+        border-color: rgba(234, 228, 226, 0.45);
+        color: #d18c81;
+      }
+
+      .prose input[type="checkbox"]:checked {
+        background-color: #161413;
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' fill='%23d18c81'/%3e%3c/svg%3e");
+        border-color: #d18c81;
+      }
+
       @media (max-width: 768px) {
         #search-dialog {
           margin-top: 1rem;