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
imfing · Oct 29, 2023 · 7c902b4 · 7c902b4
1 parent 9744b4d
commit 7c902b4
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 190 deletions.
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }}