fix(ui): slide the track and use a wide cover

README.md

@@ -93,14 +93,14 @@ The product scope is [`docs/PRODUCT.md`](docs/PRODUCT.md). The upstream API reco
 ## Credits
 
 <p align="center">
-  <img src="public/share/cover.jpg" width="360" alt="Ink drawing of a train at a station, by Péchane" />
+  <img src="public/share/cover.jpg" width="550" alt="The Great Wave off Kanagawa, a woodblock print by Katsushika Hokusai" />
 </p>
 
 The landmark drawings are from [SVG Repo](https://www.svgrepo.com/).
 
 Lines, stations, fares, platforms, and first and last trains come from the public site of the [Delhi Metro Rail Corporation](https://delhimetrorail.com/). DETRO is not an official DMRC app.
 
-The cover image is a work by [Péchane](https://www.artmajeur.com/pechane).
+The cover image is [The Great Wave off Kanagawa](https://en.wikipedia.org/wiki/The_Great_Wave_off_Kanagawa) by Katsushika Hokusai.
 
 ---
 

index.html

@@ -25,17 +25,17 @@
     <meta property="og:image" content="https://detro.pages.dev/share/cover.jpg" />
     <meta property="og:image:secure_url" content="https://detro.pages.dev/share/cover.jpg" />
     <meta property="og:image:type" content="image/jpeg" />
-    <meta property="og:image:width" content="1440" />
-    <meta property="og:image:height" content="1939" />
-    <meta property="og:image:alt" content="Ink drawing of a train at a small station, by Péchane" />
+    <meta property="og:image:width" content="550" />
+    <meta property="og:image:height" content="377" />
+    <meta property="og:image:alt" content="The Great Wave off Kanagawa, a woodblock print by Katsushika Hokusai" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="DETRO — Delhi Metro Simple" />
     <meta
       name="twitter:description"
       content="DETRO plans a Delhi Metro trip. Pick two stations and see the train, where to change, and the fare. Free, ad-free, and independent of DMRC."
     />
     <meta name="twitter:image" content="https://detro.pages.dev/share/cover.jpg" />
-    <meta name="twitter:image:alt" content="Ink drawing of a train at a small station, by Péchane" />
+    <meta name="twitter:image:alt" content="The Great Wave off Kanagawa, a woodblock print by Katsushika Hokusai" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="manifest" href="/manifest.webmanifest" />
     <script type="application/ld+json">

src/App.tsx

@@ -10,7 +10,7 @@ import { savedJourneys } from "./lib/offline/saved"
 import { alternateRide, planRoute, sameRide } from "./lib/transit/route"
 import { startLineCode } from "./lib/transit/routeMap"
 import { readSelection, writeSelection } from "./lib/plan/selection"
-import { readTextSize, textDefault } from "./lib/plan/textSize"
+import { readTextSize, textDefault, textStorageKey } from "./lib/plan/textSize"
 import { createPlanState, planReducer, routeBlockReason } from "./lib/plan/state"
 import { clearTrips, readTripQuery, readTrips, removeTrip, saveTrip, tripQuery, type SavedTrip } from "./lib/plan/trips"
 import type { Journey, Lang, Suggestion } from "./lib/transit/types"
@@ -133,7 +133,8 @@ export function App() {
     document.documentElement.style.fontSize = `${textSize}px`
     try {
       localStorage.removeItem("dms-lang")
-      localStorage.setItem("dms-text", String(textSize))
+      localStorage.removeItem("dms-text")
+      localStorage.setItem(textStorageKey, String(textSize))
     } catch {
       // The planner still works when storage is blocked.
     }
@@ -386,6 +387,7 @@ export function App() {
   function clearSavedData() {
     try {
       localStorage.removeItem("dms-text")
+      localStorage.removeItem(textStorageKey)
       clearTrips(localStorage)
     } catch {
       // The controls still reset on screen.

src/index.css

@@ -13,7 +13,7 @@
   --display: "IBM Plex Sans", sans-serif;
   --text: "IBM Plex Sans", sans-serif;
   font-family: var(--text);
-  font-size: 14px;
+  font-size: 12px;
   line-height: 1.45;
   color: var(--ink);
   background: var(--page);
@@ -163,17 +163,28 @@ summary:active {
   aspect-ratio: 720 / 220;
 }
 
+.metro-track {
+  transform-box: fill-box;
+  transform-origin: left center;
+  animation: metro-track-slide 8s linear infinite;
+}
+
 .metro-wheel {
   transform-box: fill-box;
   transform-origin: center;
   animation: metro-wheel-spin 0.7s linear infinite;
 }
 
+@keyframes metro-track-slide {
+  to { transform: translate(-50%, 0); }
+}
+
 @keyframes metro-wheel-spin {
   to { transform: rotate(360deg); }
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .metro-track,
   .metro-wheel { animation: none; }
   button,
   .tabbar a,

src/lib/plan/textSize.ts

@@ -1,15 +1,15 @@
 export const textMin = 12
 export const textMax = 22
-export const textDefault = 13
+export const textDefault = textMin
+export const textStorageKey = "dms-text-size"
 
 export function readTextSize(): number {
   try {
-    const saved = localStorage.getItem("dms-text")
-    if (saved === "small") return 13
-    if (saved === "normal") return 16
-    if (saved === "large") return 19
+    const saved = localStorage.getItem(textStorageKey)
     const value = Number(saved)
-    if (Number.isFinite(value)) return Math.min(textMax, Math.max(textMin, Math.round(value)))
+    if (saved !== null && saved !== "" && Number.isFinite(value)) {
+      return Math.min(textMax, Math.max(textMin, Math.round(value)))
+    }
   } catch {
     // Storage can be blocked. The default still applies.
   }

src/ui/MetroScene.tsx

@@ -15,17 +15,7 @@ export function MetroScene() {
           <rect key={color} x={80 + index * 70} y="8" width="70" height="8" fill={color} />
         ))}
       </g>
-      <g>
-        {run ? (
-          <animateTransform
-            attributeName="transform"
-            type="translate"
-            from="0 0"
-            to={`-${tile} 0`}
-            dur="8s"
-            repeatCount="indefinite"
-          />
-        ) : null}
+      <g className={run ? "metro-track" : undefined}>
         <Track />
         <Track dx={tile} />
       </g>