Implement new featured apps carousel
The carousel is a visually captivating element to be used at the top of a page (primarily Explore), and a way to feature a handful of especially interesting apps in an elevated way.
- Should not feature too many apps at a time (ideally between 4 and 8)
- Uses HdyCarousel so we get nice swipe gestures and animations
- The rounded corners should remain masked while moving between pages
- Automatically cycles pages every 15s
Visuals
- The background is extracted from the icon. Ideally it should be a light, not too saturated version of the dominant color
- The background color needs to either always be light enough that gray text is legible on it, or we need a separate mode for darker dominant colors where the text is light
- Text is the regular dark gray text color (unless we do dark banners, in which case it is the regular light text color from Adwaita dark)
- In backdrop, the text does not change color to the usual backdrop light gray, in order to ensure legibility on the colorful background
- The two strings are the appstream app name and summary
- The icon is 160 at large window sizes, and 128 at narrower sizes (below 500px or so) and has the usual shadow style class to ensure contrast
- In order for this layout to look good the text can't be too wide, so title and subtitle should have a max width of about 300px and ellipsize beyond that
- The previous/next buttons are circular and 56px, and use these icons (at size 24):
- The prev/next buttons are the same color as the text and their hover/active state also uses that same color as background at 20% opacity for hover, and 35% for pressed
- Custom CSS and images for page backgrounds is still possible, but it's now optional
- At narrow widths, the title font size is about 80%, the icon is 128px, and text can wrap to a second line
Part of #1111 (closed)
Edited by Philip Withnall