Update index.html

index.html

@@ -33,15 +33,17 @@
       animation: fadeInDown 1.2s cubic-bezier(.18,.89,.32,1.28);
     }
     .modern-title .hf-logo {
-      height: 2.7rem;
-      width: 2.7rem;
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 10px;
-      background: transparent;
-      border-radius: 50%;
-      box-shadow: 0 2px 12px #0005;
-      padding: 0;
+      display: flex;
+      align-items: center;
+      height: 2.8rem;
+      width: 2.8rem;
+      margin-right: 4px;
+      flex-shrink: 0;
+    }
+    .modern-title .hf-logo img, .modern-title .hf-logo svg {
+      height: 100%;
+      width: 100%;
+      display: block;
     }
     .star-call {
       margin-bottom: 34px;
@@ -102,7 +104,7 @@
     .heatmap-card {
       background: linear-gradient(135deg, #232526 0%, #2c3e50 100%);
       border-radius: 24px;
-      box-shadow: 0 8px 36px #0007,       0 1.5px 8px #00c3ff44;
+      box-shadow: 0 8px 36px #0007, 0 1.5px 8px #00c3ff44;
       padding: 24px 18px 18px 18px;
       display: flex;
       flex-direction: column;
@@ -218,6 +220,10 @@
       .search-row input[type="text"] {
         width: 120px;
       }
+      .modern-title .hf-logo {
+        height: 2rem;
+        width: 2rem;
+      }
     }
     /* Animations */
     @keyframes fadeInDown {
@@ -246,7 +252,7 @@
   <div class="container">
     <h1 class="modern-title">
       <span class="hf-logo">
-        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face" style="height:2.7rem;width:2.7rem;vertical-align:middle;">
+        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face">
       </span>
       My Hugging Face Heatmaps
     </h1>