[Work in progress] new styling

[drmenzelit]

Summary of Changes

• Several changes on scss files
• added color variables
• changed darken() to scale-color()
• change to hsl colors
• correct margins and paddings
• structure changes in index.php to adapt to the new design

Testing Instructions

Install the PR and run npm ci
Use the theme switcher in the template

Expected result

You will see the design changing the colors

One issue: the current Cassiopeia logo doesn't change the color yet. If you want to see the color switcher working here, you need to write a title in the template configuration

[richard67]

When enabled, the back-to-top button still has the colors of the core Cassiopeia, i.e. it doesn't follow the new color themes.

[richard67]

With color theme "Winter", buttons like e.g. of the search or the login module have black text on black background. Only if hovered you can see the button text (black text on grey background).

[richard67]

@drmenzelit With the winter color scheme, the active menu item is a very light grey text on white background. That is not a11y. When hovering, colors are ok.

[richard67]

With spring color theme it is a very light green on white background, also not really good .

[richard67]

@drmenzelit If you enter in the template style settings a site description, you will not see it in frontend because it is white text on white background (<div class="site-description">).

[richard67]

@drmenzelit Question: Is it by purpose that when sticky header is enabled in the template style settings, only the logo and the search module are sticky but the menu is not?

[drmenzelit]

@drmenzelit If you enter in the template style settings a site description, you will not see it in frontend because it is white text on white background (<div class="site-description">).

It is corrected now

[drmenzelit]

@drmenzelit Question: Is it by purpose that when sticky header is enabled in the template style settings, only the logo and the search module are sticky but the menu is not?

I missed this as I took the nav outside the header.
As the header with logo & search in one line and the navigation on other line takes too much place, I decided to make only the navigation sticky.

[richard67]

Much better now.

[richard67]

The "Prev" and "Next" links for articles still use the core Cassiopeia colour:

[drmenzelit]

The "Prev" and "Next" links for articles still use the core Cassiopeia colour:

I'm sure I changed it... it should use the color of the selected theme...

[richard67]

Well the change was after my test.

[drmenzelit]

Well the change was after my test.

hahaha... I saw "still" and I thought it is a new comment... I'm tired...

[richard67]

As we have discussed in the Team on Glip, we will stop this approach of the new design here for now in favour of PR #71 . I close this PR so that interested people and testers are not confused, but I suggest we don't delete the branch but keep it in case if we later want to come back to it.