add new landing page templates and navigation components with updated…

[ostafinskim]

New navigation components and landing page templates with the updated logo.

[simonrjones]

Published to the staging site, see Basecamp message: https://3.basecamp.com/3091560/buckets/32734213/messages/8134231991

This work is being reviewed by W3C, please don't merge it in at present.

[vivienlacourba]

@simonrjones, @ostafinskim, FYI @jean-gui is starting to review this work.

For the changes related to deployer fixes as those have already been merged in the main branch, they should probably not be part of this MR anymore (maybe it simply needs to be rebased against main).

[jean-gui]

Hi @ostafinskim @simonrjones,

I have pushed a few changes to this PR:

• removed logos. All the logos can be found at https://github.com/w3c/logos/tree/main/w3c-2025. They are available from the Web at https://www.w3.org/assets/logos/w3c-2025/.
• modified the colors page in the design system
• modified the logo in the main templates

We don't know yet which main logo to use. Once we know we can update all the templates accordingly and remove the two test pages from the design system.

The new style can be seen in action at https://www-dev.w3.org/.

I noticed that the main logo doesn't have a fixed size. It is smaller when logged in. It then seems to depend on the width of the "My account" block. This does not happen with the older version because the CSS specified a width and height, while the new one only has a max-width.

[ostafinskim]

Hi @jean-gui,

Thank you for the recent changes and all the detailed updates!

I have edited the logo styles again and deployed the changes to the staging site for review.

Many thanks,

[sean-dunwoody]

The logo currently has no spacing between it and the main navigation. This doesn't look right, and is more noticeable when the focus state is active on the first menu item:

This could be fixed by applying some right margin on the logo, or using the gap CSS property on the header flexbox container.

Beyond that the other changes look OK to me.

[sean-dunwoody]

Just a couple of minor amends. Thanks for your work on this @ostafinskim 👍

[jean-gui]

This mostly looks good to me. This code is deployed to www-dev.

@ostafinskim Can you please merge the old and new landing page templates? We don't need both.

[jean-gui]

This mostly looks good to me. This code is deployed to www-dev.

@ostafinskim Can you please merge the old and new landing page templates? We don't need both.

ping @ostafinskim @sean-dunwoody @simonrjones

[gosko]

This is not very important, but the header spacing on www-dev looks a bit strange when viewed on a mobile device: the user profile icon is almost centered, but not quite. I don't think it's intended to be centered but it would be better if it were actually centered or closer to the menu icon as on the current site.

[NicolaSaunders]

The point made by @gosko is worth considering. At a 320px viewport width, the control for toggling the mobile navigation is forced to wrap onto a new line when visually there plenty of space for this not to happen (screenshot included to illustrate this).

Using the Flexbox gap property for controlling horizontal spacing between items has introduced these issues. It would be better to remove that and apply margin-inline-end / margin-inline-start onto the necessary elements to bring this closer to the current live implementation.