Update Bootstrap to version 5

[conradolandia]

I upgraded Bootstrap to version 5, updating css classes and layouts to fit the new version of the css. Bootstrap JS is not being used, only CSS.

[CAM-Gerlach]

I performed a detailed visual and functional diff between the current and preview versions of the theme demo site, and found the following significant regressions. Once these are resolved, I'll do the same for the Spyder site, to check for any issues the theme demo site doesn't catch.

To avoid bogging down this review with loads of screnshots and ensure we're on the same page about the regressions, @conradolandia I can just meet with you to go over them live and work out any potential issues, anytime from tomorrow through Saturday morning. Thanks!

All pages

• Logo and logotype stack and break, cause top bar to be too thick <1400 px, esp 1200 px
  • This is likely the cause of the scroll offset when scrolling to single-page sections is incorrect at these widths, with top bar covering section heading
• Too much left and right margin at widths under 1000px, visible in e.g. the navbar
  • Donate item breaks much too soon to the second row despite tons of space <960 px
  • Particularly visible on sub-pages, e.g. Readme, at e.g. 800 px
• Navbar item behavior is actually better once first chunk has multiple levels (below 900 px), before things get too small
• Page/external links don't display correctly in hamburger sidebar below 760 px
• Navbar has a little additional padding on the new version, which makes it a bit tall
• Page navigation links reversed order between 960 and 768 px breakpoints
• Footer styles not applying ( Footer should be container, not container-xxl)

Hero

• Fix custom style in example-custom-styles.css, currently using col-md-6 to apply to new theme
• But then no margin at all once goes to single line below 560 px
• Hero centering at large rather than medium breakpoint

Card sections

• Card border present for the Credits section in new site, not in old site
• At >760 px until 1200 px, cards in Features and Credits go straight from single to (very squished) three column instead of into an intermediate two-column layout like before (until 1200px)
  • Fixed upper breakpoint, but lower should be set at 768 (medium) instead of 992 px (large), affects both cards and also sponsors on the Spyder site
• However, credits narrower/better around 700 px width

Gallery section

• When clicking on an image, the underlying page scrolls to the top instead of remaining in place
• With a number of cards not divisible by 4, cards are not centered (compare at xxl and medium breakpoints)

Blog

• "Read more" link in index doesn't stick left below 760 px
• And lack of vertical margin between blog posts below 760 px, while too much space above "Read more"
  • Reduce vertical margin a bit between blog summary and "Read more"
• Decrease margin between name and date for blog posts to match previous

Other

• Remove no longer used rules (e.g. using .container, .col-md-n, etc.

Non-regressions (open issues to solve later):

• Tabbed section tabs don't display correctly at very small widths Fixed
• Hamburger menu order is reversed Fixed
• Hamburger menu stays stuck open past mobile breakpoint
• On website, Spyder logo is invisible in hamburger menu due to contrast

[conradolandia]

I think I managed to solve all issues. Please check it out and let me know if you find anything else.

All changes addressed, thanks!

[CAM-Gerlach]

Looks everything has been now addressed, but we can give it one more once-over on the Lektor-Icon site and the Spyder site at our meeting, and then we should be good to go 👍

[CAM-Gerlach]

A few of the additional issues discovered and (mostly) fixed after several rounds of testing:

A few additional issues:

• Fix bad breakpoint around 920 px width
• Fix vertical margins of the navbar link groups
• Blog post title covered up by header

Additionally, some additional fixes for the future if they can't be addressed easily here:

• Stellar hero image is misaligned after scrolling back up
  • Replace unmaintained Stellar with modern CSS
• Clicking an image popup in the gallery section causes changes in the navbar (margins, etc)

[CAM-Gerlach]

LGTM after rechecking everything one more time—thanks, @conradolandia !