🎨 style: optimize heti css styles

src/styles/global.css

@@ -12,10 +12,6 @@ body {
   --at-apply: 'ios-flash-fix';
 }
 
-article.heti img {
-  --at-apply: 'cursor-zoom-in force-gpu';
-}
-
 /* 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

@@ -25,7 +25,7 @@
 
 /* Images */
 .heti :where(img) {
-  --at-apply: 'mx-auto my-5';
+  --at-apply: 'mx-auto my-5 cursor-zoom-in force-gpu';
 }
 .heti :where(figure) {
   --at-apply: 'mx-auto my-5';
@@ -111,11 +111,6 @@
   --at-apply: 'tracking-0';
 }
 
-/* Blockquotes */
-.heti :where(blockquote) {
-  --at-apply: 'px-1em c-secondary/80 border-l-0.25em border-solid border-secondary/25';
-}
-
 /* Code Blocks */
 .heti :where(pre) {
   --at-apply: 'overflow-auto mb-4 p-4 rounded bg-secondary/5! border border-solid border-secondary/5';
@@ -142,9 +137,24 @@ html.dark .heti pre :where(span) {
   direction: rtl;
 }
 
-/* Horizontal Rules */
+/* Blockquotes */
-.heti :where(hr) {
+.heti :where(blockquote) {
-  --at-apply: 'my-6 border-t-2 border-secondary/25';
+  --at-apply: 'px-1em c-secondary/80 border-l-0.25em border-solid border-secondary/25';
+}
+
+/* Tables */
+.heti :where(table) {
+  --at-apply: 'block box-border table-fixed max-w-full mb-4 overflow-x-auto scrollbar-hidden';
+}
+.heti :where(table)::-webkit-scrollbar {
+  --at-apply: 'hidden';
+}
+.heti :where(th),
+.heti :where(td) {
+  --at-apply: 'px-3 py-1.5 border border-solid border-secondary/40';
+}
+.heti :where(tbody tr:nth-child(even)) {
+  --at-apply: 'bg-secondary/5';
 }
 
 /* Lists */
@@ -178,33 +188,10 @@ html.dark .heti pre :where(span) {
   --at-apply: 'list-unset mt-0.25em';
 }
 
-/* Tables */
+/* Superscript and Subscript >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
-.heti :where(table) {
-  --at-apply: 'block box-border table-fixed w-full max-w-full mt-3 mb-6 overflow-x-auto break-words scrollbar-hidden';
-}
-.heti :where(table)::-webkit-scrollbar {
-  display: none;
-}
-.heti :where(th),
-.heti :where(td) {
-  --at-apply: 'px-3 py-1.5 border border-solid border-secondary/40';
-}
-.heti :where(tbody tr:nth-child(even)) {
-  --at-apply: 'bg-secondary/5';
-}
-
-/* Abbreviations */
-.heti :where(abbr) {
-  --at-apply: 'tracking-0';
-}
-.heti :where(abbr[title]) {
-  --at-apply: 'mx-0.25 pb-0.25 border-dotted border-secondary border-b-1 no-underline cursor-help';
-}
-
-/* Superscript and Subscript */
 .heti :where(sub),
 .heti :where(sup) {
-  --at-apply: 'mx-0.1em relative text-0.75em leading-1 align-baseline';
+  --at-apply: 'relative mx-0.1em text-0.75em leading-1 align-baseline';
 }
 .heti :where(sub) {
   --at-apply: 'bottom--0.25em';
@@ -225,15 +212,28 @@ html.dark .heti sup a:target {
   --at-apply: 'bg-#4d4a00e0';
 }
 
+/* Abbreviations */
+.heti :where(abbr[title]) {
+  --at-apply: 'pb-0.06em border-b-1 border-dotted border-secondary no-underline cursor-help';
+}
+
+/* Wavy Underline */
+.heti :where(u) {
+  --at-apply: 'underline underline-offset-0.25em decoration-wavy decoration-red';
+}
+html.dark .heti :where(u) {
+  --at-apply: 'decoration-#A14F50';
+}
+
 /* Keyboard Input */
 .heti :where(kbd) {
-  --at-apply: 'rounded border border-solid border-secondary/40 text-secondary tracking-0';
+  --at-apply: 'inline-block px-0.4em py-0.3em text-0.85em font-bold leading-none tracking-0 whitespace-nowrap';
-  --at-apply: 'inline-block text-0.85em font-bold leading-none px-1 py-0.75 whitespace-nowrap';
+  --at-apply: 'rounded border border-solid border-secondary/40 text-secondary';
 }
 
 /* Highlighted Text */
 .heti :where(mark) {
-  --at-apply: 'mx-0.25 px-0.25 py-0.5 text-inherit bg-#ff0';
+  --at-apply: 'mx-0.06em p-0.06em text-inherit bg-#ff0';
 }
 html.dark .heti :where(mark) {
   --at-apply: 'bg-#4d4a00e0';
@@ -242,31 +242,31 @@ html.dark .heti :where(mark) {
 /* Footnotes */
 .footnotes > h2,
 .footnotes > h3 {
-  display: none;
+  --at-apply: 'hidden';
 }
 .footnotes:lang(zh-CN)::before {
   content: "脚注";
-  --at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
+  --at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold tracking-0.05em';
 }
 .footnotes:lang(zh-TW)::before {
   content: "腳註";
-  --at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
+  --at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold tracking-0.05em';
 }
 .footnotes:lang(ja)::before {
   content: "脚注";
-  --at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
+  --at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold tracking-0.05em';
 }
 .footnotes:lang(en)::before {
   content: "Footnotes";
-  --at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
+  --at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold';
 }
 .footnotes:lang(es)::before {
   content: "Notas al pie";
-  --at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
+  --at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold';
 }
 .footnotes:lang(ru)::before {
   content: "Сноски";
-  --at-apply: 'block text-6 font-semibold mt-7.4 mb-4.2';
+  --at-apply: 'block mt-7.4 mb-4.2 text-6 font-semibold';
 }
 .heti :where(.data-footnote-backref) {
   --at-apply: 'no-underline';
@@ -275,15 +275,10 @@ html.dark .heti :where(mark) {
 /* Bold */
 .heti :where(b),
 .heti :where(strong) {
-  --at-apply: 'font-semibold';
+  --at-apply: 'font-bold';
 }
 
 /* Italic */
-.heti :where(i) {
-  --at-apply: 'font-italic';
-}
-
-/* Emphasized */
 .heti :where(em) {
   --at-apply: 'italic';
 }
@@ -297,18 +292,9 @@ html.dark .heti :where(mark) {
   quotes: auto;
 }
 
-/* Wavy Underline */
+/* Horizontal Rules */
-.heti :where(u) {
+.heti :where(hr) {
-  --at-apply: 'mx-0.25 underline decoration-wavy decoration-red underline-offset-4';
+  --at-apply: 'my-6 border-t-2 border-secondary/25';
-}
-html.dark .heti :where(u) {
-  --at-apply: 'decoration-#A14F50';
-}
-
-/* Strikethrough */
-.heti :where(del),
-.heti :where(s) {
-  --at-apply: 'mx-0.25';
 }
 
 /* KaTeX Mathematical */
@@ -319,8 +305,8 @@ html.dark .heti :where(u) {
   display: none;
 }
 
-/* Markdown Extensions Style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+/* Markdown Extensions Style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
-.heti :where(details) {
+/* .heti :where(details) {
   --at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
 }
 .heti details :where(summary) {
@@ -328,7 +314,8 @@ html.dark .heti :where(u) {
 }
 .heti details[open] :where(summary) {
   --at-apply: 'border-b border-solid border-secondary/25 mb-3 pb-3';
-}
+} */
+
 /* .heti details :where(summary) {
   list-style: none;
 }