Update first post and css

blog/2023/04/2023-04-10-sudoku.md

@@ -40,7 +40,7 @@ puzzle with nothing in it.
 }
 ```
 
-![border](images/sudoku-1.png)
+![A box with nothing in it.](images/sudoku-1.png){.center-img}
 
 I'm not joking when I say I'm going to have to do baby steps here.
 
@@ -54,7 +54,7 @@ Let's focus on the 9 main boxes in the grid now before worrying about the cells.
 210 pixels tall and wide. And slap a big ole border on there. Let's make it 2px because we will 
 want a narrower one for the cells.
 
-```
+```css
 .puzzle {
   width: 630px;
   height: 630px;
@@ -67,13 +67,13 @@ want a narrower one for the cells.
 }
 ```
 
-![boxes](images/sudoku-2.png)
+![](images/sudoku-2.png){.center-img}
 
 Reload that and... right div's auto linebreak after them.
 
 I think we can "float: left" these bad boys and...
 
-![boxes2](images/sudoku-3.png)
+![](images/sudoku-3.png){.center-img}
 
 Right, now I'm pretty sure the boxes are 210 + 4 pixels wide because the border isn't included.
 While I'm tempted to just math my way out of this I recall that you can specify the border-box
@@ -82,7 +82,7 @@ sizing to avoid this.
 Now this works! Now the astute of you may have noticed that there were 10 not 9 boxes in the 
 screenshot with the 2 columns. That became even more obvious in the full grid.
 
-![boxes3](images/sudoku-4.png)
+![Off by one errors...](images/sudoku-4.png){.center-img}
 
 Ok now we can just recreate all of this with the cells and should be good to go right?
 
@@ -93,7 +93,7 @@ just use flexbox).
 
 Finally this works!
 
-![grid](images/sudoku-5.png)
+![We have a grid!](images/sudoku-5.png){.center-img}
 
 ## Displaying a puzzle
 
@@ -102,7 +102,7 @@ flexboxes because
 [this](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div/13515693)
 StackOverflow answer convinced me.
 
-```
+```css
 .cell {
   ...
 
@@ -114,7 +114,7 @@ StackOverflow answer convinced me.
 }
 ```
 
-![cell number](images/sudoku-6.png)
+![](images/sudoku-6.png){.center-img}
 
 ### Taking the puzzle from the URL
 
@@ -126,7 +126,7 @@ I'll can just get all of the cells by class name and iterate over them in the sa
 puzzle string and it will display relatively easily.
 
 
-```
+```js
 window.onload = (event) => {
   var params = new URLSearchParams(window.location.search);
   var puzzle = params.get("p");
@@ -153,7 +153,7 @@ window.onload = (event) => {
 
 And hooray it works super well!
 
-![bad puzzles](images/sudoku-7.png)
+![This isn't quite right.](images/sudoku-7.png){.center-img}
 
 Oh wait... I didn't think about the fact that the elements in the HTMLCollection from the 
 document.getElementsByClassName call wouldn't be in the row order of the puzzle (all of the cells
@@ -166,7 +166,7 @@ those manually. I'm sure there is a better way but hey this works.
 
 Then with a quick update to the code.
 
-```
+```js
 for (i = 0; i < 81; i++) {
   if (puzzle[i] != '.') {
     document.getElementById(i+1).innerText = puzzle[i]
@@ -176,7 +176,7 @@ for (i = 0; i < 81; i++) {
 
 It works!
 
-![good puzzle](images/sudoku-8.png)
+![We have a puzzle!](images/sudoku-8.png){.center-img}
 
 Still some goofiness like the border on the outside being thinner than the interiors but I'm pretty
 happy with this for now.
@@ -187,7 +187,7 @@ Now to really visualize the solver's state, we'll also need to see which pencil
 These could be styled nicely but for now I just went with a span inside the cell div with the
 following style.
 
-```
+```css
 .cell > span {
   font-size: 10px;
   font-weight: normal;
@@ -202,7 +202,7 @@ string and let the browser break them up into multiple lines for us.
 
 This comes out quite nicely:
 
-![pencil marks](images/sudoku-9.png)
+![](images/sudoku-9.png){.center-img}
 
 ### Reading the pencil marks from the url
 
@@ -212,7 +212,7 @@ For this url trick we will add the pencil marks using a comma separated array li
 
 Using the string above we can use the following javascript code to parse and insert them:
 
-```
+```js
   var marks_param = params.get("m");
   if (marks_param === null) {
     return;
@@ -238,4 +238,4 @@ Using the string above we can use the following javascript code to parse and ins
 
 Which also comes out nicely:
 
-![full puzzle](images/sudoku-10.png)
+![](images/sudoku-10.png){.center-img}