chore: update github badge style

web/src/components/GitHubBadge.tsx

@@ -13,18 +13,17 @@ const GitHubBadge: React.FC<Props> = () => {
     });
   }, []);
 
-  const handleClick = () => {
-    window.location.href = "https://github.com/usememos/memos";
-  };
-
   return (
-    <div className="github-badge-container" onClick={handleClick}>
+    <a className="github-badge-container" href="https://github.com/usememos/memos">
       <div className="github-icon">
         <img className="icon-img" src="/github.webp" alt="" />
         Star
       </div>
-      <span className={`count-text ${starCount || "pulse"}`}>{starCount || "🌟"}</span>
+      <div className="count-text">
+        {starCount || ""}
+        <span className="icon-text">🌟</span>
       </div>
+    </a>
   );
 };
 

web/src/less/github-badge.less

@@ -10,29 +10,25 @@
   }
 
   > .count-text {
-    @apply px-3 text-xs font-bold text-gray-800;
+    @apply w-auto h-full flex flex-row justify-center items-center px-3 text-xs font-bold text-gray-800;
 
-    &.pulse {
+    > .icon-text {
-      @apply text-sm;
+      @apply text-sm ml-1;
-      animation: 1s linear 0s infinite pulse;
+      animation: 1.6s linear 0s infinite pulse;
     }
+  }
+}
 
-    @keyframes pulse {
+@keyframes pulse {
   0% {
-        margin-bottom: 0px;
+    transform: scale(0.95);
-      }
-      30% {
-        margin-bottom: 2px;
-      }
-      60% {
-        margin-bottom: 6px;
   }
+
   70% {
-        margin-bottom: 3px;
+    transform: scale(1.2);
   }
+
   100% {
-        margin-bottom: 0px;
+    transform: scale(0.95);
-      }
-    }
   }
 }