Replace bootstrap-sass 3 to bootstrap 4.6.1

[tnir]

before (1024-width on iPad Pro)	after (1024-width on iPad Pro)

Closes #643

What was the end-user problem that led to this PR?

An end-user needs to load a legacy Bootstrap 3 just to browse the bundler docs.

What was your diagnosis of the problem?

No maintainers/contributors maintained the frontend of the site for 6 years.

What is your fix for the problem, implemented in this PR?

HAML and SCSS would be easier for everyone to maintain as Bootstrap 4 is more recent version than 3.

Screenshots for navbar/searchbox

New introduction

• https://fontawesome.com/v5/icons/search?s=solid (from Font Awesome 5 Free) (dropped Glyphicons icon font in Bootstrap 4)
• Opacity utilities from Bootstrap 5 https://getbootstrap.com/docs/5.1/utilities/colors/#opacity
  • which will be removed when Bootstrap upgraded from 4.6 to 5.1 (or upcoming 5.2)

Small improvement in searchbox spacing

Before this PR

before.mp4

After this PR

after.mp4

Why did you choose this fix out of the possible options?

I cannot upgrade it from 3 to 5 (the latest major version as of creation of the PR) directly.

• Updates lots from Redesigning website #218

Signed-off-by: Takuya Noguchi takninnovationresearch@gmail.com

[olleolleolle]

(This is not a review, just appreciation: Your work on Bundler's docs is 🏆 super good.)

[duckinator]

I can't give this a proper review right now, but I just wanted to say thank you so much for taking this on. It is greatly appreciated. ❤️

If nobody else gives this PR a proper review by next Monday (the 11th), feel free to @-mention me and I'll take a closer look at it.

[tnir]

@olleolleolle Welcome and I just miss Turbinkanalen.

@duckinator Thanks a lot in advance for reviewing my upcoming PR for updating Bootstrap 4 to 5 or removal of it (not decided yet) hopefully I would create around July 11.

[tnir]

You can improve two more structures around navbar.

[tnir]

before (1024-width on iPad Pro)	after (1024-width on iPad Pro)

As of 058b6c9, .pull-rights were not replaced with float-right.

[tnir]

All make sense to me as well.

Comments from anyone else than @deivid-rodriguez are now welcome again.

[tnir]

/ping @duckinator

[duckinator]

The only problem I see is that I get an unnecessary horizontal scrollbar, but I don't think that needs to block merging this. Aside from that this PR is good to go!

The scrollbar appears to be caused by the row class, and everything with that class is wider than my screen. Removing margin-right: -15px on .row fixes it, but I don't know if it's the actual cause of the problem:

@tnir would you rather I merge this as-is and open an issue for the scrollbar thing, or do you want to try to include the fix for that here? imo it's minor enough that I don't mind merging it and fixing that later.

[tnir]

@duckinator Good catch! While the original code looks non-standard, I fixed it in the latest commit so I think this would be ready to merge.

[duckinator]

This looks good to me, so I'm merging it.

Thank you so much for all of your work on the site, @tnir!

[tnir]

Thanks @duckinator for a quick merging. This has blocked many tasks for me.

[deivid-rodriguez]

I'm getting bad styles in what's new page, I guess it was after this PR.

[tnir]

@deivid-rodriguez Yeah, I found this regression in last minute changes at #644 (comment) soon after this PR got merged.

[deivid-rodriguez]

Thanks for fixing it!