refactor: a part of heti css style

astro.config.ts

@@ -7,6 +7,7 @@ import { defineConfig } from 'astro/config'
 import rehypeExternalLinks from 'rehype-external-links'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
+import remarkSectionize from 'remark-sectionize'
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
 import { langMap } from './src/i18n/config'
@@ -53,6 +54,7 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [
       remarkMath,
+      remarkSectionize,
       remarkReadingTime,
     ],
     rehypePlugins: [
@@ -66,8 +68,8 @@ export default defineConfig({
         },
       ],
     ],
-    // available themes: https://shiki.style/themes
     shikiConfig: {
+      // available themes: https://shiki.style/themes
       themes: {
         light: 'one-light',
         dark: 'one-dark-pro',

package.json

@@ -46,6 +46,7 @@
     "lint-staged": "^15.5.0",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
+    "remark-sectionize": "^2.1.0",
     "sharp": "^0.33.5",
     "typescript": "~5.8.2",
     "unocss": "66.1.0-beta.6",

pnpm-lock.yaml

@@ -102,6 +102,9 @@ importers:
       reading-time:
         specifier: ^1.5.0
         version: 1.5.0
+      remark-sectionize:
+        specifier: ^2.1.0
+        version: 2.1.0
       sharp:
         specifier: ^0.33.5
         version: 0.33.5
@@ -3014,6 +3017,9 @@ packages:
   remark-rehype@11.1.1:
     resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
 
+  remark-sectionize@2.1.0:
+    resolution: {integrity: sha512-R/pHt1RLYrEqrbwOVXx8HnvvwOg+mxg8pE4kIWpIYE3/CuZhU8/PAx/0y1BbHWUA0jmTLTeWpUlDrS/B0pyd0g==}
+
   remark-smartypants@3.0.2:
     resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==}
     engines: {node: '>=16.0.0'}
@@ -3346,9 +3352,15 @@ packages:
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
+  unist-util-find-after@4.0.1:
+    resolution: {integrity: sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==}
+
   unist-util-find-after@5.0.0:
     resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
 
+  unist-util-is@5.2.1:
+    resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
+
   unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
@@ -3370,9 +3382,15 @@ packages:
   unist-util-visit-children@3.0.0:
     resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==}
 
+  unist-util-visit-parents@5.1.3:
+    resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
+
   unist-util-visit-parents@6.0.1:
     resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
 
+  unist-util-visit@4.1.2:
+    resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
+
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
@@ -7414,6 +7432,11 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
+  remark-sectionize@2.1.0:
+    dependencies:
+      unist-util-find-after: 4.0.1
+      unist-util-visit: 4.1.2
+
   remark-smartypants@3.0.2:
     dependencies:
       retext: 9.0.0
@@ -7808,11 +7831,20 @@ snapshots:
       trough: 2.2.0
       vfile: 6.0.3
 
+  unist-util-find-after@4.0.1:
+    dependencies:
+      '@types/unist': 2.0.11
+      unist-util-is: 5.2.1
+
   unist-util-find-after@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.0
 
+  unist-util-is@5.2.1:
+    dependencies:
+      '@types/unist': 2.0.11
+
   unist-util-is@6.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -7843,11 +7875,22 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  unist-util-visit-parents@5.1.3:
+    dependencies:
+      '@types/unist': 2.0.11
+      unist-util-is: 5.2.1
+
   unist-util-visit-parents@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-is: 6.0.0
 
+  unist-util-visit@4.1.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      unist-util-is: 5.2.1
+      unist-util-visit-parents: 5.1.3
+
   unist-util-visit@5.0.0:
     dependencies:
       '@types/unist': 3.0.3

src/components/MobileHeader.astro

@@ -19,7 +19,7 @@ const marginBottom = {
 ---
 
 <header class="mb-15 lg:hidden">
-  <h3 class={`${marginBottom} mt-3 text-5.375 c-secondary font-bold font-title`}>
+  <h2 class={`${marginBottom} mt-3 text-5.375 c-secondary font-bold font-title`}>
     <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
     <div
       class="box-content inline-block pr-1.25"
@@ -30,7 +30,7 @@ const marginBottom = {
         {headerTitle}
       </a>
     </div>
-  </h3>
+  </h2>
 
   {headerSubtitle && (
     <div

src/components/PostList.astro

@@ -34,15 +34,17 @@ function getPostPath(post: Post) {
     >
 
       {/* post title */}
-      <a
+      <h3 class="inline">
-        class="hover:c-primary"
+        <a
-        lg={isTag ? '' : 'font-medium text-4.5'}
+          class="hover:c-primary"
-        href={getPostPath(post)}
+          lg={isTag ? '' : 'font-medium text-4.5'}
-        transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
+          href={getPostPath(post)}
-        data-disable-transition-on-theme
+          transition:name={`post-${post.data.abbrlink || post.slug}-${lang}`}
-      >
+          data-disable-transition-on-theme
-        {post.data.title}
+        >
-      </a>
+          {post.data.title}
+        </a>
+      </h3>
 
       {/* mobile post time */}
       <div

src/content/about/about-ja.md

@@ -2,4 +2,4 @@
 lang: ja
 ---
 
-Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/)フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。
+Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。

src/content/about/about-zh-tw.md

@@ -2,4 +2,4 @@
 lang: zh-tw
 ---
 
-Retypeset 是一款基於[Astro](https://astro.build/)框架的靜態部落格主題，中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。
+Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。

src/content/about/about-zh.md

@@ -2,4 +2,4 @@
 lang: zh
 ---
 
-Retypeset 是一款基于[Astro](https://astro.build/)框架的静态博客主题，中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。
+Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。

src/content/posts/Markdown Style Guide-en.md

@@ -1,9 +1,8 @@
 ---
 title: Markdown Style Guide
 published: 2025-03-08
-updated: 2025-03-12
+updated: 2025-03-20
 tags: ["Guide"]
-draft: true
 pin: 1
 lang: en
 abbrlink: markdown-style-guide
@@ -15,17 +14,17 @@ Here is a sample of some basic Markdown syntax that can be used when writing Mar
 
 The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest.
 
-# H1
+# Heading 1 Preview
 
-## H2
+## Heading 2 Preview
 
-### H3
+### Heading 3 Preview
 
-#### H4
+#### Heading 4 Preview
 
-##### H5
+##### Heading 5 Preview
 
-###### H6
+###### Heading 6 Preview
 
 ## Paragraph
 

src/content/posts/Theme Guide-ja.md

@@ -8,4 +8,4 @@ lang: ja
 abbrlink: theme-guide
 ---
 
-Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/)フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。
+Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。

src/content/posts/Theme Guide-zh-tw.md

@@ -8,4 +8,4 @@ lang: zh-tw
 abbrlink: theme-guide
 ---
 
-Retypeset 是一款基於[Astro](https://astro.build/)框架的靜態部落格主題，中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。
+Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。

src/content/posts/Theme Guide-zh.md

@@ -8,4 +8,4 @@ lang: zh
 abbrlink: theme-guide
 ---
 
-Retypeset 是一款基于[Astro](https://astro.build/)框架的静态博客主题，中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。
+Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。

src/styles/heti.css

@@ -3,34 +3,70 @@
  * URL:https://github.com/sivan/heti
  * Author:Sivan [sun.sivan@gmail.com]
  */
+
+/*!
+ * .heti = CJK text
+ * .heti not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) = non-CJK text
+ */
+
+ /* Global setting */
 .heti {
-	line-height:1.5;
+  --at-apply: 'leading-1.5em break-words hyphens-auto tracking-0.02em';
-	overflow-wrap:break-word;
-	word-wrap:break-word;
-	hyphens:auto;
-	letter-spacing:.02em
 }
 .heti:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
-  letter-spacing: 0;
+  --at-apply: 'leading-1.4em tracking-0';
-  hyphens: none;
-  line-height: 1.4;
 }
-.heti::before,.heti::after {
+
-	content:"";
+/* Common tags style */
-	display:table
+.heti p {
-}
+  --at-apply: 'mb-6 text-justify';
-.heti::after {
-	clear:both
-}
-.heti>*:first-child,.heti section>*:first-child,.heti td>*:first-child {
-	margin-block-start:0 !important
-}
-.heti>*:last-child,.heti section>*:last-child,.heti td>*:last-child {
-	margin-block-end:0 !important
 }
 .heti a {
-  --at-apply: 'underline mx-0.25em decoration-secondary/25 font-medium underline-0.075em underline-offset-0.2em hover:(c-primary decoration-secondary/75 transition) lg:underline-0.1em';
+  --at-apply: 'mx-0.15em font-medium transition-colors hover:(c-primary decoration-secondary/60) ';
+  --at-apply: 'underline decoration-secondary/25 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
 }
+
+/* Heading style */
+.heti .post-title {
+  --at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0';
+}
+.heti h1 {
+  --at-apply: 'text-8';
+}
+.heti h2 {
+  --at-apply: 'text-6';
+}
+.heti h3 {
+  --at-apply: 'text-5';
+}
+.heti h4 {
+  --at-apply: 'text-4.5';
+}
+.heti h5 {
+  --at-apply: 'text-4';
+}
+.heti h6 {
+  --at-apply: 'text-3.5';
+}
+
+.heti h1,.heti h2,.heti h3 {
+	--at-apply: 'tracking-0.04em';
+}
+.heti h1:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),
+.heti h2:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),
+.heti h3:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
+	--at-apply: 'tracking-0';
+}
+
+.heti h1,.heti h2,.heti h3,.heti h4,.heti h5,.heti h6 {
+  --at-apply: 'font-semibold mt-6 mb-3';
+}
+/* .heti h1+h2 {
+  --at-apply: 'mbs-4.5';
+}
+.heti h2+h3,.heti h3+h4,.heti h4+h5,.heti h5+h6 {
+  --at-apply: 'mbs-3';
+} */
 .heti blockquote {
 	margin-block-start:12px;
 	margin-block-end:24px;
@@ -74,16 +110,12 @@
 	background-color:#404040
 }
 }
-.heti p {
+
-	margin-block-start:12px;
-	margin-block-end:24px;
-	text-align:justify
-}
 .heti p:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
 	text-align:start
 }
 .heti pre {
-  --at-apply: 'bg-primary/3!';
+  --at-apply: 'bg-secondary/8! scrollbar-hidden';
 	margin-block-start:12px;
 	margin-block-end:12px;
 	margin-inline-start:0;
@@ -98,10 +130,10 @@
 	border-radius:4px;
 }
 html.dark .heti pre {
-  --at-apply: 'bg-primary/3!';
+  --at-apply: 'bg-secondary/8!';
 }
 html.dark .astro-code span {
-  --at-apply: 'bg-primary/0!';
+  --at-apply: 'bg-secondary/0!';
 }
 .heti pre code {
 	margin:0;
@@ -112,50 +144,8 @@ html.dark .astro-code span {
 .heti a,.heti abbr,.heti code,.heti heti-spacing,.heti [lang=en-US] {
 	letter-spacing:normal
 }
-.heti h1,.heti h2,.heti h3,.heti h4,.heti h5,.heti h6 {
+
-	position:relative;
+
-	margin:0;
-	margin-block-start:24px;
-	margin-block-end:12px;
-	font-weight:600
-}
-.heti .post-title {
-  --at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0';
-}
-.heti h1 {
-  --at-apply: 'mb-6';
-	font-size:32px;
-	line-height:48px
-}
-.heti h2 {
-	font-size:24px;
-	line-height:36px
-}
-.heti h3 {
-	font-size:20px;
-	line-height:36px
-}
-.heti h4 {
-	font-size:18px;
-	line-height:24px
-}
-.heti h5 {
-	font-size:16px;
-	line-height:24px
-}
-.heti h6 {
-	font-size:14px;
-	line-height:24px
-}
-.heti h1,.heti h2,.heti h3 {
-	letter-spacing:.05em
-}
-.heti h1:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h1:not(:lang(zh)),.heti h2:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h2:not(:lang(zh)),.heti h3:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h3:not(:lang(zh)) {
-	letter-spacing:0
-}
-.heti h1+h2,.heti h2+h3,.heti h3+h4,.heti h4+h5,.heti h5+h6 {
-	margin-block-start:12px
-}
 .heti ul,.heti ol,.heti dl {
 	margin-block-start:12px;
 	margin-block-end:24px