35 - Home styling responsiveness

[mehigh]

The main differences I've noticed when comparing the figma with the ampstart were around two elements:

• the browse by activity icons on mobile should wrap on a second line and shrink. I've applied a 70% shrink on the icons when going below the medium breakpoint and also decreased the margin to only 33% of the origina.
• the top adventures near you, which shared the layout with the similar adventures element on the single product page -> when shrinking the browser the slant is no longer present and the adventures stack instead of being horizontally scrollable

This PR makes the necessary adjustments to the respective Gutenberg blocks and adds the necessary CSS.

@miina Please check this, and if needed, add the mark-up updates to other locations (if there are any other of course).

[miina]

Hey, @mehigh, it looks like the markup changes are currently for Gutenberg editor only and not for the actual frontend rendering, was this the intention? There are some new issues with the editor design now:

The Popular block goes "behind" the right bar now, however it's not possible to see the part that's behind the bar. Previously it was possible to scroll left and right on the block to see all the posts, and the posts didn't go behind the sidebar. Same happens with the Activity List block.

Let me know if the changes were actually meant for front-end, then I'll move them over.

[miina]

@mehigh When you pick this up on Wednesday, do you think you could also check these two small issues on the homepage:

• The location icon is on top of the input placeholder (this shows correctly on develop, perhaps it's showing correctly for you locally and it's only my issue since you actually did't make related changes?);
• The plane icons should be on the left of the input text, not above (this is incorrect on develop, too);

Thank you!

[mehigh]

The search icon misplacement was caused by a calc() rule containing vars which was getting stripped out by the amp plug-in. I've updated the calc / var rule inside of the sources and recompiled amp-start to get this going.

[mehigh]

The icons misalignment with the start and end dates was caused by 3 other calc instances which used vars. Those were getting stripped out, so I computed and placed in the proper em values.

[kienstra]

Thanks, Icons Look Good

Hi @mehigh, Thanks for your improvements to the icon alignment. Like you mentioned above, I also see that it's fixed: