Skip to content

Commit 2f58c58

Browse files
chenxsanchenxsan
committed
rename branding.md
1 parent f43ac57 commit 2f58c58

File tree

2 files changed

+51
-20
lines changed

2 files changed

+51
-20
lines changed

‎src/components/BrandingSample.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import PropTypes from 'prop-types';
2+
BrandingSample.propTypes = {
3+
color: PropTypes.string.isRequired,
4+
};
5+
export default function BrandingSample({ color }) {
6+
return <div style={{ backgroundColor: color }}>&nbsp;</div>;
7+
}

‎src/content/branding.md renamed to ‎src/content/branding.mdx

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ contributors:
88
- byzyk
99
---
1010

11+
import BrandingSample from '../components/BrandingSample.jsx';
12+
1113
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.
1214

1315
## The Name
@@ -18,16 +20,22 @@ Webpack can be written with a capital W when used at the start of a sentence, ot
1820

1921
The webpack logo should be placed on a white background with enough space around it like this:
2022

21-
<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" />
23+
<img
24+
src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-white-bg.png"
25+
alt="webpack logo default with proper spacing on light background"
26+
/>
2227

2328
[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)
2429

2530
Double the size of the inner dark blue cube to get an idea how much space the logo should have.
2631

2732
For dark backgrounds, you can use the negative version of the logo:
2833

29-
<div style="display: block; background: #111;">
30-
<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" />
34+
<div style={{ display: 'block', background: '#111' }}>
35+
<img
36+
src="https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-dark-bg.png"
37+
alt="webpack logo default with proper spacing on light background"
38+
/>
3139
</div>
3240

3341
[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)
@@ -38,43 +46,59 @@ T> Please use the **icon + text** whenever possible.
3846

3947
**The icon is designed to be used in layout-constrained areas. As previously stated, please prefer icon + text.**
4048

41-
<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon.png" width="250" alt="icon example">
49+
<img
50+
src="https://raw.githubusercontent.com/webpack/media/master/logo/icon.png"
51+
width="250"
52+
alt="icon example"
53+
/>
4254

4355
[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)
4456

4557
Square-sized icon for bigger areas (like avatars or profile pictures):
4658

47-
<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png" width="250" alt="icon square big example">
59+
<img
60+
src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png"
61+
width="250"
62+
alt="icon square big example"
63+
/>
4864

4965
[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)
5066

5167
Square-sized icon for smaller areas (like favicons):
5268

53-
<img src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-small.png" width="50" alt="icon square small example">
69+
<img
70+
src="https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-small.png"
71+
width="50"
72+
alt="icon square small example"
73+
/>
5474

5575
[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)
5676

5777
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 ;))
5878

59-
<img src="/assets/icon-square-small-slack.png" width="50" alt="icon square small example">
79+
<img
80+
src="/assets/icon-square-small-slack.png"
81+
width="50"
82+
alt="icon square small example"
83+
/>
6084

6185
## Color Palette
6286

6387
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/)!
6488

65-
| Color Name | HEX Code | RGB Code | Sample |
66-
| ------------ | ------------- | -------------------- | ---------------------------------------------------- |
67-
| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <div style="background-color: #8dd6f9;">&nbsp;</div> |
68-
| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` | <div style="background-color: #1d78c1;">&nbsp;</div> |
69-
| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` | <div style="background-color: #465E69;">&nbsp;</div> |
70-
| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` | <div style="background-color: #2B3A42;">&nbsp;</div> |
71-
| White: | HEX `#ffffff` | `rgb: 255, 255, 255` | <div style="background-color: #ffffff;">&nbsp;</div> |
72-
| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` | <div style="background-color: #f2f2f2;">&nbsp;</div> |
73-
| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` | <div style="background-color: #dedede;">&nbsp;</div> |
74-
| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` | <div style="background-color: #999999;">&nbsp;</div> |
75-
| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` | <div style="background-color: #666666;">&nbsp;</div> |
76-
| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` | <div style="background-color: #535353;">&nbsp;</div> |
77-
| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` | <div style="background-color: #333333;">&nbsp;</div> |
89+
| Color Name | HEX Code | RGB Code | Sample |
90+
| ------------ | ------------- | -------------------- | ---------------------------------- |
91+
| Malibu: | HEX `#8dd6f9` | `rgb: 141, 214, 249` | <BrandingSample color='#8dd6f9' /> |
92+
| Denim: | HEX `#1d78c1` | `rgb: 29, 120, 193` | <BrandingSample color='#1d78c1' /> |
93+
| Fiord: | HEX `#465E69` | `rgb: 70, 94, 105` | <BrandingSample color='#465E69' /> |
94+
| Outer Space: | HEX `#2B3A42` | `rgb: 43, 58, 66` | <BrandingSample color='#2B3A42' /> |
95+
| White: | HEX `#ffffff` | `rgb: 255, 255, 255` | <BrandingSample color='#ffffff' /> |
96+
| Concrete: | HEX `#f2f2f2` | `rgb: 242, 242, 242` | <BrandingSample color='#f2f2f2' /> |
97+
| Alto: | HEX `#dedede` | `rgb: 222, 222, 222` | <BrandingSample color='#dedede' /> |
98+
| Dusty Gray: | HEX `#999999` | `rgb: 153, 153, 153` | <BrandingSample color='#999999' /> |
99+
| Dove Gray: | HEX `#666666` | `rgb: 102, 102, 102` | <BrandingSample color='#666666' /> |
100+
| Emperor: | HEX `#535353` | `rgb: 83, 83, 83` | <BrandingSample color='#535353' /> |
101+
| Mine Shaft: | HEX `#333333` | `rgb: 51, 51, 51` | <BrandingSample color='#333333' /> |
78102

79103
In addition, you can grab the following file types directly from these links:
80104

0 commit comments

Comments
 (0)