Revert "rename branding.md"

This reverts commit 2f58c58.
docschina · Aug 9, 2021 · 4abb3a8 · 4abb3a8
1 parent 2f58c58
commit 4abb3a8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 51 deletions.
diff --git a/src/components/BrandingSample.jsx b/src/components/BrandingSample.jsx
diff --git a/src/content/branding.mdx → src/content/branding.md b/src/content/branding.mdx → 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,22 +18,16 @@ 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:
 
-<img
-  src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-white-bg.png"
-  alt="webpack logo default with proper spacing on light background"
-/>
+<img src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-white-bg.png" alt="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)
 
 Double the size of the inner dark blue cube to get an idea how much space the logo should have.
 
 For dark backgrounds, you can use the negative version of the logo:
 
-<div style={{ display: 'block', background: '#111' }}>
-  <img
-    src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-dark-bg.png"
-    alt="webpack logo default with proper spacing on light background"
-  />
+<div style="display: block; background: #111;">
+  <img src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-dark-bg.png" alt="webpack logo default with proper spacing on light background" />
 </div>
 
 [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.**
 
-<img
-  src="https://raw.githubusercontent.com/webpack/media/master/logo/icon.png"
-  width="250"
-  alt="icon example"
-/>
+<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon.png" width="250" alt="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):
 
-<img
-  src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png"
-  width="250"
-  alt="icon square big example"
-/>
+<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png" width="250" alt="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):
 
-<img
-  src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-small.png"
-  width="50"
-  alt="icon square small example"
-/>
+<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-small.png" width="50" alt="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 ;))
 
-<img
-  src="/assets/icon-square-small-slack.png"
-  width="50"
-  alt="icon square small example"
-/>
+<img src="/assets/icon-square-small-slack.png" width="50" alt="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` | <BrandingSample color='#8dd6f9' /> |
-| Denim:       | HEX `#1d78c1` | `rgb: 29, 120, 193`  | <BrandingSample color='#1d78c1' /> |
-| Fiord:       | HEX `#465E69` | `rgb: 70, 94, 105`   | <BrandingSample color='#465E69' /> |
-| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66`    | <BrandingSample color='#2B3A42' /> |
-| White:       | HEX `#ffffff` | `rgb: 255, 255, 255` | <BrandingSample color='#ffffff' /> |
-| Concrete:    | HEX `#f2f2f2` | `rgb: 242, 242, 242` | <BrandingSample color='#f2f2f2' /> |
-| Alto:        | HEX `#dedede` | `rgb: 222, 222, 222` | <BrandingSample color='#dedede' /> |
-| Dusty Gray:  | HEX `#999999` | `rgb: 153, 153, 153` | <BrandingSample color='#999999' /> |
-| Dove Gray:   | HEX `#666666` | `rgb: 102, 102, 102` | <BrandingSample color='#666666' /> |
-| Emperor:     | HEX `#535353` | `rgb: 83, 83, 83`    | <BrandingSample color='#535353' /> |
-| Mine Shaft:  | HEX `#333333` | `rgb: 51, 51, 51`    | <BrandingSample color='#333333' /> |
+| Color Name   | HEX Code      | RGB Code             | Sample                                               |
+| ------------ | ------------- | -------------------- | ---------------------------------------------------- |
+| Malibu:      | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <div style="background-color: #8dd6f9;">&nbsp;</div> |
+| Denim:       | HEX `#1d78c1` | `rgb: 29, 120, 193`  | <div style="background-color: #1d78c1;">&nbsp;</div> |
+| Fiord:       | HEX `#465E69` | `rgb: 70, 94, 105`   | <div style="background-color: #465E69;">&nbsp;</div> |
+| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66`    | <div style="background-color: #2B3A42;">&nbsp;</div> |
+| White:       | HEX `#ffffff` | `rgb: 255, 255, 255` | <div style="background-color: #ffffff;">&nbsp;</div> |
+| Concrete:    | HEX `#f2f2f2` | `rgb: 242, 242, 242` | <div style="background-color: #f2f2f2;">&nbsp;</div> |
+| Alto:        | HEX `#dedede` | `rgb: 222, 222, 222` | <div style="background-color: #dedede;">&nbsp;</div> |
+| Dusty Gray:  | HEX `#999999` | `rgb: 153, 153, 153` | <div style="background-color: #999999;">&nbsp;</div> |
+| Dove Gray:   | HEX `#666666` | `rgb: 102, 102, 102` | <div style="background-color: #666666;">&nbsp;</div> |
+| Emperor:     | HEX `#535353` | `rgb: 83, 83, 83`    | <div style="background-color: #535353;">&nbsp;</div> |
+| Mine Shaft:  | HEX `#333333` | `rgb: 51, 51, 51`    | <div style="background-color: #333333;">&nbsp;</div> |
 
 In addition, you can grab the following file types directly from these links: