From 3552e31cb4e0dc8b5101fcb7cf1debe9afbb2474 Mon Sep 17 00:00:00 2001
From: Martin Cadoux <martin.cadoux@me.com>
Date: Thu, 1 Mar 2018 00:51:20 +0100
Subject: [PATCH] Adjust overall presentation

---
 src/assets/scss/base/_global.scss         |  4 --
 src/assets/scss/includes/_header.scss     | 57 +++++++++++++++++------
 src/assets/scss/objects/_course-page.scss | 38 +++++++++++----
 src/assets/scss/objects/_layout.scss      |  6 +--
 src/containers/Course.jsx                 |  5 +-
 src/containers/Header.jsx                 | 33 ++++++-------
 6 files changed, 87 insertions(+), 56 deletions(-)

diff --git a/src/assets/scss/base/_global.scss b/src/assets/scss/base/_global.scss
index 64db61b..297e5c2 100644
--- a/src/assets/scss/base/_global.scss
+++ b/src/assets/scss/base/_global.scss
@@ -16,10 +16,6 @@ figure {
 
 html {
   background: $background-color;
-  font-size: 75%;
-  @media (min-width: 768px) {
-    font-size: 100%;
-  }
 }
 // Typography
 ::selection {
diff --git a/src/assets/scss/includes/_header.scss b/src/assets/scss/includes/_header.scss
index 276ad9b..360aab2 100644
--- a/src/assets/scss/includes/_header.scss
+++ b/src/assets/scss/includes/_header.scss
@@ -3,16 +3,28 @@
   background: $brand-color;
   border-bottom: 1px solid $border-color;
   display: flex;
-  flex-flow: row wrap;
-  padding: 20px 45px;
+  flex-flow: column wrap;
+  align-items: center;
   width: 100%;
+  @media (min-width: 48em) {
+    flex-direction: row;
+    height: auto;
+    margin: 0;
+    width: 100%;
+  }
+
+  &.-yellow {
+    background-color: $brand-yellow;
+  }
 
   .branding__content {
     display: inline-block;
     margin-bottom: 5px;
+    height: 40px;
     width: 120px;
     @media (min-width: 48em) {
       margin-bottom: 0;
+      height: 60px;
       width: 160px;
     }
 
@@ -23,7 +35,14 @@
 
     &__image {
       display: block;
-      max-width: 100%;
+      margin: 0 auto;
+      height: 40px;
+      width: 120px;
+      @media (min-width: 48em) {
+        margin: 0;
+        height: 60px;
+        width: 160px;
+      }
     }
   }
 
@@ -40,15 +59,6 @@
     width: 2rem;
   }
 
-  .site-title {
-    flex: auto;
-    float: left;
-    font-size: 1rem;
-    font-weight: bold;
-    line-height: 1.5;
-    text-align: center;
-  }
-
   .site-nav {
     ul {
       display: inline-block;
@@ -68,9 +78,26 @@
   .branding,
   .search-bar,
   .site-nav {
-    @media (max-width: 480px) {
-      flex: 0 0 100%;
-      text-align: center;
+    @media (min-width: 48em) {
+      flex: 1 1 12.5em;
+      max-width: 15.9375em;
+      margin: 0 1.875em 0 0;
     }
   }
 }
+
+.course-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  @media (min-width: 48em) {
+    flex-direction: row;
+    align-items: baseline;
+    flex: 1 1 25em;
+  }
+
+  &__duration {
+    margin: 0;
+  }
+}
diff --git a/src/assets/scss/objects/_course-page.scss b/src/assets/scss/objects/_course-page.scss
index d8a4118..9260f3e 100644
--- a/src/assets/scss/objects/_course-page.scss
+++ b/src/assets/scss/objects/_course-page.scss
@@ -1,9 +1,9 @@
 .summary {
   flex: 1 1 em(200px);
-  margin: 0 0 em(70px);
+  margin: 0 0 em(30px);
   @media (min-width: em(768px)) {
-    max-width: em(370px);
-    margin: 0 em(70px) 0 0;
+    max-width: em(255px);
+    margin: 0 em(30px) 0 0;
   }
 
   &__steps {
@@ -28,18 +28,19 @@
     @media (min-width: em(768px)) {
       flex-direction: row;
       flex: 1 1 em(70px);
+      padding: 0;
       text-align: left;
     }
 
     & + & {
       @media (min-width: em(768px)) {
-        margin-top: em(60px);
+        margin-top: em(20px);
       }
     }
   }
 
   &__step-number {
-    $context: 40px;
+    $context: 32px;
 
     font-size: em($context);
     display: flex;
@@ -49,20 +50,22 @@
     flex: 0 0 auto;
     border: 2px solid $brand-yellow;
     border-radius: 50%;
-    width: em(70px, $context);
-    height: em(70px, $context);
+    width: em(50px, $context);
+    height: em(50px, $context);
     .-current & {
       background-color: $brand-yellow;
     }
   }
 
   &__step-title {
+    $context: 18px;
+
     color: #bbc1c4;
-    font-size: em(22px);
+    font-size: $context;
     line-height: 1.1;
-    margin: em(15px) 0 0;
+    margin: em(15px, $context) 0 0;
     @media (min-width: em(768px)) {
-      margin: 0 0 0 em(15px);
+      margin: 0 0 0 em(15px, $context);
     }
   }
 }
@@ -75,9 +78,17 @@
 
   &__content {
     flex: 1 1 em(400px);
+    margin-bottom: em(60px);
     width: 100%;
   }
 
+  &__chapter {
+    $context: 20px;
+
+    font-size: em($context);
+    margin-bottom: em(20px, $context);
+  }
+
   &__navigation {
     display: flex;
     flex-direction: row;
@@ -85,6 +96,8 @@
   }
 
   &__button {
+    position: fixed;
+    bottom: em(20px);
     background-color: $brand-yellow;
     border: none;
     border-radius: 30%;
@@ -96,6 +109,11 @@
 
     &.-previous {
       transform: rotate(180deg);
+      left: em(20px);
+    }
+
+    &.-next {
+      right: em(20px);
     }
   }
 
diff --git a/src/assets/scss/objects/_layout.scss b/src/assets/scss/objects/_layout.scss
index b83b53c..fd426e4 100644
--- a/src/assets/scss/objects/_layout.scss
+++ b/src/assets/scss/objects/_layout.scss
@@ -11,13 +11,9 @@
 
 .container {
   margin: 0 auto;
-  padding: 2.5em;
+  padding: em(20px);
   max-width: em($max-width-layout);
 
-  @media (min-width: em(480px)) {
-    padding: em(45px);
-  }
-
   @media (min-width: em(1360px)) {
     padding-left: 0;
     padding-right: 0;
diff --git a/src/containers/Course.jsx b/src/containers/Course.jsx
index 44624fc..a22b398 100644
--- a/src/containers/Course.jsx
+++ b/src/containers/Course.jsx
@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 
 import Summary from '../components/Summary';
 
-import clock from '../assets/images/icons/icon_clock.svg';
 import arrow from '../assets/images/icons/icon_arrow.svg';
 
 import {
@@ -162,7 +161,9 @@ export class Course extends React.Component {
         />
 
         <article className="course__content">
-          <p className="course__duration" data-icon={clock}>{duration.total} minutes</p>
+          {stepTitles.length > 0 && (
+            <h1 className="course__chapter">{currentStep + 1} - {stepTitles[currentStep]}</h1>
+          )}
           <div className="course__text">{step.map((renderer, key) => renderer({ key }))}</div>
           <div className="course__navigation">
             <button
diff --git a/src/containers/Header.jsx b/src/containers/Header.jsx
index eb4eaec..224f05a 100644
--- a/src/containers/Header.jsx
+++ b/src/containers/Header.jsx
@@ -1,50 +1,43 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import cx from 'classnames';
 
-import logo from '../assets/images/logo_eleven_codelabs.png';
+import clock from '../assets/images/icons/icon_clock.svg';
 
 const mapStateToProps = ({
   currentCourse,
-  currentStepIndex,
 }) => ({
   currentCourse,
-  currentStepIndex,
 });
 
 export class Header extends React.Component {
   static propTypes = {
     currentCourse: PropTypes.shape(),
-    currentStepIndex: PropTypes.number,
   };
 
   static defaultProps = {
     currentCourse: {},
-    currentStepIndex: null,
   };
 
   render() {
     const {
-      currentCourse: {
-        title = '',
-        stepTitles = [],
-      },
-      currentStepIndex,
+      currentCourse,
     } = this.props;
 
+    const headerClasses = cx('site-header container', {
+      '-yellow': currentCourse.title,
+    });
+
     return (
-      <nav className="site-header">
-        <div className="branding">
-          <a href="/" className="branding__content">
-            <img className="branding__image" alt="Eleven Codelabs" src={logo}></img>
-          </a>
+      <nav className={headerClasses}>
+        <div className="branding-container">
+          <a href="/" className="branding" />
         </div>
 
-        <div className="site-title">
-          <h2>{title}</h2>
-          {stepTitles.length > 0 && (
-            <h3>{currentStepIndex + 1} - {stepTitles[currentStepIndex]}</h3>
-          )}
+        <div className="course-header">
+          {currentCourse && <h2 className="course-header__title">{currentCourse.title}</h2>}
+          <p className="course-header__duration" data-icon={clock}>{/*course.time*/} minutes</p>
         </div>
       </nav>
     );