Fix <pre>

2024-02-26 21:32:07 -06:00 · 2024-02-26 21:32:07 -06:00 · 569b541eec
commit 569b541eec
parent 26821b48ef
6 changed files with 13 additions and 4 deletions
--- a/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md
+++ b/content/blog/build-an-svg-circle-grid-with-p5js/build-an-svg-circle-grid-with-p5js.md
@ -76,8 +76,8 @@ function setup() {
 }
 ```
 Now if we click the play icon at the top left of the Processing IDE, a browser window should open and load a page showing our sketch so far. We ought to see a viewport entirely covered with one large black canvas.
-[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/circle-grid-canvas.webp)](../../img/circle-grid-canvas.webp)

+[![The LibreWolf web browser opened to localhost. The viewport is entirely black.](../../img/circle-grid-canvas.webp "A good start!")](../../img/circle-grid-canvas.webp)
 ## Random results
 To meet conditions two and three of our goal, we'll need a way to get random numbers. Let's write a quick function inside `setup()` to provide us with random integers:
 ``` javascript
@ -214,7 +214,9 @@ We can check that everything is working by calling our new function at the botto
 ``` javascript
 generateCircleLine(10, 10, 20, 0, 5, 10, 10, 'x', [[255,255,255]]);
 ```
-[![The LibreWolf web browser opened to localhost. The viewport is black, with a single row of ten white circles in varying sizes in the top-left corner.](../../img/circle-grid-line.webp)](../../img/circle-grid-line.webp)
+
+[![The LibreWolf web browser opened to localhost. The viewport is black, with a single row of ten white circles in varying sizes in the top-left corner."](../../img/circle-grid-line.webp "We have a line!")](../../img/circle-grid-line.webp)
+
 And look at that! We have a line!

 ## Repeating rows
@ -287,7 +289,8 @@ generateCircleGrid(
 );
 ```
 ...to see the result:
-[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/circle-grid-grid.webp)](../../img/circle-grid-grid.webp)
+
+[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue.](../../img/circle-grid-grid.webp "Beautiful!")](../../img/circle-grid-grid.webp)

 ## SVG export
 Looking back on our goals, we've accomplished all but one: SVG export. Happily, there's [a library](https://github.com/zenozeng/p5.js-svg) that makes this trivial. All we need to do is link the script in the `<head>` of index.html,
@ -447,5 +450,7 @@ function draw() {

 ## Et voilà
 And we're done! Now you can tweak the parameters and make grids with all sorts of colors and size variations, and even export and edit them in Inkscape!
-[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue. There is a button reading "Save SVG" in the bottom right corner.](../../img/circle-grid-complete.webp)](../../img/circle-grid-complete.webp)
+
+[![The LibreWolf web browser opened to localhost. The viewport is filled with circles of varying sizes in various shades of blue. There is a button reading "Save SVG" in the bottom right corner.](../../img/circle-grid-complete.webp "The finished article.")](../../img/circle-grid-complete.webp)
+
 If you'd like to make this project even better, maybe consider implementing a GUI to adjust your grid paramaters, or adding some interactivity.
--- a/public/css/index.css
+++ b/public/css/index.css
@ -267,6 +267,9 @@ main > p > img, main > p > a > img {
 	margin: 0;
 	padding-bottom: var(--space-s);
 }
+pre {
+	grid-column: 1 / span 12;
+}
 p:last-child {
 	margin-bottom: 0;
 }
@ -681,6 +684,7 @@ h2 + .header-anchor {
 /* Components */
 article.post {
 	grid-column: 1 / span 12;
+	container: article / inline-size;
 }

 /* Utilities */
--- a/public/img/circle-grid-canvas.webp
+++ b/public/img/circle-grid-canvas.webp
--- a/public/img/circle-grid-complete.webp
+++ b/public/img/circle-grid-complete.webp
--- a/public/img/circle-grid-grid.webp
+++ b/public/img/circle-grid-grid.webp
--- a/public/img/circle-grid-line.webp
+++ b/public/img/circle-grid-line.webp