Rename Rules to The Rules

center-key · Aug 24, 2024 · fe4e49d · fe4e49d
1 parent fa6b7ef
commit fe4e49d
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 25 deletions.
diff --git a/src/templates/generated/articles.html b/src/templates/generated/articles.html
@@ -10,4 +10,4 @@
 <li><a href={{webRoot}}/article/millimeter-standard-war>The Millimeter Standard War</a></li>
 <li><a href={{webRoot}}/article/pint-is-not-a-unit-of-measurement>A Pint Is Not a Unit of Measurement</a></li>
 <li><a href={{webRoot}}/article/review-a-quality-metric-only-product>Review a Quality Metric-Only Product</a></li>
-<li><a href={{webRoot}}/article/rules>Rules</a></li>
+<li><a href={{webRoot}}/article/the-rules>The Rules</a></li>
diff --git a/src/templates/table-of-products.html b/src/templates/table-of-products.html
@@ -190,7 +190,7 @@
    <td><a href=https://www.amazon.com/dp/B07T2Z67TT><img src=https://m.media-amazon.com/images/I/41hPf+dm+HL._AC_.jpg alt=preview></a></td>
 </tr>
 <tr>
-   <td><a href=https://www.amazon.com/dp/B07R3QKKVW>90 Degree L Shaped Dual Angle Side Square Layout Tool, 150&times;300 mm</a></td>
+   <td><a href=https://www.amazon.com/dp/B07R3QKKVW>90 Degree L Shaped Dual-Angle Side Square Layout Tool, 150&times;300 mm</a></td>
    <td>Stainless steel</td>
    <td><a href=https://www.amazon.com/dp/B07R3QKKVW><img src=https://images-na.ssl-images-amazon.com/images/I/412yBZTjN5S._AC_UL348_SR348,348_.jpg alt=preview></a></td>
 </tr>

diff --git a/src/website/article/fractions-are-a-royal-pain-in-imperial/index.html b/src/website/article/fractions-are-a-royal-pain-in-imperial/index.html
@@ -84,9 +84,21 @@ <h2>0.3333333333</h2>
       <p>
          Some imperial zealots obsess about 1/3 because they incorrectly believe that dividing by 3
          is incompatible with metric.&nbsp;
-         When they pull the 1/3 stunt, simply ask them what's 1/3 of a U.S. dollar?&nbsp;
-         There's never been a world financial meltdown because someone couldn't do division on a
-         dollar.&nbsp;
+         When they pull the 1/3 stunt, simply ask them what's 1/3 of a cup?&nbsp;
+      </p>
+      <table data-code-column=2>
+         <thead><tr><th>What's 1/3 of...</th><th>Answer</th><th></th></tr></thead>
+         <tbody>
+            <tr><td>a cup in ounces?</td>      <td>2.666 ounces</td>      <td>Awkward</td></tr>
+            <tr><td>a cup in tablespoons?</td> <td>5.333 tablespoons</td> <td>Awkward</td></tr>
+            <tr><td>a U.S. dollar?</td>        <td>33&cent;</td>          <td class=ballot-checkmark></td></tr>
+         </tbody>
+      </table>
+      <p>
+         While the imperial zealot is stewing over the awkwardness of 1/3 of cup, ask if they
+         would have trouble figuring out 1/3 of a U.S. dollar?&nbsp;
+         The U.S. dollar is metric and there's never been a world financial meltdown because
+         someone couldn't do division on a dollar.&nbsp;
       </p>
       <p>
          Answering the 1/3 question in metric is not a problem.&nbsp;
@@ -96,19 +108,26 @@ <h2>0.3333333333</h2>
       </p>
       <p>
          Even if you need to pull out a calculator, metric is still far less effort.&nbsp;
-         Let's say your measurement is 1,267 mm.&nbsp;
-         You punch 1,267 into your calculator and divide by 3, and you're done in one
+         Let's say your measurement is 1,107 mm.&nbsp;
+         You punch 1,107 into your calculator and divide by 3, and you're done in one
          operation.&nbsp;
       </p>
+      <table data-code-column=2>
+         <thead><tr><th>What's 1/3 of...</th><th>Calculation</th><th></th></tr></thead>
+         <tbody>
+            <tr><td>1,107 mm?</td>      <td>1107 &div; 3 = 369</td>                                                                            <td class=ballot-checkmark></td></tr>
+            <tr><td>43 5/8 inches?</td> <td>((5 &div; 8) + 43) / 3 <i data-icon=right-long></i> 14.54 <i data-icon=right-long></i> 14 ?/8</td> <td>Awkward</td></tr>
+         </tbody>
+      </table>
       <figure>
          <img src=imperial-tape-measure.jpg alt=fractions data-license=fair-use>
-         <figcaption>Where are the tick marks for 63/100 of an inch?&nbsp; 😡 😤 🤬</figcaption>
+         <figcaption>Where are the tick marks for 54/100 of an inch?&nbsp; 😡 😤 🤬</figcaption>
       </figure>
       <p>
-         The imperial equivalent is 49 7/8 inches, so you punch 7 into your calculator and divide
-         by 8 then add 49 then hit equals and finally divide by 3.&nbsp;
-         You get 16.63 inches, but sadly your tape measure does not have tick marks
-         for 0.63 of an inch.&nbsp;
+         The imperial equivalent is 43 5/8 inches, so you punch 5 into your calculator and divide
+         by 8 then add 43 then hit equals and finally divide by 3.&nbsp;
+         You get 14.54 inches, but sadly your tape measure does not have tick marks for 54/100 of
+         an inch.&nbsp;
          <b>Doh!</b>&nbsp;
          What a royal pain for something so trivial.&nbsp;
       </p>

diff --git a/src/website/article/rules/asian-elephant.jpg → ...site/article/the-rules/asian-elephant.jpg b/src/website/article/rules/asian-elephant.jpg → ...site/article/the-rules/asian-elephant.jpg
diff --git a/src/website/article/rules/cvn-75.jpg → src/website/article/the-rules/cvn-75.jpg b/src/website/article/rules/cvn-75.jpg → src/website/article/the-rules/cvn-75.jpg
diff --git a/src/website/article/rules/index.html → src/website/article/the-rules/index.html b/src/website/article/rules/index.html → src/website/article/the-rules/index.html
@@ -1,4 +1,4 @@
-{% assign articleTitle = 'Rules' %}
+{% assign articleTitle = 'The Rules' %}
 {% assign heroImage =    'cvn-75.jpg' %}
 {% assign heroCaption =  'USS Harry S. Truman (CVN 75)' %}
 {% render 'src/templates/doc-begin.html', articleTitle: articleTitle, heroImage: heroImage, heroCaption: heroCaption %}

diff --git a/...ite/article/rules/liberia-and-myanmar.png → ...article/the-rules/liberia-and-myanmar.png b/...ite/article/rules/liberia-and-myanmar.png → ...article/the-rules/liberia-and-myanmar.png
diff --git a/src/website/article/rules/whipshots-50ml.jpg → ...site/article/the-rules/whipshots-50ml.jpg b/src/website/article/rules/whipshots-50ml.jpg → ...site/article/the-rules/whipshots-50ml.jpg
diff --git a/src/website/css/components.less b/src/website/css/components.less
@@ -14,20 +14,28 @@ section {
       padding: 0px 0.4em;
       }
 
-   .ballot-x-mark {
+   .BallotMark(@symbol, @color) {
       position: relative;
       text-align: center;
       &::before {
          position: absolute;
          top: -0.18em;
          left: 0px;
          right: 0px;
-         content: @symbolBallotXMark;
+         content: @symbol;
          font-size: 2rem;
-         color: firebrick;
+         color: @color;
          }
       }
 
+   .ballot-checkmark {
+      .BallotMark(@symbolCheckmark, green);
+      }
+
+   .ballot-x-mark {
+      .BallotMark(@symbolBallotXMark, firebrick);
+      }
+
    code.block {
       display: block;
       font-size: 0.9rem;

diff --git a/src/website/css/layout.less b/src/website/css/layout.less
@@ -58,15 +58,21 @@
          font-size: 1rem;
          text-align: left;
          }
-      tbody tr td {
-         font-size: 1rem;
-         .MobileMode({ font-size: 0.9rem; });
-         text-align: left;
-         }
-      tbody tr th {
-         i.font-icon {
-            font-size: 1.1em;
-            padding-right: 0.4em;
+      tbody tr {
+         th[colspan] {
+            padding: 6px 0px;
+            i.font-icon {
+               font-size: 1.1em;
+               padding-right: 0.4em;
+               }
+            }
+         td {
+            font-size: 1rem;
+            .MobileMode({ font-size: 0.9rem; });
+            text-align: left;
+            i.font-icon {
+               color: steelblue;
+               }
             }
          }
       }