diff --git a/assets/images/quiz/congrats.gif b/assets/images/quiz/congrats.gif new file mode 100644 index 00000000000..c2f6166f58d Binary files /dev/null and b/assets/images/quiz/congrats.gif differ diff --git a/assets/images/quiz/oh-no.gif b/assets/images/quiz/oh-no.gif new file mode 100644 index 00000000000..26fe877bcb0 Binary files /dev/null and b/assets/images/quiz/oh-no.gif differ diff --git a/assets/images/quiz/well-done.gif b/assets/images/quiz/well-done.gif new file mode 100644 index 00000000000..9e75f13963d Binary files /dev/null and b/assets/images/quiz/well-done.gif differ diff --git a/assets/scss/components/_btn.scss b/assets/scss/components/_btn.scss index 19c790aac46..ebc1ce5ca9d 100644 --- a/assets/scss/components/_btn.scss +++ b/assets/scss/components/_btn.scss @@ -55,6 +55,11 @@ } } +.btn--light { + color: $color-dark; + background: $color-light; +} + .btn--animated { .icon { width: 40px; @@ -117,6 +122,13 @@ stroke: $color-primary; } } + + &.btn--light { + .icon .base, + .icon .tip { + stroke: $color-info; + } + } } @media (max-width: $screen-xs) { diff --git a/assets/scss/components/checkbox.scss b/assets/scss/components/checkbox.scss index 5681e169f57..3ec6574f31c 100644 --- a/assets/scss/components/checkbox.scss +++ b/assets/scss/components/checkbox.scss @@ -1,18 +1,22 @@ .checkbox { - margin-bottom: .2em; - padding-left: 1.8em; + margin-bottom: .6em; + padding-left: 30px; color: #fff; code { - background-color: transparent; - color: $color-light; - font-family: Courier, monospace; - white-space: unset; + font-size: 15px; + background-color: #fff; + color: $color-dark; + padding: .2em; + border-radius: 5px; } pre { - background-color: transparent !important; - padding: 5px; + margin: 0; + width: 100%; + background-color: #fff !important; + padding: .5em; + border-radius: 5px; } } @@ -22,7 +26,7 @@ .checkbox__label { position: relative; - font-size: .8em; + display: flex; line-height: 1.3; &::before { @@ -32,7 +36,7 @@ background-color: #fff; position: absolute; top: 0; - left: -35px; + left: -30px; cursor: pointer; } } @@ -42,9 +46,8 @@ font-family: 'icomoon'; content: '\e918'; position: absolute; - left: -32px; - font-size: 16px; - top: 2px; + left: -33px; + top: 1px; color: $color-dark; } -} \ No newline at end of file +} diff --git a/assets/scss/components/question.scss b/assets/scss/components/question.scss index 7c1e1655f01..748709d3797 100644 --- a/assets/scss/components/question.scss +++ b/assets/scss/components/question.scss @@ -1,31 +1,31 @@ .question { - margin-bottom: 2em; + margin-bottom: 40px; p { - margin-bottom: 1em; + margin-bottom: 20px; } } .question__info { + margin-top: 30px; + padding: 15px 10px; display: flex; flex-direction: column; - background-color: #fff; - color: $color-dark; font-family: 'faktum regular'; - padding: 1em 2em; - margin-top: 2em; - font-size: 18px; + font-size: 1.1em; + color: $color-dark; + background-color: #fff; .title { - color: $color-danger; + margin: 0 0 7px; font-family: 'faktum bold'; + color: $color-danger; } - + code { - font-size: 15px; - padding: .2em; margin: 0 0 .3em; - border-radius: 8px; + padding: 2px 4px; + border-radius: 5px; } } @@ -38,11 +38,18 @@ .question--success { .question__content { border-left: solid 4px $color-success; - } + } } .question--error { .question__content { border-left: solid 4px $color-danger; - } -} \ No newline at end of file + } +} + +@media (max-width: $screen-sm) { + .question__info { + padding: 10px 10px 15px; + font-size: 1em; + } +} diff --git a/assets/scss/components/quiz.scss b/assets/scss/components/quiz.scss index b0032a787db..94d9aec5984 100644 --- a/assets/scss/components/quiz.scss +++ b/assets/scss/components/quiz.scss @@ -1,60 +1,127 @@ -.quiz { - display: flex; +.quiz { + padding: 140px 100px 100px; + display: flex; flex-direction: column; - background-color: $color-dark; - padding: 7em 5em 5em; color: #fff; + background-color: $color-dark; } .quiz__title { + margin: 0 0 70px; display: flex; flex-direction: column; - font-size: 2.3em; font-family: 'faktum bold'; + font-size: 2.3em; color: $color-light; line-height: 1.2; - margin-bottom: 0.8em; + + span:last-of-type { + &:after { + content: '_'; + } + } } - + .quiz__submit { + margin: 60px 0 0; display: flex; justify-content: flex-end; - margin-top: 2em; +} - button { - color: #fff; - font-size: .95em; - font-family: 'antikor bold'; - padding: 1em 2.5em; - background-color: $color-light; +.quiz__score { + margin: 60px 0 0; + display: flex; + justify-content: space-between; + align-items: center; + + .title { + margin: 0 0 20px; + font-family: 'faktum bold'; + font-size: 2.5em; + text-transform: uppercase; + + span { + margin-right: 17px; + } + } + + .detail { + margin-left: 69px; + padding-left: 25px; + display: flex; + flex-direction: column; + font-size: 1.5em; + border-left: solid 4px; + + strong { + font-family: 'faktum bold'; + } + } + + img { + margin: 0; + width: 380px; } } -.quiz__answer { - margin-top: .8em; - color: #fff; - padding: 0 .3em; +.quiz__score--excellent { + .title { + color: $color-light; + } + + .detail { + border-color: $color-light; + + strong { + color: $color-light; + } + } } -.quiz__score { - display: flex; - align-self: center; - align-items: center; - flex-direction: column; - font-family: 'faktum bold'; - color: $color-light; +.quiz__score--improvable { + .title { + color: $color-danger; + } + + .detail { + border-color: $color-danger; - strong { - line-height: 1; - font-size: .7em; + strong { + color: $color-danger; + } } - - .emoji { - font-size: 2.7em; - margin: .3em; +} + +@media (max-width: $screen-md) { + .quiz__score { + img { + width: 320px; + } + } +} + +@media (max-width: $screen-sm) { + .quiz { + padding: 80px 25px 100px; + font-size: 1em; } - .percentage { - font-size: 3em; + .quiz__score { + flex-direction: column; + text-align: center; + + .detail { + margin: 0 0 35px; + padding: 0; + font-size: 1.25em; + border: none; + } } -} \ No newline at end of file +} + +@media (max-width: $screen-xxs) { + .quiz__title { + margin: 0 0 30px; + font-size: 1.6em; + } +} diff --git a/assets/scss/components/radio.scss b/assets/scss/components/radio.scss index 6f4ac3a2848..b8a941cfad8 100644 --- a/assets/scss/components/radio.scss +++ b/assets/scss/components/radio.scss @@ -1,22 +1,22 @@ .radio { - margin-bottom: .2em; - padding-left: 1.9em; + margin-bottom: .6em; + padding-left: 30px; color: #fff; code { font-size: 15px; - background-color: #fff; + background-color: #fff; color: $color-dark; padding: .2em; - border-radius: 8px; + border-radius: 5px; } pre { margin: 0; width: 100%; background-color: #fff !important; - padding: .5em; - border-radius: 10px; + padding: .5em; + border-radius: 5px; } } @@ -26,7 +26,7 @@ .radio__label { position: relative; - font-size: .8em; + display: flex; line-height: 1.3; &::before { @@ -36,7 +36,7 @@ border-radius: 50%; position: absolute; top: 1px; - left: -37px; + left: -30px; cursor: pointer; background-color: #fff; } @@ -53,4 +53,4 @@ left: -35px; top: 3px; } -} \ No newline at end of file +} diff --git a/templates/blog/article.html.twig b/templates/blog/article.html.twig index ea646569cf2..35a192e1fd0 100644 --- a/templates/blog/article.html.twig +++ b/templates/blog/article.html.twig @@ -10,243 +10,237 @@ {% block twitter_image absolute_url(asset(article.thumbnail|glide_image_preset('twitter_card'))) %} {% block content %} -
    -
  1. - - Blog - - -
    2. -
  2. - - {{ article.title }} - - -
    3. -
- -
-
- -
- {% set authors = article.authors|length > 5 ? [] : article.authors %} - {% block author_header %} -
-
- {% for author in authors %} - - - - {% else %} - - {% endfor %} -
- - Écrit par - {% for author in authors %} - - {{ author.name }} - - {% else %} - La team élao - {% endfor %} - -
- {% endblock %} -
- Publication {{ article.date|format_date('long') }} - {# Do only display the last modified date if not null and different day than the publication date #} - {% if article.lastModified and article.lastModified > article.date|date_modify('+1 day 00:00') %} - Modification {{ article.lastModified|format_date('long') }} - {% endif %} -
-
- -
-

{{ article.title }}

-

{{ article.description }}

- -
-
- - {% if article.tableOfContent is not empty %} -
    - {% for headline in article.tableOfContent %} -
  1. - {{ headline.content }} - - {% if headline.children is not empty %} -
      - {% for child in headline.children %} -
    1. - {{ child.content }} -
      2. - {% endfor %} -
    - {% endif %} -
    2. - {% endfor %} -
- {% endif %} - -
-
- - {% if article.outdated %} -
- -
- {% if article.outdated is same as true %} -

- Attention, cet article date un peu, il est peut-être obsolète, gardez cela en tête lors de votre - lecture ! -

- {% else %} - {{ article.outdated|nl2br|markdownify|raw }} - {% endif %} -
-
- {% endif %} - - {% if not article.published %} -
- -
-

- Cet article n'est pas encore publié. Cet aperçu est disponible uniquement dans cet environnement - mais n'apparaîtra en production qu'à partir du {{ article.date|format_date('long') }} -

-
-
- {% endif %} - - {{ article.content|raw }} - {% block credits %} - {% if article.credits %} -
- Crédits: photo de couverture par - {% if article.credits.url %} - - {{ article.credits.name }} - - {% else %} - {{ article.credits.name }} - {% endif %} -
- {% endif %} - {% endblock %} -
- -
- -
- {% block author_footer %} - {% for author in article.authors %} -
-
- - - -
- - {{ loop.first ? 'Écrit par' : 'Co-écrit par' }} - - {{ author.name }} - - - - -
- {% endfor %} - {% endblock %} -
- - {% if article.tweetId is not empty or article.githubEditLink is not empty %} -
- {% if article.tweetId is not empty %} -
-

Commenter

-

- Des commentaires ? - - Poursuivons la discussion sur twitter ! - -

-
-
- {% endif %} - - {% if article.githubEditLink is not empty %} -
-

- Une typo ? - - Modifier cet article sur Github - -

-
- {% endif %} -
- {% endif %} - +
    +
  1. + + Blog + + +
    2. +
  2. + + {{ article.title }} + + +
    3. +
+ +
+
+ +
+ {% set authors = article.authors|length > 5 ? [] : article.authors %} + {% block author_header %} +
+
+ {% for author in authors %} + + + + {% else %} + + {% endfor %} +
+ + Écrit par + {% for author in authors %} + + {{ author.name }} + + {% else %} + La team élao + {% endfor %} + +
+ {% endblock %} +
+ Publication {{ article.date|format_date('long') }} + {# Do only display the last modified date if not null and different day than the publication date #} + {% if article.lastModified and article.lastModified > article.date|date_modify('+1 day 00:00') %} + Modification {{ article.lastModified|format_date('long') }} + {% endif %} +
+
+ +
+

{{ article.title }}

+

{{ article.description }}

+ +
+
+ + {% if article.tableOfContent is not empty %} +
    + {% for headline in article.tableOfContent %} +
  1. + {{ headline.content }} + + {% if headline.children is not empty %} +
      + {% for child in headline.children %} +
    1. + {{ child.content }} +
      2. + {% endfor %} +
    + {% endif %} +
    2. + {% endfor %} +
+ {% endif %} + +
+
+ + {% if article.outdated %} +
+ +
+ {% if article.outdated is same as true %} +

+ Attention, cet article date un peu, il est peut-être obsolète, gardez cela en tête lors de votre lecture ! +

+ {% else %} + {{ article.outdated|nl2br|markdownify|raw }} + {% endif %} +
+
+ {% endif %} + + {% if not article.published %} +
+ +
+

+ Cet article n'est pas encore publié. Cet aperçu est disponible uniquement dans cet environnement mais n'apparaîtra en production qu'à partir du {{ article.date|format_date('long') }} +

+
+
+ {% endif %} + + {{ article.content|raw }} + {% block credits %} + {% if article.credits %} +
+ Crédits: photo de couverture par + {% if article.credits.url %} + + {{ article.credits.name }} + + {% else %} + {{ article.credits.name }} + {% endif %} +
+ {% endif %} + {% endblock %} +
+ +
+ +
+ {% block author_footer %} + {% for author in article.authors %} +
+
+ + + +
+ + {{ loop.first ? 'Écrit par' : 'Co-écrit par' }} + + {{ author.name }} + + + + +
+ {% endfor %} + {% endblock %} +
+ + {% if article.tweetId is not empty or article.githubEditLink is not empty %} +
+ {% if article.tweetId is not empty %} +
+

Commenter

+

+ Des commentaires ? + + Poursuivons la discussion sur twitter ! + +

+
+
+ {% endif %} + + {% if article.githubEditLink is not empty %} +
+

+ Une typo ? + + Modifier cet article sur Github + +

+
+ {% endif %} +
+ {% endif %} {% include 'blog/quiz.html.twig' %} {% endblock content %} {% block javascripts %} -{{ parent() }} - -{% if article.tweetId is not empty %} - - -{% endif %} -{% endblock %} \ No newline at end of file + {{ parent() }} + + {% if article.tweetId is not empty %} + + + {% endif %} +{% endblock %}