chore(style): enhance not-prose elements styling (#163)

* chore(css): improve not-prose tags styling

* fix: typo

* chore(style): improve appearance in prose

* feat: support icon in callout shortcode

* chore: add RSS badge to blog list page

* chore: run build:css

* chore: run build:css

* chore: remove unused CSS

* chore: add footer.enable explicitly to config

* chore: use `where` pseudo class for more prose elements

* chore: run build:css

* chore: remove blank space

* chore: rebuild css

* chore: update figure css

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 }}

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">

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 }}

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 -}}
 >

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 -}}
 >

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 }}

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 }}