Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-07-07 00:58:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

website_next: snapshot

Browse Source
This commit is contained in:
nym21
2026-07-04 22:09:40 +02:00
parent a99c06013b
commit 0bf2cd77dc
5 changed files with 295 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website_next/explore/block/style.css
+161 -94
View File
@@ -22,12 +22,12 @@
display: grid;
padding-bottom: 1.25rem;
[data-block-title] {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
:is([data-block-title], [data-block-meta]) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.35rem 1rem;
align-items: baseline;
min-width: 0;
}
h1 {
@@ -56,15 +56,28 @@
line-height: var(--line-height-lg);
}
p {
[data-block-date],
[data-block-hash-line] {
color: var(--gray);
}
[data-block-date] {
white-space: nowrap;
text-align: right;
}
[data-block-hash-line] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
> div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
gap: 2rem;
}
section {
@@ -82,7 +95,7 @@
[data-miner-pane] {
display: grid;
gap: 0.75rem;
gap: 1rem;
min-width: 0;
}
@@ -90,12 +103,21 @@
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: start;
align-items: center;
min-width: 0;
}
[data-miner-identity] {
display: grid;
gap: 0.125rem;
min-width: 0;
}
[data-miner-title] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: baseline;
min-width: 0;
> strong {
@@ -106,29 +128,49 @@
font-weight: 450;
line-height: var(--line-height-sm);
}
> span {
color: var(--gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
}
[data-miner-slug] {
min-width: 0;
overflow-wrap: anywhere;
color: var(--gray);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
[data-miner-logo] {
width: 2rem;
height: 2rem;
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
}
[data-miner-stats] {
[data-coinbase-message] {
min-width: 0;
overflow: hidden;
color: var(--white);
font-size: var(--font-size-sm);
font-style: italic;
line-height: var(--line-height-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
}
&:is([data-group="mining"], [data-group="difficulty"]) {
[data-metric-list] {
display: grid;
gap: 0.35rem;
gap: 0.5rem;
min-width: 0;
}
[data-miner-stat] {
[data-metric-stat] {
display: grid;
grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
gap: 0.75rem;
@@ -152,6 +194,61 @@
text-align: right;
}
}
[data-epoch] {
display: grid;
gap: 0.25rem;
min-width: 0;
}
[data-epoch-head] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
min-width: 0;
> span {
min-width: 0;
overflow-wrap: anywhere;
color: var(--epoch-color);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
}
strong {
color: var(--white);
font-size: var(--font-size-sm);
font-weight: 450;
line-height: var(--line-height-sm);
text-align: right;
}
}
[data-epoch-bar] {
display: flex;
gap: 0.125rem;
height: 0.5rem;
min-width: 0;
}
[data-epoch-segment] {
width: var(--share);
border-radius: 0.125rem;
&[data-epoch-segment="done"] {
background: var(--epoch-color);
}
&[data-epoch-segment="remaining"] {
background: color-mix(in oklch, var(--gray) 35%, transparent);
}
}
}
&[data-group="difficulty"] {
--section-color: var(--orange);
}
&[data-group="block"] {
@@ -169,59 +266,9 @@
&[data-group="rewards"] {
[data-stat-box] {
display: grid;
gap: 0.75rem;
min-width: 0;
border: 1px solid
color-mix(in oklch, var(--section-color) 28%, transparent);
border-radius: 0.25rem;
padding: 0.75rem;
h3 {
color: var(--section-color);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: 450;
line-height: var(--line-height-xs);
text-transform: uppercase;
}
[data-stat-box] {
border-color: color-mix(
in oklch,
var(--section-color) 18%,
transparent
);
}
}
[data-stats] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
min-width: 0;
}
[data-stat] {
display: grid;
gap: 0.25rem;
min-width: 0;
> span {
color: var(--section-color);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
}
strong {
min-width: 0;
overflow-wrap: anywhere;
color: var(--white);
font-size: var(--font-size-sm);
font-weight: 450;
line-height: var(--line-height-sm);
}
}
}
&[data-group="block"] {
@@ -230,16 +277,20 @@
gap: 0.5rem;
min-width: 0;
border: 1px solid
color-mix(in oklch, var(--section-color) 28%, transparent);
color-mix(in oklch, var(--section-color) 35%, transparent);
border-radius: 0.25rem;
padding: 0.75rem;
[data-block-box] {
border-color: color-mix(
in oklch,
var(--section-color) 18%,
transparent
);
&[data-block-box="tx"] {
border-color: color-mix(in oklch, var(--orange) 35%, transparent);
}
&[data-block-box="input"] {
border-color: color-mix(in oklch, var(--yellow) 55%, transparent);
}
&[data-block-box="output"] {
border-color: color-mix(in oklch, var(--red) 55%, transparent);
}
}
@@ -263,7 +314,7 @@
align-items: center;
justify-content: flex-end;
min-width: 0;
color: var(--white);
color: var(--section-color);
font-size: var(--font-size-sm);
font-weight: 450;
line-height: var(--line-height-sm);
@@ -274,38 +325,55 @@
[data-block-io] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.5rem;
gap: 0.75rem;
min-width: 0;
[data-block-box] {
aspect-ratio: 1 / 1;
place-content: center;
align-content: center;
padding: 0.5rem;
}
[data-inline-row] {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
gap: 0.25rem;
strong {
justify-content: center;
text-align: center;
}
grid-template-columns: auto auto;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
}
}
[data-block-box="tx"] > [data-inline-row] {
> span,
strong {
color: var(--orange);
}
}
:is([data-block-box="input"], [data-block-box="output"]) > [data-inline-row] {
> span,
strong {
color: var(--block-box-color);
}
}
[data-block-box="input"] {
--block-box-color: var(--yellow);
}
[data-block-box="output"] {
--block-box-color: var(--red);
}
}
&[data-group="rewards"] {
[data-reward-total] {
display: grid;
gap: 0.25rem;
justify-items: center;
gap: 0.125rem;
justify-items: start;
min-width: 0;
color: var(--gray);
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-align: center;
text-align: left;
strong {
min-width: 0;
@@ -315,6 +383,11 @@
font-weight: 450;
line-height: var(--line-height-sm);
}
> span:first-child {
color: var(--section-color);
text-transform: uppercase;
}
}
[data-reward-bar] {
@@ -416,12 +489,6 @@
grid-column: auto;
}
section[data-group="rewards"] {
[data-stats] {
grid-template-columns: minmax(0, 1fr);
}
}
dl > div {
grid-template-columns: minmax(0, 1fr);
gap: 0.15rem;