feat(compare): DotStrip with England-average anchor

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB
2026-07-13 19:18:33 +01:00
parent 48ca042b08
commit 60cbc3f46d
3 changed files with 247 additions and 0 deletions
@@ -0,0 +1,102 @@
+.row {
+  margin: 1.1rem 0 1.6rem;
+}
+
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.headNote {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.strip {
+  position: relative;
+  height: 34px;
+  margin-top: 0.45rem;
+}
+
+.track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 15px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--bg-secondary);
+}
+
+.anchorTick {
+  position: absolute;
+  top: 4px;
+  width: 2px;
+  height: 26px;
+  background: var(--text-muted);
+}
+
+.anchorLabel {
+  position: absolute;
+  top: -14px;
+  transform: translateX(-50%);
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.point {
+  position: absolute;
+  top: 9px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  transform: translateX(-50%);
+  border: 2px solid var(--bg-card);
+  box-shadow: 0 0 0 1px rgba(26, 22, 18, 0.08);
+}
+
+.pointLabel {
+  position: absolute;
+  top: 27px;
+  transform: translateX(-50%);
+  font-size: 0.72rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary);
+}
+
+.pointLabelAbove {
+  top: -6px;
+}
+
+@media (max-width: 760px) {
+  .row {
+    margin: 0.9rem 0 1.3rem;
+  }
+
+  .title {
+    font-size: 0.82rem;
+  }
+
+  .strip {
+    height: 32px;
+  }
+
+  .point {
+    width: 14px;
+    height: 14px;
+  }
+
+  .pointLabel {
+    font-size: 0.64rem;
+  }
+}