Make CSS responsive to improve mobile layout

[Gabe-Mitnick]

Before

On narrow viewports (e.g. a phone or a narrow window on desktop) the layout would break and there would be lots of horizontal scrolling and text spilling off the edge of the background

After

Responsive CSS keeps the layout nice on narrow viewports.

I also added a lang="en" attribute to each html file because apparently that's good for accessibility, SEO, and hyphenation behavior.

Remaining issues

• The home page — The layout is kind of a mess, so I just left it as-is — still looking really zoomed-out on mobile.

• Code blocks — It's hard to display pre-formatted code blocks in a narrow viewport. Currently, the code blocks have two different behaviors.
  • Some code blocks have their text wrap when a line is too long to fit in the width of the code block. This can be confusing since it breaks indentation rules, and it's hard to distinguish automatic line wrapping from intentional stylistic line breaks.
  • Other code blocks don't let the text wrap, and instead allow the user to scroll horizontally to see all of the text. This can be confusing because it's hard to notice if a code block has more text for you to see if you scroll. For example, both of these text blocks need the user to scroll to see cut-off text. That's easy to see in the second block, but harder in the first.
  

One potential fix is to add a gradient fade-out that indicates to the user that there's more content that they can't see without scrolling, like this:

But I couldn't figure out a way to implement that properly without modifying the html generator to add an extra wrapper div around each code block. Another solution is to have the entire black block scroll side to side, which would look like this, but proper implementation for this would also require an extra wrapper div.

Despite these problems, though, I think this PR is strictly an improvement on the existing CSS.

[Gabe-Mitnick]

Hi @smith558 @memowe , could someone review this?