mirror of
https://github.com/imfing/hextra.git
synced 2025-06-19 11:04:12 -04:00
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
This commit is contained in:
Xin
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user