Improve displays

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;
 }

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)

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])

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

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

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