Portal App: Home => Features Section Changes cleanup

removing the custom font-family next

In case you want to change display: grid to display: flex inside Portal.view.home.parts.Features, this does require a small change on the JS side.

Containers provide layouts to enable defining specific layout attributes on the JS side, if preferred.

• We can do a workshop session on this topic
• A dedicated page inside the learning section about container layouts would be good @maxrahder

In case we do not wish to use a container layout, we can set it to base inside the JS code => then the CSS is fully in charge.

removing the !important flags now (not needed, tested it).

inside the ContentBox.scss, there is a non-existing selector => .portal-content-box-lists.

you added the same rules inside .portal-content-box-content li, so i will remove the redundant definition.

further testing: the h3 rules will actually get overridden by a more specific selector. we can fix this with changing .portal-content-box-headline to h3.portal-content-box-headline.

now our selector is more specific and we don't need !important.

i will also change the transition timing function from ease to ease-out => then we get a more direct feedback when moving the mouse fast.

we do have 2 remaining issues. might be worth it to create follow-up tickets.

first one is that for big widths, we do lose the symmetric box positioning.

old version:

new version:

obviously the new version looks better in general, but the flex layout can lead to 4 boxes at the top and 2 at the bottom (or 5 top, 1 bottom), while the grid layout can ensure that there are 3 columns max. i will play with this more soon, might be worth it to switch back to the grid.

the 2nd issue is more complicated. for desktop, we do have a custom "scrolling timeline", so that when we scroll (also with using the arrow up / down keys), you will move to the next "page". this requires, that each page can fit on a screen (the content height must not be higher than the viewport).

re-added the grid layout and tweaked the responsive styling:

@VedantDewangan: i did try my best to preserve your design changes as good as possible. Also kept the custom scrollbar styling for 1 row grids.