SQUARE

index.html

@@ -45,6 +45,9 @@
       mountTownSquare(document.getElementById("townsquare-root"), {
         serverOrigin: "https://townsquare.cauenapier.com",
         siteKey: "site_hOHNcG3sZU7FM_c1",
+        scene: { "benches": 2, "benchXs": [0.33, 0.72], "trees": 6, "treeXs": [0.1, 0.3, 0.4, 0.6, 0.7, 0.8], "lamps": 2, "lampXs": [0.33, 0.72], "birds": 18 },
+        connections: [{ "side": "left", "label": "Town Square", "url": "https://townsquare.cauenapier.com/" }],
+        theme: "host"
       });
     </script>
   </div>

style.css

@@ -3,6 +3,7 @@
 @import "rest.css";
 @import "animation.css";
 @import "screen.css";
+@import "townsquare.css";
 
 
 @import "about.css";

townsquare.css

@@ -0,0 +1,60 @@
+#townsquare-root#townsquare-root {
+  --scene: #99c1f1;
+  --page: #63452c;
+  --surface: #f9f06b;
+  --ink: #241f31;
+  --you: #1a5fb4;
+  --tree-trunk: #865e3c;
+  --tree-canopy: #26a269;
+  --other: #26241f;
+  --ground: rgba(42, 41, 38, 0.16);
+  --scene-edge: color-mix(in oklab, var(--scene) 88%, var(--page) 12%);
+  --you-deep: var(--you);
+  --text: var(--ink);
+  --muted: var(--ink);
+}
+#townsquare-root#townsquare-root[data-townsquare-theme="dark"] {
+  --scene: #241f31;
+  --page: #000000;
+  --surface: #241f31;
+  --ink: #c0bfbc;
+  --you: #df8a43;
+  --tree-trunk: #63452c;
+  --tree-canopy: #26a269;
+  --other: #ddd7cc;
+  --ground: rgba(242, 238, 230, 0.18);
+  --scene-edge: color-mix(in oklab, var(--scene) 88%, var(--page) 12%);
+  --you-deep: var(--you);
+  --text: var(--ink);
+  --muted: var(--ink);
+}
+@media (prefers-color-scheme: dark) {
+  #townsquare-root#townsquare-root[data-townsquare-theme="auto"] {
+  --scene: #241f31;
+  --page: #000000;
+  --surface: #241f31;
+  --ink: #c0bfbc;
+  --you: #df8a43;
+  --tree-trunk: #63452c;
+  --tree-canopy: #26a269;
+  --other: #ddd7cc;
+  --ground: rgba(242, 238, 230, 0.18);
+  --scene-edge: color-mix(in oklab, var(--scene) 88%, var(--page) 12%);
+  --you-deep: var(--you);
+  --text: var(--ink);
+  --muted: var(--ink);
+  }
+}
+#townsquare-root#townsquare-root .townsquare__stage {
+  background: linear-gradient(
+    180deg,
+    var(--scene) 0%,
+    var(--scene) 72%,
+    var(--scene-edge) 72%,
+    var(--page) 72.4%,
+    var(--page) 100%
+  );
+}
+#townsquare-root#townsquare-root .townsquare__ground {
+  background: var(--ground);
+}