diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index d7750ad9..2f45c0b3 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1402,7 +1402,7 @@ video {
 .\[word-break\:break-word\] {
   word-break: break-word;
 }
-.content h1 {
+.content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 0.5rem;
   font-size: 2.25rem;
   font-weight: 700;
@@ -1410,11 +1410,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h1) {
+:is(html[class~="dark"] .content :where(h1):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h2 {
+.content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2.5rem;
   border-bottom-width: 1px;
   border-color: rgb(229 229 229 / 0.7);
@@ -1427,24 +1427,24 @@ video {
 }
 @media (prefers-contrast: more) {
 
-  .content h2 {
+  .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 }
-:is(html[class~="dark"] .content h2) {
+:is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.1);
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
 @media (prefers-contrast: more) {
 
-  :is(html[class~="dark"] .content h2) {
+  :is(html[class~="dark"] .content :where(h2):not(:where([class~=not-prose],[class~=not-prose] *))) {
     --tw-border-opacity: 1;
     border-color: rgb(163 163 163 / var(--tw-border-opacity));
   }
 }
-.content h3 {
+.content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.5rem;
   font-weight: 600;
@@ -1452,11 +1452,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h3) {
+:is(html[class~="dark"] .content :where(h3):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h4 {
+.content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.25rem;
   font-weight: 600;
@@ -1464,11 +1464,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h4) {
+:is(html[class~="dark"] .content :where(h4):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h5 {
+.content :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1.125rem;
   font-weight: 600;
@@ -1476,11 +1476,11 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h5) {
+:is(html[class~="dark"] .content :where(h5):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content h6 {
+.content :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 2rem;
   font-size: 1rem;
   font-weight: 600;
@@ -1488,33 +1488,25 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content h6) {
+:is(html[class~="dark"] .content :where(h6):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
-.content p {
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   line-height: 1.75rem;
 }
-.content p:first-child {
+.content :where(p):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-.content .not-prose p {
-  margin-top: 0px;
-  line-height: 1.5;
-}
-.content a {
+.content :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
   --tw-text-opacity: 1;
   color: hsl(var(--primary-hue) var(--primary-saturation) 45% / var(--tw-text-opacity));
   text-decoration-line: underline;
   text-decoration-thickness: from-font;
   text-underline-position: from-font;
 }
-.content .not-prose a {
-  color: currentColor;
-  text-decoration-line: none;
-}
-.content blockquote {
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1522,24 +1514,24 @@ video {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
-.content blockquote:first-child {
+.content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content blockquote) {
+:is([dir="ltr"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-left-width: 2px;
   padding-left: 1.5rem;
 }
-:is([dir="rtl"] .content blockquote) {
+:is([dir="rtl"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-right-width: 2px;
   padding-right: 1.5rem;
 }
-:is(html[class~="dark"] .content blockquote) {
+:is(html[class~="dark"] .content :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *))) {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
-.content pre:not(.code-block pre) {
+.content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
   margin-bottom: 1rem;
   overflow-x: auto;
   border-radius: 0.75rem;
@@ -1553,23 +1545,23 @@ video {
 }
 @media (prefers-contrast: more) {
 
-  .content pre:not(.code-block pre) {
+  .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     border-width: 1px;
     border-color: hsl(var(--primary-hue) var(--primary-saturation) 24% / 0.2);
     --tw-contrast: contrast(1.5);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
 }
-:is(html[class~="dark"] .content pre:not(.code-block pre)) {
+:is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
   background-color: hsl(var(--primary-hue) var(--primary-saturation) 77% / 0.1);
 }
 @media (prefers-contrast: more) {
 
-  :is(html[class~="dark"] .content pre:not(.code-block pre)) {
+  :is(html[class~="dark"] .content :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
     border-color: hsl(var(--primary-hue) var(--primary-saturation) 94% / 0.4);
   }
 }
-.content code:not(.code-block code) {
+.content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
   overflow-wrap: break-word;
   border-radius: 0.375rem;
   border-width: 1px;
@@ -1583,38 +1575,38 @@ video {
   padding-right: .25em;
   font-size: .9em;
 }
-:is(html[class~="dark"] .content code:not(.code-block code)) {
+:is(html[class~="dark"] .content :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *))) {
   border-color: rgb(255 255 255 / 0.1);
   background-color: rgb(255 255 255 / 0.1);
 }
-.content table:not(.code-block table) {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   display: block;
   overflow-x: auto;
   padding: 0px;
 }
-.content table:not(.code-block table):first-child {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-.content table:not(.code-block table) tr {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr {
   margin: 0px;
   border-top-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
   padding: 0px;
 }
-.content table:not(.code-block table) tr:nth-child(even) {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr:nth-child(even) {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-:is(html[class~="dark"] .content table:not(.code-block table) tr) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-:is(html[class~="dark"] .content table:not(.code-block table) tr):nth-child(even) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) tr):nth-child(even) {
   background-color: rgb(75 85 99 / 0.2);
 }
-.content table:not(.code-block table) th {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th {
   margin: 0px;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1625,11 +1617,11 @@ video {
   padding-bottom: 0.5rem;
   font-weight: 600;
 }
-:is(html[class~="dark"] .content table:not(.code-block table) th) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) th) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.content table:not(.code-block table) td {
+.content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td {
   margin: 0px;
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -1639,52 +1631,45 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-:is(html[class~="dark"] .content table:not(.code-block table) td) {
+:is(html[class~="dark"] .content :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) td) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.content ol {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   list-style-type: decimal;
 }
-.content ol:first-child {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content ol) {
+:is([dir="ltr"] .content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-left: 1.5rem;
 }
-:is([dir="rtl"] .content ol) {
+:is([dir="rtl"] .content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-right: 1.5rem;
 }
-.content ol li {
+.content :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) li {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.content ul {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-top: 1.5rem;
   list-style-type: disc;
 }
-.content ul:first-child {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)):first-child {
   margin-top: 0px;
 }
-:is([dir="ltr"] .content ul) {
+:is([dir="ltr"] .content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-left: 1.5rem;
 }
-:is([dir="rtl"] .content ul) {
+:is([dir="rtl"] .content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *))) {
   margin-right: 1.5rem;
 }
-.content ul li {
+.content :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) li {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.content .not-prose ul, .content .not-prose ol {
-  margin: 0px;
-  list-style-type: none;
-}
-.content .not-prose ul li, .content .not-prose ol li {
-  margin: 0px;
-}
-.content kbd {
+.content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
   overflow-wrap: break-word;
   border-radius: 0.375rem;
   border-width: 1px;
@@ -1698,29 +1683,25 @@ video {
   padding-right: .25em;
   font-size: .9em;
 }
-:is(html[class~="dark"] .content kbd) {
+:is(html[class~="dark"] .content :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *))) {
   border-color: rgb(255 255 255 / 0.1);
   background-color: rgb(255 255 255 / 0.1);
 }
-.content pre:not(.code-block pre).mermaid {
+.content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
   border-radius: 0px;
   background-color: transparent;
 }
-:is(html[class~="dark"] .content pre:not(.code-block pre).mermaid) {
+:is(html[class~="dark"] .content :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *))) {
   background-color: transparent;
 }
-.content img {
+.content :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
   margin-left: auto;
   margin-right: auto;
   margin-top: 1rem;
   margin-bottom: 1rem;
   border-radius: 0.375rem;
 }
-.content .not-prose img {
-  margin: 0px;
-  border-radius: 0px;
-}
-.content figure figcaption {
+.content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption {
   margin-top: 0.5rem;
   display: block;
   text-align: center;
@@ -1728,7 +1709,7 @@ video {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-:is(html[class~="dark"] .content figure figcaption) {
+:is(html[class~="dark"] .content :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) figcaption) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
@@ -1777,50 +1758,6 @@ span:target + .subheading-anchor:after {
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity));
 }
-article.typesetting-article {
-  font-size: 17px;
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1;
-}
-article.typesetting-article h1 {
-  margin-top: 1.5rem;
-  margin-bottom: 1rem;
-  text-align: center;
-    font-size: 2.5rem;
-}
-article.typesetting-article h2 {
-  border-style: none;
-}
-article.typesetting-article a {
-  text-decoration-line: none;
-}
-article.typesetting-article a:hover {
-  text-decoration-line: underline;
-}
-article.typesetting-article p {
-  line-height: 2rem;
-}
-article.typesetting-article code {
-  border-style: none;
-}
-:is(html[class~="dark"] article.typesetting-article code) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
-}
-:is(html[class~="dark"] article.typesetting-article pre code) {
-  background-color: transparent;
-}
-article.typesetting-article .subheading-anchor + a {
-  text-decoration-line: none;
-}
-article.typesetting-article .subheading-anchor + a::after {
-  content: var(--tw-content);
-  display: none;
-}
-article.typesetting-article .subheading-anchor + a:hover {
-  text-decoration-line: none;
-}
 article details > summary::-webkit-details-marker {
   display: none;
 }
diff --git a/assets/css/typography.css b/assets/css/typography.css
index b302c800..11d7cde2 100644
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@@ -1,44 +1,38 @@
 .content {
-  h1 {
+  :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100;
   }
-  h2 {
+  :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-10 border-b pb-1 text-3xl border-neutral-200/70 contrast-more:border-neutral-400 dark:border-primary-100/10 contrast-more:dark:border-neutral-400;
   }
-  h3 {
+  :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-2xl;
   }
-  h4 {
+  :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-xl;
   }
-  h5 {
+  :where(h5):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-lg;
   }
-  h6 {
+  :where(h6):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply font-semibold tracking-tight text-slate-900 dark:text-slate-100 mt-8 text-base;
   }
-  p {
+  :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 leading-7 first:mt-0;
   }
-  .not-prose p {
-    @apply mt-0 leading-normal;
-  }
-  a {
+  :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply text-primary-600 underline decoration-from-font [text-underline-position:from-font];
   }
-  .not-prose a {
-    @apply text-current no-underline;
-  }
-  blockquote {
+  :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 border-gray-300 italic text-gray-700 dark:border-gray-700 dark:text-gray-400 first:mt-0 ltr:border-l-2 ltr:pl-6 rtl:border-r-2 rtl:pr-6;
   }
-  pre:not(.code-block pre) {
+  :where(pre):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     @apply bg-primary-700/5 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10 text-[.9em] contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40 py-4;
   }
-  code:not(.code-block code) {
+  :where(code):not(:where(.code-block code, [class~=not-prose],[class~=not-prose] *)) {
     @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
   }
-  table:not(.code-block table) {
+  :where(table):not(:where(.code-block table, [class~=not-prose],[class~=not-prose] *)) {
     @apply block overflow-x-auto mt-6 p-0 first:mt-0;
 
     tr {
@@ -51,37 +45,28 @@
       @apply m-0 border border-gray-300 px-4 py-2 dark:border-gray-600;
     }
   }
-  ol {
+  :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 list-decimal first:mt-0 ltr:ml-6 rtl:mr-6;
     li {
       @apply my-2;
     }
   }
-  ul {
+  :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mt-6 list-disc first:mt-0 ltr:ml-6 rtl:mr-6;
     li {
       @apply my-2;
     }
   }
-  .not-prose ul, .not-prose ol {
-    @apply m-0 list-none;
-    li {
-      @apply m-0;
-    }
-  }
-  kbd {
+  :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10;
   }
-  pre:not(.code-block pre).mermaid {
+  :where(pre.mermaid):not(:where(.code-block pre, [class~=not-prose],[class~=not-prose] *)) {
     @apply bg-transparent rounded-none dark:bg-transparent;
   }
-  img {
+  :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
     @apply mx-auto my-4 rounded-md;
   }
-  .not-prose img {
-    @apply m-0 rounded-none;
-  }
-  figure {
+  :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)) {
     figcaption {
       @apply text-sm text-gray-500 dark:text-gray-400 mt-2 block text-center;
     }
@@ -115,35 +100,6 @@
   }
 }
 
-article.typesetting-article {
-  font-size: 17px;
-  font-feature-settings:
-    'rlig' 1,
-    'calt' 1;
-  h1 {
-    @apply mt-6 mb-4 text-center;
-    font-size: 2.5rem;
-  }
-  h2 {
-    @apply border-none;
-  }
-  a {
-    @apply no-underline hover:underline;
-  }
-  p {
-    @apply leading-8;
-  }
-  code {
-    @apply border-none dark:bg-neutral-700;
-  }
-  pre code {
-    @apply dark:bg-transparent;
-  }
-  .subheading-anchor + a {
-    @apply no-underline hover:no-underline after:hidden;
-  }
-}
-
 article details > summary {
   &::-webkit-details-marker {
     @apply hidden;
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index b7231c35..11f1caaa 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -57,7 +57,7 @@ layout: hextra-home
     subtitle="No dependency or Node.js is needed to use Hextra. Powered by Hugo, one of *the fastest* static site generators, building your site in just seconds with a single binary."
   >}}
   {{< hextra/feature-card
-    title="Reponsive with Dark Mode Included"
+    title="Responsive with Dark Mode Included"
     subtitle="Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference."
   >}}
   {{< hextra/feature-card
diff --git a/exampleSite/content/blog/_index.md b/exampleSite/content/blog/_index.md
index 59db2268..b9906659 100644
--- a/exampleSite/content/blog/_index.md
+++ b/exampleSite/content/blog/_index.md
@@ -1,3 +1,10 @@
 ---
 title: "Blog"
 ---
+
+<div style="text-align: center; margin-top: 1em;">
+{{< hextra/hero-badge link="index.xml" >}}
+  <span>RSS Feed</span>
+  {{< icon name="rss" attributes="height=14" >}}
+{{< /hextra/hero-badge >}}
+</div>
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
index dcdaebba..a7c6be84 100644
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@@ -115,6 +115,7 @@ params:
     displayToggle: true
 
   footer:
+    enable: true
     displayCopyright: true
     displayPoweredBy: true
     width: normal
diff --git a/layouts/shortcodes/callout.html b/layouts/shortcodes/callout.html
index 9f6a62cd..85b9c154 100644
--- a/layouts/shortcodes/callout.html
+++ b/layouts/shortcodes/callout.html
@@ -5,17 +5,30 @@
 {{ if eq $emoji "" }}
   {{ $emoji = index $calloutEmojiDict $type }}
 {{ end }}
+{{/* Also allow using "icon" */}}
+{{ $icon := .Get "icon" }}
 
 {{ $defaultClass := "border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300" }}
 {{ $infoClass := "border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200" }}
 {{ $warningClass := "border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200" }}
 {{ $errorClass := "border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200" }}
 
-
 {{ $class := cond (eq $type "info") $infoClass (cond (eq $type "warning") $warningClass (cond (eq $type "error") $errorClass $defaultClass)) }}
 
+
 <div class="overflow-x-auto mt-6 flex rounded-lg border py-2 ltr:pr-4 rtl:pl-4 contrast-more:border-current contrast-more:dark:border-current {{ $class }}">
-  <div class="select-none text-xl ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2" style='font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";'>{{ $emoji }}</div>
+  <div class="ltr:pl-3 ltr:pr-2 rtl:pr-3 rtl:pl-2">
+    {{- with $emoji -}}
+      <div class="select-none text-xl" style="font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
+        {{ . }}
+      </div>
+    {{- else -}}
+      {{- with $icon }}
+        {{ partial "utils/icon.html" (dict "name" . "attributes" `height=1.2em class="inline-block align-middle"`) -}}
+      {{- end -}}
+    {{- end -}}
+  </div>
+
   <div class="w-full min-w-0 leading-7">
     <div class="mt-6 leading-7 first:mt-0">
       {{ .Inner | markdownify }}
diff --git a/layouts/shortcodes/hextra/feature-card.html b/layouts/shortcodes/hextra/feature-card.html
index 23a5aab3..d96a7761 100644
--- a/layouts/shortcodes/hextra/feature-card.html
+++ b/layouts/shortcodes/hextra/feature-card.html
@@ -13,7 +13,7 @@
 <a
   {{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
-  class="{{ $class }} hextra-feature-card relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
+  class="{{ $class }} hextra-feature-card not-prose block relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
 >
   <div class="relative w-full p-6">
     <h3 class="text-2xl font-medium leading-6 mb-2 flex items-center">
diff --git a/layouts/shortcodes/hextra/feature-grid.html b/layouts/shortcodes/hextra/feature-grid.html
index 5782602f..d2d7c1b9 100644
--- a/layouts/shortcodes/hextra/feature-grid.html
+++ b/layouts/shortcodes/hextra/feature-grid.html
@@ -2,7 +2,7 @@
 
 
 <div
-  class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full"
+  class="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full not-prose"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner }}
diff --git a/layouts/shortcodes/hextra/hero-badge.html b/layouts/shortcodes/hextra/hero-badge.html
index 5bea54c3..e1c61e4e 100644
--- a/layouts/shortcodes/hextra/hero-badge.html
+++ b/layouts/shortcodes/hextra/hero-badge.html
@@ -6,8 +6,8 @@
 
 
 <a
-  href="{{ $href }}"
-  class="{{ $class }} inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
+  {{ if $link }}href="{{ $href }}"{{ end }}
+  class="{{ $class }} not-prose inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600 transition-all ease-in duration-200"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >
diff --git a/layouts/shortcodes/hextra/hero-button.html b/layouts/shortcodes/hextra/hero-button.html
index 5ec51a34..da8d4ceb 100644
--- a/layouts/shortcodes/hextra/hero-button.html
+++ b/layouts/shortcodes/hextra/hero-button.html
@@ -7,7 +7,7 @@
 
 <a
   href="{{ $href }}"
-  class="font-medium cursor-pointer px-6 py-3 rounded-full text-center text-white inline-block bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-all ease-in duration-200"
+  class="not-prose font-medium cursor-pointer px-6 py-3 rounded-full text-center text-white inline-block bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 transition-all ease-in duration-200"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
   {{ if $external }}target="_blank" rel="noreferrer"{{ end -}}
 >
diff --git a/layouts/shortcodes/hextra/hero-headline.html b/layouts/shortcodes/hextra/hero-headline.html
index e0b157ce..b2bd0bca 100644
--- a/layouts/shortcodes/hextra/hero-headline.html
+++ b/layouts/shortcodes/hextra/hero-headline.html
@@ -2,7 +2,7 @@
 
 
 <h1
-  class="text-4xl font-bold leading-none tracking-tighter md:text-5xl py-2 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
+  class="not-prose text-4xl font-bold leading-none tracking-tighter md:text-5xl py-2 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner | markdownify }}
diff --git a/layouts/shortcodes/hextra/hero-subtitle.html b/layouts/shortcodes/hextra/hero-subtitle.html
index 813ef03d..7c2fb7d0 100644
--- a/layouts/shortcodes/hextra/hero-subtitle.html
+++ b/layouts/shortcodes/hextra/hero-subtitle.html
@@ -2,7 +2,7 @@
 
 
 <p
-  class="text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
+  class="not-prose text-xl text-gray-600 dark:text-gray-400 sm:text-xl"
   {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
 >
   {{ .Inner | markdownify }}