Phase 2: core converter, live conversion, URL state, highlight interaction

2026-03-16 21:34:16 -04:00
parent 65f8bc1b9f
commit 8f835c35d2
9 changed files with 430 additions and 1 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,115 @@
+/* app.css — global styles for humor-units */
+
+/* CSS custom properties (set dynamically via inline style from ConverterCard) */
+:root {
+  --min-col-width: 160px;
+  --grid-gap: 1rem;
+}
+
+/* ── Results grid ──────────────────────────────────────────────────────────── */
+.results-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
+  gap: var(--grid-gap);
+  margin-top: 1.5rem;
+}
+
+/* ── Result tile ───────────────────────────────────────────────────────────── */
+.result-tile {
+  cursor: pointer;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--pico-muted-border-color, #ccc);
+  border-radius: var(--pico-border-radius, 0.25rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  user-select: none;
+}
+
+.result-tile:hover {
+  background-color: var(--pico-secondary-background, rgba(0, 0, 0, 0.04));
+  border-color: var(--pico-primary, #1095c1);
+}
+
+.result-tile.highlighted {
+  border-color: var(--pico-primary, #1095c1);
+  background-color: var(--pico-primary-background, rgba(16, 149, 193, 0.08));
+}
+
+.result-value {
+  font-size: 1rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  word-break: break-all;
+}
+
+.result-label {
+  font-size: 0.85rem;
+  color: var(--pico-muted-color, #666);
+}
+
+.result-symbol {
+  font-size: 0.75rem;
+  color: var(--pico-muted-color, #666);
+  font-style: italic;
+}
+
+/* ── Highlighted result (above grid) ──────────────────────────────────────── */
+.highlighted-result {
+  text-align: center;
+  padding: 2rem 1rem;
+  margin-bottom: 1.5rem;
+  border-radius: var(--pico-border-radius, 0.25rem);
+  background-color: var(--pico-primary-background, rgba(16, 149, 193, 0.08));
+  border: 2px solid var(--pico-primary, #1095c1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.highlighted-value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.1;
+  word-break: break-all;
+}
+
+.highlighted-label {
+  font-size: 1.25rem;
+  color: var(--pico-color, inherit);
+}
+
+.highlighted-symbol {
+  font-size: 0.9rem;
+  color: var(--pico-muted-color, #666);
+  font-style: italic;
+}
+
+/* ── Converter controls ────────────────────────────────────────────────────── */
+.converter-controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.converter-controls input[type='number'] {
+  flex: 1 1 200px;
+  min-width: 120px;
+}
+
+.converter-controls select {
+  flex: 0 1 auto;
+  min-width: 160px;
+}
+
+/* ── Hotkey hint ───────────────────────────────────────────────────────────── */
+.hotkey-hint {
+  margin-top: 1rem;
+  margin-bottom: 0;
+  color: var(--pico-muted-color, #666);
+  text-align: center;
+}