diff --git a/index.html b/index.html index b596e17..d1146da 100644 --- a/index.html +++ b/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" }); diff --git a/style.css b/style.css index edc5f7d..e3e5793 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,7 @@ @import "rest.css"; @import "animation.css"; @import "screen.css"; +@import "townsquare.css"; @import "about.css"; diff --git a/townsquare.css b/townsquare.css new file mode 100644 index 0000000..94ff9de --- /dev/null +++ b/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); +} \ No newline at end of file