From 8f2a080d854c716370c09b0b62c9dc958ab6ae4c Mon Sep 17 00:00:00 2001
From: Nick Walker <nick@nickwalker.us>
Date: Sat, 16 May 2026 20:27:31 -0400
Subject: [PATCH 1/4] Factor out unit toggle code

Only show toggle styles when JS is on
---
 _includes/schedule_table.html | 23 ++-------------
 _includes/unit_toggle.html    | 55 +++++++++++++++++++++++++++++++++++
 _layouts/base.html            |  1 +
 css/style.scss                | 16 ++++++++++
 4 files changed, 74 insertions(+), 21 deletions(-)
 create mode 100644 _includes/unit_toggle.html

diff --git a/_includes/schedule_table.html b/_includes/schedule_table.html
index f9899d5..9fc80d3 100644
--- a/_includes/schedule_table.html
+++ b/_includes/schedule_table.html
@@ -1,11 +1,11 @@
-<div class="table-responsive schedule-table-wrapper" data-unit="mi">
+<div class="table-responsive schedule-table-wrapper">
 <table class='schedule-table table'>
     {% if include.show_header %}
     <thead>
     <tr>
         <th>Date</th>
         <th class="text-end">Time</th>
-        <th><div class="d-flex justify-content-between">Routes<span>Distance (<button class="dist-unit-toggle" title="For the enlightened..." style="background:none;border:none;padding:0;font:inherit;text-decoration:underline dotted;cursor:pointer;">mi</button>)</span></div></th>
+        <th><div class="d-flex justify-content-between">Routes<span>Distance (<button type="button" class="dist-unit-toggle unit-toggle" title="For the enlightened...">mi</button>)</span></div></th>
     </tr>
     </thead>
     {% endif %}
@@ -123,22 +123,3 @@
     <tfoot id="schedule-finished" style="display: none"><tr><td colspan="3">A new schedule is coming! <a href="https://github.com/raceconditionrunning/raceconditionrunning.github.io">Contribute on GitHub</a></td></tr></tfoot>
 </table>
 </div>
-<script>
-if (!window.__distToggleInit) {
-    // For switching between miles and kilometers.
-    window.__distToggleInit = true;
-    document.addEventListener('click', (e) => {
-        const btn = e.target.closest('.dist-unit-toggle');
-        if (!btn) {
-            return;
-        }
-        const wrapper = btn.closest('.schedule-table-wrapper');
-        const newUnit = wrapper.dataset.unit === 'km' ? 'mi' : 'km';
-        wrapper.dataset.unit = newUnit;
-        btn.textContent = newUnit;
-        wrapper.querySelectorAll('.dist-value').forEach((span) => {
-            span.textContent = span.dataset[newUnit];
-        });
-    });
-}
-</script>
diff --git a/_includes/unit_toggle.html b/_includes/unit_toggle.html
new file mode 100644
index 0000000..ee898aa
--- /dev/null
+++ b/_includes/unit_toggle.html
@@ -0,0 +1,55 @@
+<script>
+(function() {
+    if (window.__unitToggleInit) return;
+    window.__unitToggleInit = true;
+
+    const UNITS = {
+        dist: { key: 'rcr-dist-unit', options: ['mi', 'km'], toggleClass: 'dist-unit-toggle' },
+        elev: { key: 'rcr-elev-unit', options: ['ft', 'm'],  toggleClass: 'elev-unit-toggle' },
+    };
+
+    function getUnit(spec) {
+        try {
+            const v = localStorage.getItem(spec.key);
+            if (spec.options.includes(v)) return v;
+        } catch (e) { /* localStorage unavailable */ }
+        return spec.options[0];
+    }
+
+    function applyUnit(spec, unit, kind) {
+        document.querySelectorAll('.' + spec.toggleClass).forEach((btn) => {
+            btn.textContent = unit;
+        });
+        const selector = spec.options.map((u) => '[data-' + u + ']').join('');
+        document.querySelectorAll(selector).forEach((el) => {
+            const v = el.dataset[unit];
+            if (v != null) el.textContent = v;
+        });
+        document.dispatchEvent(new CustomEvent('rcr-units:change', { detail: { kind, unit } }));
+    }
+
+    function applyAll() {
+        Object.entries(UNITS).forEach(([kind, spec]) => applyUnit(spec, getUnit(spec), kind));
+    }
+
+    window.refreshUnits = applyAll;
+
+    applyAll();
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', applyAll);
+    }
+
+    document.addEventListener('click', (e) => {
+        const btn = e.target.closest('.dist-unit-toggle, .elev-unit-toggle');
+        if (!btn) return;
+        e.stopPropagation();
+        e.preventDefault();
+        const kind = btn.classList.contains('dist-unit-toggle') ? 'dist' : 'elev';
+        const spec = UNITS[kind];
+        const current = getUnit(spec);
+        const next = spec.options.find((u) => u !== current) || spec.options[0];
+        applyUnit(spec, next, kind);
+        try { localStorage.setItem(spec.key, next); } catch (e) { /* localStorage unavailable */ }
+    }, true);
+})();
+</script>
\ No newline at end of file
diff --git a/_layouts/base.html b/_layouts/base.html
index ab1fdbf..31fd756 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -127,6 +127,7 @@ <h2 class="align-self-center">Race Condition Running</h2>
 {{ content }}
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.bundle.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+{% include unit_toggle.html %}
 <script>
     (function() {
         const GUTTER = 8;
diff --git a/css/style.scss b/css/style.scss
index 7debad0..1ac9814 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -27,6 +27,22 @@ a {
     text-decoration-color: rgba(from currentcolor r g b / 0.5);
 }
 
+.unit-toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+}
+@media (scripting: enabled) {
+    .unit-toggle {
+        cursor: pointer;
+        text-decoration-line: underline;
+        text-decoration-style: dashed;
+        text-decoration-color: rgba(from currentcolor r g b / 0.5);
+    }
+}
+
 @media (pointer: coarse), (hover: none) {
   :not(.maplibregl-ctrl) > [title] {
       position: relative;

From 4bb86b581b92c3c384cf2069cb9481f50637c11c Mon Sep 17 00:00:00 2001
From: Nick Walker <nick@nickwalker.us>
Date: Sat, 16 May 2026 20:29:32 -0400
Subject: [PATCH 2/4] Make global unit setting affect routes table too

---
 _layouts/route.html | 16 +++++++--------
 pages/routes.html   | 48 ++++++++++++++++++++++++++++++++++++---------
 2 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/_layouts/route.html b/_layouts/route.html
index 2a9155a..8303367 100644
--- a/_layouts/route.html
+++ b/_layouts/route.html
@@ -39,17 +39,15 @@ <h1 title="{{ page.id }}" class="mb-0 h2">{{ page.title }}</h1>
   {%- endif -%}
 
   {%- capture stats -%}
-  <span title="{{ page.distance_mi | times: 1.609 | round: 1 }}km"
-        class="route-stats-distance text-decoration-dashed">
-    {{- page.distance_mi | round: 1 -}}mi
+  <span class="route-stats-distance">
+    <span data-mi="{{ page.distance_mi | round: 1 }}"
+          data-km="{{ page.distance_mi | times: 1.609 | round: 1 }}">{{- page.distance_mi | round: 1 -}}</span><button type="button" class="dist-unit-toggle unit-toggle" title="For the enlightened...">mi</button>
   </span>
   <span class="route-stats-elevation">
-    ↑<span title="{{ page.ascent_m }}m" class="text-decoration-dashed">
-      {{- ascent_ft | round -}}ft
-    </span>
-    ↓<span title="{{ page.descent_m }}m" class="text-decoration-dashed">
-      {{- descent_ft | round -}}ft
-    </span>
+    ↑<span data-ft="{{ ascent_ft | round }}"
+           data-m="{{ page.ascent_m | round }}">{{- ascent_ft | round -}}</span><button type="button" class="elev-unit-toggle unit-toggle" title="For the enlightened...">ft</button>
+    ↓<span data-ft="{{ descent_ft | round }}"
+           data-m="{{ page.descent_m | round }}">{{- descent_ft | round -}}</span><button type="button" class="elev-unit-toggle unit-toggle" title="For the enlightened...">ft</button>
   </span>
   {%- if page.surface -%}
     <a href="{{ '/routes/?q=' | append: surface_query | relative_url }}"
diff --git a/pages/routes.html b/pages/routes.html
index d6ff688..983172c 100644
--- a/pages/routes.html
+++ b/pages/routes.html
@@ -77,7 +77,7 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
       <thead>
       <tr>
         <th>Route Name</th>
-        <th>Miles</th>
+         <th><button type="button" class="dist-unit-toggle unit-toggle" title="For the enlightened...">Miles</button>)</th>
         <th>Dates Run</th>
       </tr>
       </thead>
@@ -104,7 +104,7 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
           {% assign dist_split = route.distance_mi | round: 1 | split: "." %}
           {% assign dist_integral = dist_split[0] %}
           {% assign dist_fractional = dist_split[1] | append: "0" | truncate: 1, "" %}
-          <td><span class="dist" title="{{ route.distance_mi | times: 1.609 | round: 1}}km">{{ dist_integral }}.{{ dist_fractional }}</span></td>
+          <td><span class="dist" data-mi="{{ route.distance_mi | round: 1 }}" data-km="{{ route.distance_mi | times: 1.609 | round: 1 }}">{{ dist_integral }}.{{ dist_fractional }}</span></td>
           <td>
             <ul class="matched-runs comma-sep">
             {% for event in site.data.schedule %}
@@ -153,13 +153,42 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
                         return container;
                     }
                 },
-                 {title: "Miles", field: "distance_mi", sorter: "number"},
-                    {title: "↑ ft", field: "ascent_m", sorter: "number", formatter: cell => {
-                            return Math.round(cell.getValue() * 3.28084);
-                        }},
-                    {title: "↓ ft", field: "descent_m", sorter: "number", formatter: cell => {
-                        return Math.round(cell.getValue() * 3.28084);
-                    }},
+                 {title: "Distance",
+                  titleFormatter: () => {
+                      const unit = (localStorage.getItem('rcr-dist-unit') === 'km') ? 'km' : 'mi';
+                      return `<button type="button" class="dist-unit-toggle unit-toggle">${unit}</button>`;
+                  },
+                  field: "distance_mi", sorter: "number",
+                  formatter: cell => {
+                      const mi = cell.getValue();
+                      if (typeof mi !== 'number') return '';
+                      const unit = (localStorage.getItem('rcr-dist-unit') === 'km') ? 'km' : 'mi';
+                      return (unit === 'km' ? mi * 1.609 : mi).toFixed(1);
+                  }},
+                    {title: "Ascent",
+                     titleFormatter: () => {
+                         const unit = (localStorage.getItem('rcr-elev-unit') === 'm') ? 'm' : 'ft';
+                         return `↑ <button type="button" class="elev-unit-toggle unit-toggle">${unit}</button>`;
+                     },
+                     field: "ascent_m", sorter: "number",
+                     formatter: cell => {
+                         const m = cell.getValue();
+                         if (typeof m !== 'number') return '';
+                         const unit = (localStorage.getItem('rcr-elev-unit') === 'm') ? 'm' : 'ft';
+                         return Math.round(unit === 'm' ? m : m * 3.28084);
+                     }},
+                    {title: "Descent",
+                     titleFormatter: () => {
+                         const unit = (localStorage.getItem('rcr-elev-unit') === 'm') ? 'm' : 'ft';
+                         return `↓ <button type="button" class="elev-unit-toggle unit-toggle">${unit}</button>`;
+                     },
+                     field: "descent_m", sorter: "number",
+                     formatter: cell => {
+                         const m = cell.getValue();
+                         if (typeof m !== 'number') return '';
+                         const unit = (localStorage.getItem('rcr-elev-unit') === 'm') ? 'm' : 'ft';
+                         return Math.round(unit === 'm' ? m : m * 3.28084);
+                     }},
                     {title: "Surface", field: "surface_type",
                         mutator: function(value, data) {
                             if (!data.surface) return "";
@@ -215,6 +244,7 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
             layout: "fitDataTable",
             data: {{ site.data.routes | jsonify}}});
         table.element.classList.add("table-sm");
+        document.addEventListener('rcr-units:change', () => table.redraw(true));
         table.on("columnsLoaded", () =>
         {
           table.element.querySelectorAll("input").forEach((input) => {

From 775bd2710c6aa7deaf0ca82c3161b5dea174854c Mon Sep 17 00:00:00 2001
From: Nick Walker <nick@nickwalker.us>
Date: Sat, 16 May 2026 20:30:44 -0400
Subject: [PATCH 3/4] Tweak schedule table styles

Don't change link color for past entries, simply lower contrast for the rows
Shorten the sum bar for the total dist row
Make total distance and notes secondary to other schedule info
---
 _includes/schedule_table.html | 4 ++--
 css/style.scss                | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/_includes/schedule_table.html b/_includes/schedule_table.html
index 9fc80d3..50835ee 100644
--- a/_includes/schedule_table.html
+++ b/_includes/schedule_table.html
@@ -81,7 +81,7 @@
     {% if plan.notes %}
     <tr>
         <td></td><td></td>
-        <td>{{ plan.notes }}</td>
+        <td class="text-secondary">{{ plan.notes }}</td>
     </tr>
     {% endif %}
     {% if plan.cancelled and plan.cancelled != "" %}
@@ -108,7 +108,7 @@
     {% if total_dist > 0 and run.plan.size > 1 %}
     <tr class="total-dist-row">
         <td></td><td></td>
-        <td class="text-end fw-semibold"><hr class="my-1" style="border-top-width: 2px;"/><span class="dist-value" data-mi="{{ total_dist | round: 1 }}" data-km="{{ total_dist | times: 1.609 | round: 1 }}">{{ total_dist | round: 1 }}</span></td>
+        <td class="text-end text-secondary pt-0"><div class="d-inline-block"><hr class="my-0 mb-1"/><span class="dist-value" data-mi="{{ total_dist | round: 1 }}" data-km="{{ total_dist | times: 1.609 | round: 1 }}" title="Total distance">{{ total_dist | round: 1 }}</span></div></td>
     </tr>
     {% endif %}
     {% if run.cancelled and plan.cancelled != "" %}
diff --git a/css/style.scss b/css/style.scss
index 1ac9814..24ccd4c 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -91,11 +91,12 @@ dd {
 }
 
 
-.past, .past a, .past a:visited {
-  color: #ccc;
+.past {
+  opacity: .5;
 }
-.next, .next a, .next a:visited {
-  font-weight: bold;
+
+.next > td, tbody.next td {
+  background-color: var(--bs-tertiary-bg);
 }
 
 .cancelled {

From 43ada605f13c5e3305b7374f6de0da420ac8e4b6 Mon Sep 17 00:00:00 2001
From: James Yoo <jyoo980@gmail.com>
Date: Tue, 19 May 2026 20:42:46 -0700
Subject: [PATCH 4/4] Avoiding use of magic numbers

---
 pages/routes.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/pages/routes.html b/pages/routes.html
index 983172c..49c3c85 100644
--- a/pages/routes.html
+++ b/pages/routes.html
@@ -125,6 +125,8 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
 
       Tabulator.registerModule([EditModule, FormatModule, InteractionModule, MutatorModule, ResizeColumnsModule, ResizeTableModule, SortModule, SelectRowModule, FilterModule]);
 
+      const KmPerMi = 1.609
+      const MPerFeet = 3.28084 
       let searched = false
       document.addEventListener("DOMContentLoaded", () => {
         let table = new Tabulator("#routes table", {
@@ -163,7 +165,7 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
                       const mi = cell.getValue();
                       if (typeof mi !== 'number') return '';
                       const unit = (localStorage.getItem('rcr-dist-unit') === 'km') ? 'km' : 'mi';
-                      return (unit === 'km' ? mi * 1.609 : mi).toFixed(1);
+                      return (unit === 'km' ? mi * KmPerMi : mi).toFixed(1);
                   }},
                     {title: "Ascent",
                      titleFormatter: () => {
@@ -175,7 +177,7 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
                          const m = cell.getValue();
                          if (typeof m !== 'number') return '';
                          const unit = (localStorage.getItem('rcr-elev-unit') === 'm') ? 'm' : 'ft';
-                         return Math.round(unit === 'm' ? m : m * 3.28084);
+                         return Math.round(unit === 'm' ? m : m * MPerFeet);
                      }},
                     {title: "Descent",
                      titleFormatter: () => {
@@ -187,7 +189,7 @@ <h1 class="visually-hidden">{{ page.title }}</h1>
                          const m = cell.getValue();
                          if (typeof m !== 'number') return '';
                          const unit = (localStorage.getItem('rcr-elev-unit') === 'm') ? 'm' : 'ft';
-                         return Math.round(unit === 'm' ? m : m * 3.28084);
+                         return Math.round(unit === 'm' ? m : m * MPerFeet);
                      }},
                     {title: "Surface", field: "surface_type",
                         mutator: function(value, data) {