style: redesign navbar, hero section, and fix dropdown

[halite-inc]

• Updated navbar to a clean centered minimal design
• Changed the font family to Poppins for better readability
• Removed the redundant logo from the hero section
• Standardized button sizes in the hero section
• Added subtle rounded styling to the hero buttons
• Increased top and bottom spacing in the hero section for a relaxed look
• Fixed footer side margin spacing"

[greptile-apps]

Greptile Summary

This PR redesigns the site's visual style: the navbar is refactored to a centered minimal layout (removing the per-link colour accents and the bg-light background), the hero section drops its banner image and standardises button shapes, the font is switched from Varela Round to Poppins, and lighten()/darken() Sass calls are modernised to color.scale(). The Gemfile.lock is also bumped to newer gem versions with a multi-arch platform matrix.

• Navbar: nav links are centred via ul.navbar-nav.mx-auto; the Donate link is extracted to a trailing ul.navbar-nav; the Stats dropdown is repositioned with inline !important CSS that centres it relative to its parent button.
• Hero section: article.wrapper replaced with article.container.mb-5.pl-4; the banner image is removed and hero buttons get border-radius: 12px for a consistent rounded look.
• Sass/CSS: base font changed to Poppins site-wide; deprecated lighten()/darken() replaced with the modern color.scale() module API.

Confidence Score: 4/5

Safe to merge — changes are purely presentational with no data handling or auth logic; the three style issues are visible but cosmetic and easily fixed in a follow-up.

The font swap, button rounding, and Sass modernisation are clean. Two layout mismatches need attention: the footer's max-width: 1200px overrides the site-wide 1000px content width, and the hero's pl-4 introduces one-sided padding on the container. The dropdown's all-!important centering can also push the menu off-screen on mid-width viewports. None of these break functionality, but they produce observable visual glitches.

_includes/header.pug (dropdown positioning) and _includes/footer.pug (max-width inconsistency) deserve a second look before merging.

Important Files Changed

Filename	Overview
_includes/header.pug	Navbar redesigned to centered layout with Donate moved to a trailing nav group; dropdown centering via inline !important CSS can overflow viewport on medium-width screens
index.pug	Hero section refactored: banner image removed, buttons standardised; pl-4 adds asymmetric left-only padding to the container
_includes/footer.pug	Inline max-width: 1200px on .wrapper conflicts with the site-wide $content-width of 1000px, making the footer wider than page content on mid-range viewports
css/main.scss	Migrates lighten()/darken() to modern color.scale() and switches base font to Poppins; clean, correct changes
_sass/_base.scss	Swaps Varela Round for Poppins and adds letter-spacing: -0.5px to headings; straightforward font update
_includes/download-button.pug	Adds border-radius: 12px to the download button to match the new rounded button style; no issues
Gemfile.lock	Routine dependency bump (Jekyll 4.4.1, sass-embedded 1.101.0, nokogiri 1.19.3, etc.) and platform matrix expansion to support multi-arch precompiled gems

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    NAV["nav.navbar.navbar-expand-lg.navbar-light\n(bg-light removed)"]
    NAV --> BRAND["a.navbar-brand\n(logo)"]
    NAV --> TOGGLER["button.navbar-toggler\n(mobile)"]
    NAV --> COLLAPSE[".collapse.navbar-collapse"]

    COLLAPSE --> UL1["ul.navbar-nav.mx-auto\n(centered)"]
    COLLAPSE --> UL2["ul.navbar-nav\n(trailing — Donate)"]

    UL1 --> DL["Downloads"]
    UL1 --> DOCS["Docs"]
    UL1 --> FORUM["Forum"]
    UL1 --> BLOG["Blog"]
    UL1 --> DD["Stats dropdown"]

    DD --> DDMENU[".dropdown-menu\ncentered via left:50%+translateX(-50%)\nall props !important"]
    DDMENU --> S1["Downloads & Users"]
    DDMENU --> S2["Contributors"]
    DDMENU --> S3["Sponsors"]
    DDMENU --> S4["Continuous Integration"]
    DDMENU --> S5["Timeline"]

    UL2 --> DONATE["Donate\n(highlighted, font-weight 700)"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    NAV["nav.navbar.navbar-expand-lg.navbar-light\n(bg-light removed)"]
    NAV --> BRAND["a.navbar-brand\n(logo)"]
    NAV --> TOGGLER["button.navbar-toggler\n(mobile)"]
    NAV --> COLLAPSE[".collapse.navbar-collapse"]

    COLLAPSE --> UL1["ul.navbar-nav.mx-auto\n(centered)"]
    COLLAPSE --> UL2["ul.navbar-nav\n(trailing — Donate)"]

    UL1 --> DL["Downloads"]
    UL1 --> DOCS["Docs"]
    UL1 --> FORUM["Forum"]
    UL1 --> BLOG["Blog"]
    UL1 --> DD["Stats dropdown"]

    DD --> DDMENU[".dropdown-menu\ncentered via left:50%+translateX(-50%)\nall props !important"]
    DDMENU --> S1["Downloads & Users"]
    DDMENU --> S2["Contributors"]
    DDMENU --> S3["Sponsors"]
    DDMENU --> S4["Continuous Integration"]
    DDMENU --> S5["Timeline"]

    UL2 --> DONATE["Donate\n(highlighted, font-weight 700)"]

Loading

_{Reviews (1): Last reviewed commit: "style: redesign navbar, hero section, an..." | Re-trigger Greptile}

[greptile-apps]

Asymmetric hero padding

pl-4 adds padding-left: 1.5rem on top of the Bootstrap container's default 15px left padding, while the right side only keeps the default 15px. This makes the hero text appear shifted right relative to the rest of the page content. If the intent is extra breathing room, px-4 (symmetric) or simply relying on the container's default gutters would be the right choice.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

[greptile-apps]

The footer wrapper is given max-width: 1200px, but the site's $content-width is 1000px (set in css/main.scss). On viewports between 1000px and 1200px the footer will be noticeably wider than the main content, creating a misaligned layout. Either remove the inline override to let the .wrapper SCSS rule apply, or set it to 1000px to match.

Suggested change

	.wrapper(style='max-width: 1200px;')
	.wrapper

[greptile-apps]

Dropdown !important centering can clip near viewport edges

The centering approach (left: 50% !important; right: auto !important; transform: translateX(-50%) !important;) positions the dropdown relative to the .dropdown element (the "Stats" button). When the "Stats" button is rendered close to the left edge of the viewport — which happens on medium-width screens with the mx-auto centered nav — the dropdown can overflow off-screen to the left. Bootstrap's built-in dropdown-menu-right or the Popper.js flip behaviour would handle this automatically. Additionally, using !important on left, right, and transform overrides Bootstrap's runtime JavaScript positioning adjustments, which can cause the dropdown to misplace itself if Bootstrap tries to reposition it.

[0xbrayo]

@halite-inc apply the changes suggested by greptile. post a screenshot of the result after :)

[halite-inc]

• Bugs fixed
• Followed as per suggested