Upgrade to current Bootstrap - brings small design changes

[Zegnat]

Currently the template uses an old alpha version of Bootstrap 4. It does not make sense to be using an alpha version at all. Bootstrap 5 had its first release 2021-05-05, maybe it is time to make the step 5+ years later. This PR does a few things:

1. Resolves Posher #13 by implementing some of the semantic HTML changes (to the sections) from @btrem. For this I also introduce a heading for the first page section, otherwise <section> does not make sense.
2. Upgrade to Bootstrap 5, using the new official preferred CDN jsDelivr. Instead of the no-longer existing MaxCDN.
3. Use as much stock Bootstrap as possible, removing all our own inline styling. Still use specific classes to try and match our old design spacing.
4. As a minor accessibility tweak: move the mf2util description out of a title attribute and into an associate visible text instead.

As an aside I have also tweaked some inaccuracies in the README that were just never updated, like the move from the indieweb org to the microformats org. Happy to split that commit into a separate PR if it turns out this PR stalls.

Comparison

Before — Bootstrap 4.0.0-alpha.6	After — Bootstrap 5.3.8

• Text is ever so slightly darker in Bootstrap 5.
• Links have gotten back their underlines again. Usability win in my book, but opinions might differ.
• Selects are now styled, but I think there used to be styling in Bootstrap 4 as well. The reason we did not style that might be lost to time.
• The new success-green used by Bootstrap 5 is a little darker. Better contrast with the text colour on the buttons. But I would also accept that it might be too dark. It would be relatively easy to remap the button colours:

<style>
  .btn-success {
    --bs-btn-bg: #5cb85c;
    --bs-btn-border-color: #5cb85c;
    --bs-btn-hover-bg: #4cae4c;
    --bs-btn-hover-border-color: #4cae4c;
    --bs-btn-active-bg: #449d44;
    --bs-btn-active-border-color: #449d44;
  }
</style>

[gRegorLove]

LGTM!

[btrem]

Does a one page website need bootstrap at all?

[Zegnat]

The Bootstrap dependency, in my opinion, is there so all parser pages can use the same design. Regardless of who ends up writing them. It also means people do not need to go out and decide their own styling for elements.

E.g. this page does not use checkboxes and I might have not included them in the CSS. But the PHP parser does need them. By already having decided on Bootstrap, a decision made years ago, we can skip a lot of bikeshedding on the design and just use the defaults.

Edit: of course this one does use checkboxes, there are other pages that do not. Like the Go one that I was recently looking at updating too… I think the point is still the same.

[btrem]

The Bootstrap dependency, in my opinion, is there so all parser pages can use the same design. Regardless of who ends up writing them.

Ok. But why do all the parser pages need to use the same design?

Hey, it's your repo (or at least it's not mine). So do what you want. But ISTM that it isn't necessary. FWIW, the only difference I see in the two screenshots you provided is the select element, which now extends across the screen. I hate that (I got stuck with the same thing on a Drupal site I manage, after changing the theme). But that's a personal preference.

[gRegorLove]

The width of that select can be changed pretty easily with the BS5 grid classes: https://getbootstrap.com/docs/5.3/forms/layout/#form-grid