31:[] 2f:{"title":"CSS Responsive Component","cells":[{"id":0,"value":"md`# CSS Responsive Component\n\n### (Look Ma, no Javascript!)\n\nThis component changes color and font size depending on the container width, independent of the viewport width.\n\nThe changes are done in pure CSS (no Javascript), using a combination of \\`padding-top\\` and \\`calc()\\` to show/hide elements depending on container width.\n\nDrag the handle on the right to see it in action!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"{\n const container = html`\n

${responsiveBoxes()}

`;\n\n const splitStyle = html`\n `;\n\n split(container.children);\n\n return html`${ticks()}${container}${splitStyle}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`\nInspired by\n[Rich Harris: A new technique for making responsive, JavaScript-free charts](https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp).\n\nThe version above uses [split.js](https://split.js.org/) to make the container resizable.\n\nThe pure Javascript version below uses the CSS \\`resize\\` property, which currently only works in Firefox.\nNote that Javascript is only used above to allow you to resize the container, the responsive style is pure CSS in both cases.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"html`\n ${ticks()}\n

\n ${responsiveBoxes()}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"function responsiveBoxes() {\n return html`\n

\n ${boxes(12, \"rgb(228, 26, 28, 0.2)\")}\n

\n ${boxes(24, \"rgb(77, 175, 74, 0.2)\")}\n

\n ${boxes(36, \"rgb(55, 126, 184, 0.2)\")}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"function minWidth(width) {\n return `\n position: absolute;\n width: 100%;\n display: flex;\n padding-top: calc(1000 * (${width}px - 100%));\n pointer-events: none;`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"function maxWidth(width) {\n return `\n position: absolute;\n width: 100%;\n display: flex;\n padding-top: calc(1000 * (100% - ${width}px));`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"function ticks() {\n const style = `\n margin-left: 199px;\n width: 199px;\n height: 10px;\n border-left: 1px solid black;\n border-right: 1px solid black;`;\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"function boxes(fontSize, color) {\n const items = [];\n for (let i = 0; i < 3; i += 1) {\n const style = `\n width: ${100 / 3}%;\n margin-left: 5px;\n font-size: ${fontSize}px;\n text-align: center;\n background: ${color};\n pointer-events: all;`;\n items.push(html`

${i + 1}

`);\n }\n return items;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"split = require(\"split.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}