Skip to content

Commit

Permalink
quiz partial
Browse files Browse the repository at this point in the history
  • Loading branch information
sludovicdelys committed Sep 2, 2021
2 parents 6cb697f + 64845ce commit 6fdea50
Show file tree
Hide file tree
Showing 9 changed files with 392 additions and 309 deletions.
Binary file added assets/images/quiz/congrats.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/quiz/oh-no.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/quiz/well-done.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions assets/scss/components/_btn.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@
}
}

.btn--light {
color: $color-dark;
background: $color-light;
}

.btn--animated {
.icon {
width: 40px;
Expand Down Expand Up @@ -117,6 +122,13 @@
stroke: $color-primary;
}
}

&.btn--light {
.icon .base,
.icon .tip {
stroke: $color-info;
}
}
}

@media (max-width: $screen-xs) {
Expand Down
31 changes: 17 additions & 14 deletions assets/scss/components/checkbox.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}

Expand All @@ -22,7 +26,7 @@

.checkbox__label {
position: relative;
font-size: .8em;
display: flex;
line-height: 1.3;

&::before {
Expand All @@ -32,7 +36,7 @@
background-color: #fff;
position: absolute;
top: 0;
left: -35px;
left: -30px;
cursor: pointer;
}
}
Expand All @@ -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;
}
}
}
37 changes: 22 additions & 15 deletions assets/scss/components/question.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}

Expand All @@ -38,11 +38,18 @@
.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;
}
}
137 changes: 102 additions & 35 deletions assets/scss/components/quiz.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}

@media (max-width: $screen-xxs) {
.quiz__title {
margin: 0 0 30px;
font-size: 1.6em;
}
}
18 changes: 9 additions & 9 deletions assets/scss/components/radio.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}

Expand All @@ -26,7 +26,7 @@

.radio__label {
position: relative;
font-size: .8em;
display: flex;
line-height: 1.3;

&::before {
Expand All @@ -36,7 +36,7 @@
border-radius: 50%;
position: absolute;
top: 1px;
left: -37px;
left: -30px;
cursor: pointer;
background-color: #fff;
}
Expand All @@ -53,4 +53,4 @@
left: -35px;
top: 3px;
}
}
}
Loading

0 comments on commit 6fdea50

Please sign in to comment.