feat(website): the front page's new hero, and the design's fonts across the site #768
No reviewers
Labels
No labels
area/accessibility
area/audio
area/input
area/install
area/menu
area/renderer
area/saves
area/upscaling
beanstalk: approved @ 1697603
beanstalk: approved @ 2c5a62e
beanstalk: approved @ 4fd82b7
beanstalk: approved @ 64d6d09
beanstalk: approved @ 6f91fae
beanstalk: approved @ 70a78f9
beanstalk: approved @ 8d361dc
beanstalk: approved @ 9d8356e
beanstalk: approved @ abf2227
beanstalk: approved @ d82f202
beanstalk: approved @ e5f1e40
beanstalk: approved @ ee8ab5f
ci: approved
good first issue
gpu/amd
gpu/igpu
gpu/intel
gpu/nvidia
help wanted
kind
bug
kind
chore
kind
docs
kind
feature
kind
performance
kind
question
needs measurements
platform/linux
platform/macos
platform/steam-deck
platform/windows
preview
priority
critical
priority
high
priority
low
regression
status
blocked
status
confirmed
status
duplicate
status
invalid
status
needs-info
status
wontfix
testing wanted
ci: approved
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set
Reference
MagicBeanDev/Longshot!768
Loading…
Reference in a new issue
No description provided.
Delete branch "madebyjordan/Longshot:website/hero"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Type: feat · Risk: low · Tested on: Windows 11, Chrome and Edge (headless, emulated widths) · Needs: a look in Firefox and Safari, and on a real phone
Why
The front page gets its new hero, from Jordan's design: a full-width sky with the Longshot title mark, a short intro,
Get started and Contribute, and a row of beans in the grass with the team credit and a Discord link. With it, the
site moves to the design's type: Faculty Glyphic for headings, Jost for text (a style guide follows). The design and
all its art are Jordan's; bibiburl has seen it and prefers it to the trails hero in #634.
No issue asks for this; the tracker was searched.
What changed
The old hero (heading, grappling-hook bean, punchlines) is replaced by the design's, built from its SVGs. On the front
page the header sits on the hero with the design's centred links and keeps site search and the theme control. The
dark theme gets a night sky. Every page now uses Faculty Glyphic and Jost.
website/src/components/LongshotHero.astro): laid out in the design's 1000-unit space (a unit is 1 px at1000 px wide, up to 1.3 px). Everything is centred on one line at every width; on phones the credit and Discord link
move above the beans.
assets/branding/hero/, all supplied as is, recorded inassets/branding/PROVENANCE.txt): the title mark;one bean, drawn eleven-plus times in its own colour, size and tilt, facing the middle; one cloud, at three sizes,
placed by fitting it to the design; the grass strip, one frame of it repeated across the window without a seam.
credit always has its space. 6 + 5 at 1000 px wide as in the design, 4 + 3 at 820 px, 14 a side at 2560 px. Pure
CSS (a bean that doesn't fit wraps to a hidden line).
#18202D, clouds#212937, grass#091902. The clouds and grass are CSS masks filled with thetheme's colour.
src/lib/bean-bites.tsand its test) and the fairy-bean secret.website/src/components/Header.astro,website/src/styles/theme.css): transparent on thehero, not fixed (it scrolls away with it), links centred (Get started, Help, Updates, About; Updates goes to
/progress/, still called Development on other pages). Search is an icon below 1120 px wide; the menu button below
800 px. Other pages keep the normal header.
website/src/styles/theme.css,website/src/assets/fonts/): Faculty Glyphic (one weight, 400) and Jost(variable, upright and italic), self-hosted, Latin and Latin Extended subsets by
unicode-range, with provenance andlicences. Atkinson Hyperlegible Next and Libertinus Serif are removed. Headings drop from 600 to 400 (Faculty Glyphic
has no bold, so a browser would fake one) and lose Libertinus's tight tracking. The About page's font credit is
updated.
website/README.md: the hero, its art and the fonts.Measurements
Verdict: nothing to measure: a website design change with no runtime, build or game effect (Testing has the layout checks).
Flags and settings
None.
Testing
Screenshots, before (main @
aa95d35f) and after (this PR @463c96ba), desktop and phone, both themes:the screenshots comment.
Tested: Windows 11, Chrome and Edge headless, through the DevTools protocol (emulated device widths), against
astro devand a production build:Layout at 390, 760, 820, 1000, 1120, 1440 and 2560 px, both themes: no horizontal overflow (main overflows a 390 px
phone by 2 px). The subtitle is at least 24 px at every width. The nav links, title mark, subtitle, intro, buttons and credit share one centre to the pixel at every
width. The intro is 3 lines from 760 px up, 4 on a 390 px phone.
The theme menu (Light, Dark, Auto with a light or dark system): the sky, clouds and grass take the right colours in
all four combinations, from both computed styles and sampled pixels.
npm run build: 16 pages.node --test tests/*.test.ts: 72 pass, 1 fail, the same failure as on main(
graphics-settings.test.ts, "HDR Native condition accepts current prose but remains required").npm run check: fails only on the progress feed's issues #603, #615 and #715 (game names in their titles), as maindoes; #731 fixes that.
python -I -B tests/run_all.py: 190 passed, 67 failed, 336 skipped, the same 67 failing files as main @aa95d35fonthis PC (no compilers or Vulkan headers here). Nothing outside
website/andassets/branding/changes.The 67 files that fail on both
test_alt_enter.py,test_appimage_player_build.py,test_audio_deadline.py,test_audio_output_errors.py,test_audio_wave_buffer_release.py,test_bc_levels.py,test_bind_memo.py,test_capture_copy_helpers.py,test_collect_wide.py,test_cpm_discovery.py,test_dlss_actor.py,test_dlss_checks.py,test_dlss_math.py,test_draw_binds.py,test_env_file.py,test_fps_overlay_order.py,test_fps_rate.py,test_fps_stats.py,test_framegen_auto.py,test_framegen_gate.py,test_fsr3_math.py,test_gpu_choice.py,test_hd_rumble.py,test_import_span.py,test_jobs_wait_runs_queued.py,test_lift_cache.py,test_lift_cleanup_error.py,test_make_game_cache.py,test_make_game_prepare.py,test_menu_mouse_scroll.py,test_mirror_inherit.py,test_missing_nup.py,test_movie_upscale_policy.py,test_nvn_texture_handle.py,test_oot_jitter.py,test_options_budget_once.py,test_pass_hazard.py,test_pool_span.py,test_portable_builder_startup.py,test_present_ahead.py,test_present_thread.py,test_prof_clock.py,test_prompt_auto_face.py,test_push_state.py,test_quick_pipelines.py,test_report_words.py,test_rt_pool_minimum.py,test_rumble_mapping.py,test_rumble_menu.py,test_rumble_refresh.py,test_same_bind.py,test_same_draw.py,test_same_dyn.py,test_seed_reader.py,test_skip_code.py,test_status_line.py,test_submitted_page.py,test_table_track.py,test_tested_configurations.py,test_tex_spans_once_a_present.py,test_texture_layout_sizes.py,test_ub_gap.py,test_upscale_independent.py,test_upscale_label.py,test_vertex_bind.py,test_vk_pgo.py,test_wb_pages.pyNot tested: Firefox, Safari, a real phone, a screen reader; the Cloudflare preview (a fork's PR needs the
previewlabel).Must be tested:
the screenshots' layout, centred content, the grass and clouds in the theme's colours, and no sideways scrolling
(a maintainer adding
previewgives the Cloudflare preview to do it on).Risks
What could break: the hero's layout in browsers not tried here (it relies on CSS
mask,clamp()sizing andtext-wrap: balance, all current in Chrome, Firefox and Safari). The yellow subtitle (the design's#FFE100) is 3.67:1 on the day sky and12.5:1 on the night sky; it never goes under 24 px, so it meets WCAG's 3:1 for large text (it had been 20 px on phones).
The hero no longer says "bring your own copy of the game"; the download section below still says no game files are
included. The front page's nav says Updates where other pages say Development.
Turning it off: revert the PR.
Compatibility: nothing changes for a player's game, saves or caches. A page downloads about 46 KB of fonts (the Latin
Jost and Faculty Glyphic) where it took about 225 KB (Atkinson and Libertinus).
Checklist
Everyone
type(scope): description) of the status line's type.main.python -I -B tests/run_all.pypasses (any failure that also fails onmainis named).third_party/untouched (a new folder with aPROVENANCE.mdinstead).When it applies
Assisted-by:/Co-Authored-By:trailers.🤖 Generated with Claude Code
Screenshots: before is main @
aa95d35f, after is this PR @463c96ba. Chrome headless, 1440 × 900 desktop and a 390 × 844 phone (emulated), front page.Desktop, dark theme
Before: main @

aa95d35fAfter: this PR @

463c96baDesktop, light theme
Before: main @

aa95d35fAfter: this PR @

463c96baPhone (390 px)
aa95d35f, dark463c96ba, dark463c96ba, lightWIP: feat(website): the front page's new hero, and the design's fonts across the siteto feat(website): the front page's new hero, and the design's fonts across the site44515f41: the subtitle never goes under 24 px (it was 20 px on phones and 23 px at 1000 px wide). The design's yellow on the day sky is 3.67:1, which meets WCAG's 3:1 for large text from 24 px but not below; on the night sky it is 12.5:1. Raised by bibiburl. Rebased onto main @aa95d35f.View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.