Improve leaderboard readability and resource links

assets/logos/README.md

@@ -8,3 +8,13 @@ Google and OpenAI SVG icons were copied from the Simple Icons 15.15.0 release:
 The Qwen mark in `qwen.jpg` is the official artwork linked from the [QwenLM/Qwen repository](https://github.com/QwenLM/Qwen) and hosted at https://qianwen-res.oss-cn-beijing.aliyuncs.com/logo_qwen.jpg. It is included only to identify the Qwen model provider; applicable trademark rights remain with their owner.
 
 Simple Icons distributes the Google and OpenAI icon artwork under CC0 1.0; this does not grant trademark rights. AVI-Bench uses all marks only to identify the listed model providers, at equal visual weight and without implying endorsement or affiliation. See each provider's current brand guidelines for its trademark terms.
+
+# Resource navigation icons
+
+The `../icons/` files are copied from Simple Icons 15.15.0:
+
+- arXiv: https://github.com/simple-icons/simple-icons/blob/15.15.0/icons/arxiv.svg
+- GitHub: https://github.com/simple-icons/simple-icons/blob/15.15.0/icons/github.svg
+- Hugging Face: https://github.com/simple-icons/simple-icons/blob/15.15.0/icons/huggingface.svg
+
+The icons are used only to identify the Paper, Project, and Dataset destinations. Simple Icons artwork is distributed under CC0 1.0, but this does not grant trademark rights or imply affiliation or endorsement.

index.html

@@ -26,15 +26,15 @@
       background: var(--canvas);
       color: var(--ink);
       font-family: var(--sans);
-      font-size: 14px;
+      font-size: 15px;
       line-height: 1.5;
     }
     a { color: inherit; }
     button { font: inherit; }
-    .container { width: min(1320px, calc(100% - 48px)); margin: 0 auto; }
+    .container { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
     .topbar { border-bottom: 1px solid var(--line); background: var(--surface); }
     .topbar-inner {
-      min-height: 68px;
+      min-height: 76px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -42,8 +42,8 @@
     }
     .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
     .brand-mark {
-      width: 34px;
-      height: 34px;
+      width: 38px;
+      height: 38px;
       display: grid;
       place-items: center;
       border-radius: 8px;
@@ -53,11 +53,20 @@
       font-weight: 800;
       letter-spacing: .04em;
     }
-    .brand-name { display: block; font-size: 14px; font-weight: 750; letter-spacing: -.02em; }
-    .brand-description { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; }
-    .top-actions { display: flex; align-items: center; gap: 18px; }
-    .resource-link { color: var(--muted); font-size: 12px; text-decoration: none; }
-    .resource-link:hover { color: var(--ink); }
+    .brand-name { display: block; font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
+    .brand-description { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
+    .top-actions { display: flex; align-items: center; gap: 20px; }
+    .resource-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      color: #354054;
+      font-size: 15px;
+      font-weight: 620;
+      text-decoration: none;
+    }
+    .resource-link:hover { color: var(--accent); }
+    .resource-icon { display: block; width: 18px; height: 18px; flex: none; }
     .submit-link {
       display: inline-flex;
       align-items: center;
@@ -77,19 +86,19 @@
       outline-offset: 2px;
     }
 
-    main { padding: 42px 0 30px; }
+    main { padding: 48px 0 34px; }
     .page-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
     .eyebrow {
       margin: 0 0 7px;
       color: var(--accent);
-      font-size: 10px;
+      font-size: 12px;
       font-weight: 750;
       letter-spacing: .12em;
       text-transform: uppercase;
     }
-    h1 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); font-weight: 720; letter-spacing: -.045em; line-height: 1.12; }
-    .intro-copy { max-width: 650px; margin: 10px 0 0; color: var(--muted); font-size: 14px; }
-    .intro-meta { flex: none; padding-bottom: 2px; color: var(--muted); font-size: 11px; text-align: right; }
+    h1 { margin: 0; font-size: clamp(32px, 3.6vw, 44px); font-weight: 720; letter-spacing: -.045em; line-height: 1.12; }
+    .intro-copy { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: 15px; }
+    .intro-meta { flex: none; padding-bottom: 2px; color: var(--muted); font-size: 13px; text-align: right; }
     .intro-meta strong { color: var(--ink); font-weight: 700; }
 
     .score-section + .score-section { margin-top: 38px; }
@@ -100,10 +109,10 @@
       gap: 18px;
       margin-bottom: 12px;
     }
-    .section-kicker { margin: 0 0 3px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
-    h2 { margin: 0; font-size: 18px; font-weight: 680; letter-spacing: -.025em; }
-    .section-description { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
-    .record-count { color: var(--muted); font-size: 11px; white-space: nowrap; }
+    .section-kicker { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+    h2 { margin: 0; font-size: 21px; font-weight: 680; letter-spacing: -.025em; }
+    .section-description { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
+    .record-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
     .table-frame {
       overflow: hidden;
       border: 1px solid var(--line);
@@ -112,18 +121,18 @@
       box-shadow: 0 2px 8px rgba(22, 33, 57, .025);
     }
     .table-scroll { overflow-x: auto; }
-    table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 12px; }
-    th, td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
+    table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13px; }
+    th, td { padding: 14px 14px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
     th {
-      height: 42px;
+      height: 48px;
       background: #fafbfc;
       color: #626e80;
-      font-size: 10px;
+      font-size: 12px;
       font-weight: 700;
       letter-spacing: .035em;
     }
     th:first-child, td:first-child { width: 58px; }
-    th:nth-child(2), td:nth-child(2) { min-width: 225px; text-align: left; }
+    th:nth-child(2), td:nth-child(2) { min-width: 240px; text-align: left; }
     tbody tr.data-row:hover td { background: #fbfcfe; }
     tbody tr:last-child td { border-bottom: 0; }
     .sort-button {
@@ -147,11 +156,11 @@
     .sort-mark { width: 9px; color: #a2aab7; font-size: 10px; }
     .sort-button[aria-sort="ascending"] .sort-mark,
     .sort-button[aria-sort="descending"] .sort-mark { color: var(--accent); }
-    .rank-value { color: #536074; font-variant-numeric: tabular-nums; font-weight: 650; }
+    .rank-value { color: #536074; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 650; }
     .model-cell { display: flex; align-items: center; gap: 10px; }
     .provider-logo, .provider-fallback {
-      width: 30px;
-      height: 30px;
+      width: 34px;
+      height: 34px;
       flex: none;
       display: grid;
       place-items: center;
@@ -159,15 +168,15 @@
       border-radius: 7px;
       background: #fff;
     }
-    .provider-logo img { display: block; width: 19px; height: 19px; object-fit: contain; }
+    .provider-logo img { display: block; width: 21px; height: 21px; object-fit: contain; }
     .provider-logo-qwen { overflow: hidden; }
-    .provider-logo-qwen img { width: 22px; height: 20px; object-fit: cover; object-position: left center; }
-    .provider-fallback { color: var(--muted); font-size: 10px; font-weight: 750; }
+    .provider-logo-qwen img { width: 24px; height: 22px; object-fit: cover; object-position: left center; }
+    .provider-fallback { color: var(--muted); font-size: 11px; font-weight: 750; }
     .model-info { min-width: 0; }
-    .model-name { display: block; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; }
-    .model-provider { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }
+    .model-name { display: block; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 700; text-overflow: ellipsis; }
+    .model-provider { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
     .score { color: #3b4658; font-variant-numeric: tabular-nums; }
-    .score-overall { color: var(--accent); font-size: 12px; font-weight: 750; }
+    .score-overall { color: var(--accent); font-size: 15px; font-weight: 750; }
     .empty-cell, .error-cell { padding: 24px; color: var(--muted); text-align: center !important; }
     .error-cell { color: #9a3535; }
     .provenance-note {
@@ -176,7 +185,7 @@
       gap: 20px;
       margin: 22px 0 0;
       color: var(--muted);
-      font-size: 10px;
+      font-size: 12px;
     }
     footer { margin-top: 32px; border-top: 1px solid var(--line); background: var(--surface); }
     .footer-inner {
@@ -186,17 +195,17 @@
       justify-content: space-between;
       gap: 16px;
       color: var(--muted);
-      font-size: 10px;
+      font-size: 12px;
     }
     .footer-links { display: none; gap: 14px; }
-    .footer-links a { color: var(--muted); text-decoration: none; }
+    .footer-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; text-decoration: none; }
     .footer-links a:hover { color: var(--accent); }
 
     @media (max-width: 700px) {
-      .container { width: min(100% - 28px, 1320px); }
+      .container { width: min(100% - 28px, 1440px); }
       .topbar-inner { min-height: 62px; }
       .brand-description, .resource-link { display: none; }
-      .footer-links { display: flex; }
+      .footer-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
       main { padding-top: 30px; }
       .page-intro { align-items: start; flex-direction: column; gap: 10px; margin-bottom: 24px; }
       .intro-meta { text-align: left; }
@@ -225,9 +234,9 @@
         </span>
       </a>
       <nav class="top-actions" aria-label="Project links">
-        <a class="resource-link" href="https://arxiv.org/abs/2606.07643" target="_blank" rel="noopener noreferrer">Paper</a>
-        <a class="resource-link" href="https://github.com/FudanCVL/AVI-Bench" target="_blank" rel="noopener noreferrer">Project</a>
-        <a class="resource-link" href="https://huggingface.co/datasets/FudanCVL/AVIBench" target="_blank" rel="noopener noreferrer">Dataset</a>
+        <a class="resource-link" href="https://arxiv.org/abs/2606.07643" target="_blank" rel="noopener noreferrer"><img class="resource-icon" src="./assets/icons/arxiv.svg" alt="" aria-hidden="true">Paper</a>
+        <a class="resource-link" href="https://github.com/FudanCVL/AVI-Bench" target="_blank" rel="noopener noreferrer"><img class="resource-icon" src="./assets/icons/github.svg" alt="" aria-hidden="true">Project</a>
+        <a class="resource-link" href="https://huggingface.co/datasets/FudanCVL/AVIBench" target="_blank" rel="noopener noreferrer"><img class="resource-icon" src="./assets/icons/huggingface.svg" alt="" aria-hidden="true">Dataset</a>
         <a class="submit-link" href="https://huggingface.co/spaces/FudanCVL/AVI-Bench/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Submit results <span aria-hidden="true">&nbsp;↗</span></a>
       </nav>
     </div>
@@ -293,9 +302,9 @@
     <div class="container footer-inner">
       <span>AVI-Bench · Community leaderboard</span>
       <nav class="footer-links" aria-label="Related resources">
-        <a href="https://arxiv.org/abs/2606.07643" target="_blank" rel="noopener noreferrer">Paper</a>
-        <a href="https://github.com/FudanCVL/AVI-Bench" target="_blank" rel="noopener noreferrer">Project</a>
-        <a href="https://huggingface.co/datasets/FudanCVL/AVIBench" target="_blank" rel="noopener noreferrer">Dataset</a>
+        <a href="https://arxiv.org/abs/2606.07643" target="_blank" rel="noopener noreferrer"><img class="resource-icon" src="./assets/icons/arxiv.svg" alt="" aria-hidden="true">Paper</a>
+        <a href="https://github.com/FudanCVL/AVI-Bench" target="_blank" rel="noopener noreferrer"><img class="resource-icon" src="./assets/icons/github.svg" alt="" aria-hidden="true">Project</a>
+        <a href="https://huggingface.co/datasets/FudanCVL/AVIBench" target="_blank" rel="noopener noreferrer"><img class="resource-icon" src="./assets/icons/huggingface.svg" alt="" aria-hidden="true">Dataset</a>
       </nav>
     </div>
   </footer>