Update index.html

index.html

@@ -11,46 +11,36 @@
       color: #333;
       margin: 0;
       padding: 0;
-      overflow-x: scroll;
-      scrollbar-width: thin;
-      -ms-overflow-style: -ms-autohiding-scrollbar;
     }
-    .timeline {
-      display: flex;
-      flex-direction: row;
-      padding: 20px;
-      gap: 10px;
+
+    .timeline-container {
+      width: 100%;
       overflow-x: auto;
+      overflow-y: hidden;
+      padding: 20px;
+      box-sizing: border-box;
     }
-    .month {
+
+    .timeline {
       display: flex;
-      flex-direction: column;
-      gap: 10px;
-      width: 300px;
-      flex: 0 0 300px;
-    }
-    .month h3 {
-      margin: 0;
-      padding: 10px;
-      background-color: #6200ea;
-      color: white;
-      border-radius: 5px;
-      text-align: center;
+      flex-direction: row;
+      gap: 20px;
+      min-width: min-content;
+      padding-bottom: 10px;
     }
+
     .event {
-      background-color: white;
-      padding: 10px;
-      border-radius: 5px;
+      flex: 0 0 300px;
+      background: white;
+      border-radius: 8px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      position: relative;
+      padding: 15px;
       transition: all 0.3s ease;
     }
-    
+
     .event:has(.tag.best) {
       background-color: #fff8e1;
       border-left: 4px solid #ffd700;
-      transform: scale(1.02);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
     }
     
     .event:has(.tag.new) {
@@ -58,19 +48,22 @@
       border-left: 4px solid #ff4081;
     }
     
-    .event:has(.tag.best):hover {
-      transform: scale(1.03);
-      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    .event:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }
+
     .event h4 {
       margin: 0;
       font-size: 14px;
     }
+
     .event p {
       margin: 5px 0 0;
       font-size: 12px;
       color: #666;
     }
+
     .tag {
       display: inline-block;
       padding: 2px 5px;
@@ -79,21 +72,38 @@
       margin-top: 5px;
       margin-right: 3px;
     }
+
     .tag.best {
       background-color: #FFD700;
       color: black;
     }
+
     .tag.new {
       background-color: #FF4081;
       color: white;
     }
+
+    .tag.text { background-color: #9c27b0; color: white; }
+    .tag.audio { background-color: #ff9800; color: white; }
+    .tag.vision { background-color: #03a9f4; color: white; }
+    .tag.multimodal { background-color: #795548; color: white; }
+    .tag.video { background-color: #E91E63; color: white; }
+    .tag.image { background-color: #00BCD4; color: white; }
+    .tag.utility { background-color: #9E9E9E; color: white; }
+    .tag.predict { background-color: #673AB7; color: white; }
+    .tag.game { background-color: #4CAF50; color: white; }
+    .tag.education { background-color: #3F51B5; color: white; }
+    .tag.announcement { background-color: #607d8b; color: white; }
+
     .event p a {
       color: #4caf50;
       text-decoration: none;
     }
+
     .event p a:hover {
       text-decoration: underline;
     }
+
     .github-link {
       text-align: center;
       padding: 8px;
@@ -101,43 +111,33 @@
       color: white;
       font-size: 14px;
     }
+
     .github-link a {
       color: white;
       text-decoration: none;
     }
+
     .github-link a:hover {
       text-decoration: underline;
     }
     
-    body::-webkit-scrollbar {
+    .timeline-container::-webkit-scrollbar {
       height: 8px;
     }
 
-    body::-webkit-scrollbar-track {
+    .timeline-container::-webkit-scrollbar-track {
       background: #f1f1f1;
     }
 
-    body::-webkit-scrollbar-thumb {
+    .timeline-container::-webkit-scrollbar-thumb {
       background: #888;
       border-radius: 4px;
     }
 
-    body::-webkit-scrollbar-thumb:hover {
+    .timeline-container::-webkit-scrollbar-thumb:hover {
       background: #555;
     }
 
-    .tag.text { background-color: #9c27b0; color: white; }
-    .tag.audio { background-color: #ff9800; color: white; }
-    .tag.vision { background-color: #03a9f4; color: white; }
-    .tag.multimodal { background-color: #795548; color: white; }
-    .tag.video { background-color: #E91E63; color: white; }
-    .tag.image { background-color: #00BCD4; color: white; }
-    .tag.utility { background-color: #9E9E9E; color: white; }
-    .tag.predict { background-color: #673AB7; color: white; }
-    .tag.game { background-color: #4CAF50; color: white; }
-    .tag.education { background-color: #3F51B5; color: white; }
-    .tag.announcement { background-color: #607d8b; color: white; }
-
     .filter-group {
       display: flex;
       flex-direction: column;
@@ -184,10 +184,6 @@
       flex-wrap: wrap;
     }
 
-    .category-group .toggle-button {
-      background-color: #f5f5f5;
-    }
-
     .toggle-button[data-filter="best"] { background-color: #FFD700; color: black; }
     .toggle-button[data-filter="new"] { background-color: #FF4081; color: white; }
     .toggle-button[data-filter="text"] { background-color: #9c27b0; color: white; }
@@ -218,6 +214,15 @@
       margin: 0 10px;
       color: #ddd;
     }
+
+    .section-title {
+      text-align: center;
+      padding: 15px;
+      color: white;
+      background-color: #6200ea;
+      margin: 0;
+      font-size: 18px;
+    }
   </style>
 </head>
 <body>
@@ -252,9 +257,9 @@
       <span id="new-count">0</span> NEW
     </span>
   </div>
-  <div class="timeline">
-    <div class="month">
-      <h3>Latest Models</h3>
+  <h2 class="section-title">Latest Models</h2>
+  <div class="timeline-container">
+    <div class="timeline">
       <div class="event">
         <h4>OpenBMB PRIME</h4>
         <p>o1 like Eurus 2 7B (<a href="https://huggingface.co/PRIME-RL/Eurus-2-7B-PRIME" target="_blank">link</a>).</p>
@@ -285,9 +290,7 @@
     }
 
     let currentFilters = {
-      category: 'all',
-      modality: 'all',
-      type: 'all'
+      category: 'all'
     };
 
     function filterByCategory(category) {
@@ -313,14 +316,6 @@
         event.style.display = matchesCategory ? 'block' : 'none';
       });
 
-      const months = document.querySelectorAll('.month');
-      months.forEach(month => {
-        const visibleEvents = Array.from(month.querySelectorAll('.event')).filter(event => 
-          event.style.display !== 'none'
-        );
-        month.style.display = visibleEvents.length > 0 ? 'flex' : 'none';
-      });
-
       updateCounts();
     }