Improve layout and readability

[CasperSocio]

Here are some suggestions on how to improve the layout and readability of the <article> contents.

Tested on small viewports.

Features

• Added CSS custom properties as an easy-to-change overview. Tweaks can easily be made at the top of the file.

Changes

• <article>
  • Setting a max-width of 80 characters helps readability as the text is better grouped together.
  • Added 16px of horizontal padding to avoid text touching the screen edge on small viewports.
  • Center aligning the element makes the entire layout nicer to look at.
• <figure>
  • Removed spacing around element. This is purely aesthetic.
• <ol>, <ul>
  • Decreased the amount of indentation on list items. This is purely aesthetic.
• <p>
  • Increased the line height to 1.5, making blocks of text more legible.
• <pre> & <code>
  • Making the style of code examples identical to GitHub makes it more familiar and readable to developers.
  • To avoid confusion with text wrapping on smaller screens, I added horizontal scrolling.

[CasperSocio]

Attach to #83

[CasperSocio]

I am open to help make more substantial changes to the UI. Just let me know.