@a2f0/skyline 0.1.6 → 0.2.1

package/site/viewer-page.js

@@ -0,0 +1,15 @@
+import { mountViewer } from "./skyline-shell.js";
+// index.html: the site's own viewer, mounted the way a host mounts the package, through the
+// same shell and viewer module, from the assets beside this script, with the site's toolbar
+// along its top. Its address takes the package's options: `?embed=1` shows the viewer as a
+// host does, without the toolbar; `?controls=open` starts the scene's bar open; and
+// `?attribution=hidden` leaves out the OpenStreetMap credit.
+const settings = new URLSearchParams(location.search);
+mountViewer(document.querySelector("#viewer"), {
+    assetsUrl: new URL("./", import.meta.url),
+    title: "Chicago skyline",
+    controls: settings.get("controls") === "open" ? "open" : "closed",
+    attribution: settings.get("attribution") !== "hidden",
+    navigation: settings.get("embed") !== "1",
+    page: true,
+});

package/site/viewer.css

@@ -0,0 +1,147 @@
+/* The viewer (skyline-viewer.ts), in its shadow root beside study.css: the stars, the 3D
+   skyline's place, the original drawing, the buttons between them and, on the site's own
+   index.html, its toolbar. These rules apply only inside that root. The host element sets
+   `all: initial`, so nothing the host page sets is inherited here: the viewer sets its own
+   type and colours, and lays itself out by its own size, through container queries, rather
+   than the window's. Greys only, as everywhere (tests/grayscale.test.ts). */
+.skyline-viewer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  container: viewer / size;
+  color-scheme: dark;
+  background: #000;
+  color: #fff;
+  font: 16px Georgia, "Times New Roman", serif;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+.stars,
+.scene,
+.skyline-viewer > .skyline-3d {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  background: transparent;
+}
+
+.stars {
+  z-index: 0;
+  pointer-events: none;
+}
+
+.stars svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* The debug preview's stronger pulses, which override reduced motion (stars.svg). */
+.stars.debug-motion .twinkle {
+  animation: star-debug var(--twinkle-duration, 53.333s) ease-in-out var(--twinkle-delay, 0s) infinite;
+}
+
+.scene,
+.skyline-viewer > .skyline-3d {
+  z-index: 1;
+}
+
+.skyline-viewer > .skyline-3d {
+  display: flex;
+}
+
+.drawing {
+  object-fit: contain;
+  object-position: bottom;
+}
+
+.controls {
+  position: absolute;
+  z-index: 2;
+  top: max(12px, env(safe-area-inset-top));
+  left: 50%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+  gap: 10px clamp(18px, 2cqw, 28px);
+  width: max-content;
+  max-width: calc(100% - 24px);
+  transform: translateX(-50%);
+  color: #fff;
+  font-size: clamp(18px, 1.85cqw, 26px);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.controls button,
+.controls a {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  cursor: pointer;
+  opacity: 0.88;
+}
+
+.controls button:hover,
+.controls a:hover,
+.controls button:focus-visible,
+.controls a:focus-visible,
+.controls button[aria-pressed="true"] {
+  color: #fff;
+  opacity: 1;
+  text-decoration-thickness: 2px;
+}
+
+.controls button:focus-visible,
+.controls a:focus-visible {
+  outline: 1px solid #fff;
+  outline-offset: 6px;
+}
+
+.original-return {
+  position: absolute;
+  z-index: 2;
+  right: max(12px, env(safe-area-inset-right));
+  bottom: max(5px, env(safe-area-inset-bottom));
+  border: 1px solid #393939;
+  border-radius: 2px;
+  padding: 5px 8px;
+  background: #101010;
+  color: #aaa;
+  font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  cursor: pointer;
+}
+
+.original-return:hover { color: #fff; border-color: #999; background: #202020; }
+.original-return:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
+
+.motion-status {
+  flex-basis: 100%;
+  margin: 0;
+  color: #999;
+  font: 12px/1.5 system-ui, sans-serif;
+  text-align: center;
+  white-space: normal;
+}
+
+@container viewer (max-width: 520px) {
+  .controls {
+    top: max(16px, env(safe-area-inset-top));
+    gap: 10px 18px;
+  }
+}