diff --git a/README.md b/README.md index d604e01..5e508b9 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,12 @@ ## Explorations +- How do we make the web feel more alive and soft? +- How can we more easily connect web pages and their data? +- How easily can we turn a HTML document into a spatial canvas and visa versa? - What would it look like if the browser had primitives for building spatial canvases? -- How easily can we turn a document into a canvas? -- Can we incrementally change ownership and control of the web from single-origin server to the user? -- How can someone more easily annotate and re-layout web pages they did not make? -- How can we more easily compose and connect web pages and their data? - - How can we compose together live and visual programming notations? -- Can we have lightweight visual and live scripting for web pages? +- How can someone annotate, re-layout, and program web pages they did not make or distribute? +- How can we compose visual programming interfaces, hypermedia, and LLMs that work on any web page? ## Development diff --git a/demo/index.html b/demo/index.html index fdfc08a..7a0cddd 100644 --- a/demo/index.html +++ b/demo/index.html @@ -30,6 +30,7 @@ color: #2c3e50; margin: 0; margin-bottom: 1em; + text-align: center; } h2 { @@ -38,6 +39,17 @@ margin: 1em 0 0; } + #questions { + font-size: 0.75rem; + font-style: italic; + margin-bottom: 2rem; + text-align: center; + + li::before { + display: none; + } + } + ul { list-style-type: none; line-height: 1.8; @@ -63,7 +75,16 @@
-

Folk Canvas Demos

+

Folk Canvas Demos (Github)

+ + diff --git a/src/folk-rope.ts b/src/folk-rope.ts index bb46271..cfac83a 100644 --- a/src/folk-rope.ts +++ b/src/folk-rope.ts @@ -56,16 +56,19 @@ export class FolkRope extends AbstractArrow { super(); this.#svg.style.height = '100%'; this.#svg.style.width = '100%'; + this.#svg.style.pointerEvents = 'none'; this.#svg.appendChild(this.#path); this.#svg.appendChild(this.#path2); this.#shadow.appendChild(this.#svg); - this.#path.setAttribute('stroke-width', '2'); + this.#path.setAttribute('stroke-width', '3'); this.#path.setAttribute('fill', 'none'); + this.#path.style.pointerEvents = 'auto'; - this.#path2.setAttribute('stroke-width', '2'); + this.#path2.setAttribute('stroke-width', '3'); this.#path2.setAttribute('fill', 'none'); + this.#path2.style.pointerEvents = 'auto'; this.stroke = this.getAttribute('stroke') || 'black'; }