🎨 style: refactor markdown typography styles

This commit is contained in:
radishzzz 2025-05-20 01:20:59 +01:00
parent 910fd9f39a
commit 2f158eed60
5 changed files with 151 additions and 92 deletions

69
pnpm-lock.yaml generated
View file

@ -300,8 +300,8 @@ packages:
'@emnapi/wasi-threads@1.0.2': '@emnapi/wasi-threads@1.0.2':
resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==} resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
'@es-joy/jsdoccomment@0.50.1': '@es-joy/jsdoccomment@0.50.2':
resolution: {integrity: sha512-fas3qe1hw38JJgU/0m5sDpcrbZGysBeZcMwW5Ws9brYxY64MJyWLXRZCj18keTycT1LFTrFXdSNMS+GRVaU6Hw==} resolution: {integrity: sha512-YAdE/IJSpwbOTiaURNCKECdAwqrJuFiZhylmesBcIRawtYKnBR2wxPhoIewMg+Yu+QuYvHfJNReWpoxGBKOChA==}
engines: {node: '>=18'} engines: {node: '>=18'}
'@esbuild/aix-ppc64@0.25.4': '@esbuild/aix-ppc64@0.25.4':
@ -984,9 +984,6 @@ packages:
'@types/debug@4.1.12': '@types/debug@4.1.12':
resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
'@types/eslint@9.6.1':
resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
'@types/estree-jsx@1.0.5': '@types/estree-jsx@1.0.5':
resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
@ -1311,8 +1308,8 @@ packages:
'@vitest/pretty-format@3.1.1': '@vitest/pretty-format@3.1.1':
resolution: {integrity: sha512-dg0CIzNx+hMMYfNmSqJlLSXEmnNhMswcn3sXO7Tpldr0LiGmg3eXdLLhwkv2ZqgHb/d5xg5F7ezNFRA1fA13yA==} resolution: {integrity: sha512-dg0CIzNx+hMMYfNmSqJlLSXEmnNhMswcn3sXO7Tpldr0LiGmg3eXdLLhwkv2ZqgHb/d5xg5F7ezNFRA1fA13yA==}
'@vitest/pretty-format@3.1.3': '@vitest/pretty-format@3.1.4':
resolution: {integrity: sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==} resolution: {integrity: sha512-cqv9H9GvAEoTaoq+cYqUTCGscUjKqlJZC7PRwY5FMySVj5J+xOm1KQcCiYHJOEzOKRUhLH4R2pTwvFlWCEScsg==}
'@vitest/runner@3.1.1': '@vitest/runner@3.1.1':
resolution: {integrity: sha512-X/d46qzJuEDO8ueyjtKfxffiXraPRfmYasoC4i5+mlLEJ10UvPb0XH5M9C3gWuxd7BAQhpK42cJgJtq53YnWVA==} resolution: {integrity: sha512-X/d46qzJuEDO8ueyjtKfxffiXraPRfmYasoC4i5+mlLEJ10UvPb0XH5M9C3gWuxd7BAQhpK42cJgJtq53YnWVA==}
@ -2871,9 +2868,9 @@ packages:
muggle-string@0.4.1: muggle-string@0.4.1:
resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==} resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
nano-spawn@1.0.1: nano-spawn@1.0.2:
resolution: {integrity: sha512-BfcvzBlUTxSDWfT+oH7vd6CbUV+rThLLHCIym/QO6GGLBsyVXleZs00fto2i2jzC/wPiBYk5jyOmpXWg4YopiA==} resolution: {integrity: sha512-21t+ozMQDAL/UGgQVBbZ/xXvNO10++ZPuTmKRO8k9V3AClVRht49ahtDjfY8l1q6nSHOrE5ASfthzH3ol6R/hg==}
engines: {node: '>=20.18'} engines: {node: '>=20.17'}
nanoid@3.3.11: nanoid@3.3.11:
resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
@ -3446,8 +3443,8 @@ packages:
resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==} resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
tapable@2.2.1: tapable@2.2.2:
resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
engines: {node: '>=6'} engines: {node: '>=6'}
terser@5.39.0: terser@5.39.0:
@ -4025,8 +4022,8 @@ packages:
typescript: ^4.9.4 || ^5.0.2 typescript: ^4.9.4 || ^5.0.2
zod: ^3 zod: ^3
zod@3.24.4: zod@3.25.7:
resolution: {integrity: sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==} resolution: {integrity: sha512-YGdT1cVRmKkOg6Sq7vY7IkxdphySKnXhaUmFI4r4FcuFVNgpCb9tZfNwXbT6BPjD5oz0nubFsoo9pIqKrDcCvg==}
zwitch@2.0.4: zwitch@2.0.4:
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
@ -4191,7 +4188,7 @@ snapshots:
dependencies: dependencies:
sitemap: 8.0.0 sitemap: 8.0.0
stream-replace-string: 2.0.0 stream-replace-string: 2.0.0
zod: 3.24.4 zod: 3.25.7
'@astrojs/telemetry@3.2.1': '@astrojs/telemetry@3.2.1':
dependencies: dependencies:
@ -4280,9 +4277,8 @@ snapshots:
tslib: 2.8.1 tslib: 2.8.1
optional: true optional: true
'@es-joy/jsdoccomment@0.50.1': '@es-joy/jsdoccomment@0.50.2':
dependencies: dependencies:
'@types/eslint': 9.6.1
'@types/estree': 1.0.7 '@types/estree': 1.0.7
'@typescript-eslint/types': 8.32.1 '@typescript-eslint/types': 8.32.1
comment-parser: 1.4.1 comment-parser: 1.4.1
@ -4851,11 +4847,6 @@ snapshots:
dependencies: dependencies:
'@types/ms': 2.1.0 '@types/ms': 2.1.0
'@types/eslint@9.6.1':
dependencies:
'@types/estree': 1.0.7
'@types/json-schema': 7.0.15
'@types/estree-jsx@1.0.5': '@types/estree-jsx@1.0.5':
dependencies: dependencies:
'@types/estree': 1.0.7 '@types/estree': 1.0.7
@ -5255,7 +5246,7 @@ snapshots:
tinyrainbow: 2.0.0 tinyrainbow: 2.0.0
optional: true optional: true
'@vitest/pretty-format@3.1.3': '@vitest/pretty-format@3.1.4':
dependencies: dependencies:
tinyrainbow: 2.0.0 tinyrainbow: 2.0.0
optional: true optional: true
@ -5527,7 +5518,7 @@ snapshots:
astro-robots-txt@1.0.0: astro-robots-txt@1.0.0:
dependencies: dependencies:
valid-filename: 4.0.0 valid-filename: 4.0.0
zod: 3.24.4 zod: 3.25.7
astro@5.7.13(@types/node@22.15.19)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0): astro@5.7.13(@types/node@22.15.19)(jiti@2.4.2)(lightningcss@1.29.3)(rollup@4.41.0)(terser@5.39.0)(typescript@5.8.3)(yaml@2.8.0):
dependencies: dependencies:
@ -5588,9 +5579,9 @@ snapshots:
xxhash-wasm: 1.1.0 xxhash-wasm: 1.1.0
yargs-parser: 21.1.1 yargs-parser: 21.1.1
yocto-spinner: 0.2.2 yocto-spinner: 0.2.2
zod: 3.24.4 zod: 3.25.7
zod-to-json-schema: 3.24.5(zod@3.24.4) zod-to-json-schema: 3.24.5(zod@3.25.7)
zod-to-ts: 1.2.0(typescript@5.8.3)(zod@3.24.4) zod-to-ts: 1.2.0(typescript@5.8.3)(zod@3.25.7)
optionalDependencies: optionalDependencies:
sharp: 0.33.5 sharp: 0.33.5
transitivePeerDependencies: transitivePeerDependencies:
@ -5974,7 +5965,7 @@ snapshots:
enhanced-resolve@5.18.1: enhanced-resolve@5.18.1:
dependencies: dependencies:
graceful-fs: 4.2.11 graceful-fs: 4.2.11
tapable: 2.2.1 tapable: 2.2.2
entities@4.5.0: {} entities@4.5.0: {}
@ -6091,7 +6082,7 @@ snapshots:
eslint-plugin-command@3.2.0(eslint@9.27.0(jiti@2.4.2)): eslint-plugin-command@3.2.0(eslint@9.27.0(jiti@2.4.2)):
dependencies: dependencies:
'@es-joy/jsdoccomment': 0.50.1 '@es-joy/jsdoccomment': 0.50.2
eslint: 9.27.0(jiti@2.4.2) eslint: 9.27.0(jiti@2.4.2)
eslint-plugin-es-x@7.8.0(eslint@9.27.0(jiti@2.4.2)): eslint-plugin-es-x@7.8.0(eslint@9.27.0(jiti@2.4.2)):
@ -6121,7 +6112,7 @@ snapshots:
eslint-plugin-jsdoc@50.6.17(eslint@9.27.0(jiti@2.4.2)): eslint-plugin-jsdoc@50.6.17(eslint@9.27.0(jiti@2.4.2)):
dependencies: dependencies:
'@es-joy/jsdoccomment': 0.50.1 '@es-joy/jsdoccomment': 0.50.2
are-docs-informative: 0.0.2 are-docs-informative: 0.0.2
comment-parser: 1.4.1 comment-parser: 1.4.1
debug: 4.4.1 debug: 4.4.1
@ -6872,7 +6863,7 @@ snapshots:
lilconfig: 3.1.3 lilconfig: 3.1.3
listr2: 8.3.3 listr2: 8.3.3
micromatch: 4.0.8 micromatch: 4.0.8
nano-spawn: 1.0.1 nano-spawn: 1.0.2
pidtree: 0.6.0 pidtree: 0.6.0
string-argv: 0.3.2 string-argv: 0.3.2
yaml: 2.8.0 yaml: 2.8.0
@ -7485,7 +7476,7 @@ snapshots:
muggle-string@0.4.1: {} muggle-string@0.4.1: {}
nano-spawn@1.0.1: {} nano-spawn@1.0.2: {}
nanoid@3.3.11: {} nanoid@3.3.11: {}
@ -8218,7 +8209,7 @@ snapshots:
'@pkgr/core': 0.1.2 '@pkgr/core': 0.1.2
tslib: 2.8.1 tslib: 2.8.1
tapable@2.2.1: {} tapable@2.2.2: {}
terser@5.39.0: terser@5.39.0:
dependencies: dependencies:
@ -8528,7 +8519,7 @@ snapshots:
dependencies: dependencies:
'@vitest/expect': 3.1.1 '@vitest/expect': 3.1.1
'@vitest/mocker': 3.1.1(vite@6.3.5(@types/node@22.15.19)(jiti@2.4.2)(lightningcss@1.29.3)(terser@5.39.0)(yaml@2.8.0)) '@vitest/mocker': 3.1.1(vite@6.3.5(@types/node@22.15.19)(jiti@2.4.2)(lightningcss@1.29.3)(terser@5.39.0)(yaml@2.8.0))
'@vitest/pretty-format': 3.1.3 '@vitest/pretty-format': 3.1.4
'@vitest/runner': 3.1.1 '@vitest/runner': 3.1.1
'@vitest/snapshot': 3.1.1 '@vitest/snapshot': 3.1.1
'@vitest/spy': 3.1.1 '@vitest/spy': 3.1.1
@ -8795,15 +8786,15 @@ snapshots:
yoctocolors@2.1.1: {} yoctocolors@2.1.1: {}
zod-to-json-schema@3.24.5(zod@3.24.4): zod-to-json-schema@3.24.5(zod@3.25.7):
dependencies: dependencies:
zod: 3.24.4 zod: 3.25.7
zod-to-ts@1.2.0(typescript@5.8.3)(zod@3.24.4): zod-to-ts@1.2.0(typescript@5.8.3)(zod@3.25.7):
dependencies: dependencies:
typescript: 5.8.3 typescript: 5.8.3
zod: 3.24.4 zod: 3.25.7
zod@3.24.4: {} zod@3.25.7: {}
zwitch@2.0.4: {} zwitch@2.0.4: {}

View file

@ -213,3 +213,51 @@ To create a code block, add three backticks ```` ``` ```` at the start and end o
- Milk - Milk
- Cheese - Cheese
``` ```
#### Output
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
## Other Elements
Including `<sup>` superscript, `<sub>` subscript, `<abbr>` abbreviation, `<del>` strikethrough, `<u>` wavy underline, `<kbd>` keyboard input, and `<mark>` highlight.
### Syntax
```markdown
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
Good writers always check for <u title="spelling">speling</u> mistakes.
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
There is <del>nothing</del> no code either good or bad, but running it makes it so.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
```
### Output
H<sub>2</sub>O
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
Good writers always check for <u title="spelling">speling</u> mistakes.
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.
There is <del>nothing</del> no code either good or bad, but running it makes it so.
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

View file

@ -1,9 +1,16 @@
/* GitHub Card */ /* GitHub Card */
.gc-container { .gc-container {
--at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5'; --at-apply: 'block my-6 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5';
--at-apply: 'transition-colors ease-out lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)'; --at-apply: 'transition-colors ease-out lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent; scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
} }
:is(h1, h2, h3, h4, h5, h6, .gc-container) + .gc-container {
--at-apply: 'mt-4';
}
.gc-container:has(+ .gc-container) {
--at-apply: 'mb-4';
}
/* Title Bar */ /* Title Bar */
.gc-title-bar { .gc-title-bar {

View file

@ -19,7 +19,7 @@ body::selection {
--at-apply: 'bg-highlight'; --at-apply: 'bg-highlight';
} }
/* Fix KaTeX Overflow Issue */ /* Fix KaTeX Overflow with Hidden Scrollbar */
.katex-display { .katex-display {
--at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden'; --at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
} }
@ -35,7 +35,7 @@ h1:hover .heading-anchor-link svg,
h2:hover .heading-anchor-link svg, h2:hover .heading-anchor-link svg,
h3:hover .heading-anchor-link svg, h3:hover .heading-anchor-link svg,
h4:hover .heading-anchor-link svg { h4:hover .heading-anchor-link svg {
--at-apply: 'op-80'; --at-apply: 'op-40';
} }
.heading-anchor-link svg { .heading-anchor-link svg {
--at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity ease-out active:scale-90'; --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity ease-out active:scale-90';

View file

@ -19,9 +19,6 @@
.heti :where(h1, h2, h3, h4, h5, h6) { .heti :where(h1, h2, h3, h4, h5, h6) {
--at-apply: 'mb-4 font-semibold'; --at-apply: 'mb-4 font-semibold';
} }
.heti :where(h1, h2, h3) {
--at-apply: 'text-balance leading-1.33em cjk:text-pretty cjk:tracking-0.05em';
}
.heti :where(h1) { .heti :where(h1) {
--at-apply: 'mt-9.6 text-7 text-primary'; --at-apply: 'mt-9.6 text-7 text-primary';
} }
@ -29,10 +26,10 @@
--at-apply: 'mt-9.6 text-6 text-primary'; --at-apply: 'mt-9.6 text-6 text-primary';
} }
.heti :where(h3) { .heti :where(h3) {
--at-apply: 'mt-6.5 text-5'; --at-apply: 'mt-7.5 text-5';
} }
.heti :where(h4) { .heti :where(h4) {
--at-apply: 'mt-6 text-4.5'; --at-apply: 'mt-6.75 text-4.5';
} }
.heti :where(h5) { .heti :where(h5) {
--at-apply: 'mt-6 text-4'; --at-apply: 'mt-6 text-4';
@ -40,6 +37,9 @@
.heti :where(h6) { .heti :where(h6) {
--at-apply: 'mt-6 font-normal'; --at-apply: 'mt-6 font-normal';
} }
.heti :where(h1, h2, h3) {
--at-apply: 'text-balance leading-1.33em cjk:text-pretty cjk:tracking-0.05em';
}
.heti :where(h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6) { .heti :where(h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6) {
--at-apply: 'mt-4'; --at-apply: 'mt-4';
} }
@ -51,50 +51,59 @@
/* Links */ /* Links */
.heti :where(a:not(.gc-container)) { .heti :where(a:not(.gc-container)) {
--at-apply: 'break-all font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.1em'; --at-apply: 'font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.1em cjk:break-all';
--at-apply: 'transition-colors ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em'; --at-apply: 'transition-colors ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em';
} }
/* Images */ /* Images */
.heti :where(img) { .heti :where(img:not(figure img)) {
--at-apply: 'mb-4 mx-auto cursor-zoom-in'; --at-apply: 'my-6 mx-auto cursor-zoom-in';
} }
.heti :where(figure) { .heti :where(figure) {
--at-apply: 'mx-auto mb-4'; --at-apply: 'mx-auto my-6';
}
.heti figure img {
--at-apply: 'mb-0';
} }
.heti :where(figcaption) { .heti :where(figcaption) {
--at-apply: 'mt-3 text-center text-sm text-secondary/80'; --at-apply: 'mt-3 text-center text-sm text-secondary/80';
} }
.heti :is(h1, h2, h3, h4, h5, h6, img, figure) + :is(img, figure) {
--at-apply: 'mt-4';
}
.heti :is(img, figure):has(+ :is(img, figure)) {
--at-apply: 'mb-4';
}
/* Code Blocks */ /* Code Blocks */
.heti :where(pre) { .heti :where(pre) {
--at-apply: 'mb-4 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!'; --at-apply: 'my-6 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent; scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
transition: scrollbar-color 0.3s ease-out; transition: scrollbar-color 0.3s ease-out;
} }
.heti :where(pre:hover) { .heti :where(pre):hover {
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent; scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
} }
.heti pre :where(code) { .heti pre code {
--at-apply: 'border-none bg-transparent p-0'; --at-apply: 'border-none bg-transparent p-0';
} }
html.dark .heti pre :where(span) { html.dark .heti pre span {
--at-apply: 'text-[var(--shiki-dark)]!'; --at-apply: 'text-[var(--shiki-dark)]!';
} }
.heti :is(h1, h2, h3, h4, h5, h6, pre) + pre {
--at-apply: 'mt-4';
}
.heti pre:has(+ pre) {
--at-apply: 'mb-4';
}
/* Inline Code */ /* Inline Code */
.heti :where(code) { .heti :where(code) {
--at-apply: 'uno-round-border bg-secondary/5 px-0.4em py-0.2em text-0.85em tracking-0 cjk:break-all'; --at-apply: 'uno-round-border bg-secondary/5 px-0.4em py-0.2em text-0.85em tracking-0 cjk:break-all';
counter-reset: line; counter-reset: line;
} }
.heti :where(code) span.line { .heti code span.line {
--at-apply: 'relative pl-8'; --at-apply: 'relative pl-8';
} }
.heti :where(code) span.line::before { .heti code span.line::before {
--at-apply: 'absolute left-0 w-4 text-secondary/40 leading-1.9em'; --at-apply: 'absolute left-0 w-4 text-secondary/40 leading-1.9em';
content: counter(line); content: counter(line);
counter-increment: line; counter-increment: line;
@ -103,7 +112,7 @@ html.dark .heti pre :where(span) {
/* Blockquotes */ /* Blockquotes */
.heti :where(blockquote) { .heti :where(blockquote) {
--at-apply: 'mb-4 border-l-4 border-secondary/25 border-solid px-4 py-0.5 c-secondary/80'; --at-apply: 'my-6 border-l-4 border-secondary/25 border-solid px-4 py-0.5 c-secondary/80';
} }
.heti blockquote[class*="admonition-"] { .heti blockquote[class*="admonition-"] {
--at-apply: 'py-1.5 c-secondary'; --at-apply: 'py-1.5 c-secondary';
@ -117,45 +126,50 @@ html.dark .heti pre :where(span) {
.heti blockquote > :last-child { .heti blockquote > :last-child {
--at-apply: 'mb-0'; --at-apply: 'mb-0';
} }
.heti :is(h1, h2, h3, h4, h5, h6, blockquote) + blockquote {
--at-apply: 'mt-4';
}
.heti blockquote:has(+ blockquote) {
--at-apply: 'mb-4';
}
/* Tables */ /* Tables */
.heti :where(table) { .heti :where(table) {
--at-apply: 'mb-4 box-border block max-w-full table-fixed overflow-x-auto'; --at-apply: 'my-6 box-border block max-w-full table-fixed overflow-x-auto';
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent; scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
transition: scrollbar-color 0.3s ease-out; transition: scrollbar-color 0.3s ease-out;
} }
.heti :where(table:hover) { .heti :where(table):hover {
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent; scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
} }
.heti :where(th), .heti :where(th, td) {
.heti :where(td) {
--at-apply: 'border-b border-b-secondary/25 px-3 pb-1.5'; --at-apply: 'border-b border-b-secondary/25 px-3 pb-1.5';
} }
.heti :where(tr td:first-child), .heti tr :where(td:first-child, th:first-child) {
.heti :where(tr th:first-child) {
--at-apply: 'pl-0'; --at-apply: 'pl-0';
} }
.heti :where(tr td:last-child), .heti tr :where(td:last-child, th:last-child) {
.heti :where(tr th:last-child) {
--at-apply: 'pr-0'; --at-apply: 'pr-0';
} }
.heti :where(td) { .heti :where(td) {
--at-apply: 'pt-1.5'; --at-apply: 'pt-1.5';
} }
.heti :where(tr:last-child td) { .heti tr:last-child :where(td) {
--at-apply: 'border-b-0'; --at-apply: 'border-b-0';
} }
.heti :is(h1, h2, h3, h4, h5, h6, table) + table {
--at-apply: 'mt-4';
}
.heti table:has(+ table) {
--at-apply: 'mb-4';
}
/* Lists */ /* Lists */
.heti :where(ul), .heti :where(ul, ol) {
.heti :where(ol) { --at-apply: 'my-6 pl-2em';
--at-apply: 'mb-4 pl-2em';
} }
.heti ul :where(ul), .heti :where(ul, ol) :where(ul, ol) {
.heti ul :where(ol),
.heti ol :where(ul),
.heti ol :where(ol) {
--at-apply: 'mb-0.25em mt-0'; --at-apply: 'mb-0.25em mt-0';
} }
.heti :where(ul) { .heti :where(ul) {
@ -164,23 +178,24 @@ html.dark .heti pre :where(span) {
.heti :where(ol) { .heti :where(ol) {
--at-apply: 'list-decimal'; --at-apply: 'list-decimal';
} }
.heti ul :where(ul), .heti :where(ul, ol) :where(ul) {
.heti ol :where(ul) {
--at-apply: 'list-circle'; --at-apply: 'list-circle';
} }
.heti ul ul :where(ul), .heti :where(ul, ol) :where(ul, ol) :where(ul) {
.heti ul ol :where(ul),
.heti ol ul :where(ul),
.heti ol ol :where(ul) {
--at-apply: 'list-square'; --at-apply: 'list-square';
} }
.heti :where(li) { .heti :where(li) {
--at-apply: 'mt-0.25em list-unset'; --at-apply: 'mt-0.25em list-unset';
} }
.heti :is(h1, h2, h3, h4, h5, h6, ul, ol) + :is(ul, ol) {
--at-apply: 'mt-4';
}
.heti :is(ul, ol):has(+ :is(ul, ol)) {
--at-apply: 'mb-4';
}
/* Superscript and Subscript >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */ /* Superscript and Subscript >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.heti :where(sub), .heti :where(sub, sup) {
.heti :where(sup) {
--at-apply: 'relative mx-0.1em align-baseline text-0.75em'; --at-apply: 'relative mx-0.1em align-baseline text-0.75em';
} }
.heti :where(sub) { .heti :where(sub) {
@ -215,12 +230,11 @@ html.dark .heti :where(u) {
} }
/* Footnotes */ /* Footnotes */
.heti sub :where(a), .heti :where(sub, sup) :where(a) {
.heti sup :where(a) {
--at-apply: 'no-underline'; --at-apply: 'no-underline';
} }
.heti sup:target, .heti :where(sup):target,
.heti sup a:target { .heti :where(sup) a:target {
--at-apply: 'bg-highlight'; --at-apply: 'bg-highlight';
} }
.heti .data-footnote-backref { .heti .data-footnote-backref {
@ -229,12 +243,11 @@ html.dark .heti :where(u) {
/* Horizontal Rules */ /* Horizontal Rules */
.heti :where(hr) { .heti :where(hr) {
--at-apply: 'mb-4 border-t-2 border-secondary/5'; --at-apply: 'my-9.6 border-t-2 border-secondary/5';
} }
/* Bold */ /* Bold */
.heti :where(b), .heti :where(b, strong) {
.heti :where(strong) {
--at-apply: 'font-semibold'; --at-apply: 'font-semibold';
} }