Add new theme

assets/css/components/content.css

@@ -0,0 +1,38 @@
+@import "./chroma_dark.css";
+@import "./chroma.css";
+@import "./highlight.css";
+
+/* Some contrast ratio fixes as reported by Google Page Speed.  */
+.chroma .c1 {
+  @apply text-gray-500;
+}
+
+.dark .chroma .c1 {
+  @apply text-gray-400;
+}
+
+.content {
+  @apply prose prose-stone max-w-none dark:prose-invert dark:text-slate-400;
+  /* headings */
+  @apply prose-h6:font-bold;
+  /* lead */
+  @apply prose-lead:text-slate-500 prose-lead:text-xl prose-lead:mt-2 sm:prose-lead:mt-4 prose-lead:leading-relaxed dark:prose-lead:text-slate-400;
+  /* links */
+  @apply prose-a:text-primary prose-a:hover:text-primary/70 prose-a:underline;
+  @apply prose-a:prose-code:underline prose-a:prose-code:hover:text-primary/70 prose-a:prose-code:hover:underline;
+  /* pre */
+  @apply prose-pre:text-gray-800 prose-pre:border-1 prose-pre:border-gray-100 prose-pre:bg-light dark:prose-pre:bg-dark dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10;
+  /* code */
+  @apply prose-code:px-0.5 prose-code:text-gray-900 prose-code:dark:text-gray-300 border-none;
+  @apply prose-code:before:hidden prose-code:after:hidden prose-code:font-mono;
+  /* tables */
+  @apply prose-table:border-2 prose-table:border-gray-100  prose-table:dark:border-gray-800 prose-table:relative prose-table:overflow-scroll prose-table:prose-th:font-bold prose-table:prose-th:bg-blue-500 dark:prose-table:prose-th:bg-blue-500/50 prose-table:prose-th:p-2 prose-table:prose-td:p-2 prose-table:prose-th:text-white;
+  /* hr */
+  @apply dark:prose-hr:border-slate-800;
+}
+
+/* This will not match highlighting inside e.g. the code-toggle shortcode. */
+/* For more fine grained control of this, see components/shortcodes.css. */
+.content > .highlight {
+  @apply border-1 border-gray-200 dark:border-slate-600 mt-6 mb-8;
+}