diff --git a/README.md b/README.md
index 8e8ff18..6ec88e1 100644
--- a/README.md
+++ b/README.md
@@ -105,15 +105,13 @@ C'est le fichier qui permet de configurer votre codelabs. Il doit absolument com
{
"title": "TITRE",
"permalink": "URL",
- "excerpt": "DESCIPTION",
+ "excerpt": "DESCRIPTION",
"stepTitles": [
"TITRE STEP 1",
"TITRE STEP 2",
"TITRE STEP 3"
],
"date": "DATE",
- "cover": "URL DE LA COVER",
- "time": "TEMPS",
"authors": [
{
"name": "NOM DE L'AUTHOR",
diff --git a/app.yaml b/app.yaml
index ce2a124..17149fd 100755
--- a/app.yaml
+++ b/app.yaml
@@ -1,2 +1,8 @@
runtime: custom
env: flex
+
+automatic_scaling:
+ min_num_instances: 1
+ max_num_instances: 3
+ cpu_utilization:
+ target_utilization: 0.8
diff --git a/nginx.conf b/nginx.conf
index 6dfcc8d..76df50a 100755
--- a/nginx.conf
+++ b/nginx.conf
@@ -39,6 +39,10 @@ http {
listen 8080;
root /usr/share/nginx/www;
index index.html index.htm;
+
+ if ($http_x_forwarded_proto = "http") {
+ return 301 https://$host$request_uri;
+ }
location / {
try_files $uri $uri/ /index.html;
diff --git a/public/index.html b/public/index.html
index 14c0456..a223ed3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,15 @@
Eleven's Codelabs
+
+
+
diff --git a/src/assets/images/icons/icon_english.svg b/src/assets/images/icons/icon_english.svg
new file mode 100644
index 0000000..1c951d2
--- /dev/null
+++ b/src/assets/images/icons/icon_english.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/images/icons/icon_rocket.svg b/src/assets/images/icons/icon_rocket.svg
new file mode 100644
index 0000000..b66a5bd
--- /dev/null
+++ b/src/assets/images/icons/icon_rocket.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
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..7b7dee8 100644
--- 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
index d8a4118..84bda1a 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,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
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..e093db4 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 {
@@ -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 {
/>
- {duration.total} minutes
+ {stepTitles.length > 0 && (
+ {currentStep + 1} - {stepTitles[currentStep]}
+ )}
{step.map((renderer, key) => renderer({ key }))}