3f:null 40:["$","title",null,{"children":"CSS Responsive Component | Rich Harris | Observable"}] 46:[] 44:{"id":"f9d96f9032fab467","slug":"css-responsive-component","title":"CSS Responsive Component","thumbnail":"dcf1dfe6c15f872db472049343376fe7f0480e639d2be48e399db4fcc29645e6","access_level":"public","create_time":"$D2020-02-03T19:21:05.257Z","update_time":"$D2020-02-03T19:22:41.314Z","view_time":null,"first_public_time":"$D2020-02-03T19:22:41.815Z","has_unpublished_edits":null,"fork":{"id":"711dc402e11f6a92","slug":"css-responsive-component","title":"CSS Responsive Component","owner":{"id":"1609e18a38defa15","login":"rkaravia","name":"Roman Karavia"}},"stars":3,"starred":false,"owner":{"type":"team","id":"9b2c4b7c9b979e02","login":"rich-harris","name":"Rich Harris","avatar_url":"https://avatars-next.observableusercontent.com/d01f16b3ad42372c4ef2bcd0ac3072ad5f3c411231533a9697ebe8b660e755db","tier":"starter_2024","bio":"","following":false},"version":403,"publish_version":403,"role":null,"authored":false,"authors":[{"type":"individual","id":"d70b5d160a7c0de9","login":"rich-harris","name":"Rich Harris","avatar_url":"https://avatars-next.observableusercontent.com/d01f16b3ad42372c4ef2bcd0ac3072ad5f3c411231533a9697ebe8b660e755db","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d70b5d160a7c0de9","login":"rich-harris","name":"Rich Harris","avatar_url":"https://avatars-next.observableusercontent.com/d01f16b3ad42372c4ef2bcd0ac3072ad5f3c411231533a9697ebe8b660e755db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"html`\n ${ticks()}\n

\n ${responsiveBoxes()}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"split = require(\"split.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"