31:T837,card_canvas = { fonthack; let canvas = document.createElement("canvas"); canvas.width = card_width * PPI; canvas.height = card_height * PPI; canvas.style.width = scaleInch(card_width) + "px"; canvas.style.height = scaleInch(card_height) + "px"; let ctx = canvas.getContext("2d"); // scale so 1px = 1pt assuming 72pt an inch let res_scale = 113; let pt_scale = card_width * 113; let target_scale = (card_width * PPI) / pt_scale; ctx.scale(target_scale, target_scale); ctx.textBaseline = "middle"; ctx.fillStyle = "white"; ctx.fillRect(0, 0, card_width * PPI, card_height * PPI); let pt_width = card_width * res_scale; let pt_height = card_height * res_scale; let line_height = lh; let line_rows = Math.floor((card_height * res_scale) / line_height); let rows_leftover = pt_height - line_rows * line_height; let row_offset = rows_leftover / 2; if (view_card_grid) { for (let r = 0; r < line_rows; r++) { let y = r * line_height + row_offset; ctx.strokeRect(0, y, pt_width, line_height); } } ctx.fillStyle = "black"; ctx.font = `400 normal ${font_size}px 'Inter UI'`; ctx.fillText("Grant Custer", line_height, line_height + lh / 2 + row_offset); ctx.font = `400 normal ${font_size}px 'Inter UI'`; ctx.fillText( "Design–Code", line_height, line_height * 2 + lh / 2 + row_offset ); ctx.font = `400 normal ${font_size}px 'Inter UI'`; ctx.fillText( "grantcuster.com", line_height, line_height * 3 + lh / 2 + row_offset ); let y = line_height * 4 + lh / 2 + row_offset; ctx.fillText( `${pt_width}x${pt_height}`, line_height + line_height + lh / 4, y ); let longer = Math.max(card_width, card_height); let width_per = card_width / longer; let height_per = card_height / longer; ctx.strokeRect( line_height + (line_height - width_per * line_height) / 2, y - lh / 2 + (line_height - height_per * line_height) / 2, width_per * line_height, height_per * line_height ); canvas.style.border = `solid ${scaleInch(0.25)}px #efefef`; return canvas; }32:T80f,letterhead_canvas = { fonthack; const canvas = document.createElement("canvas"); canvas.width = paper_width * PPI; canvas.height = paper_height * PPI; canvas.style.width = scaleInch(paper_width) + "px"; canvas.style.height = scaleInch(paper_height) + "px"; const ctx = canvas.getContext("2d"); // scale so 1px = 1pt assuming 72pt an inch let pt_scale = paper_width * ppi; let target_scale = (paper_width * PPI) / pt_scale; ctx.scale(target_scale, target_scale); ctx.textBaseline = "middle"; ctx.fillStyle = "white"; ctx.fillRect(0, 0, paper_width * PPI, paper_height * PPI); let pt_width = paper_width * ppi; let pt_height = paper_height * ppi; let line_height = lh; let line_rows = Math.floor((paper_height * ppi) / line_height); let rows_leftover = pt_height - line_rows * line_height; let row_offset = rows_leftover / 2; if (view_letterhead_grid) { for (let r = 0; r < line_rows; r++) { let y = r * line_height + row_offset; ctx.strokeRect(0, y, pt_width, line_height); } } // ctx.fillStyle = "gray"; // ctx.fillRect(0, 0, 113, 113); ctx.fillStyle = "black"; ctx.font = `normal ${font_size}px 'Inter UI'`; ctx.fillText("Grant Custer", lh * 2, lh * 2 + lh / 2 + row_offset); ctx.font = `normal ${font_size}px 'Inter UI'`; ctx.fillText("Design–Code", lh * 2, line_height * 3 + lh / 2 + row_offset); ctx.font = `normal ${font_size}px 'Inter UI'`; let this_width = ctx.measureText("grantcuster.com").width; ctx.fillText( "grantcuster.com", pt_width - this_width - line_height * 2, line_height * 2 + lh / 2 + row_offset ); let this_text = `${pt_width}x${pt_height}`; this_width = ctx.measureText(this_text).width; ctx.fillText( this_text, pt_width - this_width - line_height * 2, line_height * 3 + lh / 2 + row_offset ); ctx.fillText( "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", lh * 4, lh * 6 + lh / 2 + row_offset ); canvas.style.border = `solid ${scaleInch(0.25)}px #efefef`; return canvas; }33:[] 2f:{"title":"Functional branding sketch","cells":[{"id":0,"value":"md`# Functional branding sketch`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`This notebook is rough and I'm going to start over with a clean slate. The basic idea I want to explore is what are the fundamental building blocks of a layout. I have an idea that I can make a layout function that takes in width, height, and content (probably as markdown) and have it return a layout – and that that should work across web and print. The goal is to set it up so the smallest amount of rules solve the most cases.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"web_example = html`

Grant Custer

Design–Code

${width}x${lh * 10}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"viewof view_card_grid = checkbox({\n options: [{ value: true, label: \"View grid\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"font_size = 18","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"lh = font_size * 1.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"ppi = 113","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"card_width = 3.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"card_height = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"viewof view_letterhead_grid = checkbox({\n options: [{ value: true, label: \"View grid\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"paper_width = 8.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"paper_height = 11","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"PPI = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"function scaleInch(value) {\n return (value / irl_width) * width;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"irl_width = 9","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`Using the [Inter UI](https://rsms.me/inter/) font.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"css = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"mutable fonthack = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"trigger_rerender_for_font = {\n setTimeout(() => {\n mutable fonthack = true;\n }, 200);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}