match page aesthetics

src/routes/(app)/match/+page.svelte

@@ -288,6 +288,31 @@
 <style lang="scss">
   @use '../../../lib/styles/global.scss';
 
+  .round-header {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: baseline;
+    gap: 1ex;
+
+    > .left, > .right {
+      background: url('/charcoal-hl.png') repeat-x;
+      background-size: 18ex 120%;
+      height: 1em;
+    }
+    > .left {
+      flex: 0 1 2ex;
+    }
+    > .right {
+      flex: 1 1 1ex;
+    }
+    > .title {
+      flex: 0 0 fit-content;
+      margin: 0;
+      text-indent: 0;
+    }
+  }
+
   .smaller {
     font-size: 0.8em;
   }
@@ -343,24 +368,30 @@
   }
 
   .block {
-    
-    > .content {
+    > .steps {
       display: none;
       margin-left: 2ex;
+      counter-reset: block-activity;
 
-      > *:not(:last-child) {
-        margin-bottom: 1em;
+      > .step {
+        counter-increment: block-activity;
+
+        &:not(:last-child) {
+          margin-bottom: 0.5em;
+        }
+        &::before {
+          content: counter(block-activity) ')';
+          font-style: italic;
+          margin-right: 1.5ex;
+          font-size: 0.9em;
+          opacity: 0.9;
+          vertical-align: super;
+        }
       }
      
-      > .swaps {
-        > .batch:not(:last-child) {
-          margin-bottom: 1em;
-        }
-
-        .batch {
-          > .swap {
-            margin-left: 2ex;
-          }
+      .swaps {
+        > .swap {
+          margin-left: 6ex;
         }
       }
     }
@@ -388,7 +419,7 @@
     }
 
     &.expanded {
-      > .content {
+      > .steps {
         display: block;
       }
       > .expand > button > .prefix::after {
@@ -425,7 +456,11 @@
   <section>
     {#each data.rounds as round, roundIdx (roundIdx)}
     <div class="round">
-      <h2>Round {roundIdx + 1}</h2>
+      <div class="round-header">
+        <div class="left" />
+        <h2 class="title">Round {roundIdx + 1}</h2>
+        <div class="right" />
+      </div>
       <div class="summary">
         {#each sortIndices(round.balances, bals => -Math.max(...bals)) as playerIdx}
         <div class="player">
@@ -440,7 +475,7 @@
               and
             </span>
             {/if}  
-            has:
+            holds:
           </span>
           {#each round.balances[playerIdx] as bal, assetIdx}
           {#if bal > 0}
@@ -466,8 +501,8 @@
             Block Activity
           </button>
         </div>
-        <div class="content">
-          <div class="income">
+        <div class="steps">
+          <div class="income step">
             🎁 Resupply everyone for
             {#each round.resupply[0] as amount, assetIdx (assetIdx)}
             <span class="asset">{getAssetEmoji(assetIdx)}</span>
@@ -476,28 +511,26 @@
             {/each}
           </div>
           {#if round.block}
-          <div class="swaps">
-            {#each batchSwapsByPlayer(round.block.swaps) as { playerIdx, swaps }}
-            <div class="batch" class:multi={swaps.length > 1}>
-              <span class="subject">
-                <span class:builder={playerIdx === round.block.builderIdx}>
-                  <Player name={data.players[playerIdx].name} />
-                </span>
-                sold:
+          {#each batchSwapsByPlayer(round.block.swaps) as { playerIdx, swaps }, batchIdx }
+          <div class="swaps step" class:multi={swaps.length > 1}>
+            <span class="subject">
+              <span class:builder={playerIdx === round.block.builderIdx}>
+                <Player name={data.players[playerIdx].name} />
               </span>
-              {#each swaps as swap}
-              <div class="swap">
-                <span class="asset">{getAssetEmoji(swap.fromAssetIdx)}</span>
-                <span class="quantity" title={swap.fromAmount.toExponential()}>{formatAmount(swap.fromAmount)}</span>
-                ⇾
-                <span class="asset">{getAssetEmoji(swap.toAssetIdx)}</span>
-                <span class="quantity" title={swap.toAmount.toExponential()}>{formatAmount(swap.toAmount)}</span>
-              </div>
-              {/each}
+              sold:
+            </span>
+            {#each swaps as swap}
+            <div class="swap">
+              <span class="asset">{getAssetEmoji(swap.fromAssetIdx)}</span>
+              <span class="quantity" title={swap.fromAmount.toExponential()}>{formatAmount(swap.fromAmount)}</span>
+              ⇾
+              <span class="asset">{getAssetEmoji(swap.toAssetIdx)}</span>
+              <span class="quantity" title={swap.toAmount.toExponential()}>{formatAmount(swap.toAmount)}</span>
             </div>
             {/each}
           </div>
-          <div class="burn">
+          {/each}
+          <div class="burn step">
             🔥 Burned
             <span class="quantity">{formatAmount(round.block.bids[round.block.builderIdx])}</span>
             <span class="asset">{getAssetEmoji(0)}</span>
@@ -513,7 +546,6 @@
           {/if}
         </div>
       </div>
-
     </div>
     {/each}
   </section>