diff --git a/content/netcanv.dj b/content/netcanv.dj index ffcae4a..004be21 100644 --- a/content/netcanv.dj +++ b/content/netcanv.dj @@ -133,10 +133,23 @@ It was a fight to the death over who can win the most friends online in a room a It was a matter of creating the best multiplayer painting app, and swaying our whole community over to it. {.wide} +:::: figure + ![MultiPixel running in the browser. There's a toolbar listing a bunch of tools on the left, including brushes, a flood fill, an airbrush, and smears. Next to that is a brush settings window, with a colour palette, and sliders for Size, Flow, and Smoothing. On the canvas there's a couple scribbles, including an at "@" and a tilde "~".][pic:01K3XBA43PZMKRC6VGJE0DYSB5] +{.overlay-bottom-right} +::: figcaption + +This is what MultiPixel looks like today. + +It's got plenty of drawing tools. + +::: + +:::: + Ultimately, I think MultiPixel won the battle. -It had a browser version, a flood fill tool, and undo/redo, and that was enough to make the drawing experience _miles_ better than what NetCanv could ever hope to offer. +It had a browser version, a flood fill tool, and an undo feature, and that was enough to make the drawing experience _miles_ better than what NetCanv could ever hope to offer. The one thing NetCanv was better at was performance, being a native app written in OpenGL, with client-side, GPU-powered rendering of brushes. But raw performance is never nearly enough to win people over. diff --git a/static/css/doc.css b/static/css/doc.css index 45d176c..7829dbb 100644 --- a/static/css/doc.css +++ b/static/css/doc.css @@ -108,12 +108,49 @@ main.doc { } } - & p:has(img.pic) { - text-align: center; + & figure { + margin: 0.5lh 0; - &.wide { - grid-column: left-wide / right; + position: relative; + + & p:has(img.pic) { + padding: 0; } + + & img { + display: block; + margin: 0; + } + + & figcaption { + padding: 0.25lh 0.5lh; + text-align: center; + + & p { + padding: 0; + } + + &.overlay-bottom-right { + position: absolute; + right: 0; + bottom: 0; + + background-color: var(--background-color); + border-top-left-radius: 0.8rem; + border-bottom-right-radius: 0.4rem; + + text-align: left; + } + } + } + + & p:has(img.pic), + & figure p:has(img.pic) { + text-align: center; + } + + & .wide { + grid-column: left-wide / right; } & header { @@ -171,8 +208,8 @@ main.doc { & .doc-text { --code-block-grid-space: 0; - & > pre, - & > th-literate-program { + & pre, + & th-literate-program { /* Stretch to whole page. This way of doing it feels a bit brittle, though. It might be good to refactor this to CSS grid at some point. */ @@ -190,6 +227,17 @@ main.doc { tab-size: 2ch; } } + + & figure figcaption { + &.overlay-bottom-right { + position: static; + + background: none; + border-radius: 0; + + text-align: center; + } + } } } }