Slack demo needed a few changes. Turns out, if you say something is X wide, browsers think you mean X+padding wide not X wide. Go figure.

public/blockstart/demos/slack.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <title>Blockstart Template</title>
+  <title>Blockstart Slack Demo</title>
 
   <link rel="stylesheet" href="/blockstart/blockstart.css">
 
@@ -83,16 +83,16 @@
 
 
   <hr>
-  <block class="center sized solid pad" style="--value: 9;">
+  <block class="center solid sized" style="--value: 9; --w: 100%;">
 
-    <block class="center-self center-text pad sized" style="--w: 80vw;">
+    <block class="center-self sized center-text pad" style="--w: 80%;">
       <h1>Thundercats Tonx Pok Pok Pork</h1>
       <p>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</p>
       <button class="pad">MEET SLACK FOR ENTERPRISE</button>
       <button class="pad">TALK TO SALES</button>
     </block>
 
-    <grid class="sized center-self" style="--cols: 1fr 1fr 1fr; --w: 80vw;">
+    <grid class="center-self sized" style="--cols: 1fr 1fr 1fr; --w: 80%;">
       <block>
         <h1>75%</h1>
         <span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span>
@@ -105,7 +105,6 @@
         <h1>91%</h1>
         <span>Cardigan raclette tbh, kitsch lomo fanny pack vegan.</span>
       </block>
-
     </grid>
   </block>
 
@@ -136,8 +135,8 @@
   </grid>
 
   <hr>
-  <block class="solid center sized pad" style="--value: 2; --text: 9">
+  <block class="solid center sized" style="--value: 2; --text: 9; --w: 100%">
-    <block class="sized center-self center-text" style="--w: 80vw">
+    <block class="sized center-self center-text" style="--w: 80%">
     <h1>Welcome to your new digital HQ</h1>
 
       <button class="pad" style="--text: 0;">TRY FOR FREE</button>