diff --git a/antwar.config.js b/antwar.config.js index 12a819f2390c..9327a3c64467 100644 --- a/antwar.config.js +++ b/antwar.config.js @@ -9,12 +9,6 @@ module.exports = { title: 'webpack', file: path.join(__dirname, 'template.ejs') }, - assets: [ - { - from: './fonts', - to: 'assets' - } - ], output: 'build', title: 'webpack', keywords: ['webpack', 'javascript', 'web development', 'programming'], diff --git a/assets/cube.png b/assets/cube.png new file mode 100644 index 000000000000..b202129c662e Binary files /dev/null and b/assets/cube.png differ diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 000000000000..425ac97c61c5 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/geomanist-medium.woff b/assets/geomanist-medium.woff new file mode 100755 index 000000000000..8cee5d4cc226 Binary files /dev/null and b/assets/geomanist-medium.woff differ diff --git a/assets/geomanist-medium.woff2 b/assets/geomanist-medium.woff2 new file mode 100755 index 000000000000..b3b5c9888794 Binary files /dev/null and b/assets/geomanist-medium.woff2 differ diff --git a/assets/geomanist-regular.woff b/assets/geomanist-regular.woff new file mode 100755 index 000000000000..b072a9fb96b9 Binary files /dev/null and b/assets/geomanist-regular.woff differ diff --git a/assets/geomanist-regular.woff2 b/assets/geomanist-regular.woff2 new file mode 100755 index 000000000000..1946980e5248 Binary files /dev/null and b/assets/geomanist-regular.woff2 differ diff --git a/assets/icons.woff b/assets/icons.woff new file mode 100755 index 000000000000..e12750f52462 Binary files /dev/null and b/assets/icons.woff differ diff --git a/assets/icons.woff2 b/assets/icons.woff2 new file mode 100755 index 000000000000..d08f5c781f57 Binary files /dev/null and b/assets/icons.woff2 differ diff --git a/components/container/container-style.scss b/components/container/container-style.scss index 43356927a4f6..474eeebf1735 100644 --- a/components/container/container-style.scss +++ b/components/container/container-style.scss @@ -5,8 +5,4 @@ width: 100%; max-width: map-get($screens, large); margin: 0 auto; - - @include break(large) { - padding-right: 40px; - } } diff --git a/components/contributors/contributors-style.scss b/components/contributors/contributors-style.scss index a9a1f5b0e73f..2413bad98289 100644 --- a/components/contributors/contributors-style.scss +++ b/components/contributors/contributors-style.scss @@ -1,19 +1,9 @@ .contributor { display: inline-block; + margin-top:1em; margin-right: 1em; - &:last-of-type { - margin-right: 0; - } - img { - height: 80px; - border-radius: 3px; - } - - span { - display: block; - text-align: center; - font-size: 0.8em; + height: 50px; } } \ No newline at end of file diff --git a/components/contributors/contributors.jsx b/components/contributors/contributors.jsx index 047c305e7a2a..6d3a605d7637 100644 --- a/components/contributors/contributors.jsx +++ b/components/contributors/contributors.jsx @@ -4,15 +4,14 @@ import './contributors-style'; export default ({contributors}) => { return (
-

Contributors

+

Contributors:

{ (contributors || []).map((contributor) => ( - - { contributor } + )) } diff --git a/components/cube/cube-style.scss b/components/cube/cube-style.scss index b016af068716..5e09fedf3e37 100644 --- a/components/cube/cube-style.scss +++ b/components/cube/cube-style.scss @@ -59,20 +59,20 @@ &--light { .cube__outer .cube__face:after { - background:transparentize(map-get($colors, concrete), 0.8); + background:transparentize(map-get($colors, malibu), 0.6); } .cube__inner .cube__face:after { - background:transparentize(map-get($colors, tussock), 0.4); + background:transparentize(map-get($colors, denim), 0.2); } &:hover { .cube__outer .cube__face:after { - background:transparentize(map-get($colors, white), 0.8); + background:transparentize(map-get($colors, malibu), 0.7); } .cube__inner .cube__face:after { - background:transparentize(map-get($colors, lynch), 0.6); + background:map-get($colors, denim); } } } diff --git a/components/footer/footer-style.scss b/components/footer/footer-style.scss index 00e381662c50..a7c4cb09f85f 100644 --- a/components/footer/footer-style.scss +++ b/components/footer/footer-style.scss @@ -13,8 +13,7 @@ flex-wrap: wrap; justify-content: space-between; align-content: center; - padding-top: 0.3em; - padding-bottom: 0.3em; + padding: 0.4em 0; @include break { flex-direction: initial; @@ -26,9 +25,12 @@ flex: 0 0 auto; display: flex; margin: auto; + align-items: center; + padding: 0.25em 0; @include break { margin: 0; + padding: 0; } } @@ -50,20 +52,20 @@ @include break { flex: 0 0 auto; display: block; - - .cube { - margin-top: 5px; - } } } +.footer__icon { + display:block; + height:35px; + + img { height:100%; width:auto; } +} + .footer__link { - padding: 1em 0; font-size: getFontSize(-2); - text-decoration: none; text-transform: uppercase; color: map-get($colors, dusty-grey); - transition: color 250ms; &:not(:last-child) { margin-right: 1.5em; diff --git a/components/footer/footer.jsx b/components/footer/footer.jsx index 050bb44649f8..957a775f5e2d 100644 --- a/components/footer/footer.jsx +++ b/components/footer/footer.jsx @@ -1,7 +1,7 @@ import React from 'react'; import Link from '../link/link'; -import Cube from '../cube/cube'; import Container from '../container/container'; +import CubeImg from '../../assets/cube.png'; import './footer-style'; export default (props) => { @@ -15,8 +15,8 @@ export default (props) => {
- - + +
diff --git a/components/logo/logo-style.scss b/components/logo/logo-style.scss index a84f9920131c..9878dc8b5fdc 100644 --- a/components/logo/logo-style.scss +++ b/components/logo/logo-style.scss @@ -1,40 +1,42 @@ @import 'vars'; -@import url(https://fonts.googleapis.com/css?family=Averia+Sans+Libre:300); - .logo { - position:relative; - display:inline-block; + display:flex; + float:left; + align-items:middle; + + &__icon { + width:auto; + height:35px; + opacity:0.9; + transition:opacity 250ms; + } &__text { + font-family:'Geomanist', 'Century Gothic', sans-serif; font-size:1.3em; - font-family:'Averia Sans Libre'; - margin-left:1.75em; - line-height:1.4; + font-weight:500; + text-rendering: geometricPrecision; + letter-spacing:0.5px; + margin-left:0.25em; + margin-top:3px; + color:map-get($colors, emperor); transition:color 250ms; } - &__cube { - position:absolute; - } - - &--dark { - .logo__text { - color:map-get($colors, dove-grey); - } - - &:hover .logo__text { - color:map-get($colors, mine-shaft); - } + &:hover { + .logo__icon { opacity:1; } + .logo__text { color:map-get($colors, mine-shaft); } } &--light { .logo__text { - color:map-get($colors, concrete); + color:map-get($colors, concrete); + //color:rgb(246, 250, 251); } &:hover .logo__text { - color:map-get($colors, parchment); + color:map-get($colors, white); } } -} \ No newline at end of file +} diff --git a/components/logo/logo.jsx b/components/logo/logo.jsx index a5ad545ea913..0aae585f05b7 100644 --- a/components/logo/logo.jsx +++ b/components/logo/logo.jsx @@ -1,59 +1,14 @@ import React from 'react'; -import Cube from '../cube/cube'; +import CubeImg from '../../assets/cube.png'; import './logo-style'; -export default class Logo extends React.Component { - constructor(props) { - super(props); +export default props => { + let { light } = props; - this.listeners = { - spin: this._triggerSpin.bind(this), - reset: this._triggerReset.bind(this) - }; - } - - render() { - let { theme = 'dark' } = this.props; - - return ( - this.container = ref } - className={ `logo logo--${theme}` }> - this.icon = ref } - className="logo__cube" - theme={ theme } - depth={ 20 } /> - webpack - - ); - } - - componentDidMount() { - this.container.addEventListener('mouseenter', this.listeners.spin); - this.container.addEventListener('mouseleave', this.listeners.reset); - } - - componentWillUnmount() { - this.container.removeEventListener('mouseenter', this.listeners.spin); - this.container.removeEventListener('mouseleave', this.listeners.reset); - } - - /** - * Proxy to Cube's spin method - * - * @param {object} e - Native event - */ - _triggerSpin(e) { - this.icon.spin(e); - } - - /** - * Proxy to Cube's reset method - * - * @param {object} e - Native event - */ - _triggerReset(e) { - this.icon.reset(e); - } -} + return ( + + + webpack + + ); +}; diff --git a/components/navigation/navigation-style.scss b/components/navigation/navigation-style.scss index 55a503ee1bd4..07b09567c735 100644 --- a/components/navigation/navigation-style.scss +++ b/components/navigation/navigation-style.scss @@ -4,7 +4,6 @@ .navigation { flex: 0 0 auto; - transition: background 250ms; background: map-get($colors, mine-shaft); } @@ -12,16 +11,28 @@ .navigation__inner { display: flex; align-items: center; - - padding: 0.5em; + padding: 0.5em 1em; @include break { - padding: 0.5em 1.5em; + padding:0 0 0 1.5em; } } -.navigation__logo { - flex: 0 0 auto; +.navigation__mobile { + position: absolute; + font-size: getFontSize(2); + display: flex; + left: -0.5em; + color: map-get($colors, white); + transition: color 250ms; + + &:active { + color: map-get($colors, alto); + } + + @include break { + display: none; + } } .navigation__links { @@ -29,55 +40,25 @@ @include break { flex: 1 1 auto; - - display: block; - padding: 0.2em 0 0.3em; - text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; } } .navigation__link { - font-size: getFontSize(-2); - margin-left: 2.5em; + font-size: getFontSize(-1); + padding:1.5em; text-transform: uppercase; - color: map-get($colors, alto); + color: map-get($colors, dusty-grey); + transition:all 250ms; &:hover, - .navigation__link--active { + &--active { color: map-get($colors, white); } -} - -.navigation__mobilebtn { - $wh: 24px; - $size: 20px; - - display: block; - box-sizing: content-box; - overflow: hidden; - width: $wh; - height: $wh; - margin: 0 1em 0 0; - padding: 0; - border: 1px solid #fff; - font: $size 'webpack'; - line-height: $wh; - text-align: center; - background: transparent; - color: white; - - &::before { - content: "\e904"; - display: block; - width: $wh; - height: $wh; - .nav-displayed & { - content: "\e903"; - } - } - - @include break { - display: none; + &--active { + background: map-get($colors, emperor); } } diff --git a/components/navigation/navigation.jsx b/components/navigation/navigation.jsx index 33789daa410c..bbbf698946a5 100644 --- a/components/navigation/navigation.jsx +++ b/components/navigation/navigation.jsx @@ -4,31 +4,46 @@ import Container from '../container/container'; import Logo from '../logo/logo'; import './navigation-style'; -export default ({ home = '/', pages, onToggleNav }) => ( -
- -
- - - - +export default class Navigation extends React.Component { + render() { + return ( +
+ +
+ +
- -
- -
-); + + + + + + + + ); + } + + _toggleSidebar(e) { + let sidebar = document.querySelector('.sidebar'); + let modifier = 'sidebar--visible'; + + sidebar.classList.toggle(modifier); + } +} diff --git a/components/page/page-style.scss b/components/page/page-style.scss index 7d6bf68c6b00..038f10d0d4cd 100644 --- a/components/page/page-style.scss +++ b/components/page/page-style.scss @@ -3,23 +3,30 @@ @import 'functions'; .page { + position: relative; flex: 1 0 auto; - display: flex; +} - position: relative; +// XXX: Temporary hack to fix sidebar width +.page div:first-of-type { + flex:0 0 auto; + overflow:auto; + + @include break { + flex:0 0 25%; + overflow:hidden; + } } .page__content { overflow-x: hidden; width: 100%; - padding: 0.5em; + padding: 1.5em 1em; - @media (min-width: map-get($screens, medium)) { + @media break { flex: 3; - padding: 1.5em; - background: map-get($colors, white); } } @@ -29,14 +36,14 @@ @include break { position: absolute; display: block; - top: 1.5em; - right: calc(40px + 1.5em); + top: 1.4em; + right: 1.75em; font-size: getFontSize(-1); text-transform: uppercase; - color: map-get($colors, lynch); + color: map-get($colors, denim); } &:hover { - color: map-get($colors, chatham); + color: map-get($colors, malibu); } } diff --git a/components/page/page.jsx b/components/page/page.jsx index db581baced97..77bc57ed98ff 100644 --- a/components/page/page.jsx +++ b/components/page/page.jsx @@ -6,7 +6,7 @@ import Contributors from '../contributors/contributors'; import './page-style'; export default ({ section, page }) => { - let edit = `https://github.com/webpack/webpack.js.org/edit/master/content/${page.url}.md`; + let edit = `https://github.com/webpack/webpack.js.org/edit/develop/content/${page.url}.md`; return ( diff --git a/components/sidebar-item/sidebar-item-style.scss b/components/sidebar-item/sidebar-item-style.scss new file mode 100644 index 000000000000..4bcb06e71aa9 --- /dev/null +++ b/components/sidebar-item/sidebar-item-style.scss @@ -0,0 +1,71 @@ +@import 'vars'; +@import 'mixins'; +@import 'functions'; + +.sidebar-item { + font-size: getFontSize(-1); + margin-bottom: 0.75em; + + &__title { + font-weight: 400; + text-decoration: none; + color: inherit; + + &:hover { + color: map-get($colors, tussock); + } + } + + &__toggle { + float: right; + line-height: 1.5; + cursor: pointer; + color: map-get($colors, dusty-grey); + transition: color 250ms; + + &:hover { + color: map-get($colors, mine-shaft); + } + } + + &__anchors { + display:none; + list-style: none; + padding: 0; + margin: 0.5em 0 1em; + } + + &__anchor { + margin:0.25em 0; + + a { + display: inline-block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: map-get($colors, dusty-grey); + + &:hover { + color: map-get($colors, mine-shaft); + } + } + } + + &--empty { + .sidebar-item__toggle { + display:none; + } + } + + &--open { + .sidebar-item__anchors { + display:block; + } + + .sidebar-item__toggle { + margin-left:-2px; + transform:rotate(180deg) translateX(1px); + } + } +} \ No newline at end of file diff --git a/components/sidebar-item/sidebar-item.js b/components/sidebar-item/sidebar-item.js new file mode 100644 index 000000000000..f503817a2c9a --- /dev/null +++ b/components/sidebar-item/sidebar-item.js @@ -0,0 +1,41 @@ +import React from 'react'; +import Link from '../link/link'; +import './sidebar-item-style'; + +export default class SidebarItem extends React.Component { + constructor(props) { + super(props); + + this.state = { + open: false + }; + } + + render() { + let { index, url, title, anchors = [] } = this.props; + let emptyMod = !anchors.length ? 'sidebar-item--empty' : ''; + let openMod = this.state.open ? 'sidebar-item--open' : ''; + + return ( +
+ { title } + +
    + { + anchors.map((anchor, j) => ( +
  • + { anchor.title } +
    • + )) + } +
+
+ ); + } + + toggle(e) { + this.setState({ + open: !this.state.open + }); + } +} \ No newline at end of file diff --git a/components/sidebar/sidebar-style.scss b/components/sidebar/sidebar-style.scss index fee83e76104a..4be2a6bce237 100644 --- a/components/sidebar/sidebar-style.scss +++ b/components/sidebar/sidebar-style.scss @@ -1,114 +1,47 @@ @import 'vars'; @import 'mixins'; -@import 'functions'; .sidebar { position: relative; flex: 1; + min-height: 100%; -// Disabled as interactive generates a div parent (need to attach the code somewhere) -// This needs a better fix (no way to eliminate the div) -/* - @include break { - max-width: 25%; - background: transparentize(map-get($colors, white), 0.5); + &--visible { + @media (max-width: map-get($screens, medium)) { + .sidebar__inner { + transform: translateX(0) !important; + width:100% !important; + } + + .sidebar-item__title, + .sidebar-item__toggle { color: map-get($colors, white) !important; } + .sidebar-item__anchor a { color: map-get($colors, alto) !important; } + } } -*/ } .sidebar__inner { - will-change: transform; - transform: translate3D(-100%, 0, 0); - transition: transform 0.5s; - - position: absolute; - width: 300px; - height: 100%; - max-height: calc(100vh - 45px); + position: fixed; + width: 100%; + height: calc(100vh - 50px); // XXX: Hacky, this should be removed with a better solution + padding: 1.5em 1em; overflow-y: auto; overflow-x: hidden; - padding: 1.5em; - background: map-get($colors, emperor); - color: map-get($colors, dusty-grey); z-index: 1; + background: map-get($colors, emperor); + transition: transform 0.5s; + + @media (max-width: map-get($screens, medium)) { + will-change: transform; + transform: translate3D(-100%, 0, 0) !important; + } @include break { position: static; transform: none; - width: 100%; + height:auto; + padding:1.5em; background: transparent; color: map-get($colors, emperor); } - - .nav-displayed & { - transform: translateX(0); - - @include break { - transform: none; - } - } -} - -.sidebar-item { - font-size: getFontSize(-1); - margin-bottom: 0.5em; - - &__title { - font-weight: 400; - text-transform: uppercase; - text-decoration: none; - color: inherit; - - &:hover { - color: map-get($colors, tussock); - } - } - - &__toggle { - float: right; - line-height: 1.5; - cursor: pointer; - color: map-get($colors, dusty-grey); - transition: color 250ms; - - &:hover { - color: map-get($colors, mine-shaft); - } - } - - &__anchors { - display:none; - list-style: none; - padding: 0; - margin: 0.25em 0 1em; - } - - &__anchor { - margin: 0; - - a { - display: inline-block; - max-width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: map-get($colors, dusty-grey); - - &:hover { - color: map-get($colors, mine-shaft); - } - } - } - - &--empty { - .sidebar-item__toggle { - display:none; - } - } - - &--open { - .sidebar-item__anchors { - display:block; - } - } } diff --git a/components/sidebar/sidebar.jsx b/components/sidebar/sidebar.jsx index e2cc13ec31cd..8b0b5eb79ada 100644 --- a/components/sidebar/sidebar.jsx +++ b/components/sidebar/sidebar.jsx @@ -1,64 +1,66 @@ import React from 'react'; -import Link from '../link/link'; +import SidebarItem from '../sidebar-item/sidebar-item'; import './sidebar-style'; -const Sidebar = ({ sectionName, pages }) => { - return ( - - ); -}; - -class Item extends React.Component { +export default class Sidebar extends React.Component { constructor(props) { super(props); + this._scroll = this._onScroll.bind(this); this.state = { - open: false + offset: 0 }; } render() { - let { index, url, title, anchors = [] } = this.props; - let emptyMod = !anchors.length ? 'sidebar-item--empty' : ''; - let openMod = this.state.open ? 'sidebar-item--open' : ''; + let { sectionName, pages } = this.props; + let { offset } = this.state; return ( -
- { title } - -
    +
-
+
+ ); } - toggle(e) { - this.setState({ - open: !this.state.open - }); + componentDidMount() { + window.addEventListener('scroll', this._scroll); + } + + componentWillUnmount() { + window.removeEventListener('scroll', this._scroll); } -} -export default Sidebar; + _onScroll(e) { + let nav = document.querySelector('.navigation__inner'); + let styles = nav ? getComputedStyle(nav) : {}; + let overlayed = nav.parentNode.classList.contains('headroom--pinned'); + + if ( document.body.scrollTop !== 0 && overlayed ) { + this.setState({ + offset: parseInt(styles.height, 10) + }); + + } else { + this.setState({ + offset: 0 + }); + } + } +} \ No newline at end of file diff --git a/components/site/site.jsx b/components/site/site.jsx index 14d5f9adb6b1..acf5cb8c5496 100644 --- a/components/site/site.jsx +++ b/components/site/site.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import Interactive from 'antwar-interactive'; import { GoogleAnalytics } from 'antwar-helpers'; import Navigation from '../navigation/navigation'; import Sidecar from '../sidecar/sidecar'; @@ -13,34 +14,21 @@ const pages = [ { title: 'Github', url: '//github.com/webpack/webpack.js.org' } ]; -export default class Site extends React.Component { - constructor () { - super(); +export default props => { + let { children } = props; - this.state = { - navDisplayed: false - }; + return ( +
+ - // this.onToggleNav = () => { - // this.setState({navDisplayed: !this.state.navDisplayed}); - // }; - } + + { props.children } +
- render () { - let { children } = this.props; - - // TODO: restore - // const cls = this.state.navDisplayed ? 'site nav-displayed' : 'site'; - - return ( -
- - - { children } -
- - -
- ); - } -} + +
+ ); +}; diff --git a/components/splash/modules.png b/components/splash/modules.png deleted file mode 100644 index fd39399793fb..000000000000 Binary files a/components/splash/modules.png and /dev/null differ diff --git a/components/splash/output.png b/components/splash/output.png deleted file mode 100644 index 96d5baf1d7bf..000000000000 Binary files a/components/splash/output.png and /dev/null differ diff --git a/components/splash/splash-style.scss b/components/splash/splash-style.scss index 024058eb9525..55da83aca3a0 100644 --- a/components/splash/splash-style.scss +++ b/components/splash/splash-style.scss @@ -26,16 +26,11 @@ } &__modules { - background-image:url(./modules.png); - background-repeat:no-repeat; - background-position:-20px center; - background-size:90% auto; + } &__output { - background-image:url(./output.png); - background-repeat:no-repeat; - background-position:-10px 48%; + } &__headline { diff --git a/content/configuration/dev-server.md b/content/configuration/dev-server.md index 72ec5cf426bf..d0fe878175f6 100644 --- a/content/configuration/dev-server.md +++ b/content/configuration/dev-server.md @@ -2,7 +2,7 @@ title: DevServer contributors: - sokra - - gregvenech + - skipjack - spacek33z - charlespwd --- diff --git a/content/configuration/devtool.md b/content/configuration/devtool.md index d83fa831fdfb..06f67394de63 100644 --- a/content/configuration/devtool.md +++ b/content/configuration/devtool.md @@ -2,7 +2,7 @@ title: Devtool contributors: - sokra - - gregvenech + - skipjack --- ?> Description... diff --git a/content/configuration/entry-context.md b/content/configuration/entry-context.md index 6c1f58f3e8cb..22bb71d53d72 100644 --- a/content/configuration/entry-context.md +++ b/content/configuration/entry-context.md @@ -2,7 +2,7 @@ title: Entry and Context contributors: - sokra - - gregvenech + - skipjack --- ?> TODO: Short description diff --git a/content/configuration/external-configs.md b/content/configuration/external-configs.md index b0bf743a8095..d21d41b60357 100644 --- a/content/configuration/external-configs.md +++ b/content/configuration/external-configs.md @@ -2,7 +2,7 @@ title: External Configurations contributors: - sokra - - gregvenech + - skipjack --- ... diff --git a/content/configuration/externals.md b/content/configuration/externals.md index f5b04a6ca311..84d2de6fedfa 100644 --- a/content/configuration/externals.md +++ b/content/configuration/externals.md @@ -2,7 +2,7 @@ title: Externals contributors: - sokra - - gregvenech + - skipjack --- ?> Description diff --git a/content/configuration/index.md b/content/configuration/index.md index 6b0f08964c59..917ccff40bc0 100644 --- a/content/configuration/index.md +++ b/content/configuration/index.md @@ -2,7 +2,7 @@ title: Configuration contributors: - sokra - - gregvenech + - skipjack --- Webpack is fed a configuration object. It is passed in one of two ways depending on how you are using webpack: through the [terminal]() or via [Node](). Learn more about the various ways this can be done in [Passing a Configuration](). All the available configuration options are specified below. diff --git a/content/configuration/module.md b/content/configuration/module.md index 6a11917b3328..cea91df22ea6 100644 --- a/content/configuration/module.md +++ b/content/configuration/module.md @@ -2,7 +2,7 @@ title: Module contributors: - sokra - - gregvenech + - skipjack --- These options determine how the [different types of modules](/concepts/everything-is-a-module) within a project will be treated. diff --git a/content/configuration/node.md b/content/configuration/node.md index b32b772bac88..6e502af22428 100644 --- a/content/configuration/node.md +++ b/content/configuration/node.md @@ -2,7 +2,7 @@ title: Node contributors: - sokra - - gregvenech + - skipjack --- ### `node` diff --git a/content/configuration/other-options.md b/content/configuration/other-options.md index d140f1aa6b72..6e4363e23f54 100644 --- a/content/configuration/other-options.md +++ b/content/configuration/other-options.md @@ -2,7 +2,7 @@ title: Other Options contributors: - sokra - - gregvenech + - skipjack --- ?> These are all the other options that might not need an entire page. Either we need to create new pages for them, move them to an existing page, or keep an **Other Options** section like this and replace this TODO with a short description/lead-in paragraph. diff --git a/content/configuration/output.md b/content/configuration/output.md index 5a7e564ab1dc..a81ac89e6a70 100644 --- a/content/configuration/output.md +++ b/content/configuration/output.md @@ -2,7 +2,7 @@ title: Output contributors: - sokra - - gregvenech + - skipjack --- The top-level `output` key contains set of options instructing webpack on how and where it should output your bundles, assets and anything else you bundle or load with webpack. diff --git a/content/configuration/passing-a-config.md b/content/configuration/passing-a-config.md index 1d140f6a6019..c0d48e2dafb2 100644 --- a/content/configuration/passing-a-config.md +++ b/content/configuration/passing-a-config.md @@ -2,7 +2,7 @@ title: Passing a Configuration contributors: - sokra - - gregvenech + - skipjack --- ... diff --git a/content/configuration/plugins.md b/content/configuration/plugins.md index 9491e5e2b57d..cbc94c2a8812 100644 --- a/content/configuration/plugins.md +++ b/content/configuration/plugins.md @@ -2,7 +2,7 @@ title: Plugins contributors: - sokra - - gregvenech + - skipjack --- `plugins` customize the webpack build process in a variety of ways. This page discusses using existing plugins, however if you are interested in writing your own please visit [Writing a Plugin](). diff --git a/content/configuration/resolve.md b/content/configuration/resolve.md index 28e658d19f9c..247757ccaa73 100644 --- a/content/configuration/resolve.md +++ b/content/configuration/resolve.md @@ -2,7 +2,7 @@ title: Resolve contributors: - sokra - - gregvenech + - skipjack - SpaceK33z --- diff --git a/content/configuration/target.md b/content/configuration/target.md index b9c0ff94989f..014cf444b9dd 100644 --- a/content/configuration/target.md +++ b/content/configuration/target.md @@ -2,7 +2,7 @@ title: Target contributors: - sokra - - gregvenech + - skipjack --- ?> Compare with [the concept page](/concepts/targets) and determine what goes where. diff --git a/content/configuration/watch.md b/content/configuration/watch.md index 9d631172e799..e0054921b87f 100644 --- a/content/configuration/watch.md +++ b/content/configuration/watch.md @@ -2,7 +2,7 @@ title: Watch and WatchOptions contributors: - sokra - - gregvenech + - skipjack - SpaceK33z --- diff --git a/content/license.md b/content/license.md index 98f2816c90a5..fe7c350edb59 100644 --- a/content/license.md +++ b/content/license.md @@ -6,6 +6,11 @@ title: License Copyright © 2012-2016 Tobias Koppers and other contributors +The webpack logo and icon are under a different license which can be +found [here](https://github.com/webpack/media). + +Except where otherwise stated: + Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including diff --git a/fonts/icons.eot b/fonts/icons.eot deleted file mode 100755 index 97e83c320868..000000000000 Binary files a/fonts/icons.eot and /dev/null differ diff --git a/fonts/icons.svg b/fonts/icons.svg deleted file mode 100755 index 2aa43d73e785..000000000000 --- a/fonts/icons.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/fonts/icons.ttf b/fonts/icons.ttf deleted file mode 100755 index 81d4d2533eb6..000000000000 Binary files a/fonts/icons.ttf and /dev/null differ diff --git a/fonts/icons.woff b/fonts/icons.woff deleted file mode 100755 index 742bc7598ed0..000000000000 Binary files a/fonts/icons.woff and /dev/null differ diff --git a/fonts/icons.woff2 b/fonts/icons.woff2 deleted file mode 100755 index aefcb982ef52..000000000000 Binary files a/fonts/icons.woff2 and /dev/null differ diff --git a/styles/fonts.scss b/styles/fonts.scss new file mode 100644 index 000000000000..b3611b661e82 --- /dev/null +++ b/styles/fonts.scss @@ -0,0 +1,18 @@ +@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono); +@import url(https://fonts.googleapis.com/css?family=Cabin:400,400i,600,600i); + +@font-face { + font-family: 'Geomanist'; + src: url('../assets/geomanist-medium.woff2') format('woff2'), + url('../assets/geomanist-medium.woff') format('woff'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Geomanist'; + src: url('../assets/geomanist-regular.woff2') format('woff2'), + url('../assets/geomanist-regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} \ No newline at end of file diff --git a/styles/icons.css b/styles/icons.css index b35c8bc1d0d5..04eb45f89f7b 100644 --- a/styles/icons.css +++ b/styles/icons.css @@ -1,7 +1,9 @@ @font-face { font-family: 'icons'; - src: url('../fonts/icons.eot'); + src: url('../assets/icons.woff2') format('woff2'), + url('../assets/icons.woff') format('woff'); } + @font-face { font-family: 'icons'; src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype'); @@ -24,6 +26,9 @@ -moz-osx-font-smoothing: grayscale; } +.icon-menu:before { + content: "\e90a"; +} .icon-link:before { content: "\e909"; } @@ -66,4 +71,3 @@ .icon-gitter:before { content: "\e901"; } - diff --git a/styles/index.scss b/styles/index.scss index 448eebe74d73..05fe4d39b6cb 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -8,11 +8,8 @@ @import 'vars'; @import 'functions'; -@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono); -@import url(https://fonts.googleapis.com/css?family=Averia+Sans+Libre:300); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,700,400italic); - @import './reset'; +@import './fonts'; @import './icons'; * { @@ -24,9 +21,8 @@ html { } body { - font: 300 getFontSize(0) 'Open Sans', 'Century Gothic', sans-serif; + font: 400 getFontSize(0) 'Cabin', 'Century Gothic', sans-serif; color: map-get($colors, emperor); - background: map-get($colors, concrete); } a { diff --git a/styles/markdown.scss b/styles/markdown.scss index 2a317281f147..1310d017aaf8 100644 --- a/styles/markdown.scss +++ b/styles/markdown.scss @@ -6,6 +6,8 @@ .page__content, .splash__content { + line-height:1.5em; + h1 { font-size: getFontSize(4); } h2 { font-size: getFontSize(3); } h3 { font-size: getFontSize(2); } @@ -14,8 +16,11 @@ h6 { font-size: getFontSize(-1); } h1, h2, h3, h4, h5, h6 { + font-family:'Geomanist', 'Century Gothic', sans-serif; font-weight:400; - margin:1.5em 0 0.5em; + line-height:1; + margin:1.5em 0 0.25em; + color:map-get($colors, mine-shaft); &:first-child { margin-top:0; } tt, code { font-size:inherit; } @@ -105,7 +110,9 @@ } table { - padding: 0; + display:block; + width:100%; + overflow:auto; tr { border-top: 1px solid #cccccc; @@ -131,6 +138,8 @@ } th, td { + white-space: nowrap; + > :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; } } @@ -142,6 +151,7 @@ } b, strong { + color:map-get($colors, mine-shaft); font-weight:600; } diff --git a/styles/partials/_vars.scss b/styles/partials/_vars.scss index 08b6f3a37dd2..968dd8c2bf2b 100644 --- a/styles/partials/_vars.scss +++ b/styles/partials/_vars.scss @@ -1,9 +1,6 @@ $colors: ( - regent: #8a929d, - lynch: #617693, - chambray: #31517e, - chatham: #12396e, - parchment: #efe3d0, + malibu: #8DD6F9, + denim: #1D78C1, calico: #dfc08b, tussock: #c0903f, white: #ffffff, diff --git a/template.ejs b/template.ejs index 654543a73039..e450c898ad66 100644 --- a/template.ejs +++ b/template.ejs @@ -4,9 +4,10 @@ <%= webpackConfig.template.title %> + <% for (var file in webpackConfig.template.cssFiles) { %> - + <% } %> diff --git a/webpack.config.js b/webpack.config.js index 77ec613b0e07..6a4db725246e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -29,12 +29,8 @@ const commonConfig = { ] }, { - test: /\.woff$/, - loaders: ['url?prefix=font/&limit=5000&mimetype=application/font-woff'] - }, - { - test: /\.ttf$|\.eot$/, - loaders: ['file?prefix=font/'] + test: /\.woff2?$/, + loaders: ['url?prefix=font/&limit=50000&mimetype=application/font-woff'] }, { test: /\.jpg$/,