30:[] 2e:{"title":"Tumbled words","cells":[{"id":0,"value":"md`# Tumbled words`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`I wanted to see how text selection worked when words were rotated a bit. **Try selecting the text**. To make this work I had to set each word to be *inline-block*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"{\n let elements = words.map((word, i) => \n html` ${word} `\n );\n return html`

${elements}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"viewof toggle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"{\n let rules = words.map((_, i) => `.tumbled span:nth-child(${i+1})::selection { background-color: hsl(${3*(i/words.length)*360|0}, 100%, 80%); }`);\n return toggle? html`

Rainbows! 🦄

` : html`

Checkbox above: rainbow mode

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"viewof maxRotation = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`How much rotation do you want? Crank it up to go crazy!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"function rotation(i) {\n return [-1, +1][i % 2] * maxRotation * (Math.random() + Math.random());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"words = \"Fourscore and seven years ago our fathers brought forth, on this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure.\".split(\" \")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}