Use "metric-only" phrase for clearer emphasis

src/templates/generated/articles.html

@@ -1,5 +1,5 @@
 <li><a href={{webRoot}}/article/create-product-reviews-showing-metric-references>Create Product Reviews Showing Metric References</a></li>
-<li><a href={{webRoot}}/article/go-fast-with-high-contrast-metric-only-tape-measures>Go Fast With High Contrast Metric Only Tape Measures</a></li>
+<li><a href={{webRoot}}/article/go-fast-with-high-contrast-metric-only-tape-measures>Go Fast With High Contrast Metric-Only Tape Measures</a></li>
 <li><a href={{webRoot}}/article/liberty-units-ftw>Liberty Units FTW!</a></li>
 <li><a href={{webRoot}}/article/metric-poetry>Metric Poetry</a></li>
 <li><a href={{webRoot}}/article/metrication-is-the-path-of-least-resistance>Metrication is the Path of Least Resistance</a></li>

src/templates/metrication-checklist.html

@@ -9,7 +9,7 @@
    <li id=car>          <p>Set the display in your car to Celsius (&deg;C)</p>                                    <label><input type=checkbox><b></b></label></li>
    <li id=home>         <p>Set your home thermostat to Celsius (&deg;C)</p>                                       <label><input type=checkbox><b></b></label></li>
    <li id=refrigerator> <p>Set your refrigerator to Celsius (&deg;C)</p>                                          <label><input type=checkbox><b></b></label></li>
-   <li id=tape-measure> <p>Buy a metric only <a href={{tapeMeasure}}>tape measure</a></p>                         <label><input type=checkbox><b></b></label></li>
+   <li id=tape-measure> <p>Buy a metric-only <a href={{tapeMeasure}}>tape measure</a></p>                         <label><input type=checkbox><b></b></label></li>
    <li id=kitchen-scale><p>Buy a <a href={{webRoot}}/products>kitchen scale</a> that displays grams (g)</p>       <label><input type=checkbox><b></b></label></li>
    <li id=bathroom>     <p>Set your bathroom scale to kilograms (kg)</p>                                          <label><input type=checkbox><b></b></label></li>
    <li id=helpful>      <p>Click "Helpful" for a review of a good metric product</p>                              <label><input type=checkbox><b></b></label></li>

src/website/article/create-product-reviews-showing-metric-references/index.html

@@ -23,7 +23,7 @@ <h2>{{articleTitle}}</h2>
       <p>
          You can leverage the power of a picture by taking a photo of a product you love that you
          purchased online.&nbsp;
-         Take the photo while the product is being measured with a metric only ruler or scale, and
+         Take the photo while the product is being measured with a metric-only ruler or scale, and
          include the photo in a review of the product you submit to the online shopping
          website.&nbsp;
       </p>

src/website/article/go-fast-with-high-contrast-metric-only-tape-measures/index.html

@@ -1,4 +1,4 @@
-{% assign articleTitle = 'Go Fast With High Contrast Metric Only Tape Measures' %}
+{% assign articleTitle = 'Go Fast With High Contrast Metric-Only Tape Measures' %}
 {% assign heroImage =    'high-contrast.jpg' %}
 {% assign heroCaption =  'Big bold repeating digits from 1 to 9' %}
 {% render 'src/templates/doc-begin.html', articleTitle: articleTitle, heroImage: heroImage, heroCaption: heroCaption %}

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

@@ -8,7 +8,7 @@
    <section>
       <h2>{{articleTitle}}</h2>
       <figure>
-         <img src={{heroImage}} data-author=ny.gov data-license=public-domain alt=fireworks>
+         <img src={{heroImage}} alt=fireworks data-author=ny.gov data-license=public-domain>
          <figcaption>{{heroCaption}}</figcaption>
       </figure>
       <p>
@@ -25,7 +25,8 @@ <h2>{{articleTitle}}</h2>
          <b>Liberty Units FTW!</b>
       </p>
       <figure>
-         <img src=crossing-the-delaware.jpg data-author=emanuel-leutze data-license=public-domain alt=painting>
+         <img src=crossing-the-delaware.jpg alt=painting
+            data-author=emanuel-leutze data-license=public-domain>
          <figcaption>George Washington Crossing the Delaware by Emanuel Leutze</figcaption>
       </figure>
    </section>

src/website/article/metrication-is-the-path-of-least-resistance/index.html

@@ -22,7 +22,7 @@ <h2>{{articleTitle}}</h2>
 
    <section>
       <figure>
-         <img src={{heroImage}} data-author=nasa data-license=public-domain alt=2d-radar>
+         <img src={{heroImage}} alt=2d-radar data-author=nasa data-license=public-domain>
          <figcaption>{{heroCaption}}</figcaption>
       </figure>
       <p>

src/website/article/rules/index.html

@@ -8,7 +8,8 @@
    <section>
       <h2>{{articleTitle}}</h2>
       <figure>
-         <img src={{heroImage}} data-author=jeffrey-g-katz-on-navy.mil data-license=public-domain alt=supercarrier>
+         <img src={{heroImage}} alt=supercarrier
+            data-author=jeffrey-g-katz-on-navy.mil data-license=public-domain>
       </figure>
    </section>
 
@@ -29,8 +30,8 @@ <h2>America, Fuck Yeah</h2>
          understand metric.&nbsp;
          Ain't nobody got time to listen to tankies, bootlickers, and jihadists cry about the
          U.S.&nbsp;
-         If you live in a democracy, the U.S. Navy's <i>Freedom of Navigation Operations</i> might
-         just be the reason you still have a democracy.&nbsp;
+         If you live in a democracy, the U.S. Navy's <i>Freedom of Navigation Operations</i>
+         might just be the reason you still have a democracy.&nbsp;
       </p>
       <p>
          NASA used metric for the Apollo flight calculations thus making America the one and only
@@ -67,12 +68,13 @@ <h2>Do not debate spelling or pronunciation</h2>
       <p>
          The same goes for spaces and commas.&nbsp;
          Official science and engineering documents should put a space between the numerical
-         value and unit symbol in order to consistently adher to SI rules.&nbsp;
+         value and unit symbol in order to consistently adhere to SI rules.&nbsp;
          In casual writing, however, dropping the space often looks better and is perfectly
          acceptable.&nbsp;
       </p>
       <p>
-         Also, we Americans use a comma as the thousands separator, and this is great for clarity.&nbsp;
+         Also, we Americans use a comma as the thousands separator, and this is great for
+         clarity.&nbsp;
          1 234 is confusing and causes formatting errors.&nbsp;
          1,234 is clear.&nbsp;
       </p>
@@ -98,7 +100,8 @@ <h2>Don't be pedantic</h2>
       <h2>Don't lie about elephants being imperial units</h2>
       <p>
       <figure>
-         <img src=asian-elephant.jpg data-author=basile-morin-on-wikimedia data-license=cc-by-sa alt=elephant>
+         <img src=asian-elephant.jpg alt=elephant
+            data-author=basile-morin-on-wikimedia data-license=cc-by-sa>
       </figure>
       <p>
          A frame of reference, such as an elephant or a school bus, spices up

src/website/calculator/calculator.less

@@ -37,6 +37,15 @@ label:has(select) {
       }
    }
 
+b.flair {
+   display: inline-block;
+   font-size: 0.9em;
+   color: white;
+   background-color: forestgreen;
+   padding: 3px 15px;
+   border-radius: 20px;
+   }
+
 section.grams-calculator {
    min-height: 750px;  //prevent jitter when calculations refresh
    >form {

src/website/calculator/index.html

@@ -51,7 +51,10 @@ <h2>{{articleTitle}}</h2>
                <b>~~ingredient.description~~</b><span data-true=~~ingredient.packed~~>*</span>
             </output>
          </div>
-         <small data-true=~~packed~~>* Use this measurment if the ingredients in <span>~~unitsLabel~~</span> were pressed or packed.</small>
+         <small data-true=~~packed~~>
+            * Use this measurment only if the ingredients in <span>~~unitsLabel~~</span>
+            were pressed or packed down.
+         </small>
       </figure>
    </section>
 
@@ -118,7 +121,7 @@ <h2>Open Source</h2>
          The <i>Recipe Converter Calculator</i> is an open source community project.&nbsp;
          You can help out by submitting corrections and additions on GitHub or by posting to the
          <a href=https://www.reddit.com/r/ThinkMetric>r/ThinkMetric</a> sub on Reddit.&nbsp;
-         If you post to Reddit, add the <i>"Food, Recipies, & Grams"</i> flair.&nbsp;
+         If you post to Reddit, add the <b class=flair>Food, Recipes, & Grams</b> flair.&nbsp;
       </p>
       <p>
          Data for the calculator is on GitHub at:<br>

src/website/do-not-learn-metric/index.html

@@ -28,7 +28,7 @@ <h2>{{articleTitle}}</h2>
          <figcaption>{{heroCaption}}</figcaption>
       </figure>
       <p>
-         If you get a metric only tape measure and switch over to using metric for your home projects, you'll quickly realize that millimeters are awesome.&nbsp;
+         If you get a metric-only tape measure and switch over to using metric for your home projects, you'll quickly realize that millimeters are awesome.&nbsp;
          The mm is the perfect size.&nbsp;
          A mm is the smallest length you can reliably measure quickly without special tools and extra lighting.&nbsp;
          Metric literally requires less effort to remember your measurements and helps you quickly cut accurately.&nbsp;
@@ -40,7 +40,7 @@ <h2>Steps</h2>
       <div>
          <ol>
             <li><b>Settings</b> &mdash; Set your mobile device to metric.&nbsp; Set your refrigerator, home thermostat, and car temperature to Celsius.&nbsp; Set the scales in your kitchen and bathroom to display grams and kilograms.</li>
-            <li><b>Tools</b> &mdash; Buy some <a href={{webRoot}}/products>metric only measuring devices</a> (avoid dual units like the plague because dual units kill your senses).&nbsp; Sadly, you'll have to purchase online as retail stores mostly sell imperial.</li>
+            <li><b>Tools</b> &mdash; Buy some <a href={{webRoot}}/products>metric-only measuring devices</a> (avoid dual units like the plague because dual units kill your senses).&nbsp; Sadly, you'll have to purchase online as retail stores mostly sell imperial.</li>
             <li><b>Communication</b> &mdash; When talking with other people use metric as if everyone normally uses metric.&nbsp; When you get a puzzled look, just casually provide a frame of reference or gesture a size with your hands.</li>
          </ol>
       </div>

src/website/products/index.html

@@ -9,11 +9,11 @@
       <h2>{{articleTitle}}</h2>
       <h3>Go metric to boost your efficiency</h3>
       <p>
-         It's challenging in the U.S. to get your hands on metric only products.&nbsp;
+         It's challenging in the U.S. to get your hands on metric-only products.&nbsp;
          You mostly have to shop online, and unfortunately Amazon was the only e-commerce company
-         that offered a variety of metric only products.&nbsp;
+         that offered a variety of metric-only products.&nbsp;
          Walmart and Target have been expanding their online product selections, and now they do
-         sell some metric only products.
+         sell some metric-only products.
       </p>
       <figure>
          <img src={{heroImage}} data-author=axisadman data-license=cc-by-sa alt=warehouse>
@@ -28,7 +28,7 @@ <h3>Go metric to boost your efficiency</h3>
    </section>
 
    <section>
-      <h2>Metric Only</h2>
+      <h2>Metric-Only</h2>
       <p>
          🏆: Favorite product
       </p>
@@ -43,7 +43,7 @@ <h2>Metric Only</h2>
    <section>
       <h2>Spread the Word</h2>
       <p>
-         If you read a useful customer review for a metric only product, be sure to click the
+         If you read a useful customer review for a metric-only product, be sure to click the
          review's <b>"Helpful"</b> button 👍.
       </p>
    </section>