Update website look/feel#73
Open
criccomini wants to merge 92 commits into
Open
Conversation
Redesign the homepage around a full-bleed product-oriented hero, a clearer modeling workflow, refreshed proof and testimonial sections, and a stronger final CTA while preserving the original FizzBee positioning around modeling, visualization, validation, and tests. The change also adds a local Geekdoc header override to remove the dark-mode toggle, introduces persistent top navigation links, consolidates font loading, moves consent banner styling into the shared stylesheet, and updates the global light theme so docs pages inherit the new typography, spacing, colors, and code treatment.
Update the local Geekdoc header override so the FizzBee brand link renders as a literal root-relative href. This avoids using the configured Hugo home permalink for the logo/title anchor while leaving the rest of the header navigation unchanged.
Remove the small eyebrow and kicker labels from the homepage hero, section headings, workflow items, and final call to action. The accompanying stylesheet cleanup drops the unused eyebrow and brand-kicker rules and tightens the workflow heading spacing so the page keeps the same structure without extra label text above headers.
Update the homepage hero headline to the shorter sentence-case copy, 'Design reliable, scalable distributed systems,' and tighten the hero spacing around it. The CSS changes reduce the hero min-height, desktop and mobile padding, headline scale, copy spacing, and mobile preview height so the first section takes up less vertical space while preserving the existing product preview and calls to action.
Update the homepage testimonial section heading from 'Formal methods without the ceremony.' to 'Formal methods made easy' to use the requested copy while leaving the surrounding section structure and testimonials unchanged.
Darken the default border color for light-surface secondary homepage buttons so the Open playground CTA has a visible outline before hover. The final dark CTA keeps its existing section-specific border override, so this only changes the white secondary button treatment.
Cap the desktop homepage hero min-height with a CSS min() expression so the hero stops scaling upward on tall browser windows. The viewport-relative height still applies on smaller desktop windows, while the existing mobile override continues to use the content-driven auto height.
Remove the remaining 1.25rem vertical offset between the Geekdoc header and the homepage hero by extending the homepage negative top margin on desktop and mobile. This keeps the docs page spacing untouched while making the hero grid start flush under the sticky header.
Remove the homepage workflow section heading and collapse the section spacing so the Specify, Explore, and Test strip sits directly under the hero. The workflow section now spans the full homepage width without the previous constrained section gutter, with mobile-specific padding overrides so the grid itself remains tight to the hero across viewport sizes.
Move the Open playground CTA from the hero action row into the travel_booking.fizz workbench title bar and style it as a compact toolbar button. The update keeps the primary Start modeling CTA in the hero, adds truncation-safe topbar layout, and preserves desktop and mobile behavior without horizontal overflow.
Remove the decorative red, orange, and green window-control dots from the homepage FizzBee workbench preview. The title bar now uses a simpler two-column layout with the model filename on the left and the Open playground action anchored on the right, preserving the compact desktop and mobile treatment.
Give the homepage Specify, Explore, and Test workflow panels distinct soft backgrounds with matching top accents so the strip no longer blends into the white page. The update keeps the full-width layout flush beneath the hero and preserves the existing responsive stacking behavior.
Increase the vertical space between the homepage hero headline and supporting lead copy on desktop and mobile. The selector now outranks the homepage paragraph reset so the intended margin is applied reliably in the rendered page.
Add a responsive gutter between the Geekdoc sidebar navigation and main documentation content when the nav is present. The spacing applies only above the mobile nav breakpoint, so docs pages get more breathing room while homepage and mobile layouts remain unchanged.
Use the configured site title for the home page when it appears as the root item in Geekdoc breadcrumbs. This keeps the docs breadcrumb compact as FizzBee while leaving the homepage content title and normal document titles unchanged.
Replace the landing-page travel_booking.fizz preview with the longer participant/coordinator model and remove the model-check result callout from the workbench. The code area is now clipped inside the existing window with a bottom gradient fade, and the mobile layout constrains long code lines so they do not widen or crop the hero.
Restore the full testimonial bodies from the pre-redesign homepage in the Formal methods made easy section. This keeps the refreshed quote-card layout and existing attributions while bringing back the longer original customer comments that had been shortened during the redesign.
Replace the three Specify, Explore, and Test workflow panels with four Model, Verify, Visualize, and Test panels on the homepage. The strip now uses four equal columns on desktop, retains the stacked mobile layout, and adds a fourth rust-tinted panel treatment for the Test step.
Replace the mobile homepage full-bleed offset that depended on a hard-coded scrollbar compensation with a gutter-based width and margin. This keeps the landing-page hero and workflow strip flush to the left edge on mobile while avoiding horizontal overflow in the rendered page.
Raise the landing-page workbench above the hero copy layer so the Open playground CTA receives pointer events on desktop. Playwright hit testing confirmed the button was previously covered by the hero copy stacking context, and the updated z-index lets both desktop and mobile clicks reach /play.
Replace the compact workflow treatment with four full landing-page sections for Model, Verify, Visualize, and Test. The update moves the travel_booking.fizz workbench into the Model section, removes the old distributed-bugs trace section, adds real FizzBee CLI output from a local verification run, introduces a state-graph SVG based on the generated error graph, and adds a Rust MBT harness example with responsive artifact styling.
Apply a darker visual treatment to the global header and homepage hero while preserving readable navigation, icon, heading, and lead-copy contrast. The header now uses a deep green surface with light links and a warmer playground treatment, and the hero uses a matching dark plane with subtle light grid lines and high-contrast copy.
Remove the horizontal Model, Verify, Visualize, and Test workflow bar below the homepage hero now that those concepts are expanded into their own artifact sections. The cleanup also deletes the unused compact section and fb-loop CSS, including the responsive rules that only supported the removed strip.
Add the same bottom fade treatment used by the travel_booking.fizz model window to the Verify terminal and Rust test harness windows. The pre content in those windows now clips instead of scrolling, with responsive fade heights so desktop and mobile previews both show truncated artifacts cleanly.
Remove the Docs, Examples, Testing, and Blog text links from the custom site header while leaving the FizzBee home link, Playground CTA, and existing icon links in place. This keeps the dark header more focused and avoids duplicating navigation now that the homepage has clearer content sections.
Update the Open playground link inside the travel_booking.fizz workbench to use the same warm Playground CTA treatment as the header navigation. The compact workbench button keeps its topbar sizing while sharing the nav CTA border color, background, text color, radius, and weight so the affordance reads consistently across the page.
Use one shared artifact grid for the homepage codebox sections so the travel_booking.fizz model, Verify terminal, and Rust test harness windows render at the same width. This removes the wider Verify/Test grid override while preserving the responsive single-column mobile layout.
Replace the default Geekdoc footer contents with a compact FizzBee footer that links to the privacy policy, design verification docs, testing docs, blog, and back-to-top action. The footer keeps the existing cookie consent partial mounted while adding responsive styling that matches the dark header and avoids overflow on mobile.
Remove the data source that populated the docs left-nav More block with Blog, GitHub, and Discord links. Add a local Geekdoc menu partial override that only renders the More wrapper when More menu data exists, so the empty section does not appear in the documentation navigation while the normal file-tree nav remains intact.
Update the homepage hero lead so the first sentence now says users can write design specifications in a Python-like modeling language with their AI. The second sentence, headline, call-to-action, and responsive layout remain unchanged, and the updated copy was checked in desktop and mobile viewports for wrapping and overlap.
Update the homepage hero lead so the second sentence now says FizzBee verifies the design and turns the model into a test harness for user code. This removes the state-space exploration phrase from the hero while leaving the headline, first sentence, CTA, and responsive layout unchanged.
Update the homepage hero lead to use the requested wording about writing designs in a Python-like modeling language with AI and turning the model into a test harness. The surrounding hero title, CTA, visual layout, and responsive styling remain unchanged, and the updated sentence was verified in desktop and mobile browser viewports.
Update the homepage hero lead to use the requested wording about writing designs in a Pythonic modeling language and turning the model into a test harness. The surrounding hero title, CTA, visual layout, and responsive styling remain unchanged, and the updated sentence was verified in desktop and mobile browser viewports.
Update the homepage hero lead so it says FizzBee verifies your design and turns it into a test harness for code. This corrects the previous wording while keeping the headline, first sentence, call-to-action, and responsive hero layout unchanged.
Rename the homepage Model section to 'Look Familiar?' and replace the protocol-focused paragraph with Starlark-focused copy. The new text links to the Bazel Starlark repository and explains that FizzBee specs use a small Pythonic language that stays friendly to both humans and AI tools.
Update the homepage Verify section copy to replace the failing schedule phrasing with failed assumptions and deadlock scenarios. The surrounding section title, link, terminal output, and responsive layout remain unchanged, and the updated copy was verified in desktop and mobile browser viewports.
Update the homepage Look Familiar section copy to describe Starlark as the same Python dialect used by Bazel and add a Bazel link alongside the existing Starlark link. The revised copy keeps the human-readable and AI-friendly message while preserving the section layout and playground call-to-action.
Rename the homepage Verify section heading to 'Verify Your Designs' while leaving the section copy, model checker output, call-to-action, and responsive layout unchanged. The updated heading was checked in desktop and mobile browser viewports for wrapping and horizontal overflow.
Rename the homepage Visualize section heading to 'Visualize Design Complexity' while leaving the section copy, visualization image, call-to-action, and responsive layout unchanged. The updated heading was checked in desktop and mobile browser viewports for wrapping and horizontal overflow.
Rename the homepage Test section heading to 'Convert Models to Code Tests' while leaving the section copy, Rust example, call-to-action, and responsive layout unchanged. The updated heading was checked in desktop and mobile browser viewports for wrapping and horizontal overflow.
Remove the inline transition text labels from the homepage travel booking state graph SVG so the arcs no longer show '1: Checkout' or '2: crash'. The state cards, transition arcs, and source caption remain intact, and the rendered homepage image was verified with headless Playwright.
Update the homepage Convert Models to Code Tests section copy so it says FizzBee drives state explorations instead of schedules. The surrounding heading, link, code example, and responsive layout remain unchanged, and the revised sentence was verified in desktop and mobile browser viewports.
Rename the homepage test section heading from 'Convert Models to Code Tests' to 'Convert Models to Test Harnesses.' The surrounding copy, testing guide link, code example, and responsive layout remain unchanged, and the updated heading was verified in desktop and mobile browser viewports.
Rename the homepage visualizations section heading from 'Visualize Design Complexity' to 'Visualize Complexity.' The section body copy, visualization image, call-to-action, and responsive layout remain unchanged, and the updated heading was verified in desktop and mobile browser viewports.
Update the homepage workflow section headings to the requested casing and wording: 'Look familiar?', 'Verify your designs', 'Visualize design complexity', and 'Generate Test Harnesses.' The body copy, links, code examples, and responsive layouts remain unchanged, and the headings were verified in desktop and mobile browser viewports.
Update the homepage visualizations section heading from 'Visualize design complexity' to 'Visualize complexity.' The section body copy, visualization image, call-to-action, and responsive layout remain unchanged, and the updated heading was verified in desktop and mobile browser viewports.
Replace the homepage Generate Test Harnesses paragraph with copy that explains converting a model into a harness for production code, names Go, Java, and Rust support, and says FizzBee drives state exploration. The heading, testing guide link, code example, and responsive layout remain unchanged.
Update the homepage hero headline from 'Design reliable software with AI' to 'Design reliable software.' The surrounding hero lead, call-to-action, visual treatment, and responsive layout remain unchanged, and the updated heading was verified in desktop and mobile browser viewports.
Update the homepage hero lead to describe designing software in a Pythonic modeling language and letting FizzBee verify the design while generating a test harness. This keeps the surrounding hero structure unchanged and was verified with a Hugo build plus headless Playwright checks across desktop and mobile viewports.
Defer analytics and tag-manager loading until user interaction or a delayed post-load fallback, keep the theme helper script out of the parser-blocking path, and avoid loading the search bundle on pages without navigation/search UI. Add intrinsic dimensions to existing images so the browser can reserve the same rendered space without changing the visible layout or page pixels.
Remove the mobile-only custom CSS that enlarged the header home icon to 2.25rem. The Geekdoc mobile header uses 1.5rem controls elsewhere, so the oversized home icon made the expanded right-side menu taller than the collapsed header and caused the visible header jump when tapping the open control.
Add local post list and single templates so blog pages use the same markdown article structure, breadcrumb treatment, and title hierarchy as the rest of the site. The accompanying CSS removes the stock Geekdoc dashed post chrome, normalizes post title links, metadata chips, read-more links, and mobile title sizing against the custom FizzBee visual system.
Scope the custom documentation navigation divider so it does not appear while the mobile off-canvas nav is closed. The divider is still restored when the nav drawer is opened, which keeps the drawer edge readable without painting a stray vertical line against the main document content.
Keep the documentation nav divider disabled for the entire mobile layout, including the open hamburger drawer state. This removes the vertical rule that was pressed directly against the dimmed document content while preserving the existing off-canvas drawer behavior and desktop navigation divider.
Move the custom h1, h2, and h3 spacing for generated markdown headings from the heading element onto the anchor wrapper. This keeps the copy-anchor icon centered against the heading text instead of centering it against asymmetric heading margins, fixing the high desktop and low mobile hover alignment while preserving the existing document spacing.
Override the Geekdoc mobile rule that hides the brand image so the FizzBee header keeps the bee icon next to the site title on small screens. The icon is sized to match the other 24px mobile header controls, preserving the existing mobile header height while leaving the desktop header unchanged.
Add a shared playground opener that stores the selected FizzBee snippet in sessionStorage before opening /play#embed-<id>, matching the live site handoff. Update the homepage example link to load its visible travel_booking.fizz block and switch the FizzBee shortcode to emit stable playground hashes with correctly escaped code payloads.
Give the custom footer shell an explicit centered width with a responsive horizontal gutter so its inherited container padding is not wiped out by the footer padding shorthand. This keeps the footer content away from the viewport edge on narrow desktop widths while preserving the existing max-width and mobile layout.
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
1 participant
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.
I took the liberty of updating the FizzBee website. Codex did everything (with my steering). The site still uses Hugo and the documentation remains unchanged.
I have run through the site on both desktop and mobile on chrome, and desktop safari. It appears to work as expected.
The one thing I couldn't test were the playground links. It appears they stash some information in a session that the playground then pulls up. If they don't work after deployment, I suppose we can trouble shoot or roll back.
I recommend deploying this locally to play around with it if you want to get a real feel for it. Feel free to ignore this PR if you aren't into the layout or whatever. Taste is a fickle thing.