refactor: optimize heti css styles

package.json

@@ -32,7 +32,7 @@
     "sanitize-html": "^2.15.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.10.2",
+    "@antfu/eslint-config": "^4.11.0",
     "@astrojs/check": "^0.9.4",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.13.11",

pnpm-lock.yaml

@@ -61,8 +61,8 @@ importers:
         version: 2.15.0
     devDependencies:
       '@antfu/eslint-config':
-        specifier: ^4.10.2
+        specifier: ^4.11.0
-        version: 4.10.2(@typescript-eslint/utils@8.27.0(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2))(@unocss/eslint-plugin@66.1.0-beta.6(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2))(@vue/compiler-sfc@3.5.13)(astro-eslint-parser@1.2.2)(eslint-plugin-astro@1.3.1(eslint@9.23.0(jiti@2.4.2)))(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2)
+        version: 4.11.0(@typescript-eslint/utils@8.27.0(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2))(@unocss/eslint-plugin@66.1.0-beta.6(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2))(@vue/compiler-sfc@3.5.13)(astro-eslint-parser@1.2.2)(eslint-plugin-astro@1.3.1(eslint@9.23.0(jiti@2.4.2)))(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2)
       '@astrojs/check':
         specifier: ^0.9.4
         version: 0.9.4(typescript@5.8.2)
@@ -124,8 +124,8 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@antfu/eslint-config@4.10.2':
+  '@antfu/eslint-config@4.11.0':
-    resolution: {integrity: sha512-/cqQ+uQKyeEuZcverR1+r0a6IUO1cwIFZSIaTPchxcWNXEK8CD7hB6DPFALDnDwwM1ItFB/GKSQWlGkaxxmM0w==}
+    resolution: {integrity: sha512-KMLIrZflEFsOEF/N0Xl8iVaheLTdgT3gAwXVzdG5Ng8ieNhBsRsaThnqI7of10kh6psSBLJ6SkNK+ZF98fQIXQ==}
     hasBin: true
     peerDependencies:
       '@eslint-react/eslint-plugin': ^1.19.0
@@ -135,10 +135,11 @@ packages:
       eslint: ^9.10.0
       eslint-plugin-astro: ^1.2.0
       eslint-plugin-format: '>=0.1.0'
-      eslint-plugin-react-hooks: ^5.0.0
+      eslint-plugin-react-hooks: ^5.2.0
-      eslint-plugin-react-refresh: ^0.4.4
+      eslint-plugin-react-refresh: ^0.4.19
       eslint-plugin-solid: ^0.14.3
       eslint-plugin-svelte: '>=2.35.1'
+      eslint-plugin-vuejs-accessibility: ^2.4.1
       prettier-plugin-astro: ^0.14.0
       prettier-plugin-slidev: ^1.0.5
       svelte-eslint-parser: '>=0.37.0'
@@ -163,6 +164,8 @@ packages:
         optional: true
       eslint-plugin-svelte:
         optional: true
+      eslint-plugin-vuejs-accessibility:
+        optional: true
       prettier-plugin-astro:
         optional: true
       prettier-plugin-slidev:
@@ -3776,7 +3779,7 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/eslint-config@4.10.2(@typescript-eslint/utils@8.27.0(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2))(@unocss/eslint-plugin@66.1.0-beta.6(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2))(@vue/compiler-sfc@3.5.13)(astro-eslint-parser@1.2.2)(eslint-plugin-astro@1.3.1(eslint@9.23.0(jiti@2.4.2)))(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2)':
+  '@antfu/eslint-config@4.11.0(@typescript-eslint/utils@8.27.0(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2))(@unocss/eslint-plugin@66.1.0-beta.6(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2))(@vue/compiler-sfc@3.5.13)(astro-eslint-parser@1.2.2)(eslint-plugin-astro@1.3.1(eslint@9.23.0(jiti@2.4.2)))(eslint@9.23.0(jiti@2.4.2))(typescript@5.8.2)':
     dependencies:
       '@antfu/install-pkg': 1.0.0
       '@clack/prompts': 0.10.0

src/components/Footer.astro

@@ -30,7 +30,7 @@ const links = socialLinks.map((link) => {
   <p>
     {links.map((link, index) => (
       <>
-        <a class="hover:(c-primary transition-colors)" href={link.url}>
+        <a class="transition-colors hover:c-primary" href={link.url}>
           {link.name}
         </a>
         {index < links.length - 1 && ' / '}
@@ -39,7 +39,7 @@ const links = socialLinks.map((link) => {
   </p>
 
   <p>
-    Powered by <a class="hover:(c-primary transition-colors)" href="https://astro.build/">Astro</a> and <a class="hover:(c-primary transition-colors)" href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
+    Powered by <a class="transition-colors hover:c-primary" href="https://astro.build/">Astro</a> and <a class="transition-colors hover:c-primary" href="https://github.com/radishzzz/astro-theme-retypeset">Retypeset</a>
   </p>
 
   <p>

src/components/Widgets/GoBack.astro

@@ -1,7 +1,7 @@
 <button
   id="back-button"
   class="hidden"
-  lg="block absolute left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 c-secondary active:scale-90 hover:c-primary"
+  lg="block absolute c-secondary/50 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 c-secondary active:scale-90 hover:c-primary"
   aria-label="Back to home"
 >
   <svg

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

@@ -14,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.
 
-# Heading 1 Preview
+# Heading 1
 
-## Heading 2 Preview
+## Heading 2
 
-### Heading 3 Preview
+### Heading 3
 
-#### Heading 4 Preview
+#### Heading 4
 
-##### Heading 5 Preview
+##### Heading 5
 
-###### Heading 6 Preview
+###### Heading 6
 
 ## Paragraph
 

src/styles/global.css

@@ -20,12 +20,6 @@ body {
   --at-apply: 'cursor-zoom-in force-gpu';
 } */
 
-html.dark .astro-code,
-html.dark .astro-code span {
-  color: var(--shiki-dark) !important;
-  background-color: var(--shiki-dark-bg) !important;
-}
-
 /* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 ::view-transition-new(theme-transition) {
   animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);

src/styles/heti.css

@@ -4,173 +4,206 @@
  * 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 {
   --at-apply: 'leading-1.5em break-words hyphens-auto tracking-0.02em';
 }
-.heti:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
+.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
-  --at-apply: 'leading-1.4em tracking-0';
+.heti:not(:lang(zh)) {
-}
-
-/* Common tags style */
-.heti p {
-  --at-apply: 'mb-6 text-justify';
-}
-.heti a {
-  --at-apply: 'underline decoration-secondary/25 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
-  --at-apply: 'font-medium transition-colors hover:(c-primary decoration-secondary/60) ';
-}
-
-/* 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 .post-title {
-}
+  --at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0';
-/* .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;
-	margin-inline-start:32px;
-	margin-inline-end:32px;
-	padding-block-start:12px;
-	padding-block-end:12px;
-	padding-inline-start:16px;
-	padding-inline-end:16px;
-	background-color:rgba(0,0,0,.054)
-}
-@media(prefers-color-scheme:dark) {
-	.heti blockquote {
-	background-color:rgba(255,255,255,.054)
-}
-}
-.heti img {
-  --at-apply: 'my-8';
-}
-.heti figure {
-  --at-apply: 'my-8 flex flex-col items-center';
-}
-.heti figure>img {
-  --at-apply: 'mt-0 mb-3';
-}
-.heti figure>figcaption {
-  --at-apply: 'opacity-75 w-95% text-center';
-}
-.heti hr {
-	width:30%;
-	height:1px;
-	margin-block-start:48px;
-	margin-block-end:47px;
-	margin-inline-start:auto;
-	margin-inline-end:auto;
-	border:0;
-	background-color:#ccc
-}
-@media(prefers-color-scheme:dark) {
-	.heti hr {
-	background-color:#404040
-}
 }
 
-.heti p:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) {
+/* 链接 */
-	text-align:start
+.heti a {
+  --at-apply: 'underline decoration-secondary/25 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
+  --at-apply: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/60) ';
 }
+
+/* 段落 */
+.heti p {
+  --at-apply: 'mt-3 mb-4 text-justify';
+}
+.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
+.heti p:not(:lang(zh)) {
+  --at-apply: 'text-start';
+}
+
+/* 引用 */
+.heti blockquote {
+  --at-apply: 'mt-3 mb-6 px-4 py-3';
+  --at-apply: 'border-l-4 border-solid border-secondary/25 bg-secondary/5';
+}
+.heti blockquote blockquote {
+  --at-apply: 'my-3';
+}
+.heti blockquote p {
+  --at-apply: 'my-2';
+}
+
+/* 代码块 */
 .heti pre {
-  --at-apply: 'bg-secondary/8! scrollbar-hidden';
+  --at-apply: 'my-3 px-4 py-3 rounded bg-secondary/5!';
-	margin-block-start:12px;
+  --at-apply: 'overflow-auto whitespace-pre scrollbar-hidden';
-	margin-block-end:12px;
-	margin-inline-start:0;
-	margin-inline-end:0;
-	padding-block-start:12px;
-	padding-block-end:12px;
-	padding-inline-start:16px;
-	padding-inline-end:16px;
-	overflow:auto;
-	white-space:pre;
-	word-wrap:normal;
-	border-radius:4px;
-}
-html.dark .heti pre {
-  --at-apply: 'bg-secondary/8!';
-}
-html.dark .astro-code span {
-  --at-apply: 'bg-secondary/0!';
 }
 .heti pre code {
-	margin:0;
+  --at-apply: 'mx-0 bg-secondary/0 tracking-0';
-	padding:0;
-	border:0;
-	border-radius:0;
 }
-.heti a,.heti abbr,.heti code,.heti heti-spacing,.heti [lang=en-US] {
+html.dark .heti pre span {
-	letter-spacing:normal
+  --at-apply: 'text-[var(--shiki-dark)]!';
 }
 
+/* 代码 */
+.heti code {
+  --at-apply: 'mx-1 bg-secondary/5 rounded text-0.875em';
+}
 
-.heti ul,.heti ol,.heti dl {
+/* 分割线 */
+.heti hr {
+  --at-apply: 'border-secondary/25';
+}
+
+/* 标题 */
+.heti h1,
+.heti h2,
+.heti h3,
+.heti h4,
+.heti h5,
+.heti h6 {
+  --at-apply: 'mt-6 mb-3 font-semibold';
+}
+.heti h1 {
+  --at-apply: 'mb-6 text-8 leading-12';
+}
+.heti h2 {
+  --at-apply: 'text-6 leading-9';
+}
+.heti h3 {
+  --at-apply: 'text-5 leading-9';
+}
+.heti h4 {
+  --at-apply: 'text-4.5 leading-6';
+}
+.heti h5 {
+  --at-apply: 'text-4 leading-6';
+}
+.heti h6 {
+  --at-apply: 'text-3.5 leading-6';
+}
+.heti h1,
+.heti h2,
+.heti h3 {
+  --at-apply: 'tracking-0.05em';
+}
+.heti h1:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
+.heti h1:not(:lang(zh)),
+.heti h2:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
+.heti h2:not(:lang(zh)),
+.heti h3:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
+.heti h3:not(:lang(zh)) {
+  --at-apply: 'tracking-0';
+}
+.heti h1 + h2,
+.heti h2 + h3,
+.heti h3 + h4,
+.heti h4 + h5,
+.heti h5 + h6 {
+  --at-apply: 'mt-3';
+}
+
+/* 高亮 */
+.heti mark {
+  --at-apply: 'mx-0.25 px-0.25 py-0.5 text-inherit bg-#ff0';
+}
+html.dark .heti mark {
+  --at-apply: 'bg-#4d4a00e0';
+}
+
+/* 键盘输入文本 */
+.heti kbd {
+  --at-apply: 'bg-secondary/5 rounded-0.75 border border-solid border-secondary/40 text-secondary';
+  --at-apply: 'inline-block text-0.85em font-bold leading-none px-1 py-0.5 whitespace-nowrap';
+  box-shadow:
+  0 1px 1px color-mix(in oklch, var(--uno-colors-secondary) 25%, transparent),
+  0 2px 0 0 var(--uno-colors-background) inset;
+}
+
+/* 上标和下标 */
+.heti sub,
+.heti sup {
+  --at-apply: 'mx-0.15em relative text-0.75em leading-1 align-baseline';
+}
+.heti sub {
+  --at-apply: 'bottom--0.25em';
+}
+.heti sup {
+  --at-apply: 'top--0.5em';
+}
+.heti sub a,
+.heti sup a {
+  --at-apply: 'no-underline';
+}
+.heti sup:target,
+.heti sup a:target {
+  --at-apply: 'bg-#ff0';
+}
+html.dark .heti sup:target,
+html.dark .heti sup a:target {
+  --at-apply: 'bg-#4d4a00e0';
+}
+
+.heti figure {
+  display: block;
+  text-align: center;
+}
+.heti figure > img {
+  display: block;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+
+.heti abbr {
+  letter-spacing: normal;
+}
+
+.heti ul,
+.heti ol,
+.heti dl {
   margin-block-start: 12px;
-	margin-block-end:24px
+  margin-block-end: 24px;
 }
-.heti ul,.heti ol {
+.heti ul,
-	padding-inline-start:32px
+.heti ol {
+  padding-inline-start: 32px;
 }
-.heti ul ul,.heti ul ol,.heti ol ul,.heti ol ol {
+.heti ul ul,
+.heti ul ol,
+.heti ol ul,
+.heti ol ol {
   margin-block-start: 0;
-	margin-block-end:0
+  margin-block-end: 0;
 }
 .heti ul {
-	list-style-type:disc
+  list-style-type: disc;
 }
 .heti ol {
-	list-style-type:decimal
+  list-style-type: decimal;
 }
-.heti ul ul,.heti ol ul {
+.heti ul ul,
-	list-style-type:circle
+.heti ol ul {
+  list-style-type: circle;
 }
-.heti ul ul ul,.heti ul ol ul,.heti ol ul ul,.heti ol ol ul {
+.heti ul ul ul,
-	list-style-type:square
+.heti ul ol ul,
+.heti ol ul ul,
+.heti ol ol ul {
+  list-style-type: square;
 }
 .heti li {
-	list-style-type:unset
+  list-style-type: unset;
 }
 .heti table {
   box-sizing: border-box;
@@ -183,132 +216,105 @@ html.dark .astro-code span {
   border-width: 1px;
   border-style: solid;
   border-color: #ccc;
-	word-break:break-word
+  word-break: break-word;
 }
-@media(prefers-color-scheme:dark) {
+.heti th,
-	.heti table {
+.heti td {
-	border-color:#404040
-}
-}.heti th,.heti td {
   padding-block-start: 6px;
   padding-block-end: 6px;
   padding-inline-start: 8px;
   padding-inline-end: 8px;
   border-width: 1px;
   border-style: solid;
-	border-color:#ccc
+  border-color: #ccc;
 }
-@media(prefers-color-scheme:dark) {
+.heti caption {
-	.heti th,.heti td {
-	border-color:#404040
-}
-}.heti caption {
   caption-side: bottom;
   margin-block-start: 2px;
   margin-block-end: -4px;
   font-size: 14px;
-	line-height:24px
+  line-height: 24px;
 }
-.heti b,.heti strong {
+.heti abbr[title] {
-	font-weight:600
+  padding-block-end: 1px;
+  border-block-end: 1px dotted;
+  text-decoration: none;
+  cursor: help;
 }
-.heti code {
+.heti b,
-	margin-inline-start:.25em;
+.heti strong {
-	margin-inline-end:.25em;
+  font-weight: 600;
-	font-size:.875em
-}
-.heti dfn {
-	font-weight:600
-}
-.heti dfn:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti dfn:not(:lang(zh)) {
-	font-weight:400
 }
+
 .heti em {
-	font-weight:600
+  font-weight: 600;
 }
 .heti figcaption {
   display: inline-block;
   vertical-align: top;
   font-size: 14px;
-	text-align:start
+  text-align: start;
 }
 .heti i {
-	font-style:italic
+  font-style: italic;
 }
-.heti ins,.heti u {
+.heti u {
   padding-block-end: 1px;
   border-block-end: 1px solid;
-	text-decoration:none
+  text-decoration: none;
 }
-.heti mark {
+
-	padding-block-start:2px;
+.heti q {
-	padding-block-end:2px;
+  quotes: "「" "」" "『" "』";
-	padding-inline-start:1px;
-	padding-inline-end:1px;
-	margin-inline-start:1px;
-	margin-inline-end:1px;
-	background-color:rgba(255,247,0,.88);
-	color:inherit
 }
-@media(prefers-color-scheme:dark) {
+.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
-	.heti mark {
+.heti q:not(:lang(zh)) {
-	background-color:rgba(77,74,0,.88)
-}
-}.heti q {
-	quotes:"「" "」" "『" "』"
-}
-.heti q:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti q:not(:lang(zh)) {
   quotes: initial;
-	quotes:auto
+  quotes: auto;
 }
 .heti rt {
-	font-size:.875em;
+  font-size: 0.875em;
-	font-weight:400
+  font-weight: 400;
 }
 .heti small {
-	font-size:.875em
+  font-size: 0.875em;
 }
 .heti strong {
-	font-weight:600
+  font-weight: 600;
 }
-.heti sub,.heti sup {
+
-	position:relative;
+
-	margin-inline-start:.25em;
+/* 折叠 */
-	margin-inline-end:.25em;
+/* .heti summary {
-	font-size:.75em;
-	font-style:normal;
-	line-height:1;
-	vertical-align:baseline
-}
-.heti sub {
-	bottom:-0.25em
-}
-.heti sup {
-	top:-0.5em
-}
-.heti sup:target,.heti sup a:target {
-	background-color:#dbedff
-}
-@media(prefers-color-scheme:dark) {
-	.heti sup:target,.heti sup a:target {
-	background-color:#3a6188
-}
-}.heti summary {
   padding-inline-start: 1em;
   outline: 0;
-	cursor:pointer
+  cursor: pointer;
 }
 .heti summary::-webkit-details-marker {
-	width:.6em;
+  width: 0.6em;
-	margin-inline-end:.4em
+  margin-inline-end: 0.4em;
+} */
+
+.heti u[title] {
+  cursor: help;
+  border-block-end-width: 3px;
+  border-block-end-style: double;
+  border-block-end-color: rgba(0, 0, 0, 0.54);
 }
-.heti address,.heti cite,.heti dfn,.heti dt,.heti em {
+.heti dt,
-	font-style:normal
+.heti em {
+  font-style: normal;
 }
-.heti address:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti address:not(:lang(zh)),.heti cite:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti cite:not(:lang(zh)),.heti dfn:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti dfn:not(:lang(zh)),.heti dt:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti dt:not(:lang(zh)),.heti em:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti em:not(:lang(zh)) {
+.heti dt:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
-	font-style:italic
+.heti dt:not(:lang(zh)),
+.heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
+.heti em:not(:lang(zh)) {
+  font-style: italic;
 }
-.heti .heti del,.heti ins,.heti s,.heti u {
+.heti abbr[title],
+.heti del,
+.heti s,
+.heti u {
   margin-inline-start: 1px;
-	margin-inline-end:1px
+  margin-inline-end: 1px;
 }

uno.config.ts

@@ -35,7 +35,7 @@ export default defineConfig({
   shortcuts: {
     'uno-desktop-column': 'fixed w-14rem right-[max(5.625rem,calc(50vw-34.375rem))]',
     'uno-tags-style': 'inline-block whitespace-nowrap border border-secondary/25 rounded-full px-3.2 py-0.7 c-secondary transition-colors hover:(border-secondary/75 text-primary)',
-    'uno-decorative-line': 'h-0.25 w-10 bg-secondary opacity-25 mb-4.5 lg:(w-11 mb-6)',
+    'uno-decorative-line': 'h-0.25 w-10 bg-secondary/25 mb-4.5 lg:(w-11 mb-6)',
     'uno-tags-wrapper': 'w-95% flex flex-wrap gap-x-3 gap-y-3.2 lg:w-100%',
   },
   rules: [