Skip to content

Commit cd56a5f

Browse files
Lliar-liarLliar-liar
committed
Make hero results badge more prominent
1 parent bbb250c commit cd56a5f

2 files changed

Lines changed: 228 additions & 54 deletions

File tree

‎index.html‎

Lines changed: 114 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -214,40 +214,114 @@
214214
}
215215

216216
.hero-ledger {
217+
position: relative;
218+
overflow: hidden;
217219
width: 100%;
218-
background: rgba(248, 250, 247, 0.92);
219-
color: var(--ink);
220-
border: 1px solid rgba(248, 250, 247, 0.6);
220+
padding: 24px;
221+
color: #f8faf7;
222+
background:
223+
linear-gradient(135deg, rgba(46, 123, 63, 0.94), rgba(17, 24, 32, 0.98) 54%, rgba(17, 24, 32, 0.96)),
224+
var(--black);
225+
border: 1px solid rgba(244, 197, 66, 0.44);
226+
border-radius: 8px;
221227
box-shadow: var(--shadow);
222228
}
223229

224-
.ledger-row {
225-
display: grid;
226-
grid-template-columns: 1fr auto;
227-
gap: 18px;
228-
padding: 15px 16px;
229-
border-bottom: 1px solid rgba(21, 25, 31, 0.16);
230+
.hero-ledger::before {
231+
content: "";
232+
position: absolute;
233+
inset: 0;
234+
background:
235+
linear-gradient(90deg, rgba(244, 197, 66, 0.12) 1px, transparent 1px),
236+
linear-gradient(0deg, rgba(244, 197, 66, 0.08) 1px, transparent 1px);
237+
background-size: 26px 26px;
238+
opacity: 0.34;
239+
pointer-events: none;
230240
}
231241

232-
.ledger-row:last-child {
233-
border-bottom: 0;
242+
.hero-ledger > * {
243+
position: relative;
234244
}
235245

236-
.ledger-label {
237-
color: var(--muted);
246+
.ledger-kicker {
247+
display: inline-flex;
248+
align-items: center;
249+
min-height: 28px;
250+
padding: 5px 9px;
251+
color: var(--ink);
252+
background: #f4c542;
253+
border-radius: 6px;
238254
font-family: var(--mono);
239255
font-size: 0.71rem;
256+
font-weight: 800;
240257
text-transform: uppercase;
241258
}
242259

260+
.ledger-hero {
261+
display: flex;
262+
align-items: baseline;
263+
gap: 8px;
264+
margin-top: 18px;
265+
}
266+
243267
.ledger-value {
244268
font-family: var(--display);
245-
font-size: 1.95rem;
269+
font-size: 5.85rem;
246270
font-weight: 800;
247-
line-height: 1;
271+
line-height: 0.9;
248272
white-space: nowrap;
249273
}
250274

275+
.ledger-denominator {
276+
color: rgba(248, 250, 247, 0.64);
277+
font-family: var(--display);
278+
font-size: 2.65rem;
279+
font-weight: 800;
280+
line-height: 1;
281+
}
282+
283+
.ledger-copy {
284+
max-width: 320px;
285+
margin: 12px 0 0;
286+
color: rgba(248, 250, 247, 0.84);
287+
font-size: 1.02rem;
288+
line-height: 1.45;
289+
}
290+
291+
.ledger-stats {
292+
display: grid;
293+
grid-template-columns: repeat(2, minmax(0, 1fr));
294+
gap: 0;
295+
margin-top: 22px;
296+
border-top: 1px solid rgba(248, 250, 247, 0.22);
297+
}
298+
299+
.ledger-stat {
300+
padding-top: 14px;
301+
}
302+
303+
.ledger-stat + .ledger-stat {
304+
padding-left: 16px;
305+
border-left: 1px solid rgba(248, 250, 247, 0.18);
306+
}
307+
308+
.ledger-stat span {
309+
display: block;
310+
color: rgba(248, 250, 247, 0.62);
311+
font-family: var(--mono);
312+
font-size: 0.68rem;
313+
text-transform: uppercase;
314+
}
315+
316+
.ledger-stat b {
317+
display: block;
318+
margin-top: 6px;
319+
color: #f4c542;
320+
font-family: var(--display);
321+
font-size: 2.25rem;
322+
line-height: 1;
323+
}
324+
251325
main {
252326
width: min(1160px, calc(100% - 40px));
253327
margin: 0 auto;
@@ -1020,13 +1094,20 @@
10201094
grid-template-columns: 1fr;
10211095
}
10221096

1023-
.ledger-row,
10241097
.mini-item,
10251098
.detail-metrics,
10261099
.chart-caption {
10271100
grid-template-columns: 1fr;
10281101
}
10291102

1103+
.ledger-value {
1104+
font-size: 4.35rem;
1105+
}
1106+
1107+
.ledger-denominator {
1108+
font-size: 2.05rem;
1109+
}
1110+
10301111
.chart-toolbar,
10311112
.chart-caption {
10321113
flex-direction: column;
@@ -1074,18 +1155,24 @@ <h1>SkillOpt</h1>
10741155
</div>
10751156
</div>
10761157

1077-
<aside class="hero-ledger" aria-label="Key numbers">
1078-
<div class="ledger-row">
1079-
<span class="ledger-label">Best or tied-best in 52 model x benchmark / harness x benchmark settings</span>
1080-
<span class="ledger-value">52/52</span>
1081-
</div>
1082-
<div class="ledger-row">
1083-
<span class="ledger-label">Frozen target models</span>
1084-
<span class="ledger-value">7</span>
1158+
<aside class="hero-ledger" aria-label="Key result summary">
1159+
<span class="ledger-kicker">Main result</span>
1160+
<div class="ledger-hero" aria-label="52 out of 52 settings">
1161+
<span class="ledger-value">52</span>
1162+
<span class="ledger-denominator">/52</span>
10851163
</div>
1086-
<div class="ledger-row">
1087-
<span class="ledger-label">Benchmarks</span>
1088-
<span class="ledger-value">6</span>
1164+
<p class="ledger-copy">
1165+
Best or tied-best in every model x benchmark and harness x benchmark setting.
1166+
</p>
1167+
<div class="ledger-stats" aria-label="Evaluation coverage">
1168+
<div class="ledger-stat">
1169+
<span>Frozen target models</span>
1170+
<b>7</b>
1171+
</div>
1172+
<div class="ledger-stat">
1173+
<span>Benchmarks</span>
1174+
<b>6</b>
1175+
</div>
10891176
</div>
10901177
</aside>
10911178
</div>

‎skillopt.html‎

Lines changed: 114 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -214,40 +214,114 @@
214214
}
215215

216216
.hero-ledger {
217+
position: relative;
218+
overflow: hidden;
217219
width: 100%;
218-
background: rgba(248, 250, 247, 0.92);
219-
color: var(--ink);
220-
border: 1px solid rgba(248, 250, 247, 0.6);
220+
padding: 24px;
221+
color: #f8faf7;
222+
background:
223+
linear-gradient(135deg, rgba(46, 123, 63, 0.94), rgba(17, 24, 32, 0.98) 54%, rgba(17, 24, 32, 0.96)),
224+
var(--black);
225+
border: 1px solid rgba(244, 197, 66, 0.44);
226+
border-radius: 8px;
221227
box-shadow: var(--shadow);
222228
}
223229

224-
.ledger-row {
225-
display: grid;
226-
grid-template-columns: 1fr auto;
227-
gap: 18px;
228-
padding: 15px 16px;
229-
border-bottom: 1px solid rgba(21, 25, 31, 0.16);
230+
.hero-ledger::before {
231+
content: "";
232+
position: absolute;
233+
inset: 0;
234+
background:
235+
linear-gradient(90deg, rgba(244, 197, 66, 0.12) 1px, transparent 1px),
236+
linear-gradient(0deg, rgba(244, 197, 66, 0.08) 1px, transparent 1px);
237+
background-size: 26px 26px;
238+
opacity: 0.34;
239+
pointer-events: none;
230240
}
231241

232-
.ledger-row:last-child {
233-
border-bottom: 0;
242+
.hero-ledger > * {
243+
position: relative;
234244
}
235245

236-
.ledger-label {
237-
color: var(--muted);
246+
.ledger-kicker {
247+
display: inline-flex;
248+
align-items: center;
249+
min-height: 28px;
250+
padding: 5px 9px;
251+
color: var(--ink);
252+
background: #f4c542;
253+
border-radius: 6px;
238254
font-family: var(--mono);
239255
font-size: 0.71rem;
256+
font-weight: 800;
240257
text-transform: uppercase;
241258
}
242259

260+
.ledger-hero {
261+
display: flex;
262+
align-items: baseline;
263+
gap: 8px;
264+
margin-top: 18px;
265+
}
266+
243267
.ledger-value {
244268
font-family: var(--display);
245-
font-size: 1.95rem;
269+
font-size: 5.85rem;
246270
font-weight: 800;
247-
line-height: 1;
271+
line-height: 0.9;
248272
white-space: nowrap;
249273
}
250274

275+
.ledger-denominator {
276+
color: rgba(248, 250, 247, 0.64);
277+
font-family: var(--display);
278+
font-size: 2.65rem;
279+
font-weight: 800;
280+
line-height: 1;
281+
}
282+
283+
.ledger-copy {
284+
max-width: 320px;
285+
margin: 12px 0 0;
286+
color: rgba(248, 250, 247, 0.84);
287+
font-size: 1.02rem;
288+
line-height: 1.45;
289+
}
290+
291+
.ledger-stats {
292+
display: grid;
293+
grid-template-columns: repeat(2, minmax(0, 1fr));
294+
gap: 0;
295+
margin-top: 22px;
296+
border-top: 1px solid rgba(248, 250, 247, 0.22);
297+
}
298+
299+
.ledger-stat {
300+
padding-top: 14px;
301+
}
302+
303+
.ledger-stat + .ledger-stat {
304+
padding-left: 16px;
305+
border-left: 1px solid rgba(248, 250, 247, 0.18);
306+
}
307+
308+
.ledger-stat span {
309+
display: block;
310+
color: rgba(248, 250, 247, 0.62);
311+
font-family: var(--mono);
312+
font-size: 0.68rem;
313+
text-transform: uppercase;
314+
}
315+
316+
.ledger-stat b {
317+
display: block;
318+
margin-top: 6px;
319+
color: #f4c542;
320+
font-family: var(--display);
321+
font-size: 2.25rem;
322+
line-height: 1;
323+
}
324+
251325
main {
252326
width: min(1160px, calc(100% - 40px));
253327
margin: 0 auto;
@@ -1020,13 +1094,20 @@
10201094
grid-template-columns: 1fr;
10211095
}
10221096

1023-
.ledger-row,
10241097
.mini-item,
10251098
.detail-metrics,
10261099
.chart-caption {
10271100
grid-template-columns: 1fr;
10281101
}
10291102

1103+
.ledger-value {
1104+
font-size: 4.35rem;
1105+
}
1106+
1107+
.ledger-denominator {
1108+
font-size: 2.05rem;
1109+
}
1110+
10301111
.chart-toolbar,
10311112
.chart-caption {
10321113
flex-direction: column;
@@ -1074,18 +1155,24 @@ <h1>SkillOpt</h1>
10741155
</div>
10751156
</div>
10761157

1077-
<aside class="hero-ledger" aria-label="Key numbers">
1078-
<div class="ledger-row">
1079-
<span class="ledger-label">Best or tied-best in 52 model x benchmark / harness x benchmark settings</span>
1080-
<span class="ledger-value">52/52</span>
1081-
</div>
1082-
<div class="ledger-row">
1083-
<span class="ledger-label">Frozen target models</span>
1084-
<span class="ledger-value">7</span>
1158+
<aside class="hero-ledger" aria-label="Key result summary">
1159+
<span class="ledger-kicker">Main result</span>
1160+
<div class="ledger-hero" aria-label="52 out of 52 settings">
1161+
<span class="ledger-value">52</span>
1162+
<span class="ledger-denominator">/52</span>
10851163
</div>
1086-
<div class="ledger-row">
1087-
<span class="ledger-label">Benchmarks</span>
1088-
<span class="ledger-value">6</span>
1164+
<p class="ledger-copy">
1165+
Best or tied-best in every model x benchmark and harness x benchmark setting.
1166+
</p>
1167+
<div class="ledger-stats" aria-label="Evaluation coverage">
1168+
<div class="ledger-stat">
1169+
<span>Frozen target models</span>
1170+
<b>7</b>
1171+
</div>
1172+
<div class="ledger-stat">
1173+
<span>Benchmarks</span>
1174+
<b>6</b>
1175+
</div>
10891176
</div>
10901177
</aside>
10911178
</div>

0 commit comments

Comments
 (0)