✨ Add support for content on taxonomy pages

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Automatic Markdown image resizing and srcset generation
 - Performance and Accessibility improvements to achieve perfect Lighthouse scores
 - Tables of Contents on article pages
+- Taxonomy and term listings now support Markdown content
 - Taxonomies on article and list pages
 - Author `headline` parameter
 - Skip to content and Scroll to top links

assets/css/compiled/main.css

@@ -468,12 +468,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-backdrop-sepia:  ;
 }
 
-.markdown {
+.prose {
   color: var(--tw-prose-body);
   max-width: 65ch;
 }
 
-.markdown :where([class~="lead"]):not(:where([class~="not-markdown"] *)) {
+.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-lead);
   font-size: 1.25em;
   line-height: 1.6;
@@ -481,7 +481,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 1.2em;
 }
 
-.markdown a {
+.prose a {
   color: var(--tw-prose-links);
   text-decoration: underline;
   font-weight: 500;
@@ -489,81 +489,81 @@ Ensure the default browser behavior of the `hidden` attribute.
           text-decoration-color: rgb(var(--color-primary-300));
 }
 
-:where(.markdown a:hover):not(:where([class~="not-markdown"] *)) {
+:where(.prose a:hover):not(:where([class~="not-prose"] *)) {
   color: rgb(var(--color-neutral)) !important;
   text-decoration: none !important;
   background-color: rgb(var(--color-primary-600)) !important;
   border-radius: 0.09rem;
 }
 
-.markdown :where(strong):not(:where([class~="not-markdown"] *)) {
+.prose :where(strong):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-bold);
   font-weight: 600;
 }
 
-.markdown :where(ol):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol):not(:where([class~="not-prose"] *)) {
   list-style-type: decimal;
   padding-left: 1.625em;
 }
 
-.markdown :where(ol[type="A"]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
   list-style-type: upper-alpha;
 }
 
-.markdown :where(ol[type="a"]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
   list-style-type: lower-alpha;
 }
 
-.markdown :where(ol[type="A" s]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
   list-style-type: upper-alpha;
 }
 
-.markdown :where(ol[type="a" s]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
   list-style-type: lower-alpha;
 }
 
-.markdown :where(ol[type="I"]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
   list-style-type: upper-roman;
 }
 
-.markdown :where(ol[type="i"]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
   list-style-type: lower-roman;
 }
 
-.markdown :where(ol[type="I" s]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
   list-style-type: upper-roman;
 }
 
-.markdown :where(ol[type="i" s]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
   list-style-type: lower-roman;
 }
 
-.markdown :where(ol[type="1"]):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
   list-style-type: decimal;
 }
 
-.markdown :where(ul):not(:where([class~="not-markdown"] *)) {
+.prose :where(ul):not(:where([class~="not-prose"] *)) {
   list-style-type: disc;
   padding-left: 1.625em;
 }
 
-.markdown :where(ol > li):not(:where([class~="not-markdown"] *))::marker {
+.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
   font-weight: 400;
   color: var(--tw-prose-counters);
 }
 
-.markdown :where(ul > li):not(:where([class~="not-markdown"] *))::marker {
+.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
   color: var(--tw-prose-bullets);
 }
 
-.markdown :where(hr):not(:where([class~="not-markdown"] *)) {
+.prose :where(hr):not(:where([class~="not-prose"] *)) {
   border-color: var(--tw-prose-hr);
   border-top-width: 1px;
   margin-top: 3em;
   margin-bottom: 3em;
 }
 
-.markdown :where(blockquote):not(:where([class~="not-markdown"] *)) {
+.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
   font-weight: 500;
   font-style: italic;
   color: var(--tw-prose-quotes);
@@ -575,100 +575,96 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 1em;
 }
 
-.markdown :where(blockquote p:first-of-type):not(:where([class~="not-markdown"] *))::before {
+.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
   content: open-quote;
 }
 
-.markdown :where(blockquote p:last-of-type):not(:where([class~="not-markdown"] *))::after {
+.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
   content: close-quote;
 }
 
-.markdown :where(h1):not(:where([class~="not-markdown"] *)) {
+.prose :where(h1):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   font-weight: 800;
   font-size: 2.25em;
   margin-top: 0;
   margin-bottom: 0.8888889em;
   line-height: 1.1111111;
-  position: relative;
 }
 
-.markdown :where(h1 strong):not(:where([class~="not-markdown"] *)) {
+.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
   font-weight: 900;
 }
 
-.markdown :where(h2):not(:where([class~="not-markdown"] *)) {
+.prose :where(h2):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   font-weight: 700;
   font-size: 1.5em;
   margin-top: 2em;
   margin-bottom: 1em;
   line-height: 1.3333333;
-  position: relative;
 }
 
-.markdown :where(h2 strong):not(:where([class~="not-markdown"] *)) {
+.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
   font-weight: 800;
 }
 
-.markdown :where(h3):not(:where([class~="not-markdown"] *)) {
+.prose :where(h3):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   font-weight: 600;
   font-size: 1.25em;
   margin-top: 1.6em;
   margin-bottom: 0.6em;
   line-height: 1.6;
-  position: relative;
 }
 
-.markdown :where(h3 strong):not(:where([class~="not-markdown"] *)) {
+.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
   font-weight: 700;
 }
 
-.markdown :where(h4):not(:where([class~="not-markdown"] *)) {
+.prose :where(h4):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   font-weight: 600;
   margin-top: 1.5em;
   margin-bottom: 0.5em;
   line-height: 1.5;
-  position: relative;
 }
 
-.markdown :where(h4 strong):not(:where([class~="not-markdown"] *)) {
+.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
   font-weight: 700;
 }
 
-.markdown :where(figure > *):not(:where([class~="not-markdown"] *)) {
+.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.markdown :where(figcaption):not(:where([class~="not-markdown"] *)) {
+.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-captions);
   font-size: 0.875em;
   line-height: 1.4285714;
   margin-top: 0.8571429em;
 }
 
-.markdown :where(code):not(:where([class~="not-markdown"] *)) {
+.prose :where(code):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-code);
   font-weight: 600;
   font-size: 0.875em;
 }
 
-.markdown :where(code):not(:where([class~="not-markdown"] *))::before {
+.prose :where(code):not(:where([class~="not-prose"] *))::before {
   content: "`";
 }
 
-.markdown :where(code):not(:where([class~="not-markdown"] *))::after {
+.prose :where(code):not(:where([class~="not-prose"] *))::after {
   content: "`";
 }
 
-.markdown :where(a code):not(:where([class~="not-markdown"] *)) {
+.prose :where(a code):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-code);
 }
 
-.markdown :where(pre):not(:where([class~="not-markdown"] *)) {
+.prose :where(pre):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-pre-code);
   background-color: var(--tw-prose-pre-bg);
   overflow-x: auto;
@@ -684,7 +680,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 1.1428571em;
 }
 
-.markdown :where(pre code):not(:where([class~="not-markdown"] *)) {
+.prose :where(pre code):not(:where([class~="not-prose"] *)) {
   background-color: transparent;
   border-width: 0;
   border-radius: 0;
@@ -696,15 +692,15 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: inherit;
 }
 
-.markdown :where(pre code):not(:where([class~="not-markdown"] *))::before {
+.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
   content: none;
 }
 
-.markdown :where(pre code):not(:where([class~="not-markdown"] *))::after {
+.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
   content: none;
 }
 
-.markdown :where(table):not(:where([class~="not-markdown"] *)) {
+.prose :where(table):not(:where([class~="not-prose"] *)) {
   width: 100%;
   table-layout: auto;
   text-align: left;
@@ -714,12 +710,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.7142857;
 }
 
-.markdown :where(thead):not(:where([class~="not-markdown"] *)) {
+.prose :where(thead):not(:where([class~="not-prose"] *)) {
   border-bottom-width: 1px;
   border-bottom-color: var(--tw-prose-th-borders);
 }
 
-.markdown :where(thead th):not(:where([class~="not-markdown"] *)) {
+.prose :where(thead th):not(:where([class~="not-prose"] *)) {
   color: var(--tw-prose-headings);
   font-weight: 600;
   vertical-align: bottom;
@@ -728,16 +724,16 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 0.5714286em;
 }
 
-.markdown :where(tbody tr):not(:where([class~="not-markdown"] *)) {
+.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
   border-bottom-width: 1px;
   border-bottom-color: var(--tw-prose-td-borders);
 }
 
-.markdown :where(tbody tr:last-child):not(:where([class~="not-markdown"] *)) {
+.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
   border-bottom-width: 0;
 }
 
-.markdown :where(tbody td):not(:where([class~="not-markdown"] *)) {
+.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
   vertical-align: baseline;
   padding-top: 0.5714286em;
   padding-right: 0.5714286em;
@@ -745,7 +741,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-left: 0.5714286em;
 }
 
-.markdown {
+.prose {
   --tw-prose-body: rgb(var(--color-neutral-700));
   --tw-prose-headings: rgb(var(--color-neutral-800));
   --tw-prose-lead: rgb(var(--color-neutral-500));
@@ -782,114 +778,114 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.75;
 }
 
-.markdown :where(p):not(:where([class~="not-markdown"] *)) {
+.prose :where(p):not(:where([class~="not-prose"] *)) {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
 }
 
-.markdown :where(img):not(:where([class~="not-markdown"] *)) {
+.prose :where(img):not(:where([class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
 }
 
-.markdown :where(video):not(:where([class~="not-markdown"] *)) {
+.prose :where(video):not(:where([class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
 }
 
-.markdown :where(figure):not(:where([class~="not-markdown"] *)) {
+.prose :where(figure):not(:where([class~="not-prose"] *)) {
   margin-top: 2em;
   margin-bottom: 2em;
 }
 
-.markdown :where(h2 code):not(:where([class~="not-markdown"] *)) {
+.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
   font-size: 0.875em;
 }
 
-.markdown :where(h3 code):not(:where([class~="not-markdown"] *)) {
+.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
   font-size: 0.9em;
 }
 
-.markdown :where(li):not(:where([class~="not-markdown"] *)) {
+.prose :where(li):not(:where([class~="not-prose"] *)) {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
 
-.markdown :where(ol > li):not(:where([class~="not-markdown"] *)) {
+.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
   padding-left: 0.375em;
 }
 
-.markdown :where(ul > li):not(:where([class~="not-markdown"] *)) {
+.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
   padding-left: 0.375em;
 }
 
-.markdown > :where(ul > li p):not(:where([class~="not-markdown"] *)) {
+.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) {
   margin-top: 0.75em;
   margin-bottom: 0.75em;
 }
 
-.markdown > :where(ul > li > *:first-child):not(:where([class~="not-markdown"] *)) {
+.prose > :where(ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.25em;
 }
 
-.markdown > :where(ul > li > *:last-child):not(:where([class~="not-markdown"] *)) {
+.prose > :where(ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.25em;
 }
 
-.markdown > :where(ol > li > *:first-child):not(:where([class~="not-markdown"] *)) {
+.prose > :where(ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.25em;
 }
 
-.markdown > :where(ol > li > *:last-child):not(:where([class~="not-markdown"] *)) {
+.prose > :where(ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.25em;
 }
 
-.markdown :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-markdown"] *)) {
+.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
   margin-top: 0.75em;
   margin-bottom: 0.75em;
 }
 
-.markdown :where(hr + *):not(:where([class~="not-markdown"] *)) {
+.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.markdown :where(h2 + *):not(:where([class~="not-markdown"] *)) {
+.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.markdown :where(h3 + *):not(:where([class~="not-markdown"] *)) {
+.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.markdown :where(h4 + *):not(:where([class~="not-markdown"] *)) {
+.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.markdown :where(thead th:first-child):not(:where([class~="not-markdown"] *)) {
+.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
   padding-left: 0;
 }
 
-.markdown :where(thead th:last-child):not(:where([class~="not-markdown"] *)) {
+.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
   padding-right: 0;
 }
 
-.markdown :where(tbody td:first-child):not(:where([class~="not-markdown"] *)) {
+.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
   padding-left: 0;
 }
 
-.markdown :where(tbody td:last-child):not(:where([class~="not-markdown"] *)) {
+.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
   padding-right: 0;
 }
 
-.markdown > :where(:first-child):not(:where([class~="not-markdown"] *)) {
+.prose > :where(:first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.markdown > :where(:last-child):not(:where([class~="not-markdown"] *)) {
+.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 0;
 }
 
-.markdown :where(kbd):not(:where([class~="not-markdown"] *)) {
+.prose :where(kbd):not(:where([class~="not-prose"] *)) {
   background-color: rgb(var(--color-neutral-200));
   padding: 0.1rem 0.4rem;
   border-radius: 0.25rem;
@@ -897,7 +893,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   font-weight: 600;
 }
 
-.markdown :where(mark):not(:where([class~="not-markdown"] *)) {
+.prose :where(mark):not(:where([class~="not-prose"] *)) {
   color: rgb(var(--color-neutral-800));
   background-color: rgb(var(--color-secondary-200));
   padding: 0.1rem 0.2rem;
@@ -927,7 +923,7 @@ body a, body button {
 
 /* Heading anchors */
 
-.markdown .heading-anchor:hover {
+.prose .heading-anchor:hover {
   background-color: transparent !important;
   --tw-text-opacity: 1 !important;
   color: rgba(var(--color-primary-500), var(--tw-text-opacity)) !important;
@@ -935,7 +931,7 @@ body a, body button {
           text-decoration-line: underline !important;
 }
 
-.markdown .heading-anchor:hover, .markdown .heading-anchor:focus, .markdown h2:hover > .heading-anchor, .markdown h3:hover > .heading-anchor, .markdown h4:hover > .heading-anchor {
+.prose .heading-anchor:hover, .prose .heading-anchor:focus, .prose h2:hover > .heading-anchor, .prose h3:hover > .heading-anchor, .prose h4:hover > .heading-anchor {
   --tw-text-opacity: 1;
   color: rgba(var(--color-primary-200), var(--tw-text-opacity));
   -webkit-text-decoration-line: none;
@@ -943,7 +939,7 @@ body a, body button {
   opacity: 1;
 }
 
-.dark .markdown .heading-anchor:hover, .dark .markdown .heading-anchor:focus, .dark .markdown h2:hover > .heading-anchor, .dark .markdown h3:hover > .heading-anchor, .dark .markdown h4:hover > .heading-anchor {
+.dark .prose .heading-anchor:hover, .dark .prose .heading-anchor:focus, .dark .prose h2:hover > .heading-anchor, .dark .prose h3:hover > .heading-anchor, .dark .prose h4:hover > .heading-anchor {
   --tw-text-opacity: 1;
   color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
 }
@@ -969,36 +965,34 @@ body a, body button {
 
 /* RTL support */
 
-[dir="rtl"] .markdown blockquote {
+[dir="rtl"] .prose blockquote {
   border-left-width: 0px;
   border-right-width: 4px;
   padding-right: 1rem;
 }
 
-[dir="rtl"] .markdown ul > li, [dir="rtl"] .markdown ol > li {
+[dir="rtl"] .prose ul > li, [dir="rtl"] .prose ol > li {
   margin-right: 1.75rem;
   padding-left: 0px;
   padding-right: 0.5rem;
 }
 
-[dir="rtl"] .markdown ol > li:before, [dir="rtl"] .markdown ul > li:before {
+[dir="rtl"] .prose ol > li:before, [dir="rtl"] .prose ul > li:before {
   left: auto;
   right: 0.25rem;
 }
 
-[dir="rtl"] .markdown thead td:first-child, [dir="rtl"] .markdown thead th:first-child {
+[dir="rtl"] .prose thead td:first-child, [dir="rtl"] .prose thead th:first-child {
   padding-right: 0px;
 }
 
-[dir="rtl"] .markdown thead td:last-child, [dir="rtl"] .markdown thead th:last-child {
+[dir="rtl"] .prose thead td:last-child, [dir="rtl"] .prose thead th:last-child {
   padding-left: 0px;
 }
 
 /* Table of Contents */
 
 .toc ul, .toc li {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
   list-style-type: none;
   padding-left: 0px;
   padding-right: 0px;
@@ -1032,7 +1026,7 @@ body a, body button {
 
 /* Background */
 
-.markdown .chroma {
+.prose .chroma {
   border-radius: 0.375rem;
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity));
@@ -1040,7 +1034,7 @@ body a, body button {
   color: rgba(var(--color-neutral-700), var(--tw-text-opacity));
 }
 
-.dark .markdown .chroma {
+.dark .prose .chroma {
   --tw-bg-opacity: 1;
   background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity));
   --tw-text-opacity: 1;
@@ -1531,6 +1525,10 @@ body a, body button {
   margin-bottom: 3rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1539,10 +1537,6 @@ body a, body button {
   margin-top: 2.5rem;
 }
 
-.mt-0 {
-  margin-top: 0px;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -1683,14 +1677,14 @@ body a, body button {
   width: 1.5rem;
 }
 
-.min-w-\[1\.8rem\] {
-  min-width: 1.8rem;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
 
+.min-w-\[1\.8rem\] {
+  min-width: 1.8rem;
+}
+
 .min-w-\[2\.4rem\] {
   min-width: 2.4rem;
 }
@@ -1699,14 +1693,14 @@ body a, body button {
   max-width: 80rem;
 }
 
-.max-w-prose {
-  max-width: 65ch;
-}
-
 .max-w-full {
   max-width: 100%;
 }
 
+.max-w-prose {
+  max-width: 65ch;
+}
+
 .max-w-\[10rem\] {
   max-width: 10rem;
 }
@@ -1926,16 +1920,16 @@ body a, body button {
   padding-bottom: 0.25rem;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2394,7 +2388,7 @@ body a, body button {
   text-align: left;
 }
 
-.dark .dark\:markdown-invert {
+.dark .dark\:prose-invert {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);
   --tw-prose-lead: var(--tw-prose-invert-lead);
@@ -2413,17 +2407,17 @@ body a, body button {
   --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
 
-.dark .dark\:markdown-invert :where(a):not(:where([class~="not-markdown"] *)) {
+.dark .dark\:prose-invert :where(a):not(:where([class~="not-prose"] *)) {
   -webkit-text-decoration-color: rgb(var(--color-neutral-600));
           text-decoration-color: rgb(var(--color-neutral-600));
 }
 
-.dark .dark\:markdown-invert :where(kbd):not(:where([class~="not-markdown"] *)) {
+.dark .dark\:prose-invert :where(kbd):not(:where([class~="not-prose"] *)) {
   color: rgb(var(--color-neutral-200));
   background-color: rgb(var(--color-neutral-700));
 }
 
-.dark .dark\:markdown-invert :where(mark):not(:where([class~="not-markdown"] *)) {
+.dark .dark\:prose-invert :where(mark):not(:where([class~="not-prose"] *)) {
   background-color: rgb(var(--color-secondary-400));
 }
 

assets/css/main.css

@@ -22,14 +22,14 @@ body button {
 }
 
 /* Heading anchors */
-.markdown .heading-anchor:hover {
+.prose .heading-anchor:hover {
   @apply underline bg-transparent text-primary-500 !important;
 }
-.markdown .heading-anchor:hover,
+.prose .heading-anchor:hover,
-.markdown .heading-anchor:focus,
+.prose .heading-anchor:focus,
-.markdown h2:hover > .heading-anchor,
+.prose h2:hover > .heading-anchor,
-.markdown h3:hover > .heading-anchor,
+.prose h3:hover > .heading-anchor,
-.markdown h4:hover > .heading-anchor {
+.prose h4:hover > .heading-anchor {
   @apply no-underline opacity-100 text-primary-200 dark:text-neutral-700;
 }
 
@@ -42,30 +42,30 @@ body button {
 }
 
 /* RTL support */
-.markdown blockquote {
+.prose blockquote {
   @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
 }
-.markdown ul > li,
+.prose ul > li,
-.markdown ol > li {
+.prose ol > li {
   @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
 }
-.markdown ol > li:before,
+.prose ol > li:before,
-.markdown ul > li:before {
+.prose ul > li:before {
   @apply rtl:left-auto rtl:right-1;
 }
-.markdown thead td:first-child,
+.prose thead td:first-child,
-.markdown thead th:first-child {
+.prose thead th:first-child {
   @apply rtl:pr-0;
 }
-.markdown thead td:last-child,
+.prose thead td:last-child,
-.markdown thead th:last-child {
+.prose thead th:last-child {
   @apply rtl:pl-0;
 }
 
 /* Table of Contents */
 .toc ul,
 .toc li {
-  @apply px-0 my-1 leading-snug list-none;
+  @apply px-0 leading-snug list-none;
 }
 .toc ul ul {
   @apply ltr:pl-4 rtl:pr-4;
@@ -79,7 +79,7 @@ body button {
 
 /* -- Chroma Highlight -- */
 /* Background */
-.markdown .chroma {
+.prose .chroma {
   @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
 }
 /* LineTableTD */

layouts/404.html

@@ -3,7 +3,7 @@
   <p class="mt-8 mb-12 text-neutral-400 dark:text-neutral-500">
     {{ i18n "error.404_error" | emojify }}
   </p>
-  <div class="markdown dark:markdown-invert">
+  <div class="prose dark:prose-invert">
     <p>{{ i18n "error.404_description" | emojify }}</p>
   </div>
 {{ end }}

layouts/_default/_markup/render-heading.html

@@ -1 +1 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="absolute top-0 w-6 no-underline transition-opacity opacity-0 heading-anchor ltr:-left-6 rtl:-right-6" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="relative">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="absolute top-0 w-6 no-underline transition-opacity opacity-0 heading-anchor ltr:-left-6 rtl:-right-6" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>

layouts/_default/list.html

@@ -1,5 +1,29 @@
 {{ define "main" }}
-  {{ partial "section-header.html" . }}
+  {{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
+  <header>
+    {{ if .Site.Params.list.showBreadcrumbs | default false }}
+      {{ partial "breadcrumbs.html" . }}
+    {{ end }}
+    <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
+  </header>
+  <section
+    class="flex flex-col max-w-full prose lg:flex-row dark:prose-invert {{ if $toc -}}
+      mt-12
+    {{- else -}}
+      mt-0
+    {{- end }}"
+  >
+    {{ if $toc }}
+      <div class="order-first px-0 lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8 lg:order-last">
+        <div class="ltr:pl-5 rtl:pr-5 toc lg:sticky lg:top-10">
+          {{ partial "toc.html" . }}
+        </div>
+      </div>
+    {{ end }}
+    <div class="min-w-0 min-h-0 max-w-prose">
+      {{ .Content | emojify }}
+    </div>
+  </section>
   {{ if gt .Pages 0 }}
     <section>
       {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
@@ -16,7 +40,7 @@
     </section>
     {{ partial "pagination.html" . }}
   {{ else }}
-    <section class="mt-10 markdown dark:markdown-invert">
+    <section class="mt-10 prose dark:prose-invert">
       <p class="py-8 border-t">
         <em>{{ i18n "list.no_articles" | emojify }}</em>
       </p>

layouts/_default/single.html

@@ -11,7 +11,7 @@
         {{ partial "article-meta.html" (dict "context" . "scope" "single") }}
       </div>
     </header>
-    <section class="flex flex-col max-w-full mt-0 lg:flex-row markdown dark:markdown-invert">
+    <section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
       {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
         <div class="order-first px-0 lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8 lg:order-last">
           <div class="ltr:pl-5 rtl:pr-5 toc lg:sticky lg:top-10">
@@ -19,7 +19,7 @@
           </div>
         </div>
       {{ end }}
-      <div class="overflow-auto max-w-prose">
+      <div class="min-w-0 min-h-0 max-w-prose">
         {{ .Content | emojify }}
       </div>
     </section>

layouts/_default/taxonomy.html

@@ -1,5 +1,17 @@
 {{ define "main" }}
-  {{ partial "section-header.html" . }}
+  <header>
+    {{ if .Site.Params.list.showBreadcrumbs | default false }}
+      {{ partial "breadcrumbs.html" . }}
+    {{ end }}
+    <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
+  </header>
+  {{ if .Content }}
+    <section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
+      <div class="min-w-0 min-h-0 max-w-prose">
+        {{ .Content | emojify }}
+      </div>
+    </section>
+  {{ end }}
   <section class="flex flex-wrap -mx-2 overflow-hidden">
     {{ range .Data.Terms }}
       <article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">

layouts/_default/term.html

@@ -1,5 +1,17 @@
 {{ define "main" }}
-  {{ partial "section-header.html" . }}
+  <header>
+    {{ if .Site.Params.list.showBreadcrumbs | default false }}
+      {{ partial "breadcrumbs.html" . }}
+    {{ end }}
+    <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
+  </header>
+  {{ if .Content }}
+    <section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
+      <div class="min-w-0 min-h-0 max-w-prose">
+        {{ .Content | emojify }}
+      </div>
+    </section>
+  {{ end }}
   <section>
     {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
       <h2 class="mt-12 text-2xl font-bold first:mt-8">{{ .Key }}</h2>

layouts/partials/article-link.html

@@ -34,7 +34,7 @@
     {{ partial "article-meta.html" . }}
   </div>
   {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
-    <div class="py-1 markdown dark:markdown-invert">
+    <div class="py-1 prose dark:prose-invert">
       {{ .Summary | emojify }}
     </div>
   {{ end }}

layouts/partials/home/page.html

@@ -1,4 +1,4 @@
-<article class="max-w-full markdown dark:markdown-invert">
+<article class="max-w-full prose dark:prose-invert">
   {{ with .Title }}
     <header>
       <h1>{{ . | emojify }}</h1>

layouts/partials/home/profile.html

@@ -29,7 +29,7 @@
       {{ partialCached "author-links.html" . }}
     </div>
   </header>
-  <section class="markdown dark:markdown-invert">{{ .Content | emojify }}</section>
+  <section class="prose dark:prose-invert">{{ .Content | emojify }}</section>
 </article>
 <section>
   {{ partial "recent-articles.html" . }}

layouts/partials/schema.html

@@ -17,10 +17,6 @@
   </script>
 {{ else if .IsPage }}
   {{- $iso8601 := "2006-01-02T15:04:05-07:00" -}}
-  {{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
-  {{ $.Scratch.Delete "path" }}
-  {{ $.Scratch.Add "path" .Site.BaseURL }}
-  {{ $count := len (split $url "/") }}
   <script type="application/ld+json">
   [{
     "@context": "https://schema.org",
@@ -48,28 +44,6 @@
     {{ end }}
     "mainEntityOfPage": "true",
     "wordCount": "{{ .WordCount }}"
-  },
-  {
-    "@context": "http://schema.org",
-    "@type": "BreadcrumbList",
-    "itemListElement":
-      [{
-        "@type": "ListItem",
-          "position": 1,
-          "item": {
-            "@id": "{{ .Site.BaseURL }}",
-            "name": "Home"
-          }
-      },{{ range $index, $element := split $url "/" }}{{ $.Scratch.Add "path" $element }}{{ if ne $element "" }}
-      {
-      "@type": "ListItem",
-        "position": {{ add $index 2 }},
-        "item": {
-          "@id": "{{ $.Scratch.Get "path" }}",
-          "name": "{{ humanize . }}"
-        }
-      }{{ if not (eq $index (sub $count 2)) }}, {{ end }}{{ $.Scratch.Add "path" "/" }}{{ end }}{{ end }}
-    ]
   }]
   </script>
 {{ end }}

layouts/partials/section-header.html

@@ -1,9 +0,0 @@
-<header>
-  {{ if .Site.Params.list.showBreadcrumbs | default false }}
-    {{ partial "breadcrumbs.html" . }}
-  {{ end }}
-  <section class="markdown dark:markdown-invert">
-    <h1 class="mb-3 text-4xl font-extrabold text-neutral-800">{{ .Title }}</h1>
-    <section>{{ .Content }}</section>
-  </section>
-</header>

tailwind.config.js

@@ -107,18 +107,6 @@ module.exports = {
             "a code": {
               color: "var(--tw-prose-code)",
             },
-            h1: {
-              position: "relative",
-            },
-            h2: {
-              position: "relative",
-            },
-            h3: {
-              position: "relative",
-            },
-            h4: {
-              position: "relative",
-            },
             kbd: {
               backgroundColor: theme("colors.neutral.200"),
               padding: "0.1rem 0.4rem",
@@ -151,9 +139,5 @@ module.exports = {
       }),
     },
   },
-  plugins: [
+  plugins: [require("@tailwindcss/typography")],
-    require("@tailwindcss/typography")({
-      className: "markdown",
-    }),
-  ],
 };