From df6501ff1ac4a0632bb3072387b6efc8c2161816 Mon Sep 17 00:00:00 2001 From: Martin Cadoux 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 | 74 ++++++++++++++--------- src/assets/scss/objects/_course-page.scss | 43 +++++++++---- src/assets/scss/objects/_layout.scss | 6 +- src/containers/Course.jsx | 5 +- src/containers/Header.jsx | 22 ++++--- 6 files changed, 93 insertions(+), 61 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 13140cd..43f23f8 100644 --- a/src/assets/scss/includes/_header.scss +++ b/src/assets/scss/includes/_header.scss @@ -3,19 +3,29 @@ 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 { display: inline-block; - height: 60px; - width: 160px; - - @media (max-width: 480px) { - height: 40px; - margin-bottom: 5px; - width: 120px; + margin-bottom: 5px; + height: 40px; + width: 120px; + @media (min-width: 48em) { + margin-bottom: 0; + height: 60px; + width: 160px; } &:hover { @@ -28,13 +38,13 @@ background-size: contain; content: ''; display: block; - height: 60px; - width: 160px; - - @media (max-width: 480px) { - height: 40px; - margin: 0 auto; - width: 120px; + margin: 0 auto; + height: 40px; + width: 120px; + @media (min-width: 48em) { + margin: 0; + height: 60px; + width: 160px; } } } @@ -52,15 +62,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; @@ -80,9 +81,26 @@ .branding-container, .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 1023b66..f4720d1 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: #b8b8b8; } } &__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,16 +96,24 @@ } &__button { + position: fixed; + bottom: em(20px); background-color: $brand-yellow; + border-style: none; border-radius: 50%; - width: em(110px); - height: em(110px); + width: em(60px); + height: em(60px); &[disabled] { visibility: hidden; } &.-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 0144b7c..cf31aae 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 { @@ -160,7 +159,9 @@ export class Course extends React.Component { />
-

{course.time} minutes

+ {stepTitles.length > 0 && ( +

{currentStep + 1} - {stepTitles[currentStep]}

+ )}
{step.map((renderer, key) => renderer({ key }))}