Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

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

Browse Source 
* 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
This commit is contained in:
Xin 2023-10-29 11:19:31 -04:00 committed by GitHub
parent 9744b4d727
commit 7c902b4eb9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 104 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
assets/css/compiled/main.css
View File

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

80
assets/css/typography.css
View File

@ -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;

2
exampleSite/content/_index.md
View File

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

7
exampleSite/content/blog/_index.md
View File

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

1
exampleSite/hugo.yaml
View File

@ -115,6 +115,7 @@ params:
displayToggle: true
footer:
enable: true
displayCopyright: true
displayPoweredBy: true
width: normal

17
layouts/shortcodes/callout.html
View File

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

2
layouts/shortcodes/hextra/feature-card.html
View File

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

2
layouts/shortcodes/hextra/feature-grid.html
View File

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

4
layouts/shortcodes/hextra/hero-badge.html
View File

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

2
layouts/shortcodes/hextra/hero-button.html
View File

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

2
layouts/shortcodes/hextra/hero-headline.html
View File

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

2
layouts/shortcodes/hextra/hero-subtitle.html
View File

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