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/_normalize.scss b/assets/scss/_normalize.scss index 18c426c158e..53b9cb640b4 100644 --- a/assets/scss/_normalize.scss +++ b/assets/scss/_normalize.scss @@ -68,10 +68,6 @@ hr { height: 0; } -pre { - overflow: auto; -} - code, kbd, pre, diff --git a/assets/scss/base/_variables.scss b/assets/scss/base/_variables.scss index cae47480fcf..bb87c48e837 100644 --- a/assets/scss/base/_variables.scss +++ b/assets/scss/base/_variables.scss @@ -7,7 +7,9 @@ $color-dark: #0d3a5a; $color-light: #2ecccb; $color-text: #390725; $color-info: #1e7695; +$color-danger: #ef4055; $color-warning: #dbb371; +$color-success: #00cc99; // Breakpoints $screen-lg: 1280px; // desktop 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 new file mode 100644 index 00000000000..3ec6574f31c --- /dev/null +++ b/assets/scss/components/checkbox.scss @@ -0,0 +1,53 @@ +.checkbox { + margin-bottom: .6em; + padding-left: 30px; + color: #fff; + + code { + font-size: 15px; + background-color: #fff; + color: $color-dark; + padding: .2em; + border-radius: 5px; + } + + pre { + margin: 0; + width: 100%; + background-color: #fff !important; + padding: .5em; + border-radius: 5px; + } +} + +.checkbox__input { + display: none; +} + +.checkbox__label { + position: relative; + display: flex; + line-height: 1.3; + + &::before { + content: ''; + width: 20px; + height: 20px; + background-color: #fff; + position: absolute; + top: 0; + left: -30px; + cursor: pointer; + } +} + +.checkbox__input:checked + .checkbox__label { + &::after { + font-family: 'icomoon'; + content: '\e918'; + position: absolute; + left: -33px; + top: 1px; + color: $color-dark; + } +} diff --git a/assets/scss/components/question.scss b/assets/scss/components/question.scss new file mode 100644 index 00000000000..748709d3797 --- /dev/null +++ b/assets/scss/components/question.scss @@ -0,0 +1,55 @@ +.question { + margin-bottom: 40px; + + p { + margin-bottom: 20px; + } +} + +.question__info { + margin-top: 30px; + padding: 15px 10px; + display: flex; + flex-direction: column; + font-family: 'faktum regular'; + font-size: 1.1em; + color: $color-dark; + background-color: #fff; + + .title { + margin: 0 0 7px; + font-family: 'faktum bold'; + color: $color-danger; + } + + code { + margin: 0 0 .3em; + padding: 2px 4px; + border-radius: 5px; + } +} + +.question--answered { + .question__content { + padding-left: 20px; + } +} + +.question--success { + .question__content { + border-left: solid 4px $color-success; + } +} + +.question--error { + .question__content { + border-left: solid 4px $color-danger; + } +} + +@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 new file mode 100644 index 00000000000..94d9aec5984 --- /dev/null +++ b/assets/scss/components/quiz.scss @@ -0,0 +1,127 @@ +.quiz { + padding: 140px 100px 100px; + display: flex; + flex-direction: column; + color: #fff; + background-color: $color-dark; +} + +.quiz__title { + margin: 0 0 70px; + display: flex; + flex-direction: column; + font-family: 'faktum bold'; + font-size: 2.3em; + color: $color-light; + line-height: 1.2; + + span:last-of-type { + &:after { + content: '_'; + } + } +} + +.quiz__submit { + margin: 60px 0 0; + display: flex; + justify-content: flex-end; +} + +.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__score--excellent { + .title { + color: $color-light; + } + + .detail { + border-color: $color-light; + + strong { + color: $color-light; + } + } +} + +.quiz__score--improvable { + .title { + color: $color-danger; + } + + .detail { + border-color: $color-danger; + + strong { + color: $color-danger; + } + } +} + +@media (max-width: $screen-md) { + .quiz__score { + img { + width: 320px; + } + } +} + +@media (max-width: $screen-sm) { + .quiz { + padding: 80px 25px 100px; + font-size: 1em; + } + + .quiz__score { + flex-direction: column; + text-align: center; + + .detail { + margin: 0 0 35px; + padding: 0; + font-size: 1.25em; + border: none; + } + } +} + +@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 new file mode 100644 index 00000000000..b8a941cfad8 --- /dev/null +++ b/assets/scss/components/radio.scss @@ -0,0 +1,56 @@ +.radio { + margin-bottom: .6em; + padding-left: 30px; + color: #fff; + + code { + font-size: 15px; + background-color: #fff; + color: $color-dark; + padding: .2em; + border-radius: 5px; + } + + pre { + margin: 0; + width: 100%; + background-color: #fff !important; + padding: .5em; + border-radius: 5px; + } +} + +.radio__input { + display: none; +} + +.radio__label { + position: relative; + display: flex; + line-height: 1.3; + + &::before { + content: ''; + height: 18px; + width: 18px; + border-radius: 50%; + position: absolute; + top: 1px; + left: -30px; + cursor: pointer; + background-color: #fff; + } +} + +.radio__input:checked + .radio__label { + &::after { + content: ''; + position: absolute; + height: 14px; + width: 14px; + border-radius: 50%; + background: #0d3a5a; + left: -35px; + top: 3px; + } +} diff --git a/assets/scss/generic/_code.scss b/assets/scss/generic/_code.scss index 37a394da7f5..85337eca6c8 100644 --- a/assets/scss/generic/_code.scss +++ b/assets/scss/generic/_code.scss @@ -13,7 +13,7 @@ pre { word-break: normal; word-wrap: normal; line-height: 1.5; - overflow: auto; + overflow-x: auto; tab-size: 4; hyphens: none; background: $code-background; diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 94551a7a0ff..ff302668ae9 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -93,6 +93,11 @@ html.no-js [data-aos] { @import "components/_titles"; @import "components/_values"; @import "components/_social-post"; +@import "components/quiz"; +@import "components/checkbox"; +@import "components/radio"; +@import "components/question"; + // generic @import "generic/_a"; diff --git a/templates/blog/article.html.twig b/templates/blog/article.html.twig index 93ceaaafd1a..35a192e1fd0 100644 --- a/templates/blog/article.html.twig +++ b/templates/blog/article.html.twig @@ -219,6 +219,7 @@ {% endif %} {% endif %} + {% include 'blog/quiz.html.twig' %} {% endblock content %} {% block javascripts %} diff --git a/templates/blog/quiz.html.twig b/templates/blog/quiz.html.twig new file mode 100644 index 00000000000..db1949b2c6d --- /dev/null +++ b/templates/blog/quiz.html.twig @@ -0,0 +1,158 @@ +
+

+ Testez vos + connaissances_ +

+
+ +
+

Quels sont les emojis préférés de Maxime Colin?

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+

Quels sont les emojis préférés de Maxime Colin?

+
+
+ +
+
+ +
+
+ +
+
+
+ +
+

Quels sont les emojis préférés de Maxime Colin?

+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+

Quels sont les emojis préférés de Maxime Colin?

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ La bonne réponse est : + Lorem ipsum dolor sit amet. +
+ +
+ Les bonnes réponses sont : + Lorem ipsum dolor sit amet. + Lorem ipsum dolor sit amet. +
+
+ +
+

Quels sont les emojis préférés de Maxime Colin?

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+

Quels sont les emojis préférés de Maxime Colin?

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ La bonne réponse est : +
#loading-hermine
+
+
+ +
+ +
+ +
+ 👏 + 80% + de bonnes réponses +
+