diff --git a/src/components/BrandingSample.jsx b/src/components/BrandingSample.jsx deleted file mode 100644 index a1f0b81c2564..000000000000 --- a/src/components/BrandingSample.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import PropTypes from 'prop-types'; -BrandingSample.propTypes = { - color: PropTypes.string.isRequired, -}; -export default function BrandingSample({ color }) { - return
 
; -} diff --git a/src/content/branding.mdx b/src/content/branding.md similarity index 62% rename from src/content/branding.mdx rename to src/content/branding.md index d0369cf6feb2..36b9b91fdc2f 100644 --- a/src/content/branding.mdx +++ b/src/content/branding.md @@ -8,8 +8,6 @@ contributors: - byzyk --- -import BrandingSample from '../components/BrandingSample.jsx'; - Here you can find **webpack** project brand guidelines, assets, and license. See our official [media repository](https://github.com/webpack/media) for more information and to find the [license](https://github.com/webpack/media/blob/master/LICENSE) that governs this work. Click any of the images to download them. ## The Name @@ -20,10 +18,7 @@ Webpack can be written with a capital W when used at the start of a sentence, ot The webpack logo should be placed on a white background with enough space around it like this: -webpack logo default with proper spacing on light background +webpack logo default with proper spacing on light background [svg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-white-bg.jpg) @@ -31,11 +26,8 @@ Double the size of the inner dark blue cube to get an idea how much space the lo For dark backgrounds, you can use the negative version of the logo: -
- webpack logo default with proper spacing on light background +
+ webpack logo default with proper spacing on light background
[svg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.svg) | [png](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.png) | [jpg](https://github.com/webpack/media/blob/master/logo/logo-on-dark-bg.jpg) @@ -46,59 +38,43 @@ T> Please use the **icon + text** whenever possible. **The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.** -icon example +icon example [svg](https://github.com/webpack/media/blob/master/logo/icon.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon.jpg) Square-sized icon for bigger areas (like avatars or profile pictures): -icon square big example +icon square big example [svg](https://github.com/webpack/media/blob/master/logo/icon-square-big.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-big.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-big.jpg) Square-sized icon for smaller areas (like favicons): -icon square small example +icon square small example [svg](https://github.com/webpack/media/blob/master/logo/icon-square-small.svg) | [png](https://github.com/webpack/media/blob/master/logo/icon-square-small.png) | [jpg](https://github.com/webpack/media/blob/master/logo/icon-square-small.jpg) T> For those of you following our guidelines and have gotten this far, we've made a special smaller size image used especially for custom emoji (like in a slack or gitter channel ;)) -icon square small example +icon square small example ## Color Palette The following colors are used throughout the site in various combinations and on our fancy clothing line launched with the help of [Open Collective](https://opencollective.com/) and [Threadless](https://medium.com/u/840563ee2a56) over at the [official webpack store](https://webpack.threadless.com/collections/the-final-release-collection/)! -| Color Name | HEX Code | RGB Code | Sample | -| ------------ | ------------- | -------------------- | ---------------------------------- | -| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` | | -| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` | | -| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` | | -| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` | | -| White: | HEX `#ffffff` | `rgb: 255, 255, 255` | | -| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` | | -| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` | | -| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` | | -| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` | | -| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` | | -| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` | | +| Color Name | HEX Code | RGB Code | Sample | +| ------------ | ------------- | -------------------- | ---------------------------------------------------- | +| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` |
 
| +| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` |
 
| +| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` |
 
| +| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` |
 
| +| White: | HEX `#ffffff` | `rgb: 255, 255, 255` |
 
| +| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` |
 
| +| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` |
 
| +| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` |
 
| +| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` |
 
| +| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` |
 
| +| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` |
 
| In addition, you can grab the following file types directly from these links: