Merge branch 'master' into MaxLf-patch-1

eleven-labs · Mar 12, 2018 · 4891f05 · 4891f05
2 parents d29e559 + 6ea5ce6
commit 4891f05
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 104 deletions.
diff --git a/src/assets/images/icons/icon_english.svg b/src/assets/images/icons/icon_english.svg
diff --git a/src/assets/images/icons/icon_rocket.svg b/src/assets/images/icons/icon_rocket.svg
diff --git 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
@@ -1,76 +1,143 @@
 .site-header {
-  align-items: center;
   background: $brand-color;
   border-bottom: 1px solid $border-color;
-  display: flex;
-  flex-flow: row wrap;
-  padding: 20px 45px;
-  width: 100%;
 
-  .branding__content {
-    display: inline-block;
-    margin-bottom: 5px;
-    width: 120px;
-    @media (min-width: 48em) {
-      margin-bottom: 0;
-      width: 160px;
+  &.-yellow {
+    background-color: $brand-yellow;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    width: 100%;
+    @media (min-width: em(768px)) {
+      flex-flow: row nowrap;
+      height: auto;
+      margin: 0 auto;
+      width: 100%;
     }
+  }
 
+  a {
+    color: $header-link-color;
+  }
+}
+
+.branding {
+  display: inline-block;
+  margin-bottom: em(5px);
+  height: em(40px);
+  width: em(120px);
+  @media (min-width: em(768px)) {
+    margin: 0 em(30px) 0 0;
+    height: em(60px);
+    width: em(160px);
+    max-width: em(255px);
+    flex: 1 1 em(200px);
+  }
+
+  &__content {
     &:hover {
       background: none;
       text-decoration: none;
     }
+  }
 
-    &__image {
-      display: block;
-      max-width: 100%;
+  &__image {
+    display: block;
+    margin: 0 auto;
+    height: em(40px);
+    width: em(120px);
+    max-width: 100%;
+    @media (min-width: em(768px)) {
+      margin: 0;
+      height: em(60px);
+      width: em(160px);
     }
   }
+}
 
-  a {
-    color: $header-link-color;
-  }
+.avatar {
+  border-radius: .2rem;
+  float: left;
+  height: 2rem;
+  margin-right: 1rem;
+  margin-top: -3px;
+  width: 2rem;
+}
 
-  .avatar {
-    border-radius: .2rem;
-    float: left;
-    height: 2rem;
-    margin-right: 1rem;
-    margin-top: -3px;
-    width: 2rem;
+.course-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  @media (min-width: em(768px)) {
+    flex-direction: row;
+    align-items: baseline;
+    flex: 1 1 em(400px);
   }
 
-  .site-title {
-    flex: auto;
-    float: left;
-    font-size: 1rem;
-    font-weight: bold;
-    line-height: 1.5;
-    text-align: center;
+  &__title {
+    $context: 24px;
+
+    font-size: em($context);
+    margin-bottom: em(20px, $context);
+    @media (min-width: em(768px)) {
+      margin-bottom: 0;
+    }
   }
 
-  .site-nav {
-    ul {
+  &__duration {
+    $context: 20px;
+
+    font-size: $context;
+    margin: 0;
+    &:before {
+      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBhdGggZD0iTTMwIDBDMTMuNDU4IDAgMCAxMy40NTggMCAzMHMxMy40NTggMzAgMzAgMzAgMzAtMTMuNDU4IDMwLTMwUzQ2LjU0MiAwIDMwIDB6bTAgNThDMTQuNTYxIDU4IDIgNDUuNDM5IDIgMzBTMTQuNTYxIDIgMzAgMnMyOCAxMi41NjEgMjggMjgtMTIuNTYxIDI4LTI4IDI4eiIvPjxwYXRoIGQ9Ik0zMCA2YTEgMSAwIDAgMC0xIDF2MjNIMTRhMSAxIDAgMSAwIDAgMmgxNmExIDEgMCAwIDAgMS0xVjdhMSAxIDAgMCAwLTEtMXoiLz48L3N2Zz4=");
       display: inline-block;
-      line-height: 1.5;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      text-align: center;
+      margin-right: em(10px, $context);
+      width: em(35px, $context);
+      vertical-align: middle;
     }
+  }
+}
+
+.links {
+  $margin: em(8px);
+
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: em(165px);
+  @media (min-width: em(768px)) {
+    margin: 0 0 0 em(30px);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+    list-style: none;
+    text-align: center;
 
-    li {
+    &.-language:before {
+      content: "";
       display: inline-block;
-      margin-right: .4rem;
+      margin: 0 $margin;
+      width: em(1px);
+      height: em(24px);
+      background-color: $brand-black;
+      vertical-align: middle;
     }
   }
 
-  .branding,
-  .search-bar,
-  .site-nav {
-    @media (max-width: 480px) {
-      flex: 0 0 100%;
-      text-align: center;
+  &__item {
+    & + & {
+      margin-left: $margin;
     }
   }
 }
diff --git 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,16 +78,26 @@
 
   &__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;
     justify-content: space-between;
   }
 
   &__button {
+    position: fixed;
+    bottom: em(20px);
     background-color: $brand-yellow;
     border: none;
     border-radius: 30%;
@@ -96,19 +109,11 @@
 
     &.-previous {
       transform: rotate(180deg);
+      left: em(20px);
     }
-  }
-
-  &__duration {
-    $context: 20px;
 
-    font-size: $context;
-    &:before {
-      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCA2MCI+PHBhdGggZD0iTTMwIDBDMTMuNDU4IDAgMCAxMy40NTggMCAzMHMxMy40NTggMzAgMzAgMzAgMzAtMTMuNDU4IDMwLTMwUzQ2LjU0MiAwIDMwIDB6bTAgNThDMTQuNTYxIDU4IDIgNDUuNDM5IDIgMzBTMTQuNTYxIDIgMzAgMnMyOCAxMi41NjEgMjggMjgtMTIuNTYxIDI4LTI4IDI4eiIvPjxwYXRoIGQ9Ik0zMCA2YTEgMSAwIDAgMC0xIDF2MjNIMTRhMSAxIDAgMSAwIDAgMmgxNmExIDEgMCAwIDAgMS0xVjdhMSAxIDAgMCAwLTEtMXoiLz48L3N2Zz4=");
-      display: inline-block;
-      margin-right: em(10px, $context);
-      width: em(35px, $context);
-      vertical-align: middle;
+    &.-next {
+      right: em(20px);
     }
   }
 

diff --git 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
@@ -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 {
@@ -140,10 +139,7 @@ export class Course extends React.Component {
 
   render() {
     const {
-      course: {
-        duration = {},
-        stepTitles = [],
-      } = {},
+      course: { stepTitles = [] } = {},
       currentStep,
     } = this.state;
 
@@ -162,7 +158,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