Design Updates and Fixes

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/logo/logo-style.scss

@@ -1,14 +1,14 @@
 @import 'vars';
 
-@import url(https://fonts.googleapis.com/css?family=Averia+Sans+Libre:300);
-
 .logo {
   position:relative;
   display:inline-block;
 
   &__text {
     font-size:1.3em;
-    font-family:'Averia Sans Libre';
+    font-family:'Geomanist', 'Century Gothic', sans-serif;
+    font-weight:500;
+    letter-spacing:1px;
     margin-left:1.75em;
     line-height:1.4;
     transition:color 250ms;
@@ -30,11 +30,11 @@
 
   &--light {
     .logo__text { 
-      color:map-get($colors, concrete); 
+      color:map-get($colors, alto); 
     }
 
     &:hover .logo__text {
-      color:map-get($colors, parchment);
+      color:map-get($colors, white);
     }
   }
-}
+}

components/navigation/navigation-style.scss

@@ -2,9 +2,8 @@
 @import 'mixins';
 @import 'functions';
 
-.navigation {
+.headroom {
   flex: 0 0 auto;
-
   transition: background 250ms;
   background: map-get($colors, mine-shaft);
 }

components/navigation/navigation.jsx

@@ -1,34 +1,33 @@
 import React from 'react';
+import Headroom from 'react-headroom';
 import Link from '../link/link';
 import Container from '../container/container';
 import Logo from '../logo/logo';
 import './navigation-style';
 
 export default ({ home = '/', pages, onToggleNav }) => (
-  <div className="navigation">
-    <Container>
-      <div className="navigation__inner">
-        <button id="menu-btn" className="navigation__mobilebtn" onClick={onToggleNav}>
-          Open navigation
-        </button>
-        <Link className="navigation__logo" to="/">
-          <Logo theme="light" />
-        </Link>
+  <Headroom className="navigation">
+    <Container className="navigation__inner">
+      <button id="menu-btn" className="navigation__mobilebtn" onClick={onToggleNav}>
+        Open navigation
+      </button>
+      <Link className="navigation__logo" to="/">
+        <Logo theme="light" />
+      </Link>
 
-        <nav className="navigation__links">
-          {
-            pages.map((link, i) => (
-              <Link
-                key={ `navigation__link${i}` }
-                className="navigation__link"
-                activeClassName="navigation__link--active"
-                to={ `/${link.url}` }>
-                { link.title }
-              </Link>
-            ))
-          }
-        </nav>
-      </div>
+      <nav className="navigation__links">
+        {
+          pages.map((link, i) => (
+            <Link
+              key={ `navigation__link${i}` }
+              className="navigation__link"
+              activeClassName="navigation__link--active"
+              to={ `/${link.url}` }>
+              { link.title }
+            </Link>
+          ))
+        }
+      </nav>
     </Container>
-  </div>
+  </Headroom>
 );

components/page/page-style.scss

@@ -3,23 +3,24 @@
 @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:1;
 }
 
 .page__content {
   overflow-x: hidden;
   width: 100%;
-  padding: 0.5em;
+  padding: 1.5em 1em;
 
   @media (min-width: map-get($screens, medium)) {
     flex: 3;
-
     padding: 1.5em;
-    background: map-get($colors, white);
   }
 }
 
@@ -29,14 +30,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);
   }
 }

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 (
     <Container className="page">

components/sidebar/sidebar-style.scss

@@ -5,15 +5,6 @@
 .sidebar {
   position: relative;
   flex: 1;
-
-// 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);
-  }
-*/
 }
 
 .sidebar__inner {
@@ -29,13 +20,14 @@
   overflow-x: hidden;
   padding: 1.5em;
   background: map-get($colors, emperor);
-  color: map-get($colors, dusty-grey);
+  color: map-get($colors, alto);
   z-index: 1;
 
   @include break {
     position: static;
     transform: none;
     width: 100%;
+    max-height:none;
     background: transparent;
     color: map-get($colors, emperor);
   }
@@ -51,11 +43,10 @@
 
 .sidebar-item {
   font-size: getFontSize(-1);
-  margin-bottom: 0.5em;
+  margin-bottom: 0.75em;
 
   &__title {
     font-weight: 400;
-    text-transform: uppercase;
     text-decoration: none;
     color: inherit;
 
@@ -80,11 +71,11 @@
     display:none;
     list-style: none;
     padding: 0;
-    margin: 0.25em 0 1em;
+    margin: 0.5em 0 1em;
   }
 
   &__anchor {
-    margin: 0;
+    margin:0.25em 0;
 
     a {
       display: inline-block;
@@ -110,5 +101,10 @@
     .sidebar-item__anchors {
       display:block;
     }
+
+    .sidebar-item__toggle {
+      margin-left:-2px;
+      transform:rotate(180deg) translateX(1px);
+    }
   }
 }

package.json

@@ -83,6 +83,7 @@
     "preact-compat": "^3.6.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
+    "react-headroom": "^2.1.2",
     "react-router": "^2.8.1"
   }
 }

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('../fonts/geomanist-medium.woff2') format('woff2'),
+       url('../fonts/geomanist-medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Geomanist';
+  src: url('../fonts/geomanist-regular.woff2') format('woff2'),
+       url('../fonts/geomanist-regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}