From 2f158eed6044c64a1815af587b4fa64aafaa65da Mon Sep 17 00:00:00 2001 From: radishzzz Date: Tue, 20 May 2025 01:20:59 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20refactor=20markdown=20t?= =?UTF-8?q?ypography=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 69 +++++------ .../posts/guides/Markdown Style Guide-en.md | 48 ++++++++ src/styles/extend.css | 9 +- src/styles/global.css | 4 +- src/styles/markdown.css | 113 ++++++++++-------- 5 files changed, 151 insertions(+), 92 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd30c2a..826b2d1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -300,8 +300,8 @@ packages: '@emnapi/wasi-threads@1.0.2': resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==} - '@es-joy/jsdoccomment@0.50.1': - resolution: {integrity: sha512-fas3qe1hw38JJgU/0m5sDpcrbZGysBeZcMwW5Ws9brYxY64MJyWLXRZCj18keTycT1LFTrFXdSNMS+GRVaU6Hw==} + '@es-joy/jsdoccomment@0.50.2': + resolution: {integrity: sha512-YAdE/IJSpwbOTiaURNCKECdAwqrJuFiZhylmesBcIRawtYKnBR2wxPhoIewMg+Yu+QuYvHfJNReWpoxGBKOChA==} engines: {node: '>=18'} '@esbuild/aix-ppc64@0.25.4': @@ -984,9 +984,6 @@ packages: '@types/debug@4.1.12': 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': resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==} @@ -1311,8 +1308,8 @@ packages: '@vitest/pretty-format@3.1.1': resolution: {integrity: sha512-dg0CIzNx+hMMYfNmSqJlLSXEmnNhMswcn3sXO7Tpldr0LiGmg3eXdLLhwkv2ZqgHb/d5xg5F7ezNFRA1fA13yA==} - '@vitest/pretty-format@3.1.3': - resolution: {integrity: sha512-i6FDiBeJUGLDKADw2Gb01UtUNb12yyXAqC/mmRWuYl+m/U9GS7s8us5ONmGkGpUUo7/iAYzI2ePVfOZTYvUifA==} + '@vitest/pretty-format@3.1.4': + resolution: {integrity: sha512-cqv9H9GvAEoTaoq+cYqUTCGscUjKqlJZC7PRwY5FMySVj5J+xOm1KQcCiYHJOEzOKRUhLH4R2pTwvFlWCEScsg==} '@vitest/runner@3.1.1': resolution: {integrity: sha512-X/d46qzJuEDO8ueyjtKfxffiXraPRfmYasoC4i5+mlLEJ10UvPb0XH5M9C3gWuxd7BAQhpK42cJgJtq53YnWVA==} @@ -2871,9 +2868,9 @@ packages: muggle-string@0.4.1: resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==} - nano-spawn@1.0.1: - resolution: {integrity: sha512-BfcvzBlUTxSDWfT+oH7vd6CbUV+rThLLHCIym/QO6GGLBsyVXleZs00fto2i2jzC/wPiBYk5jyOmpXWg4YopiA==} - engines: {node: '>=20.18'} + nano-spawn@1.0.2: + resolution: {integrity: sha512-21t+ozMQDAL/UGgQVBbZ/xXvNO10++ZPuTmKRO8k9V3AClVRht49ahtDjfY8l1q6nSHOrE5ASfthzH3ol6R/hg==} + engines: {node: '>=20.17'} nanoid@3.3.11: resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} @@ -3446,8 +3443,8 @@ packages: resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==} engines: {node: ^14.18.0 || >=16.0.0} - tapable@2.2.1: - resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} + tapable@2.2.2: + resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==} engines: {node: '>=6'} terser@5.39.0: @@ -4025,8 +4022,8 @@ packages: typescript: ^4.9.4 || ^5.0.2 zod: ^3 - zod@3.24.4: - resolution: {integrity: sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==} + zod@3.25.7: + resolution: {integrity: sha512-YGdT1cVRmKkOg6Sq7vY7IkxdphySKnXhaUmFI4r4FcuFVNgpCb9tZfNwXbT6BPjD5oz0nubFsoo9pIqKrDcCvg==} zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} @@ -4191,7 +4188,7 @@ snapshots: dependencies: sitemap: 8.0.0 stream-replace-string: 2.0.0 - zod: 3.24.4 + zod: 3.25.7 '@astrojs/telemetry@3.2.1': dependencies: @@ -4280,9 +4277,8 @@ snapshots: tslib: 2.8.1 optional: true - '@es-joy/jsdoccomment@0.50.1': + '@es-joy/jsdoccomment@0.50.2': dependencies: - '@types/eslint': 9.6.1 '@types/estree': 1.0.7 '@typescript-eslint/types': 8.32.1 comment-parser: 1.4.1 @@ -4851,11 +4847,6 @@ snapshots: dependencies: '@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': dependencies: '@types/estree': 1.0.7 @@ -5255,7 +5246,7 @@ snapshots: tinyrainbow: 2.0.0 optional: true - '@vitest/pretty-format@3.1.3': + '@vitest/pretty-format@3.1.4': dependencies: tinyrainbow: 2.0.0 optional: true @@ -5527,7 +5518,7 @@ snapshots: astro-robots-txt@1.0.0: dependencies: 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): dependencies: @@ -5588,9 +5579,9 @@ snapshots: xxhash-wasm: 1.1.0 yargs-parser: 21.1.1 yocto-spinner: 0.2.2 - zod: 3.24.4 - zod-to-json-schema: 3.24.5(zod@3.24.4) - zod-to-ts: 1.2.0(typescript@5.8.3)(zod@3.24.4) + zod: 3.25.7 + zod-to-json-schema: 3.24.5(zod@3.25.7) + zod-to-ts: 1.2.0(typescript@5.8.3)(zod@3.25.7) optionalDependencies: sharp: 0.33.5 transitivePeerDependencies: @@ -5974,7 +5965,7 @@ snapshots: enhanced-resolve@5.18.1: dependencies: graceful-fs: 4.2.11 - tapable: 2.2.1 + tapable: 2.2.2 entities@4.5.0: {} @@ -6091,7 +6082,7 @@ snapshots: eslint-plugin-command@3.2.0(eslint@9.27.0(jiti@2.4.2)): dependencies: - '@es-joy/jsdoccomment': 0.50.1 + '@es-joy/jsdoccomment': 0.50.2 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)): dependencies: - '@es-joy/jsdoccomment': 0.50.1 + '@es-joy/jsdoccomment': 0.50.2 are-docs-informative: 0.0.2 comment-parser: 1.4.1 debug: 4.4.1 @@ -6872,7 +6863,7 @@ snapshots: lilconfig: 3.1.3 listr2: 8.3.3 micromatch: 4.0.8 - nano-spawn: 1.0.1 + nano-spawn: 1.0.2 pidtree: 0.6.0 string-argv: 0.3.2 yaml: 2.8.0 @@ -7485,7 +7476,7 @@ snapshots: muggle-string@0.4.1: {} - nano-spawn@1.0.1: {} + nano-spawn@1.0.2: {} nanoid@3.3.11: {} @@ -8218,7 +8209,7 @@ snapshots: '@pkgr/core': 0.1.2 tslib: 2.8.1 - tapable@2.2.1: {} + tapable@2.2.2: {} terser@5.39.0: dependencies: @@ -8528,7 +8519,7 @@ snapshots: dependencies: '@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/pretty-format': 3.1.3 + '@vitest/pretty-format': 3.1.4 '@vitest/runner': 3.1.1 '@vitest/snapshot': 3.1.1 '@vitest/spy': 3.1.1 @@ -8795,15 +8786,15 @@ snapshots: 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: - 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: typescript: 5.8.3 - zod: 3.24.4 + zod: 3.25.7 - zod@3.24.4: {} + zod@3.25.7: {} zwitch@2.0.4: {} diff --git a/src/content/posts/guides/Markdown Style Guide-en.md b/src/content/posts/guides/Markdown Style Guide-en.md index ba7e88f..cbed3e1 100644 --- a/src/content/posts/guides/Markdown Style Guide-en.md +++ b/src/content/posts/guides/Markdown Style Guide-en.md @@ -213,3 +213,51 @@ To create a code block, add three backticks ```` ``` ```` at the start and end o - Milk - Cheese ``` + +#### Output + +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese + +## Other Elements + +Including `` superscript, `` subscript, `` abbreviation, `` strikethrough, `` wavy underline, `` keyboard input, and `` highlight. + +### Syntax + +```markdown +H2O + +Xn + Yn = Zn + +GIF is a bitmap image format. + +Good writers always check for speling mistakes. + +Press CTRL + ALT + Delete to end the session. + +There is nothing no code either good or bad, but running it makes it so. + +Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. +``` + +### Output + +H2O + +Xn + Yn = Zn + +GIF is a bitmap image format. + +Good writers always check for speling mistakes. + +Press CTRL + ALT + Delete to end the session. + +There is nothing no code either good or bad, but running it makes it so. + +Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures. \ No newline at end of file diff --git a/src/styles/extend.css b/src/styles/extend.css index 34cd6ea..78d778d 100644 --- a/src/styles/extend.css +++ b/src/styles/extend.css @@ -1,9 +1,16 @@ /* GitHub Card */ .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)'; + scrollbar-width: thin; 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 */ .gc-title-bar { diff --git a/src/styles/global.css b/src/styles/global.css index 1564a79..560cec6 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -19,7 +19,7 @@ body::selection { --at-apply: 'bg-highlight'; } -/* Fix KaTeX Overflow Issue */ +/* Fix KaTeX Overflow with Hidden Scrollbar */ .katex-display { --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, h3:hover .heading-anchor-link svg, h4:hover .heading-anchor-link svg { - --at-apply: 'op-80'; + --at-apply: 'op-40'; } .heading-anchor-link svg { --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity ease-out active:scale-90'; diff --git a/src/styles/markdown.css b/src/styles/markdown.css index 095761e..8400b6f 100644 --- a/src/styles/markdown.css +++ b/src/styles/markdown.css @@ -19,9 +19,6 @@ .heti :where(h1, h2, h3, h4, h5, h6) { --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) { --at-apply: 'mt-9.6 text-7 text-primary'; } @@ -29,10 +26,10 @@ --at-apply: 'mt-9.6 text-6 text-primary'; } .heti :where(h3) { - --at-apply: 'mt-6.5 text-5'; + --at-apply: 'mt-7.5 text-5'; } .heti :where(h4) { - --at-apply: 'mt-6 text-4.5'; + --at-apply: 'mt-6.75 text-4.5'; } .heti :where(h5) { --at-apply: 'mt-6 text-4'; @@ -40,6 +37,9 @@ .heti :where(h6) { --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) { --at-apply: 'mt-4'; } @@ -51,50 +51,59 @@ /* Links */ .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'; } /* Images */ -.heti :where(img) { - --at-apply: 'mb-4 mx-auto cursor-zoom-in'; +.heti :where(img:not(figure img)) { + --at-apply: 'my-6 mx-auto cursor-zoom-in'; } .heti :where(figure) { - --at-apply: 'mx-auto mb-4'; -} -.heti figure img { - --at-apply: 'mb-0'; + --at-apply: 'mx-auto my-6'; } .heti :where(figcaption) { --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 */ .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-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent; 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; } -.heti pre :where(code) { +.heti pre code { --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)]!'; } +.heti :is(h1, h2, h3, h4, h5, h6, pre) + pre { + --at-apply: 'mt-4'; +} +.heti pre:has(+ pre) { + --at-apply: 'mb-4'; +} /* Inline 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'; counter-reset: line; } -.heti :where(code) span.line { +.heti code span.line { --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'; content: counter(line); counter-increment: line; @@ -103,7 +112,7 @@ html.dark .heti pre :where(span) { /* Blockquotes */ .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-"] { --at-apply: 'py-1.5 c-secondary'; @@ -117,45 +126,50 @@ html.dark .heti pre :where(span) { .heti blockquote > :last-child { --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 */ .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-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent; 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; } -.heti :where(th), -.heti :where(td) { +.heti :where(th, td) { --at-apply: 'border-b border-b-secondary/25 px-3 pb-1.5'; } -.heti :where(tr td:first-child), -.heti :where(tr th:first-child) { +.heti tr :where(td:first-child, th:first-child) { --at-apply: 'pl-0'; } -.heti :where(tr td:last-child), -.heti :where(tr th:last-child) { +.heti tr :where(td:last-child, th:last-child) { --at-apply: 'pr-0'; } .heti :where(td) { --at-apply: 'pt-1.5'; } -.heti :where(tr:last-child td) { +.heti tr:last-child :where(td) { --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 */ -.heti :where(ul), -.heti :where(ol) { - --at-apply: 'mb-4 pl-2em'; +.heti :where(ul, ol) { + --at-apply: 'my-6 pl-2em'; } -.heti ul :where(ul), -.heti ul :where(ol), -.heti ol :where(ul), -.heti ol :where(ol) { +.heti :where(ul, ol) :where(ul, ol) { --at-apply: 'mb-0.25em mt-0'; } .heti :where(ul) { @@ -164,23 +178,24 @@ html.dark .heti pre :where(span) { .heti :where(ol) { --at-apply: 'list-decimal'; } -.heti ul :where(ul), -.heti ol :where(ul) { +.heti :where(ul, ol) :where(ul) { --at-apply: 'list-circle'; } -.heti ul ul :where(ul), -.heti ul ol :where(ul), -.heti ol ul :where(ul), -.heti ol ol :where(ul) { +.heti :where(ul, ol) :where(ul, ol) :where(ul) { --at-apply: 'list-square'; } .heti :where(li) { --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 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */ -.heti :where(sub), -.heti :where(sup) { +.heti :where(sub, sup) { --at-apply: 'relative mx-0.1em align-baseline text-0.75em'; } .heti :where(sub) { @@ -215,12 +230,11 @@ html.dark .heti :where(u) { } /* Footnotes */ -.heti sub :where(a), -.heti sup :where(a) { +.heti :where(sub, sup) :where(a) { --at-apply: 'no-underline'; } -.heti sup:target, -.heti sup a:target { +.heti :where(sup):target, +.heti :where(sup) a:target { --at-apply: 'bg-highlight'; } .heti .data-footnote-backref { @@ -229,12 +243,11 @@ html.dark .heti :where(u) { /* Horizontal Rules */ .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 */ -.heti :where(b), -.heti :where(strong) { +.heti :where(b, strong) { --at-apply: 'font-semibold'; }