Use the relatively new svelte style directives when applicable

Svelte is able to optimize this directive better

src/p4/Button.svelte

@@ -48,7 +48,7 @@
   }
 </style>
 
-<button on:click style={`background-color: ${getColor()}`}>
+<button on:click style:background-color={getColor()}>
   <div class="dimmer"></div>
   <div class="text">{text}</div>
 </button>

src/p4/Progress.svelte

@@ -31,7 +31,10 @@
 
 <div class="progress">
   <div class="bar-outer">
-    <div class="bar-inner" style={`width:${progress*100}%`}></div>
+    <div
+      class="bar-inner"
+      style:width={`${progress * 100}%`}
+    ></div>
   </div>
   <div class="text">
     {text}

src/p4/Section.svelte

@@ -42,7 +42,13 @@
   }
 </style>
 
-<div class="card" class:caption class:modal class:center={caption || center} style={accent ? `border-top: 6px solid ${accent}` : ''}>
+<div
+  class="card"
+  class:caption
+  class:modal
+  class:center={caption || center}
+  style:border-top={accent ? `6px solid ${accent}` : ''}
+>
   {#if reset}
     <div class="reset">
       <ResetButton on:click={reset} />