Skip to content

Commit be5e54c

Browse files
sludovicdelyssludovicdelys
authored
Merge 6fdea50 into b78be84 
2 parents b78be84 + 6fdea50 commit be5e54c

14 files changed

+471
-6
lines changed

‎assets/images/quiz/congrats.gif

525 KB
Loading

‎assets/images/quiz/oh-no.gif

1.57 MB
Loading

‎assets/images/quiz/well-done.gif

1.24 MB
Loading

‎assets/scss/_normalize.scss

-4
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,6 @@ hr {
6868
height: 0;
6969
}
7070

71-
pre {
72-
overflow: auto;
73-
}
74-
7571
code,
7672
kbd,
7773
pre,

‎assets/scss/base/_variables.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ $color-dark: #0d3a5a;
77
$color-light: #2ecccb;
88
$color-text: #390725;
99
$color-info: #1e7695;
10+
$color-danger: #ef4055;
1011
$color-warning: #dbb371;
12+
$color-success: #00cc99;
1113

1214
// Breakpoints
1315
$screen-lg: 1280px; // desktop
@@ -22,4 +24,4 @@ $code-background: #fee3e4;
2224
$code-primary: #7f1A55;
2325
$code-tertiary: #f4756d;
2426
$code-info: #1e7695;
25-
$code-mute: #616161;
27+
$code-mute: #616161;

‎assets/scss/components/_btn.scss

+12
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@
5555
}
5656
}
5757

58+
.btn--light {
59+
color: $color-dark;
60+
background: $color-light;
61+
}
62+
5863
.btn--animated {
5964
.icon {
6065
width: 40px;
@@ -117,6 +122,13 @@
117122
stroke: $color-primary;
118123
}
119124
}
125+
126+
&.btn--light {
127+
.icon .base,
128+
.icon .tip {
129+
stroke: $color-info;
130+
}
131+
}
120132
}
121133

122134
@media (max-width: $screen-xs) {

‎assets/scss/components/checkbox.scss

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.checkbox {
2+
margin-bottom: .6em;
3+
padding-left: 30px;
4+
color: #fff;
5+
6+
code {
7+
font-size: 15px;
8+
background-color: #fff;
9+
color: $color-dark;
10+
padding: .2em;
11+
border-radius: 5px;
12+
}
13+
14+
pre {
15+
margin: 0;
16+
width: 100%;
17+
background-color: #fff !important;
18+
padding: .5em;
19+
border-radius: 5px;
20+
}
21+
}
22+
23+
.checkbox__input {
24+
display: none;
25+
}
26+
27+
.checkbox__label {
28+
position: relative;
29+
display: flex;
30+
line-height: 1.3;
31+
32+
&::before {
33+
content: '';
34+
width: 20px;
35+
height: 20px;
36+
background-color: #fff;
37+
position: absolute;
38+
top: 0;
39+
left: -30px;
40+
cursor: pointer;
41+
}
42+
}
43+
44+
.checkbox__input:checked + .checkbox__label {
45+
&::after {
46+
font-family: 'icomoon';
47+
content: '\e918';
48+
position: absolute;
49+
left: -33px;
50+
top: 1px;
51+
color: $color-dark;
52+
}
53+
}

‎assets/scss/components/question.scss

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
.question {
2+
margin-bottom: 40px;
3+
4+
p {
5+
margin-bottom: 20px;
6+
}
7+
}
8+
9+
.question__info {
10+
margin-top: 30px;
11+
padding: 15px 10px;
12+
display: flex;
13+
flex-direction: column;
14+
font-family: 'faktum regular';
15+
font-size: 1.1em;
16+
color: $color-dark;
17+
background-color: #fff;
18+
19+
.title {
20+
margin: 0 0 7px;
21+
font-family: 'faktum bold';
22+
color: $color-danger;
23+
}
24+
25+
code {
26+
margin: 0 0 .3em;
27+
padding: 2px 4px;
28+
border-radius: 5px;
29+
}
30+
}
31+
32+
.question--answered {
33+
.question__content {
34+
padding-left: 20px;
35+
}
36+
}
37+
38+
.question--success {
39+
.question__content {
40+
border-left: solid 4px $color-success;
41+
}
42+
}
43+
44+
.question--error {
45+
.question__content {
46+
border-left: solid 4px $color-danger;
47+
}
48+
}
49+
50+
@media (max-width: $screen-sm) {
51+
.question__info {
52+
padding: 10px 10px 15px;
53+
font-size: 1em;
54+
}
55+
}

‎assets/scss/components/quiz.scss

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
.quiz {
2+
padding: 140px 100px 100px;
3+
display: flex;
4+
flex-direction: column;
5+
color: #fff;
6+
background-color: $color-dark;
7+
}
8+
9+
.quiz__title {
10+
margin: 0 0 70px;
11+
display: flex;
12+
flex-direction: column;
13+
font-family: 'faktum bold';
14+
font-size: 2.3em;
15+
color: $color-light;
16+
line-height: 1.2;
17+
18+
span:last-of-type {
19+
&:after {
20+
content: '_';
21+
}
22+
}
23+
}
24+
25+
.quiz__submit {
26+
margin: 60px 0 0;
27+
display: flex;
28+
justify-content: flex-end;
29+
}
30+
31+
.quiz__score {
32+
margin: 60px 0 0;
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: center;
36+
37+
.title {
38+
margin: 0 0 20px;
39+
font-family: 'faktum bold';
40+
font-size: 2.5em;
41+
text-transform: uppercase;
42+
43+
span {
44+
margin-right: 17px;
45+
}
46+
}
47+
48+
.detail {
49+
margin-left: 69px;
50+
padding-left: 25px;
51+
display: flex;
52+
flex-direction: column;
53+
font-size: 1.5em;
54+
border-left: solid 4px;
55+
56+
strong {
57+
font-family: 'faktum bold';
58+
}
59+
}
60+
61+
img {
62+
margin: 0;
63+
width: 380px;
64+
}
65+
}
66+
67+
.quiz__score--excellent {
68+
.title {
69+
color: $color-light;
70+
}
71+
72+
.detail {
73+
border-color: $color-light;
74+
75+
strong {
76+
color: $color-light;
77+
}
78+
}
79+
}
80+
81+
.quiz__score--improvable {
82+
.title {
83+
color: $color-danger;
84+
}
85+
86+
.detail {
87+
border-color: $color-danger;
88+
89+
strong {
90+
color: $color-danger;
91+
}
92+
}
93+
}
94+
95+
@media (max-width: $screen-md) {
96+
.quiz__score {
97+
img {
98+
width: 320px;
99+
}
100+
}
101+
}
102+
103+
@media (max-width: $screen-sm) {
104+
.quiz {
105+
padding: 80px 25px 100px;
106+
font-size: 1em;
107+
}
108+
109+
.quiz__score {
110+
flex-direction: column;
111+
text-align: center;
112+
113+
.detail {
114+
margin: 0 0 35px;
115+
padding: 0;
116+
font-size: 1.25em;
117+
border: none;
118+
}
119+
}
120+
}
121+
122+
@media (max-width: $screen-xxs) {
123+
.quiz__title {
124+
margin: 0 0 30px;
125+
font-size: 1.6em;
126+
}
127+
}

‎assets/scss/components/radio.scss

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.radio {
2+
margin-bottom: .6em;
3+
padding-left: 30px;
4+
color: #fff;
5+
6+
code {
7+
font-size: 15px;
8+
background-color: #fff;
9+
color: $color-dark;
10+
padding: .2em;
11+
border-radius: 5px;
12+
}
13+
14+
pre {
15+
margin: 0;
16+
width: 100%;
17+
background-color: #fff !important;
18+
padding: .5em;
19+
border-radius: 5px;
20+
}
21+
}
22+
23+
.radio__input {
24+
display: none;
25+
}
26+
27+
.radio__label {
28+
position: relative;
29+
display: flex;
30+
line-height: 1.3;
31+
32+
&::before {
33+
content: '';
34+
height: 18px;
35+
width: 18px;
36+
border-radius: 50%;
37+
position: absolute;
38+
top: 1px;
39+
left: -30px;
40+
cursor: pointer;
41+
background-color: #fff;
42+
}
43+
}
44+
45+
.radio__input:checked + .radio__label {
46+
&::after {
47+
content: '';
48+
position: absolute;
49+
height: 14px;
50+
width: 14px;
51+
border-radius: 50%;
52+
background: #0d3a5a;
53+
left: -35px;
54+
top: 3px;
55+
}
56+
}

‎assets/scss/generic/_code.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ pre {
1313
word-break: normal;
1414
word-wrap: normal;
1515
line-height: 1.5;
16-
overflow: auto;
16+
overflow-x: auto;
1717
tab-size: 4;
1818
hyphens: none;
1919
background: $code-background;

‎assets/scss/style.scss

+5
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,11 @@ html.no-js [data-aos] {
9393
@import "components/_titles";
9494
@import "components/_values";
9595
@import "components/_social-post";
96+
@import "components/quiz";
97+
@import "components/checkbox";
98+
@import "components/radio";
99+
@import "components/question";
100+
96101

97102
// generic
98103
@import "generic/_a";

‎templates/blog/article.html.twig

+1
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@
219219
{% endif %}
220220
</div>
221221
{% endif %}
222+
{% include 'blog/quiz.html.twig' %}
222223
{% endblock content %}
223224

224225
{% block javascripts %}

0 commit comments

Comments
 (0)