diff --git a/flow-state/gallery.html b/flow-state/gallery.html index 6c56f5c..ec61e19 100644 --- a/flow-state/gallery.html +++ b/flow-state/gallery.html @@ -47,8 +47,10 @@ .name { font-size: 14px; color: #e6eaf2; } .fam { color: #6b7280; } .score { color: #9aa3b5; } - .meter { display: inline-block; width: 130px; height: 7px; background: #1a1e28; border-radius: 4px; overflow: hidden; vertical-align: middle; } - .meter i { display: block; height: 100%; background: #4ade80; } + .meter { position: relative; display: inline-block; width: 130px; height: 7px; background: #1a1e28; border-radius: 4px; vertical-align: middle; } + .meter i { display: block; height: 100%; background: #4ade80; border-radius: 4px 0 0 4px; } + /* The bar, on every meter, so a row can be read on its own. */ + .meter b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #ef4444; } .row.flat .meter i { background: #ef4444; } .row.thin .meter i { background: #eab308; } .blocks { color: #5c6577; font-size: 11px; } @@ -57,6 +59,11 @@ .thumbs canvas { width: 100%; display: block; background: #05070a; border-radius: 2px; aspect-ratio: 16 / 9; } .thumbs figcaption { font-size: 10px; color: #565f70; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .err { color: #f87171; } + .cutline { position: relative; border-top: 2px solid #ef4444; margin: 26px 0 24px; } + .cutline span { + position: absolute; top: -9px; left: 12px; background: #0b0d12; + padding: 0 8px; color: #ef4444; font-size: 11px; letter-spacing: .04em; + } @media (max-width: 1100px) { .thumbs { grid-template-columns: repeat(3, 1fr); } } @@ -87,7 +94,7 @@