2b:null 2c:["$","title",null,{"children":"Tumbled words | Amit Patel | Observable"}] 31:[] 2f:{"id":"a238ae44507fbb65","slug":"tumbled-words","title":"Tumbled words","thumbnail":"357869899dd8e01aaa41f21dd2988422f432a203f6a407c0b5d8700399d6cc3f","access_level":"public","create_time":"$D2020-08-26T21:08:07.048Z","update_time":"$D2021-01-31T04:05:06.883Z","view_time":null,"first_public_time":"$D2020-08-26T22:26:48.499Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"468ec444dc0eb0ae","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":"starter_2024"},"version":104,"publish_version":104,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null}],"members":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null,"role":"editor"}],"comments":[{"id":"9c2430983847d152","reply_to_id":null,"content":"The rainbow highlighting is surprisingly fun. Neat idea. :)","create_time":"$D2020-08-26T23:07:31.830Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}},{"id":"963a00184df2120e","reply_to_id":"9c2430983847d152","content":"Indeed (:","create_time":"$D2020-08-27T06:57:08.420Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null}},{"id":"c1fd21d09f1704e7","reply_to_id":"9c2430983847d152","content":"this is very cool! I've tested on both IOS and Android and the results are: Chrome Android works like the browser, none iOS browsers seems to work.","create_time":"$D2020-08-27T22:16:57.988Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"06bc2aaa9d8c4a54","login":"radames","name":"Radamés Ajna","avatar_url":"https://avatars-next.observableusercontent.com/7e61199ed2efe90aec8d897ac8b17a3fd0a129bff12a46a4048ddd0f73a2c43e","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Tumbled words","cells":[{"id":0,"value":"md`# Tumbled words`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":78,"value":"viewof toggle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":92,"value":"viewof maxRotation = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"md`How much rotation do you want? Crank it up to go crazy!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"function rotation(i) {\n return [-1, +1][i % 2] * maxRotation * (Math.random() + Math.random());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"