diff --git a/index.html b/index.html index 53f8014..5a89de1 100644 --- a/index.html +++ b/index.html @@ -280,6 +280,24 @@ } @media (hover: hover) { .enter:hover { background: var(--amber-lit); } } + .walk { + font: inherit; + font-size: 11px; + padding: var(--s2) var(--s3); + cursor: pointer; + text-align: left; + border: 1px solid rgba(242, 177, 52, 0.48); + border-radius: var(--r-sm); + color: var(--amber-ink); + background: rgba(242, 177, 52, 0.1); + box-shadow: var(--shadow); + transition: background var(--t), border-color var(--t); + } + @media (hover: hover) { + .walk:hover { background: rgba(242, 177, 52, 0.2); border-color: var(--amber); } + } + .walk[aria-pressed="true"] { background: rgba(242, 177, 52, 0.25); } + /* The public-office note. Amber-edged rather than amber-filled: it is an explanation, not an action, and the one filled amber thing on screen should stay the door. */ @@ -671,9 +689,9 @@ only while a route chapter owns the follow camera. Full words rather than mystery glyphs: the controls disappear everywhere space is tight except on the devices that cannot drive without them. */ - .drive-controls { display: none; } + .drive-controls, .walk-controls { display: none; } @media (pointer: coarse) { - .drive-controls:not([hidden]) { + .drive-controls:not([hidden]), .walk-controls:not([hidden]) { position: fixed; left: 50%; bottom: calc(var(--s3) + env(safe-area-inset-bottom)); @@ -691,7 +709,7 @@ -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); } - .drive-control { + .drive-control, .walk-control { min-height: 48px; border: 1px solid var(--hairline); border-radius: var(--r-sm); @@ -705,13 +723,14 @@ user-select: none; -webkit-user-select: none; } - .drive-control[aria-pressed="true"] { + .drive-control[aria-pressed="true"], .walk-control[aria-pressed="true"] { border-color: rgba(242, 177, 52, 0.65); background: rgba(242, 177, 52, 0.28); color: var(--amber-ink); } /* The source line is useful but cannot sit underneath the controls. */ - body:has(.drive-controls:not([hidden])) .source { bottom: 7.5rem; } + body:has(.drive-controls:not([hidden])) .source, + body:has(.walk-controls:not([hidden])) .source { bottom: 7.5rem; } } /* ---- Responsive ------------------------------------------------------- @@ -897,6 +916,7 @@ +

@@ -919,6 +939,7 @@
19 chapters choose 2 or 3 to follow + [ ] city O office M plan @@ -946,6 +967,13 @@
+ +