diff --git a/components/splash/splash-style.scss b/components/splash/splash-style.scss index 0dc17bfbe99f..8ca96de6e988 100644 --- a/components/splash/splash-style.scss +++ b/components/splash/splash-style.scss @@ -10,6 +10,11 @@ background-color:#f3f3f3; } + p { + margin: 0 auto; + max-width: 800px; + } + .container { padding:5em 1em; diff --git a/components/support/support-style.scss b/components/support/support-style.scss index b71d2cf9ad6f..ce649015ec8e 100644 --- a/components/support/support-style.scss +++ b/components/support/support-style.scss @@ -4,7 +4,18 @@ display: flex; flex-wrap: wrap; justify-content: center; - padding: 1em 0.5em; + padding: 0 0.5em 1em; + + &__description { + flex: 0 0 100%; + margin-bottom: 1em; + } + + &__rank { + text-transform: capitalize; + + &:after { content: ' '; } + } &__item { position: relative; diff --git a/components/support/support.jsx b/components/support/support.jsx index 2d3be767c825..5657868b9120 100644 --- a/components/support/support.jsx +++ b/components/support/support.jsx @@ -47,6 +47,19 @@ export default class Support extends React.Component { return (
+
+ { type === 'sponsors' ? ( +

+ { rank } sponsors + are those who have pledged { minimum ? `$${minimum}` : 'up' } { maximum ? `to $${maximum}` : 'or more' } to webpack. +

+ ) : ( +

+ The following Backers are individuals who have contributed various amounts of money in order to help support webpack. Every little bit helps, and we appreciate even the smallest contributions. +

+ )} +
+ { supporters.map((supporter, index) => (
- -**app.js** +__app.js__ ```js import bar from './bar'; bar(); ``` - -
- -**bar.js** +
+
+__bar.js__ ```js export default function bar() { // } ``` -
@@ -33,8 +30,7 @@ export default function bar() {
- -**webpack.config.js** +__webpack.config.js__ ```js module.exports = { @@ -44,10 +40,9 @@ module.exports = { } } ``` - -
- -**page.html** +
+
+__page.html__ ```html @@ -62,10 +57,9 @@ module.exports = { ``` Then run `webpack` on the command-line to create `bundle.js`. -
## It's that simple -## [Get Started](/guides/getting-started) +__[Get Started](/guides/getting-started)__ quickly in our __Guides__ section, or dig into the __[Concepts](/concepts)__ section for more high-level information on the core notions behind behind webpack.