3f:null 40:["$","title",null,{"children":"CSS view | Riley | Observable"}] 46:[] 44:{"id":"98b8095687f064cd","slug":"css-view","title":"CSS view","thumbnail":"ca5eab9577317ac7463bded7d25bd23902f1f56300ca9e0efee70360dcb5214a","access_level":"public","create_time":"$D2022-05-30T07:27:14.248Z","update_time":"$D2022-06-21T14:25:27.024Z","view_time":null,"first_public_time":"$D2022-06-21T14:25:35.827Z","has_unpublished_edits":null,"fork":{"id":"d229a22b4a9fdc4b","slug":"css-template-tag","title":"CSS template tag","owner":{"id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d2b7afa3a61febdf","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":"starter_2024","bio":"I enjoy spreadsheets and JavaScript way too much.","following":false},"version":211,"publish_version":211,"role":null,"authored":false,"authors":[{"type":"individual","id":"817e538440b46e8a","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","tier":null,"bio":"I enjoy spreadsheets and JavaScript way too much.\n\ntrust://Riley.science!","following":false}],"members":[{"type":"individual","id":"817e538440b46e8a","login":"rmw4269","name":"Riley","avatar_url":"https://avatars-next.observableusercontent.com/839ad38e4ca0e32eaad7be29b5bc0c3a7f4304d5f91dd0f3642acf08015b6530","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 view","cells":[{"id":0,"value":"# CSS view\nShow off the custom CSS applied to your notebook! This is adapted from [Jed Fox](/@j-f1)’s [CSS template tag](/@j-f1/css-template-tag), with some minor tweaks.\n## usage\n### expanded","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"css`\nblockquote {\n border-left: 1px solid currentColor;\n margin-left: 0;\n padding-left: 0.5em;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"### collapsed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"collapsedCSS('Your Label here')`\nblockquote {\n border-left: 1px solid currentColor;\n margin-left: 0;\n padding-left: 0.5em;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"#### without label","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"collapsedCSS`\nblockquote {\n border-left: 1px solid currentColor;\n margin-left: 0;\n padding-left: 0.5em;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"## views\nIt also supports the viewof API, so if you’re creating a library that includes styles, you can use it like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"viewof style = css`\nblockquote {\n border-left: 0.125em solid currentColor;\n margin-left: 0;\n padding-left: 0.5em;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"style","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"Finally, it supports transforming the CSS:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"viewof style2 = css({ transform: css => css.replace(/:scope/g, '.foo') })`\n:scope h3 {\n font-size: 1.5em;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"style2.textContent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof style3 = collapsedCSS({\n title: htl.html.fragment`cool AF`,\n transform: css => css.replace(/:scope/g, '.bar')\n})`\n:scope h3 {\n font-size: 1.5em;\n}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"style3.textContent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"css = tagWithOptions(({ transform }) => (...args) => {\n const source = interpolate(...args);\n const style = html`