🐛 add spaces back to pattern names

and add dashes back to ids

www/src/main.js

@@ -23,19 +23,21 @@ const markup = name => {
   if (random(1, 2) === 1) [c1, c2] = [c2, c1]
   const alpha = genAlpha()
 
+  // create strings from function name
+  const id = name.replace(/([A-Z])/g, '-$1').toLowerCase()
+  const formatName = name.replace(/([A-Z])/g, ' $1')
+
   // generate code example
   const params = alpha === 1 ? `'${c2}'` : `'${c2}', ${alpha}`
   const functionCode = `${name}(${params})`
 
   // generate actual markup
-  const id = name.toLowerCase()
-  const heroFunction = hero[name]
-  const style = `background-position: center; background-color: ${c1}; background-image: ${heroFunction(c2, alpha)}`
+  const style = `background-position: center; background-color: ${c1}; background-image: ${hero[name](c2, alpha)}`
   const html = `
     <div class="hero w-100 w-50-ns w-third-m w-25-l fl" id="${id}" role="presentation">
       <div class="hide-child aspect-ratio aspect-ratio--16x9" style="${style}">
         <div class="child aspect-ratio--object bg-black-70 flex flex-column items-center justify-center pa3">
-          <span class="white f5 f4-ns f3-l fw4 ttu tracked tc mt0 mb2">${name}</span>
+          <span class="white f5 f4-ns f3-l fw4 ttu tracked tc mt0 mb2">${formatName}</span>
           <code class="mt2 pv2 ph3 ba b--white br2 code white f6 f5-ns">${functionCode}</code>
         </div>
       </div>