Transition blog tutorials to GitHub Pages site.

[BuggusMageevers]

Move each blog tutorial to a page on website.

[BuggusMageevers]

While transitioning the first page with a code block, I ran into an issue in which the code block was making the entire article container stretch to fit the code content. What I wanted was the code block container to be the width of the it's parent container and then the code content would horizontally scroll in that code block if there was overflow.

With simple flex box's, this isn't usually an issue, but with a more complicated layout (one that switches between column and row order) this requires some extra finesse. I had read, on several StackOverflow threads, that the issue was in min-width/min-height. Apparently, revisions made to flex box resulted in min-width being set to an ambiguous value. It is the ambiguity that causes the problem. By setting min-width to a specific value (e.g. 0, like it used to be), the aberrant behavior goes away. However, by applying this to the element containing the code (in the case of this site, either the pre tag) does not correct the behavior.

The secret is in which element to set the min-width to 0. The flex container of the flex item that contains the code is the element that needs this setting. In other words:

<div class="flex_container"><!-- This container has items that may contain code blocks.  It's min-width must be set to 0 in order for the layout to work properly. -->
    <div class="flex_item"><!-- This item contains code blocks.  It's children are block elements. -->
        <pre><code>The code content</code></pre>
    </div>
</div>

With this applied, the code block sizes appropriately to the parent container and scrolls horizontally when there is overflow content.

[BuggusMageevers]

Having some trouble getting the gutter holding the code line numbers to be a uniform width no matter how large the number. As it is, with each additional order of magnitude, the gutter gets wider.

|  1 |
|  2 |
...
|  9 |
|  10 |
|  11 |

Ideally, the gutter should be uniform.

|   1 |
|   2 |
...
|   9 |
|  10 |
|  11 |

The code blocks on this site seem helpful. It's similar to what I have, so it's going to take some time to see what's different and what "makes the difference".