Skip to content

Scope event styles to prevent styles clashing

Legacy event pages were migrated by dumping their entire CSS files into eclipse.org/events. This made it quick and easy to migrate these pages. However, since we are redefining base styles twice, this leads to unexpected styles clashing.

For example:

image

In the image above, the styles for links is affecting the Featured Story and Footer. This is just one example of many.

This is a low-priority issue since all the clashes are very minor. The Astro migration resolves all major clashes !372 (merged).

Although, this won't be the last time we do this. I propose we utilize the Shadow DOM to scope the event styles so nothing leaks into our website layout. This would require some JavaScript. See https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow