diff --git a/docs/render/recipe.css b/docs/render/recipe.css
index fbdc030..468a91b 100644
--- a/docs/render/recipe.css
+++ b/docs/render/recipe.css
@@ -44,8 +44,7 @@ img.publisher {
 header {
   gap: 2em;
   margin-bottom: 2em;
-/* 
-  padding-left:15em; */
+  /* padding-left: 18em; */
 }
 
 h1 {
@@ -172,12 +171,12 @@ li:hover {
   /* display: inline; */
 }
 .ingredient {
-  padding: 0.5em 1em;
+  padding: .25em 0em;
   margin: 0 -1em;
   line-height: 1.25em;
   opacity: 0.75;
   cursor: pointer;
-  padding-left:3em;
+  padding-left: 1em;
 }
 
 .ingredients .yield {
@@ -188,9 +187,9 @@ li:hover {
 }
 .ingredients .quantity {
   float:left;
-  margin-left:-2em;
+  margin-left:-2.5em;
   width:2em;
-  text-align:center;
+  text-align:right;
 }
 
 .ingredient.complete,
@@ -215,7 +214,7 @@ li:hover {
   width: 100px;
   height: 0.5px;
   background-color: currentColor;
-  opacity: 0.54;
+  opacity: .3;
   border:none;
   margin: 0 0 1em 0;
 }
diff --git a/docs/render/recipe.js b/docs/render/recipe.js
index 4269576..4aacc44 100644
--- a/docs/render/recipe.js
+++ b/docs/render/recipe.js
@@ -71,7 +71,7 @@ function getStringProperty(stringOrArray, prop) {
   if (prop) {
     stringOrArray = stringOrArray[prop]
   }
-  return stringOrArray.toString();
+  return stringOrArray?.toString();
 }
 
 const m = (selector, ...args) => {
@@ -143,7 +143,7 @@ function highlightStep(e) {
 
 }
 
-const ingredientMatch = /^(?:A )?([\/0-9\u00BC-\u00BE\u2153-\u215E\u2009]+) ?(.*)/
+const ingredientMatch = /^(?:A )?([\/0-9 \-\u00BC-\u00BE\u2153-\u215E\u2009]*) ?(.*)/
 function ingredientEl(string, terms) {
   if (string == "-") return m("hr");