The post preview component was updated with an image-first card layout, unifying text objects in the cars body and expanding the post image to the boundary of the card.
The site settings were also updated to display post excerpts in the preview cards instead of the full post content for a cleaner experience.
After the component structure was updated, an experimental style was applied in the browser inspector to demo the intended appearance:
- Sets the cards border radius of 22 pixels to follow the border radius of the card buttons+the card padding
- Sets the cards box shadow to a custom finish
- Sets the card background color to white with 80% opacity (this will be enhanced with a blur+saturation “glass” filter in a future update)
- Sets the body background color to #f2f2f2
- Sets the navigation bar background color to transparent
- Sets the theme color to #f3f3f3
These refinements create a seamless background between the browser’s toolbar and the website. The contrast between the background and the cards is fine tuned using shadows and transparency, and the translucent card material will look great over animated backgrounds.