Bootstrap 3 → 5 upgrade; remove jumbotron parallax#48
Merged
Conversation
Bootstrap 5 ships its own JS without jQuery and includes Popper in the .bundle.min.js build. The parallax scroll on the jumbotron was a jQuery-based effect we no longer want. https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
Replaces the maxcdn BS3.3.5 stylesheet with the jsdelivr BS5.3.3 build. The bootstrap-social.css plugin only existed for the .btn-social-icon classes used on the people page; those move to a hand-rolled .social-icon utility in custom.css. https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
Bootstrap 5 flattens the navbar structure: no more .navbar-header wrapper, .navbar-toggle becomes .navbar-toggler, data-toggle becomes data-bs-toggle, nav items get explicit .nav-item / .nav-link classes, and the inverse styling moves from .navbar-inverse to the .navbar-dark .bg-dark combo. https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
img-circle becomes rounded-circle in Bootstrap 5. The old social button classes (btn-social-icon, btn-microsoft, btn-google, etc.) came from the bootstrap-social plugin and the SVG-only icons used a separate .person-svg-icon class. All seven (site, github, email, linkedin, scholar, bluesky, orcid) now share one .social-icon base with a brand-color modifier, regardless of whether the glyph is a FontAwesome <i> or an inline SVG. https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
Three related changes for the BS5 migration: - New .social-icon / .social-icon-* utility class replaces the bootstrap-social plugin and the people-page-only .person-svg-icon rules. One class works for both FontAwesome <i> and inline <svg> children. - body padding-top: 56px so the .navbar.fixed-top no longer overlays the jumbotron header. - Rename .navbar-inverse selector to .navbar (BS5 dropped the -inverse variant). https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
Bootstrap 5 renamed the responsive-image utility from .img-responsive to .img-fluid. Mechanical rename across all remaining call sites: the blog image include, the research page, the research data file, and two legacy posts. https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
Contributor
Summary
Errors per inputErrors in _site/learning.html
|
The .bg div was position: fixed to support the (now-removed) parallax effect. Without parallax, a fixed-position background bleeds through behind page content as the user scrolls, since the body has no opaque background of its own. Move the chapel image directly onto the .jumbotron element and drop the .bg div; the header and its background now scroll away together as expected. https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
The jumbotron ended flush against the first content block. Add a 2rem bottom margin to give the header room to breathe before the page body begins. https://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrates the site from Bootstrap 3.3.5 to Bootstrap 5.3.3 and removes the
jQuery-based parallax scroll on the jumbotron header. jQuery is no longer
loaded; the BS5 bundle includes Popper for tooltips/popovers.
Six small commits, one concern each, in this order:
0a43d97— drop jQuery +jumbo_scroll.js; load BS5 bundle JSe98879c— swap to BS5 CDN inhead.html; delete thebootstrap-social.cssplugin679354d— rewritenavbar.htmlfor BS5 markup(
navbar-expand-md,navbar-dark bg-dark,data-bs-*attrs,nav-item/nav-linkstructure)e06071f—person.html:img-circle→rounded-circle; unifythe seven social links (site, github, email, linkedin, scholar,
bluesky, orcid) under one
.social-iconbase classae018d5—css/custom.css: add the.social-iconutility thatreplaces the bootstrap-social plugin; add
body { padding-top: 56px }so the
.fixed-topnavbar no longer overlays the jumbotrondf0c85b—img-responsive→img-fluidacross the blog imageinclude, research page/data file, and two legacy posts
Test plan
bundle exec jekyll buildsucceedspublications, about, location all render correctly with the navbar,
jumbotron, and content positioned cleanly
both FA
<i>glyphs and inline<svg>iconsdata-bs-togglehttps://claude.ai/code/session_01S5QXfkxZBNSAf2Y1XAD8H7
Generated by Claude Code