Merge pull request webpack#225 from webpack/feature/fonts-n-styles

Design Updates and Fixes

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'],

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;
-  }
 }

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;
   }
 }

components/contributors/contributors.jsx

@@ -4,15 +4,14 @@ import './contributors-style';
 export default ({contributors}) => {
   return (
     <div className="contributors">
-      <h4>Contributors</h4>
+      <h3>Contributors:</h3>
       <div className="contributors__list">
         { 
           (contributors || []).map((contributor) => (
             <a key={ contributor } 
               className="contributor"
               href={ `https://github.com/${contributor}` }>
-              <img src={ `https://github.com/${contributor}.png?size=80` } />
-              <span>{ contributor }</span>
+              <img src={ `https://github.com/${contributor}.png?size=50` } />
             </a>
           ))
         }

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);
       }
     }
   }

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;

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) => {
         </section>
 
         <section className="footer__middle">
-          <Link to="/">
-            <Cube depth={ 18 } hover />
+          <Link to="/" className="footer__icon">
+            <img src={ CubeImg } />
           </Link>
         </section>
 

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);
     }
   }
-}
+}

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 (
-      <span 
-        ref={ ref => this.container = ref } 
-        className={ `logo logo--${theme}` }>
-        <Cube 
-          ref={ ref => this.icon = ref }
-          className="logo__cube"
-          theme={ theme } 
-          depth={ 20 } />
-        <span className="logo__text">webpack</span>
-      </span>
-    );
-  }
-
-  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 (
+    <span className={ `logo${light ? ' logo--light' : ''}` }>
+      <img className="logo__icon" src={ CubeImg } />
+      <span className="logo__text">webpack</span>
+    </span>
+  );    
+};