Ehren

Strange, I’m not sure I can reproduce this. What browser and iPhone? Here is Safari (with the URL bar at the top) on a 14 Pro. And this is with the URL bar located at the bottom:

Version 5 has had a huge focus on accessibility. A menu which relies on clicks rather than hover is typically a far more accessible approach. Inspiration was taken from the “File, Edit, etc” menus in both macOS and Windows, where a click is used to open the menu. You could change this to a hover menu by using custom JS, however it wouldn’t allow you to reliably add a link to the submenu header, since those are button elements.

Hello, Navigation submenus in v5 are toggled on click/tap. It's therefore not possible for normal navigation links (such as application links) to be submenu toggles, because clicking them would open the dropdown menu instead of opening the link.

You probably don't want to overwrite every bell icon on the site (for example), just the user panel ones @Drewfus. This code is much safer: /* Larger, bolder user panel icons */ .ipsUserNav__icon{ font-weight: 900; font-size: 18px; }

Hi @GoGators Since these are just FontAwesome icons, you can change them (or resize them) however you like with a sprinkle of CSS 🙂

Nope, it's not dynamic yet, but I imagine that's something I could do in the future with relative color syntax. With that said, when you select a colour from the editor, you'd probably expect that colour to be the same across on all light (or dark) themes - although I guess a slight change to the brightness (to ensure sufficient contrast) would be okay.

No worries. The What's New carousel can be adjusted using: .ipsData--downloads-whats-new{ --i-data--basis: 200px; /* The width of each item */ --i-data--max: 99; /* The maximum number of columns visible at one time. By default, this is 4, but 99 effectively removes this limit */ } :

Hey, This will reduce the size of the grid on the Downloads page when viewing a category. If I'm misunderstood the page you're referring to, let me know: /* Reduce size of downloads page grid */ .ipsData--download-file-table{ --i-data--basis: 260px; }

Everything’s correct, you just need to assign a smaller column width. By default, the “ideal size” for columns is 280px. Since there isn’t enough space for 6 of those columns (1560px + gaps), they collapse instead of becoming squashed. Making the ideal size of columns smaller can be done by adding a basis class, such as i-basis_120 to the ipsGrid element (the basis name was inspired by flex-basis and can be used on flex children too). Just make sure to test all screen sizes by adjusting your browser window.

Thanks for the feedback, I agree with all of this. I'll likely remove the "mobile carousel" feature for the moment until I can find a better solution in the future. The tall widgets make smaller ones look too empty which isn't ideal. I've also simplified the Followers area by removing the "See all followers" link (clicking/tapping on the row takes you to the same page anyway). And if the box gets too narrow, the avatars will wrap to a new line instead of squashing the text. 🤝

This will do it. Nice and simple 🙂 /* Reverse user navigation */ .ipsUserNav--member{ flex-direction: row-reverse; }

I’m glad you think so too. Numbers have been much easier to work with compared to descriptive names. 🙂 I should also mention that those variables map directly to utility classes, such as class=“i-background_2 i-color_hard”

All of the theme colours are available as variables. The most useful ones for backgrounds are --i-background_1 through to --i-background_6. Background 1 is the lightest colour in a light theme, and the darkest in the dark theme. There are 3 main colors: --i-color_root, --i-color_soft and --i-color_hard. "Root" is the global text colour, "soft" is a subtle/softer colour and "hard" is a higher contrast colour. There are also a bunch of others including --i-color_primary, --i-color_secondary, --i-color_positive, --i-color_negative. In practice, variables in v5 look like this: .box{ background-color: var(--i-background_3); color: var(--i-color_hard); padding: 1em; }

If you can elaborate on what you're trying to achieve, I might be able to help 🙂

Yeah, tabs were overhauled in beta 5 to fix numerous accessibility concerns (which Lighthouse was reporting). As part of that overhaul, those options were removed as they're no longer required. [aria-selected="true"] is now used instead of the active class. And I don't believe the panelPrefix was ever used.