Skip to content

Commit 5615112

Browse files
sludovicdelyssludovicdelys
authored
Merge 379e59d into fec6b68 
2 parents fec6b68 + 379e59d commit 5615112

13 files changed

+754
-235
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

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

‎assets/scss/components/quiz.scss

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

‎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";

0 commit comments

Comments
 (0)