Keep units styled and prevent zero reverse examples

2026-03-07 08:47:17 +00:00
parent 9e2475b1fb
commit d450223f70
5 changed files with 444 additions and 72 deletions
--- a/hdyc-svelte/src/lib/components/QuickConversionTable.svelte
+++ b/hdyc-svelte/src/lib/components/QuickConversionTable.svelte
@@ -41,7 +41,7 @@
      {#each rows as row}
        <div class="chart-row">
          <p class="chart-statement">
-            Converting {row.input} {inputLabel} into {outputLabel} equals
+            Converting {row.input} <span class="chart-unit">{inputLabel}</span> into <span class="chart-unit">{outputLabel}</span> equals
            <span class="chart-output-value">{row.output}</span>
            <span class="chart-output-unit">{outputLabel}</span>.
          </p>
@@ -94,6 +94,7 @@
    color: var(--text);
  }

+  .chart-unit,
  .chart-output-unit {
    font-variant: petite-caps;
  }