diff --git a/server/public/style.css b/server/public/style.css index 8a337e8..98779ca 100644 --- a/server/public/style.css +++ b/server/public/style.css @@ -46,14 +46,14 @@ --canvas-height: 800px; --canvas-padding: 30px; --color-primary-rgb: 0, 0, 0; - --color-secondary-rgb: 100, 100, 100; + --color-secondary-rgb: 55, 55, 55; --color-background-rgb: 255, 255, 255; --font-size-base: 32px; - --font-size-xxl: 4em; + --font-size-xxl: 3.5em; --font-size-xl: 2em; --font-size-l: 1.25em; --font-size-s: .75em; - --font-size-xs: .625em; + --font-size-xs: .675em; --font-size-xxs: .5em; } html { @@ -107,16 +107,18 @@ h3 { flex-direction: column; align-items: center; justify-content: center; - margin-top: 4.75rem; + margin: 4.75rem 0 0 .75rem; } .top h1 { - margin: .6125em 0; + margin: .75em 0; } .top .price--rate1 { margin-left: 5rem; + align-items: center; } .top .price--rate2 { margin-left: 1rem; + align-items: center; } .value-type { display: flex; @@ -148,7 +150,7 @@ h3 { align-items: center; justify-content: center; gap: .5rem; - background-color: rgba(var(--color-secondary-rgb), .125); + background-color: rgba(var(--color-secondary-rgb), .175); font-size: var(--font-size-xs); } .block:after, @@ -173,20 +175,18 @@ h3 { background-color: rgba(var(--color-secondary-rgb), .5); transform: skewY(50deg); } -.block h3 { - position: absolute; - top: -1.375em; - left: calc(var(--block-size) / 3.8); - transform: skew(35deg); - font-size: var(--font-size-s); - color: rgb(var(--color-secondary-rgb)); -} .block h4 { font-size: var(--font-size-l); } .block .txs { color: rgb(var(--color-secondary-rgb)); } +.blocks .block:nth-child(1) { + opacity: .75; +} +.blocks .block:nth-child(2) { + opacity: .875; +} .stats { display: flex; align-items: center; @@ -210,8 +210,9 @@ h3 { display: flex; align-items: center; gap: 1.5rem; + margin-top: 1.5rem; } -.prices h2 { +.prices h3 { display: flex; align-items: center; } diff --git a/server/views/_lightning.pug b/server/views/_lightning.pug index df8adeb..701197b 100644 --- a/server/views/_lightning.pug +++ b/server/views/_lightning.pug @@ -1,5 +1,5 @@ if lightning .stats - +displayStat(sats2BTC(lightning.latest.total_capacity), 'BTC capacity', sats2BTC(lightning.latest.total_capacity - lightning.previous.total_capacity)) + +displayStat(sats2BTC(lightning.latest.total_capacity), 'BTC capacity', sats2BTC(parseInt(lightning.latest.total_capacity - lightning.previous.total_capacity))) +displayStat(lightning.latest.node_count, 'nodes', lightning.latest.node_count - lightning.previous.node_count) +displayStat(lightning.latest.channel_count, 'channels', lightning.latest.channel_count - lightning.previous.channel_count) diff --git a/server/views/_mempoolblocks.pug b/server/views/_mempoolblocks.pug index 5ae55d9..9afa2fe 100644 --- a/server/views/_mempoolblocks.pug +++ b/server/views/_mempoolblocks.pug @@ -1,5 +1,5 @@ if mempoolblocks .blocks - +block(blockcount + 3, mempoolblocks[2]) - +block(blockcount + 2, mempoolblocks[1]) - +block(blockcount + 1, mempoolblocks[0]) + +block(mempoolblocks[2]) + +block(mempoolblocks[1]) + +block(mempoolblocks[0]) diff --git a/server/views/_mixins.pug b/server/views/_mixins.pug index d73a75a..7293f9b 100644 --- a/server/views/_mixins.pug +++ b/server/views/_mixins.pug @@ -1,9 +1,7 @@ mixin displayRate(rate) - if rate + if rate.rate span.type= currency(rate.code) span.value= Math.round(rate.rate) - else - |   mixin displayStat(value, title, diff) if value @@ -11,13 +9,12 @@ mixin displayStat(value, title, diff) .value= value .type = title - if diff + if diff && !isNaN(diff) = ' ' span.diff (#{diff < 0 ? '-' : (diff === 0 ? '±' : '+')}#{Math.abs(diff)}) -mixin block(num, b) +mixin block(b) .block - h3= num small.value-type span.value #{Math.ceil(b.feeRange[0])}-#{Math.ceil(b.feeRange[b.feeRange.length - 1])} span.type sat/vB diff --git a/server/views/_quote.pug b/server/views/_quote.pug index 7d2ad9a..7adefcc 100644 --- a/server/views/_quote.pug +++ b/server/views/_quote.pug @@ -1,4 +1,4 @@ -if quote && quote.body.length < 220 +if quote && (quote.body.length < 220 || !rate2.rate) blockquote p= quote.body if quote.author && quote.author.name diff --git a/server/views/stats.pug b/server/views/stats.pug index 0a6c05f..d6356ab 100644 --- a/server/views/stats.pug +++ b/server/views/stats.pug @@ -3,12 +3,11 @@ extends _layout block content if rate1 || rate2 .prices - if rate1 - h2.value-type: +displayRate(rate1) - if rate2 - h2.value-type: +displayRate(rate2) - .blockcount - h1!= blockcount + if rate1.rate + h3.value-type: +displayRate(rate1) + if rate2.rate + h3.value-type: +displayRate(rate2) + h1.blockcount!= blockcount include _mempoolblocks include _fees include _lightning