✨ feat: add toc with accordion animation, add optional toc toggle, lower heti css priority

src/styles/global.css

@@ -5,7 +5,7 @@
 }
 
 html {
-  --at-apply: 'bg-background c-secondary antialiased scrollbar-hidden';
+  --at-apply: 'bg-background c-secondary antialiased scrollbar-hidden scroll-smooth';
 }
 
 html::-webkit-scrollbar {

src/styles/heti.css

@@ -18,165 +18,165 @@
 }
 
 /* Links */
-.heti a {
+.heti :where(a) {
   --at-apply: 'underline decoration-secondary/40 underline-0.075em underline-offset-0.2em lg:underline-0.1em';
   --at-apply: 'font-medium transition-colors tracking-0 hover:(c-primary decoration-secondary/80) ';
 }
 
 /* Paragraphs */
-.heti p {
+.heti :where(p) {
   --at-apply: 'mt-3 mb-4 text-justify';
 }
-.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
+.heti :where(p:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
   --at-apply: 'text-start';
 }
 
 /* Headings */
-.heti h1,
-.heti h2,
-.heti h3,
-.heti h4,
-.heti h5,
-.heti h6 {
+.heti :where(h1),
+.heti :where(h2),
+.heti :where(h3),
+.heti :where(h4),
+.heti :where(h5),
+.heti :where(h6) {
   --at-apply: 'mt-6 mb-3 font-semibold';
 }
-.heti h1 {
+.heti :where(h1) {
   --at-apply: 'text-8 leading-12';
 }
-.heti h2 {
+.heti :where(h2) {
   --at-apply: 'text-6 leading-9';
 }
-.heti h3 {
+.heti :where(h3) {
   --at-apply: 'text-5 leading-9';
 }
-.heti h4 {
+.heti :where(h4) {
   --at-apply: 'text-4.5 leading-6';
 }
-.heti h5 {
+.heti :where(h5) {
   --at-apply: 'text-4 leading-6';
 }
-.heti h6 {
+.heti :where(h6) {
   --at-apply: 'text-3.5 leading-6';
 }
-.heti h1,
-.heti h2,
-.heti h3 {
+.heti :where(h1),
+.heti :where(h2),
+.heti :where(h3) {
   --at-apply: 'tracking-0.05em';
 }
-.heti h1:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
-.heti h2:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)),
-.heti h3:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
+.heti :where(h1:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))),
+.heti :where(h2:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))),
+.heti :where(h3:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
   --at-apply: 'tracking-0';
 }
-.heti h1 + h2,
-.heti h2 + h3,
-.heti h3 + h4,
-.heti h4 + h5,
-.heti h5 + h6 {
+.heti :where(h1 + h2),
+.heti :where(h2 + h3),
+.heti :where(h3 + h4),
+.heti :where(h4 + h5),
+.heti :where(h5 + h6) {
   --at-apply: 'mt-3';
 }
 
 /* Blockquotes */
-.heti blockquote {
+.heti :where(blockquote) {
   --at-apply: 'mt-3 mb-6 px-4 py-3 rounded';
   --at-apply: 'border-l-4 border-solid border-secondary/25 bg-secondary/5';
 }
-.heti blockquote blockquote {
+.heti blockquote :where(blockquote) {
   --at-apply: 'my-3';
 }
-.heti blockquote p {
+.heti blockquote :where(p) {
   --at-apply: 'my-2';
 }
 
 /* Code Blocks */
-.heti pre {
-  --at-apply: 'mt-3 mb-4 px-4 py-3 rounded bg-secondary/5! border border-solid border-secondary/7';
+.heti :where(pre) {
+  --at-apply: 'mt-3 mb-4 px-4 py-3 rounded bg-secondary/5! border border-solid border-secondary/5';
   --at-apply: 'overflow-auto whitespace-pre scrollbar-hidden';
 }
-.heti pre code {
+.heti pre :where(code) {
   --at-apply: 'p-0 bg-secondary/0 tracking-0 border-none';
 }
-html.dark .heti pre span {
+html.dark .heti pre :where(span) {
   --at-apply: 'text-[var(--shiki-dark)]!';
 }
 
 /* Inline Code */
-.heti code {
-  --at-apply: 'p-0.5 bg-secondary/5 rounded text-0.85em border border-solid border-secondary/7';
+.heti :where(code) {
+  --at-apply: 'p-0.5 bg-secondary/5 rounded text-0.85em border border-solid border-secondary/5';
 }
 
 /* Horizontal Rules */
-.heti hr {
+.heti :where(hr) {
   --at-apply: 'border-secondary/25';
 }
 
 /* Lists */
-.heti ul,
-.heti ol,
-.heti dl {
+.heti :where(ul),
+.heti :where(ol),
+.heti :where(dl) {
   --at-apply: 'mt-3 mb-6';
 }
-.heti ul,
-.heti ol {
+.heti :where(ul),
+.heti :where(ol) {
   --at-apply: 'pl-8';
 }
-.heti ul ul,
-.heti ul ol,
-.heti ol ul,
-.heti ol ol {
+.heti ul :where(ul),
+.heti ul :where(ol),
+.heti ol :where(ul),
+.heti ol :where(ol) {
   --at-apply: 'my-0';
 }
-.heti ul {
+.heti :where(ul) {
   --at-apply: 'list-disc';
 }
-.heti ol {
+.heti :where(ol) {
   --at-apply: 'list-decimal';
 }
-.heti ul ul,
-.heti ol ul {
+.heti ul :where(ul),
+.heti ol :where(ul) {
   --at-apply: 'list-circle';
 }
-.heti ul ul ul,
-.heti ul ol ul,
-.heti ol ul ul,
-.heti ol ol ul {
+.heti ul ul :where(ul),
+.heti ul ol :where(ul),
+.heti ol ul :where(ul),
+.heti ol ol :where(ul) {
   --at-apply: 'list-square';
 }
-.heti li {
+.heti :where(li) {
   --at-apply: 'list-unset';
 }
 
 /* Tables */
-.heti table {
+.heti :where(table) {
   --at-apply: 'box-border table-fixed mt-3 mb-6 rounded-md break-words';
   --at-apply: 'border border-solid border-secondary/25 border-collapse';
 }
-.heti th,
-.heti td {
+.heti :where(th),
+.heti :where(td) {
   --at-apply: 'px-3 py-1.5 border border-solid border-secondary/40';
 }
 
 /* Abbreviations */
-.heti abbr {
+.heti :where(abbr) {
   --at-apply: 'tracking-0';
 }
-.heti abbr[title] {
+.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 sub,
-.heti sup {
+.heti :where(sub),
+.heti :where(sup) {
   --at-apply: 'mx-0.15em relative text-0.75em leading-1 align-baseline';
 }
-.heti sub {
+.heti :where(sub) {
   --at-apply: 'bottom--0.25em';
 }
-.heti sup {
+.heti :where(sup) {
   --at-apply: 'top--0.5em';
 }
-.heti sub a,
-.heti sup a {
+.heti sub :where(a),
+.heti sup :where(a) {
   --at-apply: 'no-underline';
 }
 .heti sup:target,
@@ -189,16 +189,16 @@ html.dark .heti sup a:target {
 }
 
 /* Keyboard Input */
-.heti kbd {
+.heti :where(kbd) {
   --at-apply: 'rounded border border-solid border-secondary/40 text-secondary';
   --at-apply: 'inline-block text-0.85em font-bold leading-none px-1 py-0.75 whitespace-nowrap';
 }
 
 /* Highlighted Text */
-.heti mark {
+.heti :where(mark) {
   --at-apply: 'mx-0.25 px-0.25 py-0.5 text-inherit bg-#ff0';
 }
-html.dark .heti mark {
+html.dark .heti :where(mark) {
   --at-apply: 'bg-#4d4a00e0';
 }
 
@@ -231,68 +231,68 @@ html.dark .heti mark {
   content: "Сноски";
   --at-apply: 'block text-5 font-semibold mt-6 mb-3';
 }
-.heti .data-footnote-backref {
+.heti :where(.data-footnote-backref) {
   --at-apply: 'no-underline';
 }
 
 /* Bold */
-.heti b,
-.heti strong {
+.heti :where(b),
+.heti :where(strong) {
   --at-apply: 'font-semibold';
 }
 
 /* Italic */
-.heti i {
+.heti :where(i) {
   --at-apply: 'font-italic';
 }
 
 /* Emphasized */
-.heti em {
+.heti :where(em) {
   --at-apply: 'italic';
 }
 
 /* Quotes */
-.heti q {
+.heti :where(q) {
   quotes: "「" "」" "『" "』";
 }
-.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
+.heti :where(q:not(:lang(zh)):not(:lang(ja)):not(:lang(ko))) {
   quotes: initial;
   quotes: auto;
 }
 
 /* Wavy Underline */
-.heti u {
+.heti :where(u) {
   --at-apply: 'mx-0.25 underline decoration-wavy decoration-red underline-offset-4';
 }
-html.dark .heti u {
+html.dark .heti :where(u) {
   --at-apply: 'decoration-#A14F50';
 }
 
 /* Strikethrough */
-.heti del,
-.heti s {
+.heti :where(del),
+.heti :where(s) {
   --at-apply: 'mx-0.25';
 }
 
 /* Images */
-.heti figure {
+.heti :where(figure) {
   --at-apply: 'my-6';
 }
-.heti figure > figcaption {
+.heti figure > :where(figcaption) {
   --at-apply: 'text-center text-sm mt-3 text-secondary/75';
 }
 
 /* Markdown Extensions Style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
-.heti details {
+.heti :where(details) {
   --at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
 }
-.heti details summary {
+.heti details :where(summary) {
   --at-apply: 'cursor-pointer';
 }
-.heti details[open] summary {
+.heti details[open] :where(summary) {
   --at-apply: 'border-b border-solid border-secondary/25 mb-3 pb-3';
 }
-/* .heti details summary {
+/* .heti details :where(summary) {
   list-style: none;
 }
 .heti details summary::-webkit-details-marker {