drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-07-01 14:57:14 -04:00
Code Issues Actions Packages Projects Releases Wiki 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
12 changed files with 104 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;