Make hero results badge more prominent
This commit is contained in:
Lliar-liar
+114
-27
@@ -214,38 +214,112 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-ledger {
|
.hero-ledger {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba(248, 250, 247, 0.92);
|
padding: 24px;
|
||||||
color: var(--ink);
|
color: #f8faf7;
|
||||||
border: 1px solid rgba(248, 250, 247, 0.6);
|
background:
|
||||||
|
linear-gradient(135deg, rgba(46, 123, 63, 0.94), rgba(17, 24, 32, 0.98) 54%, rgba(17, 24, 32, 0.96)),
|
||||||
|
var(--black);
|
||||||
|
border: 1px solid rgba(244, 197, 66, 0.44);
|
||||||
|
border-radius: 8px;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-row {
|
.hero-ledger::before {
|
||||||
display: grid;
|
content: "";
|
||||||
grid-template-columns: 1fr auto;
|
position: absolute;
|
||||||
gap: 18px;
|
inset: 0;
|
||||||
padding: 15px 16px;
|
background:
|
||||||
border-bottom: 1px solid rgba(21, 25, 31, 0.16);
|
linear-gradient(90deg, rgba(244, 197, 66, 0.12) 1px, transparent 1px),
|
||||||
|
linear-gradient(0deg, rgba(244, 197, 66, 0.08) 1px, transparent 1px);
|
||||||
|
background-size: 26px 26px;
|
||||||
|
opacity: 0.34;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-row:last-child {
|
.hero-ledger > * {
|
||||||
border-bottom: 0;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-label {
|
.ledger-kicker {
|
||||||
color: var(--muted);
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 28px;
|
||||||
|
padding: 5px 9px;
|
||||||
|
color: var(--ink);
|
||||||
|
background: #f4c542;
|
||||||
|
border-radius: 6px;
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
font-size: 0.71rem;
|
font-size: 0.71rem;
|
||||||
|
font-weight: 800;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ledger-hero {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.ledger-value {
|
.ledger-value {
|
||||||
font-family: var(--display);
|
font-family: var(--display);
|
||||||
font-size: 1.95rem;
|
font-size: 5.85rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 0.9;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-denominator {
|
||||||
|
color: rgba(248, 250, 247, 0.64);
|
||||||
|
font-family: var(--display);
|
||||||
|
font-size: 2.65rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
white-space: nowrap;
|
}
|
||||||
|
|
||||||
|
.ledger-copy {
|
||||||
|
max-width: 320px;
|
||||||
|
margin: 12px 0 0;
|
||||||
|
color: rgba(248, 250, 247, 0.84);
|
||||||
|
font-size: 1.02rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0;
|
||||||
|
margin-top: 22px;
|
||||||
|
border-top: 1px solid rgba(248, 250, 247, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stat {
|
||||||
|
padding-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stat + .ledger-stat {
|
||||||
|
padding-left: 16px;
|
||||||
|
border-left: 1px solid rgba(248, 250, 247, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stat span {
|
||||||
|
display: block;
|
||||||
|
color: rgba(248, 250, 247, 0.62);
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stat b {
|
||||||
|
display: block;
|
||||||
|
margin-top: 6px;
|
||||||
|
color: #f4c542;
|
||||||
|
font-family: var(--display);
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@@ -1020,13 +1094,20 @@
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-row,
|
|
||||||
.mini-item,
|
.mini-item,
|
||||||
.detail-metrics,
|
.detail-metrics,
|
||||||
.chart-caption {
|
.chart-caption {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ledger-value {
|
||||||
|
font-size: 4.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-denominator {
|
||||||
|
font-size: 2.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-toolbar,
|
.chart-toolbar,
|
||||||
.chart-caption {
|
.chart-caption {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -1074,18 +1155,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside class="hero-ledger" aria-label="Key numbers">
|
<aside class="hero-ledger" aria-label="Key result summary">
|
||||||
<div class="ledger-row">
|
<span class="ledger-kicker">Main result</span>
|
||||||
<span class="ledger-label">Best or tied-best in 52 model x benchmark / harness x benchmark settings</span>
|
<div class="ledger-hero" aria-label="52 out of 52 settings">
|
||||||
<span class="ledger-value">52/52</span>
|
<span class="ledger-value">52</span>
|
||||||
|
<span class="ledger-denominator">/52</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ledger-row">
|
<p class="ledger-copy">
|
||||||
<span class="ledger-label">Frozen target models</span>
|
Best or tied-best in every model x benchmark and harness x benchmark setting.
|
||||||
<span class="ledger-value">7</span>
|
</p>
|
||||||
</div>
|
<div class="ledger-stats" aria-label="Evaluation coverage">
|
||||||
<div class="ledger-row">
|
<div class="ledger-stat">
|
||||||
<span class="ledger-label">Benchmarks</span>
|
<span>Frozen target models</span>
|
||||||
<span class="ledger-value">6</span>
|
<b>7</b>
|
||||||
|
</div>
|
||||||
|
<div class="ledger-stat">
|
||||||
|
<span>Benchmarks</span>
|
||||||
|
<b>6</b>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+114
-27
@@ -214,38 +214,112 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-ledger {
|
.hero-ledger {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba(248, 250, 247, 0.92);
|
padding: 24px;
|
||||||
color: var(--ink);
|
color: #f8faf7;
|
||||||
border: 1px solid rgba(248, 250, 247, 0.6);
|
background:
|
||||||
|
linear-gradient(135deg, rgba(46, 123, 63, 0.94), rgba(17, 24, 32, 0.98) 54%, rgba(17, 24, 32, 0.96)),
|
||||||
|
var(--black);
|
||||||
|
border: 1px solid rgba(244, 197, 66, 0.44);
|
||||||
|
border-radius: 8px;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-row {
|
.hero-ledger::before {
|
||||||
display: grid;
|
content: "";
|
||||||
grid-template-columns: 1fr auto;
|
position: absolute;
|
||||||
gap: 18px;
|
inset: 0;
|
||||||
padding: 15px 16px;
|
background:
|
||||||
border-bottom: 1px solid rgba(21, 25, 31, 0.16);
|
linear-gradient(90deg, rgba(244, 197, 66, 0.12) 1px, transparent 1px),
|
||||||
|
linear-gradient(0deg, rgba(244, 197, 66, 0.08) 1px, transparent 1px);
|
||||||
|
background-size: 26px 26px;
|
||||||
|
opacity: 0.34;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-row:last-child {
|
.hero-ledger > * {
|
||||||
border-bottom: 0;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-label {
|
.ledger-kicker {
|
||||||
color: var(--muted);
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 28px;
|
||||||
|
padding: 5px 9px;
|
||||||
|
color: var(--ink);
|
||||||
|
background: #f4c542;
|
||||||
|
border-radius: 6px;
|
||||||
font-family: var(--mono);
|
font-family: var(--mono);
|
||||||
font-size: 0.71rem;
|
font-size: 0.71rem;
|
||||||
|
font-weight: 800;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ledger-hero {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.ledger-value {
|
.ledger-value {
|
||||||
font-family: var(--display);
|
font-family: var(--display);
|
||||||
font-size: 1.95rem;
|
font-size: 5.85rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 0.9;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-denominator {
|
||||||
|
color: rgba(248, 250, 247, 0.64);
|
||||||
|
font-family: var(--display);
|
||||||
|
font-size: 2.65rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
white-space: nowrap;
|
}
|
||||||
|
|
||||||
|
.ledger-copy {
|
||||||
|
max-width: 320px;
|
||||||
|
margin: 12px 0 0;
|
||||||
|
color: rgba(248, 250, 247, 0.84);
|
||||||
|
font-size: 1.02rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0;
|
||||||
|
margin-top: 22px;
|
||||||
|
border-top: 1px solid rgba(248, 250, 247, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stat {
|
||||||
|
padding-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stat + .ledger-stat {
|
||||||
|
padding-left: 16px;
|
||||||
|
border-left: 1px solid rgba(248, 250, 247, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stat span {
|
||||||
|
display: block;
|
||||||
|
color: rgba(248, 250, 247, 0.62);
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.68rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-stat b {
|
||||||
|
display: block;
|
||||||
|
margin-top: 6px;
|
||||||
|
color: #f4c542;
|
||||||
|
font-family: var(--display);
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@@ -1020,13 +1094,20 @@
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ledger-row,
|
|
||||||
.mini-item,
|
.mini-item,
|
||||||
.detail-metrics,
|
.detail-metrics,
|
||||||
.chart-caption {
|
.chart-caption {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ledger-value {
|
||||||
|
font-size: 4.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ledger-denominator {
|
||||||
|
font-size: 2.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
.chart-toolbar,
|
.chart-toolbar,
|
||||||
.chart-caption {
|
.chart-caption {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -1074,18 +1155,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside class="hero-ledger" aria-label="Key numbers">
|
<aside class="hero-ledger" aria-label="Key result summary">
|
||||||
<div class="ledger-row">
|
<span class="ledger-kicker">Main result</span>
|
||||||
<span class="ledger-label">Best or tied-best in 52 model x benchmark / harness x benchmark settings</span>
|
<div class="ledger-hero" aria-label="52 out of 52 settings">
|
||||||
<span class="ledger-value">52/52</span>
|
<span class="ledger-value">52</span>
|
||||||
|
<span class="ledger-denominator">/52</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ledger-row">
|
<p class="ledger-copy">
|
||||||
<span class="ledger-label">Frozen target models</span>
|
Best or tied-best in every model x benchmark and harness x benchmark setting.
|
||||||
<span class="ledger-value">7</span>
|
</p>
|
||||||
</div>
|
<div class="ledger-stats" aria-label="Evaluation coverage">
|
||||||
<div class="ledger-row">
|
<div class="ledger-stat">
|
||||||
<span class="ledger-label">Benchmarks</span>
|
<span>Frozen target models</span>
|
||||||
<span class="ledger-value">6</span>
|
<b>7</b>
|
||||||
|
</div>
|
||||||
|
<div class="ledger-stat">
|
||||||
|
<span>Benchmarks</span>
|
||||||
|
<b>6</b>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user