Commit 6733175

@@ -29,7 +29,7 @@ const infomations = [
 ];
 ---
 
-<div class="card card-bordered bg-primary/25 my-4 border-2">
+<div class="card card-bordered my-4 border-2 bg-primary/25">
   <div class="card-body grid grid-cols-2 gap-x-4 p-4">
     {
       infomations.map((info) => (

@@ -13,12 +13,12 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 
 <template id="pagefind-result-template">
   <a
-    class="hover:bg-primary group w-full rounded-md p-2 duration-150 hover:bg-opacity-30"
+    class="group w-full rounded-md p-2 duration-150 hover:bg-primary hover:bg-opacity-30"
     href="#"
   >
     <div class="flex flex-row items-center gap-1 text-center">
-      <span class="group-hover:text-primary text-lg duration-150">Fake Result</span>
-      <Icon name="material-symbols:chevron-right" class="text-primary text-lg" />
+      <span class="text-lg duration-150 group-hover:text-primary">Fake Result</span>
+      <Icon name="material-symbols:chevron-right" class="text-lg text-primary" />
     </div>
     <div id="pagefind-result-template-excerpt" class="text-sm opacity-60">
       This is a fake result.

@@ -23,9 +23,9 @@ const firstHasPre = hasPre && (isFirstInstance('md-has-pre', Astro.url) || impor
   firstHasPre && (
     <template
       id="code-toolbar-template"
-      class="code-block-wrapper collapse-open collapse relative my-4"
+      class="code-block-wrapper collapse collapse-open relative my-4"
     >
-      <div class="bg-primary/60 text-primary-content z-10 flex items-center justify-between">
+      <div class="z-10 flex items-center justify-between bg-primary/60 text-primary-content">
         <Button class="toggle-btn btn-ghost rounded-bl-none">
           <Icon
             name="material-symbols:keyboard-arrow-down-rounded"

@@ -48,14 +48,14 @@ const metas: ({ icon: string; text: string; link?: string } | undefined)[] = [
 
 <div
   class:list={[
-    'card md:card-side card-bordered flex w-full rounded-xl border-2 max-md:flex-col-reverse',
+    'card card-bordered flex w-full rounded-xl border-2 md:card-side max-md:flex-col-reverse',
     className,
   ]}
 >
   <div class="card-body">
     <a href={url} class="card-title">{title}</a>
     <div
-      class="text-base-content mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-opacity-60"
+      class="mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-base-content text-opacity-60"
     >
       {
         metas.map((meta) => {

@@ -19,6 +19,6 @@ const { href, title, ...rest } = Astro.props;
   }
 
   svg {
-    @apply text-primary bg-primary/40 h-full min-h-48 w-12;
+    @apply h-full min-h-48 w-12 bg-primary/40 text-primary;
   }
 </style>

@@ -19,10 +19,10 @@ if (!title) title = 'Astral Halo';
     <!-- Navbar -->
     <div
       id="navbar"
-      class="navbar bg-base-200/50 fixed z-20 flex h-16 w-full items-center backdrop-blur-md"
+      class="navbar fixed z-20 flex h-16 w-full items-center bg-base-200/50 backdrop-blur-md"
     >
       <div class="navbar-start">
-        <Button id="site-name" href="/" class="btn-ghost group">
+        <Button id="site-name" href="/" class="group btn-ghost">
           <span class="text-xl font-bold duration-300 group-hover:opacity-0">{title}</span>
           <Icon
             name="material-symbols:home-rounded"
@@ -30,7 +30,7 @@ if (!title) title = 'Astral Halo';
           />
         </Button>
       </div>
-      <nav class="navbar-center join max-md:hidden">
+      <nav class="join navbar-center max-md:hidden">
         {
           navbarConfig.navbarCenterItems.map((item) => (
             <Button
@@ -48,7 +48,7 @@ if (!title) title = 'Astral Halo';
           {
             navbarConfig.navbarRightItems.onlyWide.map((item) => (
               <Button
-                class="nav-menu-item btn-ghost btn-circle"
+                class="nav-menu-item btn-circle btn-ghost"
                 {...('href' in item && item.href && { href: item.href })}
                 title={i18n(item.text)}
                 {...('onclick' in item &&
@@ -66,7 +66,7 @@ if (!title) title = 'Astral Halo';
           {
             navbarConfig.navbarRightItems.always.map((item) => (
               <Button
-                class="nav-menu-item btn-ghost btn-circle"
+                class="nav-menu-item btn-circle btn-ghost"
                 {...('href' in item && item.href && { href: item.href })}
                 title={i18n(item.text)}
                 {...('onclick' in item &&
@@ -81,7 +81,7 @@ if (!title) title = 'Astral Halo';
           }
         </div>
         <div class="md:hidden">
-          <label for="sidebar-drawer" class="btn btn-ghost btn-circle">
+          <label for="sidebar-drawer" class="btn btn-circle btn-ghost">
             <Icon name="material-symbols:menu-rounded" class="text-2xl" />
           </label>
         </div>
@@ -94,7 +94,7 @@ if (!title) title = 'Astral Halo';
   <div class="drawer-side z-50">
     <!-- Sidebar -->
     <label for="sidebar-drawer" class="drawer-overlay"></label>
-    <ul class="menu bg-base-200 min-h-full w-[min(calc(100%-3rem),20rem)] p-4">
+    <ul class="menu min-h-full w-[min(calc(100%-3rem),20rem)] bg-base-200 p-4">
       <li><DarkModeButton class="btn-ghost text-xl" showText={true} /></li>
       {
         navbarConfig.navbarCenterItems.map((item) => (

@@ -6,7 +6,7 @@ const currentYear = new Date().getFullYear();
 
 <footer class="footer mt-auto flex-shrink-0"></footer>
 <footer
-  class="footer bg-base-200 text-base-content border-base-300 border-t px-10 py-4 text-base"
+  class="footer border-t border-base-300 bg-base-200 px-10 py-4 text-base text-base-content"
 >
   <aside class="items-center">
     <p>

@@ -5,9 +5,9 @@ import Pagefind from './search/Pagefind.astro';
 ---
 
 <dialog id="search_modal" class="modal" transition:persist>
-  <div class="modal-box bg-base-300 border-base-200">
+  <div class="modal-box border-base-200 bg-base-300">
     <form method="dialog">
-      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+      <button class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">✕</button>
     </form>
     <div class="w-full p-4">
       {

@@ -6,22 +6,35 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
 ---
 
 <div id="side-toolbar" class="fixed bottom-10 right-0 z-30 grid grid-cols-1 gap-2">
-  <div id="stb-hide" class="translate-x-full duration-500 ease-in-out grid grid-cols-1 gap-2 pr-4" inert>
+  <div
+    id="stb-hide"
+    class="grid translate-x-full grid-cols-1 gap-2 pr-4 duration-500 ease-in-out"
+    inert
+  >
     <DarkModeButton id="stb-dark-mode" class="btn-circle btn-primary btn-sm" />
   </div>
-  <div id="stb-show" class="translate-x-full duration-500 ease-in-out grid grid-cols-1 gap-2 pr-4" inert>
-    <Button id="stb-show-more" class='btn-circle btn-primary btn-sm'>
+  <div
+    id="stb-show"
+    class="grid translate-x-full grid-cols-1 gap-2 pr-4 duration-500 ease-in-out"
+    inert
+  >
+    <Button id="stb-show-more" class="btn-circle btn-primary btn-sm">
       <Icon name="material-symbols:settings-rounded" class="animate-spin" />
     </Button>
     {
       articleConfig.toc && (
-        <Button id="stb-toc" class="hidden xl:!hidden btn-circle btn-primary btn-sm">
-          <Icon name="material-symbols:toc-rounded" />
-        </Button>
-        <div id="stb-toc-wrapper" class="absolute scale-0 hidden duration-300 bottom-10 max-w-72 w-[calc(100vw-4rem)]"></div>
+        <Fragment>
+          <Button id="stb-toc" class="btn-circle btn-primary btn-sm hidden xl:!hidden">
+            <Icon name="material-symbols:toc-rounded" />
+          </Button>
+          <div
+            id="stb-toc-wrapper"
+            class="absolute bottom-10 hidden w-[calc(100vw-4rem)] max-w-72 scale-0 duration-300"
+          />
+        </Fragment>
       )
     }
-    <Button id="stb-back-to-top" class='group btn-circle btn-primary btn-sm'>
+    <Button id="stb-back-to-top" class="group btn-circle btn-primary btn-sm">
       <span
         id="stb-read-percentage"
         class="absolute text-sm opacity-0 duration-300 group-hover:opacity-0"></span>
@@ -112,4 +125,3 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
 
   document.addEventListener('astro:page-load', initSideToolBar);
 </script>
-

@@ -46,7 +46,7 @@ const siteLang = lang.replace('_', '-');
 
     <slot name="head" />
   </head>
-  <body class="bg-base-100 text-base-content flex min-h-screen flex-col">
+  <body class="flex min-h-screen flex-col bg-base-100 text-base-content">
     <slot />
   </body>
 </html>

@@ -151,22 +151,22 @@ article {
   code:not(pre code) {
     padding: 0 0.25rem;
 
-    @apply text-primary bg-primary/10 rounded-md;
+    @apply rounded-md bg-primary/10 text-primary;
   }
 
   // 引用块样式
   blockquote {
     padding: 0.25rem 0.25rem 0.25rem 0.75rem;
 
-    @apply border-primary bg-primary/10 rounded-sm border-l-4;
+    @apply rounded-sm border-l-4 border-primary bg-primary/10;
   }
 
   // 折叠块样式
   details {
-    @apply border-base-300 w-full overflow-hidden rounded-xl border-2 duration-300;
+    @apply w-full overflow-hidden rounded-xl border-2 border-base-300 duration-300;
 
     summary {
-      @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-2xl duration-300;
+      @apply w-full px-3 py-1 text-start text-2xl duration-300 hover:bg-primary/50;
 
       &::marker {
         margin-right: 1.5rem;

@@ -33,10 +33,10 @@
 
     // 文本框输入样式
     .el-textarea {
-      @apply border-base-300 relative w-full overflow-hidden rounded-xl border-2 pb-9;
+      @apply relative w-full overflow-hidden rounded-xl border-2 border-base-300 pb-9;
 
       textarea {
-        @apply bg-base-200/50 w-full p-4;
+        @apply w-full bg-base-200/50 p-4;
 
         resize: none;
 
@@ -50,7 +50,7 @@
       }
 
       .el-input__count {
-        @apply text-base-content/50 absolute bottom-2 right-10 text-sm;
+        @apply absolute bottom-2 right-10 text-sm text-base-content/50;
       }
     }
 
@@ -71,7 +71,7 @@
       }
 
       button {
-        @apply border-base-300 bg-primary absolute py-[0.95rem] md:py-[0.3rem];
+        @apply absolute border-base-300 bg-primary py-[0.95rem] md:py-[0.3rem];
 
         &.tk-preview {
           @apply bottom-[3.7rem] right-0 md:bottom-0 md:right-[3.35rem];
@@ -100,20 +100,20 @@
         }
 
         &.tk-cancel {
-          @apply bg-error text-error-content bottom-[2.4rem] right-0 md:bottom-0 md:right-[6.7rem];
+          @apply bottom-[2.4rem] right-0 bg-error text-error-content md:bottom-0 md:right-[6.7rem];
         }
       }
     }
 
     .tk-preview-container {
-      @apply border-base-300 bg-base-100 mt-2 w-full rounded-xl border-2 p-2;
+      @apply mt-2 w-full rounded-xl border-2 border-base-300 bg-base-100 p-2;
     }
   }
 
   // 表情框样式
   .OwO-body {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
-    @apply bg-base-200/50 border-base-300 absolute -left-3 top-9 z-20 hidden w-[calc(100vw-3rem)] max-w-[30rem] rounded-xl border-2 duration-300;
+    @apply absolute -left-3 top-9 z-20 hidden w-[calc(100vw-3rem)] max-w-[30rem] rounded-xl border-2 border-base-300 bg-base-200/50 duration-300;
   }
 
   .OwO-open .OwO-body {
@@ -144,7 +144,7 @@
     @apply flex flex-wrap items-center text-nowrap px-4;
 
     > li {
-      @apply hover:bg-primary/50 flex h-8 cursor-pointer items-center px-3 text-center duration-300;
+      @apply flex h-8 cursor-pointer items-center px-3 text-center duration-300 hover:bg-primary/50;
 
       &.OwO-package-active {
         @apply bg-primary/50;
@@ -173,7 +173,7 @@
     }
 
     > .tk-comment {
-      @apply max-md:bg-base-200/50 max-md:border-base-300 p-4 max-md:rounded-xl max-md:border-2;
+      @apply p-4 max-md:rounded-xl max-md:border-2 max-md:border-base-300 max-md:bg-base-200/50;
 
       > .tk-avatar {
         @apply top-3;
@@ -190,7 +190,7 @@
 
     // 详细样式
     .tk-avatar {
-      @apply border-base-300 absolute top-0 h-8 min-h-8 w-8 min-w-8 overflow-hidden rounded-full border-2;
+      @apply absolute top-0 h-8 min-h-8 w-8 min-w-8 overflow-hidden rounded-full border-2 border-base-300;
     }
 
     .tk-main > .tk-row {
@@ -199,7 +199,7 @@
 
     .tk-meta {
       a {
-        @apply hover:text-primary duration-300;
+        @apply duration-300 hover:text-primary;
       }
 
       small {
@@ -218,7 +218,7 @@
 
     .tk-action {
       .tk-action-link {
-        @apply border-base-300 relative flex items-center justify-center rounded-xl border-2 px-2 py-1 text-center duration-300;
+        @apply relative flex items-center justify-center rounded-xl border-2 border-base-300 px-2 py-1 text-center duration-300;
 
         .tk-action-icon-solid {
           @apply absolute left-2 opacity-0 duration-300;
@@ -254,7 +254,7 @@
       @apply flex flex-row gap-3;
 
       .tk-extra {
-        @apply text-base-content/50 border-base-300 flex flex-row items-center justify-center gap-2 rounded-md border-2 p-1 text-center text-xs;
+        @apply flex flex-row items-center justify-center gap-2 rounded-md border-2 border-base-300 p-1 text-center text-xs text-base-content/50;
       }
 
       .tk-icon {
@@ -264,7 +264,7 @@
 
     .tk-replies .tk-content > span:first-child {
       // 回复提示（回复：xxx）样式
-      @apply text-base-content/50 text-xs;
+      @apply text-xs text-base-content/50;
     }
 
     .tk-expand-wrap,
@@ -273,25 +273,25 @@
     }
 
     .tk-expand {
-      @apply bg-base-200/50 hover:bg-primary/50 w-full cursor-pointer rounded-md py-1 text-sm duration-300;
+      @apply w-full cursor-pointer rounded-md bg-base-200/50 py-1 text-sm duration-300 hover:bg-primary/50;
     }
   }
 
   // 图标样式
   .tk-submit-action-icon {
-    @apply fill-primary inline-block max-h-6 min-h-6 min-w-6 max-w-6 cursor-pointer;
+    @apply inline-block max-h-6 min-h-6 min-w-6 max-w-6 cursor-pointer fill-primary;
   }
 
   .tk-action-icon {
-    @apply fill-primary inline-block max-h-5 min-h-5 min-w-5 max-w-5 overflow-clip;
+    @apply inline-block max-h-5 min-h-5 min-w-5 max-w-5 overflow-clip fill-primary;
   }
 
   .tk-icon {
-    @apply fill-primary inline-block max-h-4 min-h-4 min-w-4 max-w-4 overflow-clip;
+    @apply inline-block max-h-4 min-h-4 min-w-4 max-w-4 overflow-clip fill-primary;
   }
 
   .tk-tag {
-    @apply border-base-300 rounded-lg border-2 p-1 text-xs;
+    @apply rounded-lg border-2 border-base-300 p-1 text-xs;
   }
 }
 
@@ -314,7 +314,7 @@
     @apply relative flex h-full w-full items-center justify-center text-center;
 
     .tk-admin-close {
-      @apply fill-primary absolute right-2 top-[0.65rem] z-50 h-8 w-8;
+      @apply absolute right-2 top-[0.65rem] z-50 h-8 w-8 fill-primary;
     }
 
     > div {
@@ -342,18 +342,18 @@
       }
 
       a {
-        @apply border-base-300 bg-base-200/50 hover:bg-primary mx-6 rounded-xl border-2 px-3 py-1 text-xs duration-300;
+        @apply mx-6 rounded-xl border-2 border-base-300 bg-base-200/50 px-3 py-1 text-xs duration-300 hover:bg-primary;
       }
     }
 
     .tk-tabs {
-      @apply border-base-300 flex flex-row items-center justify-between border-b-2 px-4 text-center text-lg;
+      @apply flex flex-row items-center justify-between border-b-2 border-base-300 px-4 text-center text-lg;
 
       .tk-tab {
-        @apply hover:bg-primary w-full cursor-pointer py-1 duration-300;
+        @apply w-full cursor-pointer py-1 duration-300 hover:bg-primary;
 
         &.__active {
-          @apply border-primary border-b-2;
+          @apply border-b-2 border-primary;
         }
       }
     }
@@ -378,7 +378,7 @@
         @apply w-full;
 
         input {
-          @apply border-base-300 bg-base-200/50 w-full rounded-xl border-2 px-2 py-1;
+          @apply w-full rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
 
           &:focus {
             outline: none;
@@ -387,7 +387,7 @@
       }
 
       select {
-        @apply border-base-300 bg-base-200/50 w-1/4 rounded-xl border-2 p-2;
+        @apply w-1/4 rounded-xl border-2 border-base-300 bg-base-200/50 p-2;
       }
     }
 
@@ -396,23 +396,23 @@
     }
 
     .tk-admin-comment-item {
-      @apply border-base-300 border-b-2 py-1;
+      @apply border-b-2 border-base-300 py-1;
     }
 
     .tk-admin-comment-meta {
       @apply flex flex-row flex-wrap items-center gap-2 text-start;
 
       .tk-avatar {
-        @apply border-base-300 h-8 w-8 overflow-hidden rounded-full border-2;
+        @apply h-8 w-8 overflow-hidden rounded-full border-2 border-base-300;
       }
 
       a {
-        @apply hover:text-primary duration-300;
+        @apply duration-300 hover:text-primary;
       }
 
       span:last-child,
       .tk-time {
-        @apply text-base-content/50 text-sm;
+        @apply text-sm text-base-content/50;
       }
     }
 
@@ -424,7 +424,7 @@
       }
 
       input {
-        @apply border-base-300 bg-base-200/50 w-16 rounded-xl border-2 px-2 py-1;
+        @apply w-16 rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
 
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
@@ -442,7 +442,7 @@
     }
 
     .tk-pagination-pager {
-      @apply hover:bg-primary cursor-pointer rounded-md px-2 py-1;
+      @apply cursor-pointer rounded-md px-2 py-1 hover:bg-primary;
 
       &.__current {
         @apply bg-primary;
@@ -459,10 +459,10 @@
     }
 
     details {
-      @apply border-base-300 w-full overflow-hidden rounded-xl border-2 duration-300;
+      @apply w-full overflow-hidden rounded-xl border-2 border-base-300 duration-300;
 
       summary {
-        @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-2xl duration-300;
+        @apply w-full px-3 py-1 text-start text-2xl duration-300 hover:bg-primary/50;
 
         &::marker {
           margin-right: 1.5rem;
@@ -486,7 +486,7 @@
       }
 
       input {
-        @apply border-base-300 bg-base-200/50 w-full rounded-xl border-2 px-2 py-1;
+        @apply w-full rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
 
         &:focus {
           outline: none;
@@ -494,7 +494,7 @@
       }
 
       .tk-admin-config-desc {
-        @apply text-base-content/50 whitespace-pre-wrap text-start text-sm;
+        @apply whitespace-pre-wrap text-start text-sm text-base-content/50;
       }
     }
 
@@ -507,11 +507,11 @@
       }
 
       select {
-        @apply border-base-300 bg-base-200/50 w-full rounded-xl border-2 p-2;
+        @apply w-full rounded-xl border-2 border-base-300 bg-base-200/50 p-2;
       }
 
       input {
-        @apply border-base-300 bg-base-200/50 w-full rounded-xl border-2 px-2 py-1;
+        @apply w-full rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
 
         &:focus {
           outline: none;
@@ -522,7 +522,7 @@
         @apply h-full w-full;
 
         textarea {
-          @apply border-base-300 bg-base-200/50 h-full w-full rounded-xl border-2 px-2 py-1;
+          @apply h-full w-full rounded-xl border-2 border-base-300 bg-base-200/50 px-2 py-1;
 
           &:focus {
             outline: none;
@@ -539,10 +539,10 @@
 }
 
 .el-input-group {
-  @apply bg-base-200/50 border-base-300 flex w-full flex-row items-center overflow-hidden rounded-xl border-2 text-sm;
+  @apply flex w-full flex-row items-center overflow-hidden rounded-xl border-2 border-base-300 bg-base-200/50 text-sm;
 
   div {
-    @apply bg-primary/50 w-fit whitespace-nowrap px-2 py-1;
+    @apply w-fit whitespace-nowrap bg-primary/50 px-2 py-1;
   }
 
   input {
@@ -559,7 +559,7 @@
 }
 
 .el-button {
-  @apply border-base-300 bg-primary text-nowrap rounded-xl border-2 px-2 py-1 text-center text-sm duration-300;
+  @apply text-nowrap rounded-xl border-2 border-base-300 bg-primary px-2 py-1 text-center text-sm duration-300;
 
   &:not(.is-disabled) {
     @apply hover:scale-105 hover:brightness-110 active:scale-95 active:brightness-90;
@@ -609,7 +609,7 @@
     }
 
     .copy-to-clipboard-button {
-      @apply border-base-300 bg-primary rounded-md border-2 px-2 py-1 opacity-0 duration-300;
+      @apply rounded-md border-2 border-base-300 bg-primary px-2 py-1 opacity-0 duration-300;
     }
 
     &:hover .copy-to-clipboard-button {
@@ -624,7 +624,7 @@
   code:not(pre code) {
     padding: 0 0.25rem;
 
-    @apply text-primary bg-primary/10 rounded-md;
+    @apply rounded-md bg-primary/10 text-primary;
   }
 
   // 媒体元素
@@ -651,15 +651,15 @@
   blockquote {
     padding: 0.25rem 0.25rem 0.25rem 0.75rem;
 
-    @apply border-primary bg-primary/10 my-2 rounded-sm border-l-4;
+    @apply my-2 rounded-sm border-l-4 border-primary bg-primary/10;
   }
 
   // 折叠块样式
   details {
-    @apply border-base-300 w-full overflow-hidden rounded-xl border-2 duration-300;
+    @apply w-full overflow-hidden rounded-xl border-2 border-base-300 duration-300;
 
     summary {
-      @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-2xl duration-300;
+      @apply w-full px-3 py-1 text-start text-2xl duration-300 hover:bg-primary/50;
 
       &::marker {
         margin-right: 1.5rem;