2c:null 2d:["$","title",null,{"children":"Emulating aspect-ratio CSS Property | Quadbits Studio | Observable"}] 32:[] 30:{"id":"27866ae21c05c3ab","slug":"emulating-aspect-ratio-css-property","title":"Emulating aspect-ratio CSS Property","thumbnail":"8675de2850b19eb23f5e70303e4213c5612b226ad7576325437492ed4d99f293","access_level":"public","create_time":"$D2024-07-15T16:15:46.126Z","update_time":"$D2024-07-15T16:18:18.284Z","view_time":null,"first_public_time":"$D2024-07-15T16:15:46.126Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024"},"version":30,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Emulating aspect-ratio CSS Property","cells":[{"id":30,"value":"Object.assign(md`# Emulating \\`aspect-ratio\\` CSS Property`, {\n style: \"text-wrap: balance;\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"

\n ${Object.assign(html`

`, inline)}\n — Ana Tudor

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"viewof hue = Inputs.range([0, 360], {\n label: \"Hue\",\n step: 12,\n value: root.style.getPropertyValue(\"--tint\") * 1 || 348,\n disabled: toggle\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof ratio = Inputs.radio(\n new Map(ratios.reduce((acc, x, i) => ((acc[i] = [++i, x]), acc), [])),\n {\n label: \"Aspect ratio\",\n key: ratios.length,\n keyof: (o) => o[1]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof scale = Inputs.radio([100, 80, 60], {\n label: \"Scale\",\n keyof: (o) => o + \"%\",\n value: 80\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof angle = Inputs.radio(\n new Map([\n [2, 90],\n [0, ((Math.acos(1 / 3) * 180) / Math.PI).toFixed(6) * 1],\n [1, 45]\n ]),\n {\n label: \"Angle\",\n keyof: (o) => o[1] + \"°\",\n key: +(self.devicePixelRatio === 1),\n value: root.style.getPropertyValue(\"--angle\") * 1 || void 0,\n disabled: !toggle\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof toggle = Inputs.toggle({ label: \"Conic gradient\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"The `aspect-ratio` CSS property allows you to define the desired width-to-height ratio of an element’s box.\n\n${html`\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"inline = ({\n style: [\n [\"--width\", \"var(--scale) * var(--cqw)\"],\n [\"--height\", \"var(--scale) * var(--cqh)\"],\n [\"width\", \"min(var(--width), var(--aspect-ratio) * var(--height))\"],\n [\"height\", \"min(var(--height), var(--width) / (var(--aspect-ratio)))\"],\n [\"background\", \"var(--has-conic-gradient, none) currentColor\"]\n ]\n .map((declaration) => declaration.join(\": \"))\n .join(\"; \")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"available = CSS.supports(\"(aspect-ratio: 1)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"ratios = [\"16:9\", \"4:3\", \"3:4\", \"2:3\", \"1:3\", \"1\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"cqw = (width - padding * 2) / 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"cqh = (height - padding * 2) / 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"padding = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = Math.min(Math.floor(width / 2), 480)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"(root.style.setProperty(\"--angle\", angle), angle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"(root.style.setProperty(\"--tint\", hue), hue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"root = document.documentElement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"