hello! so far i’ve been working on responsive/adaptive design for the search page. i’m kinda putting off doing the individual pages in place of refining the search page.

• the logo is properly sized on safari. i don’t know what is it about safari and fit-content that just makes everything break horribly, but i had to choose manual widths for making the logo adaptive instead of relying on the image width. for some reason the logo tile gradually increases width despite me setting the width as static (gah css!). at some point in the future i should integrate the UI work with browserstack/tests.
• the hero page is now a proper <a> element instead of an <input> with focus intercepted. to keep compatibility with no javascript, it SSR’s as an <input> element before switching out to an <a> on component mount. this means that on mobile the keyboard won’t open and close when trying to search. unfortunately iOS safari doesn’t support autofocus…
• the nav bar is now the same width as the cards. the culprit was an empty div… i had adjusted for flexbox gap being janky by adding more padding, but now that i eliminated the element i could remove the padding composition and make everything the same width. this does mean that when scrolling down the curvature of the search bar/logo isn’t consistent with the title cards, but hey everything’s a compromise.
• bigger card buttons & button icons. they feel almost too big, but i know that click targets are important for accessibility. i also made the “Learn more” button a full pill instead of a rounded square. i guess the convention i’m intuitively going for is “rounder UI elements = more desired/friendly path”. i’m still upset that the icon library doesn’t work, it would be so nice.
• even more adaptive cards. i set up the breakpoints so that the image moves vertical first, then once there’s not enough space for the “Learn more” button the star and basket, the star and basket disappear since their functionality can be on the product page.