Layout improvements

[Aloso]

I'd like to improve the page layout and am opening this issue to discuss the proposed changes.

Page size

• Increase the width of the website from 650px to 900px and
• Increase the font size from 16px to 18px

Navigation

• Center the text vertically
• Remove the (almost invisible) border
• Increase the font size and horizontal padding of the right button
• Make the button color less bright on hover
• Make the nu> logo monospaced
• Highlight the link for the current page with a green underline

Header

• Increase font size
• Make horizontal line thinner and lighter

<pre> blocks

• Decrease the line height to remove these gaps in table lines:

  ━━━━━━━━━━┯━━━━━━━━━━┯━━━━━━━━━━━━━
            │          │ 
  ──────────┼──────────┼─────────────
            │          │     
  ━━━━━━━━━━┷━━━━━━━━━━┷━━━━━━━━━━━━━

• Make horizontal and vertical padding consistent

Fonts

• Currently the font variants in @font-face have the wrong weight and style, fix it.
• Add local(...) to use system fonts instead of web fonts, if they are available in the client
• Remove Open Sans Semibold and Open Sans Semibold Italic, since they aren't used. Then the remaining fonts are:
  • Open Sans Light, Open Sans Light Italic
  • Open Sans Regular, Open Sans Regular Italic
  • Open Sans Bold, Open Sans Bold Italic

About page

• Make the github, discord and twitter icons larger, put them above the link text and center the links on the page

HTML, CSS

• The viewport is defined as user-scalable=no, which is discouraged. Remove it
• Add :focus CSS states for nicer keyboard navigation
• The website uses deprecated elements, and it uses some elements incorrectly. Fix these issues

Screenshots