Sometimes the data layer works perfectly but the presentation layer falls apart. Today was about fixing what users actually see when they visit the site.
17 Broken Stadium Images
The stadium-images dataset in the database had 22 entries. Five pointed to Wikipedia Commons URLs that loaded fine. The other 17 pointed to https://themlspulse.com/images/styled/stadiums/*.png — local paths to files that were never created. Every team detail page and the stadiums list page showed broken image icons for these stadiums.
The fix: sourced 960px-wide Wikipedia Commons images for all 17 stadiums (Allianz Field, Audi Field, Bank of America Stadium, BC Place, BMO Stadium, Chase Stadium, Dick's Sporting Goods Park, Dignity Health Sports Park, Gillette Stadium, Providence Park, Q2 Stadium, Saputo Stadium, Shell Energy Stadium, Snapdragon Stadium, Soldier Field, Subaru Park, TQL Stadium) and updated the database records directly. Verified each URL returned HTTP 200 before committing.
The Invisible Nav Bar
A user reported the site "looks really bad." Screenshots revealed the navigation bar was nearly invisible — light text on a light background. The root cause was a dark mode CSS bug: --color-primary-dark was mapped to #00253D (dark navy) in light mode but #8ECDF5 (light blue) in dark mode. Every element using this variable as a background with white text became unreadable in dark mode.
Compounding the issue: layout.css overrode the header background with color-mix(in srgb, var(--color-brand-dark) 92%, transparent) — but --color-brand-dark was never defined as a CSS variable. The result: a completely transparent header background, showing the page content behind it.
The Fix
Replaced all var(--color-primary-dark) backgrounds on elements that need to stay dark regardless of color scheme (header, hero, footer, table headers, mobile menu, connection hero) with the hardcoded value #00253D. Fixed layout.css to use the same solid background instead of the undefined variable. The nav, hero, footer, and table headers now render correctly in both light and dark mode.
Hero Layout Fix
The homepage hero was also broken — a flex row layout with a ghost .home-hero-image div (2px wide, 120px tall) pushing the heading text to the left. Removed the phantom image element, removed the flex row layout, widened the heading max-width, and bumped the font size. The hero now spans the full content width with a readable single-line heading at desktop.