Skip to content

Commit 9f39ad9

Browse files
gamemaker1gamemaker1
committed
feat: css fixes for leaderboard
1 parent 5ad01c0 commit 9f39ad9

File tree

3 files changed

+138
-31
lines changed

3 files changed

+138
-31
lines changed

‎docs/bench/leaderboard.md‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -178,12 +178,12 @@
178178

179179

180180
<tr class="table-row transition-colors">
181-
<td class="px-6 py-4">
181+
<td class="px-6 py-4 text-center">
182182
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm rank-1">
183183
1
184184
</div>
185185
</td>
186-
<td class="px-6 py-4">
186+
<td class="px-6 py-4 text-center">
187187
<div class="font-mono font-semibold text-gray-900 dark:text-white">gemma3:27b</div>
188188
</td>
189189
<!-- <td class="px-6 py-4"> -->
@@ -197,7 +197,7 @@
197197
<td class="px-6 py-4 text-center">
198198
<div class="text-lg font-semibold text-gray-900 dark:text-white">95.5%</div>
199199
</td>
200-
<td class="px-6 py-4">
200+
<td class="px-6 py-4 text-center">
201201
<div class="flex items-center justify-center gap-4 text-sm">
202202
<span class="text-green-600 dark:text-green-400 font-medium">21</span>
203203
<span class="text-red-600 dark:text-red-400 font-medium">1</span>
@@ -217,12 +217,12 @@
217217

218218

219219
<tr class="table-row transition-colors">
220-
<td class="px-6 py-4">
220+
<td class="px-6 py-4 text-center">
221221
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm rank-2">
222222
2
223223
</div>
224224
</td>
225-
<td class="px-6 py-4">
225+
<td class="px-6 py-4 text-center">
226226
<div class="font-mono font-semibold text-gray-900 dark:text-white">gemma3:12b</div>
227227
</td>
228228
<!-- <td class="px-6 py-4"> -->
@@ -236,7 +236,7 @@
236236
<td class="px-6 py-4 text-center">
237237
<div class="text-lg font-semibold text-gray-900 dark:text-white">77.3%</div>
238238
</td>
239-
<td class="px-6 py-4">
239+
<td class="px-6 py-4 text-center">
240240
<div class="flex items-center justify-center gap-4 text-sm">
241241
<span class="text-green-600 dark:text-green-400 font-medium">17</span>
242242
<span class="text-red-600 dark:text-red-400 font-medium">5</span>
@@ -256,12 +256,12 @@
256256

257257

258258
<tr class="table-row transition-colors">
259-
<td class="px-6 py-4">
259+
<td class="px-6 py-4 text-center">
260260
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm rank-3">
261261
3
262262
</div>
263263
</td>
264-
<td class="px-6 py-4">
264+
<td class="px-6 py-4 text-center">
265265
<div class="font-mono font-semibold text-gray-900 dark:text-white">gemma3:4b</div>
266266
</td>
267267
<!-- <td class="px-6 py-4"> -->
@@ -275,7 +275,7 @@
275275
<td class="px-6 py-4 text-center">
276276
<div class="text-lg font-semibold text-gray-900 dark:text-white">72.7%</div>
277277
</td>
278-
<td class="px-6 py-4">
278+
<td class="px-6 py-4 text-center">
279279
<div class="flex items-center justify-center gap-4 text-sm">
280280
<span class="text-green-600 dark:text-green-400 font-medium">16</span>
281281
<span class="text-red-600 dark:text-red-400 font-medium">6</span>
@@ -295,12 +295,12 @@
295295

296296

297297
<tr class="table-row transition-colors">
298-
<td class="px-6 py-4">
299-
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
298+
<td class="px-6 py-4 text-center">
299+
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
300300
4
301301
</div>
302302
</td>
303-
<td class="px-6 py-4">
303+
<td class="px-6 py-4 text-center">
304304
<div class="font-mono font-semibold text-gray-900 dark:text-white">gemma3n:e4b</div>
305305
</td>
306306
<!-- <td class="px-6 py-4"> -->
@@ -314,7 +314,7 @@
314314
<td class="px-6 py-4 text-center">
315315
<div class="text-lg font-semibold text-gray-900 dark:text-white">59.1%</div>
316316
</td>
317-
<td class="px-6 py-4">
317+
<td class="px-6 py-4 text-center">
318318
<div class="flex items-center justify-center gap-4 text-sm">
319319
<span class="text-green-600 dark:text-green-400 font-medium">13</span>
320320
<span class="text-red-600 dark:text-red-400 font-medium">9</span>
@@ -334,12 +334,12 @@
334334

335335

336336
<tr class="table-row transition-colors">
337-
<td class="px-6 py-4">
338-
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
337+
<td class="px-6 py-4 text-center">
338+
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
339339
5
340340
</div>
341341
</td>
342-
<td class="px-6 py-4">
342+
<td class="px-6 py-4 text-center">
343343
<div class="font-mono font-semibold text-gray-900 dark:text-white">gemma3n:e2b</div>
344344
</td>
345345
<!-- <td class="px-6 py-4"> -->
@@ -353,7 +353,7 @@
353353
<td class="px-6 py-4 text-center">
354354
<div class="text-lg font-semibold text-gray-900 dark:text-white">31.8%</div>
355355
</td>
356-
<td class="px-6 py-4">
356+
<td class="px-6 py-4 text-center">
357357
<div class="flex items-center justify-center gap-4 text-sm">
358358
<span class="text-green-600 dark:text-green-400 font-medium">7</span>
359359
<span class="text-red-600 dark:text-red-400 font-medium">15</span>
@@ -373,12 +373,12 @@
373373

374374

375375
<tr class="table-row transition-colors">
376-
<td class="px-6 py-4">
377-
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
376+
<td class="px-6 py-4 text-center">
377+
<div class="flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm bg-gray-200 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
378378
6
379379
</div>
380380
</td>
381-
<td class="px-6 py-4">
381+
<td class="px-6 py-4 text-center">
382382
<div class="font-mono font-semibold text-gray-900 dark:text-white">gemma3:1b</div>
383383
</td>
384384
<!-- <td class="px-6 py-4"> -->
@@ -392,7 +392,7 @@
392392
<td class="px-6 py-4 text-center">
393393
<div class="text-lg font-semibold text-gray-900 dark:text-white">4.5%</div>
394394
</td>
395-
<td class="px-6 py-4">
395+
<td class="px-6 py-4 text-center">
396396
<div class="flex items-center justify-center gap-4 text-sm">
397397
<span class="text-green-600 dark:text-green-400 font-medium">1</span>
398398
<span class="text-red-600 dark:text-red-400 font-medium">21</span>
@@ -420,10 +420,7 @@
420420
<div id="details-modal" class="fixed inset-0 modal-backdrop flex items-center justify-center p-4 z-50 hidden">
421421
<div class="bg-white dark:bg-black rounded-2xl shadow-xl w-full max-w-6xl max-h-[90vh] flex flex-col border border-gray-200 dark:border-gray-700">
422422
<header class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center flex-shrink-0">
423-
<div>
424-
<h2 id="modal-title" class="text-2xl font-bold text-gray-900 dark:text-white"></h2>
425-
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Detailed test case analysis</p>
426-
</div>
423+
<h2 id="modal-title" class="text-2xl font-bold text-gray-900 dark:text-white"></h2>
427424
<button onclick="hideDetails()" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
428425
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
429426
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -545,23 +542,25 @@
545542
<div class="flex items-start gap-4">
546543
<div class="flex-grow space-y-4">
547544
<div>
548-
<div class="flex-shrink-0 my-2">${statusBadge}</div>
549-
<div class="max-w-screen overflow-scroll bg-white dark:bg-black p-4 rounded-lg border border-gray-200 dark:border-gray-700">
550-
<div class="text-sm text-gray-600 dark:text-gray-400 mb-2">User Prompt:</div>
551-
<pre class="bg-gray-50 dark:bg-black rounded-lg"><code class="language-markdown text-xs">${formattedMessage}</code></pre>
545+
<div class="my-2">${statusBadge}</div>
546+
<div class="bg-white dark:bg-black p-4 rounded-lg border border-gray-200 dark:border-gray-700">
547+
<h5 class="font-medium text-gray-700 dark:text-gray-300">Prompt</h5>
548+
<div class="overflow-x-auto">
549+
<pre class="bg-gray-50 dark:bg-black rounded-lg min-w-0 whitespace-pre-wrap"><code class="language-markdown text-xs">${formattedMessage}</code></pre>
550+
</div>
552551
</div>
553552
</div>
554553

555554
<div class="grid lg:grid-cols-2 gap-4">
556555
<div class="flex flex-col space-y-2">
557556
<h5 class="font-medium text-gray-700 dark:text-gray-300">Expected Output</h5>
558-
<div class="max-w-screen overflow-scroll flex-1 bg-white dark:bg-black p-4 rounded-lg border border-gray-200 dark:border-gray-700 text-sm">
557+
<div class="flex-1 bg-white dark:bg-black p-4 rounded-lg border border-gray-200 dark:border-gray-700 text-sm">
559558
${expectedHtml}
560559
</div>
561560
</div>
562561
<div class="flex flex-col space-y-2">
563562
<h5 class="font-medium text-gray-700 dark:text-gray-300">Actual Output</h5>
564-
<div class="max-w-screen overflow-scroll flex-1 bg-white dark:bg-black p-4 rounded-lg border border-gray-200 dark:border-gray-700 text-sm">
563+
<div class="flex-1 bg-white dark:bg-black p-4 rounded-lg border border-gray-200 dark:border-gray-700 text-sm">
565564
${actualHtml}
566565
</div>
567566
</div>

‎docs/theme/main.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<script>
6+
// for search plugin notably
7+
const base_url = "{{ config.site_url }}";
8+
</script>
9+
<script>
10+
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
11+
darkTheme.onchange = (e) => {
12+
if (e.matches) {
13+
document.documentElement.classList.add("dark")
14+
localStorage.theme = 'dark';
15+
} else {
16+
document.documentElement.classList.remove("dark")
17+
localStorage.removeItem("theme")
18+
}
19+
};
20+
21+
// On page load. Priotiry to lcaolStorage
22+
if (localStorage.theme === "dark") {
23+
document.documentElement.classList.add("dark")
24+
} else if (localStorage.theme === "light") {
25+
document.documentElement.classList.remove("dark")
26+
} else if (darkTheme.matches) {
27+
document.documentElement.classList.add("dark")
28+
} else {
29+
document.documentElement.classList.remove("dark")
30+
}
31+
</script>
32+
<meta charset="UTF-8">
33+
<meta name="viewport" content="width=device-width, initial-scale=1">
34+
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ config.site_name }}</title>
35+
{% include "templates/seo.html" %}
36+
<link rel="icon" href="{{ 'img/favicon.ico' | url }}">
37+
<link href="{{ 'css/base.css' | url }}" rel="stylesheet">
38+
<link href="{{ 'css/geist.css' | url }}" rel="stylesheet">
39+
{% if config.theme.pygments_style %}
40+
<link href="{{ ('css/pygments/' + config.theme.pygments_style + '.css') | url }}" rel="stylesheet">
41+
{% endif %}
42+
{%- for path in config.extra_css %}
43+
<link href="{{ path | url }}" rel="stylesheet">
44+
{%- endfor %}
45+
46+
<script src="{{ 'js/callbacks.js' | url }}"></script>
47+
48+
{% if "pymdownx.arithmatex" in config.markdown_extensions %}
49+
{% include "templates/katex.html" %}
50+
{% endif %}
51+
52+
{% if "shadcn.extensions.echarts.alpha" in config.markdown_extensions %}
53+
{% include "templates/echarts.html" %}
54+
{% endif %}
55+
56+
{% if "shadcn/excalidraw" in config.plugins and is_dev_server %}
57+
{% include "templates/excalidraw.html" %}
58+
{% endif %}
59+
60+
</head>
61+
62+
<body class="w-screen overflow-x-hidden bg-foreground md:bg-background text-foreground scroll-smooth m-0 p-0">
63+
<div id="inner-body"
64+
class="min-h-screen bg-background origin-[top_center_0px] transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]">
65+
{% include "templates/header.html" %}
66+
<div class="border-grid flex flex-1 flex-col">
67+
<div class="w-full mx-auto 3xl:max-w-8xl">
68+
<div
69+
class="px-4 w-full max-w-8xl mx-auto xl:px-6 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
70+
<aside
71+
class="border-grid fixed top-14 z-30 hidden h-[calc(100vh-3.55rem)] w-full shrink-0 border-r md:sticky md:block">
72+
{% include "templates/sidebar.html" %}
73+
</aside>
74+
<main class="relative py-6 lg:gap-10 lg:py-8 {% if page.title != 'Leaderboard' %} xl:grid xl:grid-cols-[1fr_300px] {% endif %}">
75+
<div class="mx-auto w-full min-w-0 {% if page.title != 'Leaderboard' %} xl:max-w-2xl {% endif %}">
76+
{% include "templates/page.html" %}
77+
</div>
78+
{% if page.title != "Leaderboard" %}
79+
<div class="hidden text-sm xl:block">
80+
{% include "templates/toc.html" %}
81+
</div>
82+
{% endif %}
83+
</main>
84+
</div>
85+
</div>
86+
{% include "templates/bottom_sidebar.html" %}
87+
</div>
88+
</div>
89+
90+
91+
92+
{%- for script in config.extra_javascript %}
93+
{%- if script.path %} {# Detected MkDocs 1.5+ which has `script.path` and `script_tag` #}
94+
{{ script | script_tag }}
95+
{%- else %} {# Fallback - examine the file name directly #}
96+
{% if script.endswith('.mjs') %}
97+
<script src="{{ script | url }}" type="module"></script>
98+
{% else %}
99+
<script src="{{ script | url }}"></script>
100+
{% endif %}
101+
{%- endif %}
102+
{%- endfor %}
103+
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.3.0/dist/iconify-icon.min.js"></script>
104+
<script src="{{ 'js/copy-button.js' | url }}"></script>
105+
</body>
106+
107+
</html>

‎mkdocs.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ theme:
44
name: shadcn
55
icon: streamline:ai-chip-spark
66
pygments_style: github-dark
7+
custom_dir: docs/theme/
78

89
repo_url: https://github.com/offline-function-calling/sdk
910
edit_uri: edit/main/docs/

0 commit comments

Comments
 (0)