Optimize ingredient drop-down initilaitzation

src/website/app.js

@@ -83,7 +83,7 @@ const app = {
       convertToMilliliters(elem) {
          // <option data-type=volume data-per-cup=16>Tablespoons</option>
          const mlPerCup = 236.588;
-         const form = elem.closest('form');
+         const form =     elem.closest('form');
          const elemMap = {
             quantity: form.querySelector('input[name=quantity]'),
             units:    form.querySelector('select[name=units]'),
@@ -97,14 +97,13 @@ const app = {
          output.textContent = qty ? format(toMl()) : 'N/A';
          },
       populateIngredientDropDown() {
-         const defaultIngredient = 'Almonds';
-         const keys = [...new Set(globalThis.ingredientsDB.map(ingredient => ingredient.key))];
-         const ingredients = keys.map(key => ({
-            key:   key,
-            words: globalThis.ingredientsDB.filter(item => item.key === key).map(item => item.description).join(' '),
-            }));
-         const options = dna.clone('input-ingredient', ingredients);
-         const defaultOption = options[keys.indexOf(defaultIngredient)];
+         const defaultChoice = 'Almonds';
+         const keys =          [...new Set(globalThis.ingredientsDB.map(item => item.key))];
+         const findByKey =     (key) => globalThis.ingredientsDB.filter(item => item.key === key);
+         const getWords =      (key) => findByKey(key).map(item => item.description).join(' ');
+         const ingredients =   keys.map(key => ({ key: key, words: getWords(key) }));
+         const options =       dna.clone('input-ingredient', ingredients);
+         const defaultOption = options[keys.indexOf(defaultChoice)];
          defaultOption.selected = true;
          app.calculator.convertToGrams(defaultOption);
          },
@@ -123,10 +122,10 @@ const app = {
          //    <ul><li><a href=../../article/go-metric>Go Metric<a><li>...
          // </div>
          const container = globalThis.document.getElementById('article-nav');
-         const articles = [...container.querySelectorAll('ul >li >a')];
-         const header =   'main >section:first-child >h2';
-         const title =    globalThis.document.querySelector(header).textContent;
-         const index =    articles.findIndex(article => article.textContent === title);
+         const articles =  [...container.querySelectorAll('ul >li >a')];
+         const header =    'main >section:first-child >h2';
+         const title =     globalThis.document.querySelector(header).textContent;
+         const index =     articles.findIndex(article => article.textContent === title);
          const configure = (button, index) => {
             button.setAttribute('data-href', articles[index]?.getAttribute('href'));
             button.setAttribute('title',     articles[index]?.textContent);
@@ -143,8 +142,6 @@ const app = {
       },
 
    start() {
-      globalThis.document.querySelectorAll('form:not([action])').forEach(
-         form => form.onsubmit = () => false);  //disable submitting form on enter key
       console.log('Think Metric');
       console.log('🇺🇸 Americans for Metrication 🇺🇸');
       app.article.init();

src/website/article/liberty-units-ftw/index.html

@@ -14,7 +14,8 @@ <h2>{{articleTitle}}</h2>
       <p>
          Miles, pounds, and gallons are imperial units from the days
          <b><i>before</i></b> our freedom when we were ruled over by a foreign king.&nbsp;
-         The king pressed his <b>foot</b> onto our neck, but the Founding Fathers rebelled.&nbsp;
+         The king pressed his <b><i>foot</i></b> onto our neck, but the Founding Fathers
+         rebelled.&nbsp;
       </p>
       <p>
          Antiquated imperial units are submissive and cowardly.&nbsp;
@@ -35,7 +36,7 @@ <h2>{{articleTitle}}</h2>
       <h2>Meters</h2>
       <p>
          George Washington's boat in Leutze's famous painting is depicted at about 4 or 5
-         meters long (the actual boats used to cross the Delaware River were somewhat
+         meters long (the actual boats used in 1776 to cross the Delaware River were somewhat
          bigger).&nbsp;
       </p>
       <figure>

src/website/article/metric-poetry/index.html

@@ -119,11 +119,18 @@ <h2>Chicken or the Egg</h2>
          In HTML this would look like:
       </p>
       <p>
-         <code>
-            &lt;p&gt;Compared to dealing with inches and annoying fractions, metric is better by a
-            &lt;a href=https://think-metric.org/poetry&gt;country klick&lt;/a&gt;.&lt;/p&gt;
+         <code class=block>
+            &lt;p&gt;<br>
+               Compared to dealing with inches and annoying fractions, metric is better by a
+               &lt;a href=https://think-metric.org/poetry&gt;country klick&lt;/a&gt;.<br>
+            &lt;/p&gt;
          </code>
       </p>
+      <p><i data-icon=arrow-alt-circle-down></i></p>
+      <p>
+         Compared to dealing with inches and annoying fractions, metric is better by a
+         <a href=https://think-metric.org/poetry>country klick</a>.
+      </p>
    </section>
 
    <section>

src/website/calculator/calculator.less

@@ -9,7 +9,7 @@
 ///      <option>Pink</option>
 //    </select>
 // </label>
-label:has(select) {
+label:has(select) {  //temporary until v2.4.6
    position: relative;
    max-width: 25em;
    text-align: left;

src/website/css/components.less

@@ -35,6 +35,14 @@ figure.small-picture {
    .MobileMode({ max-width: 150px; })
    }
 
+code.block {
+   display: block;
+   font-size: 0.9rem;
+   background-color: lightcyan;
+   border: 2px dotted darkcyan;
+   padding: 5px 15px;
+   }
+
 table.big-table {
    margin: 0px;
    .TableCell() {

src/website/css/layout.less

@@ -72,11 +72,15 @@ body {
          a {
             white-space: normal;
             }
-         >figure { padding: 0px 10px; }      //temporary until v2.1.4
-         >figure img { max-height: 550px; }  //temporary until v2.1.4
          >p + h3 {
             margin-top: 50px;
             }
+         >p:has(i[data-icon=arrow-alt-circle-down]) {
+            text-align: center;
+            i[data-icon=arrow-alt-circle-down] {
+               color: darkcyan;
+               }
+            }
          }
       }
    >footer {