diff --git a/pages/about/branding.md b/pages/about/branding.md index 7e3539d8..8881a3a4 100644 --- a/pages/about/branding.md +++ b/pages/about/branding.md @@ -19,16 +19,20 @@ Please use the **logo with text** whenever possible. The logo should be placed o ### Horizontal logo +
+ | Light backgrounds | Dark backgrounds | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -| ![webpack horizontal logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png) | ![webpack horizontal logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) | +| ![webpack horizontal logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color.png) | ![webpack horizontal logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) | | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-horizontal-color-dark_background.png) | +
+ ### Stacked logo | Light backgrounds | Dark backgrounds | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -| ![webpack stacked logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png) | ![webpack stacked logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) | +| ![webpack stacked logo for light backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color.png) | ![webpack stacked logo for dark backgrounds](https://raw.githubusercontent.com/openjs-foundation/artwork/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) | | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color.png) | [svg](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.svg) \| [png](https://github.com/openjs-foundation/artwork/blob/main/projects/webpack/webpack-logo-stacked-color-dark_background.png) | ## webpack Icons diff --git a/styles/index.css b/styles/index.css index 3fd6fb05..e407d801 100644 --- a/styles/index.css +++ b/styles/index.css @@ -21,3 +21,19 @@ --color-brand-900: var(--color-blue-900); --color-brand-950: var(--color-blue-950); } + +.darkBg { + background-color: var(--color-neutral-950); + display: inline-block; + padding: 20px; +} + +.halfWidthTable table { + table-layout: fixed; + width: 100%; +} + +.halfWidthTable td, +.halfWidthTable th { + width: 50%; +}