Final fixes

Author: amelie

assets/images/quiz/congrats.gif

@@ -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) {

assets/images/quiz/oh-no.gif

@@ -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;
   }
-}
+}

assets/images/quiz/well-done.gif

@@ -2,7 +2,7 @@
   margin-bottom: 2em;
 
   p {
-    margin-bottom: 1em; 
+    margin-bottom: 1em;
   }
 }
 
@@ -17,15 +17,16 @@
   font-size: 18px;
 
   .title {
+    margin: 0 0 7px;
     color: $color-danger;
     font-family: 'faktum bold';
   }
-  
+
   code {
-    font-size: 15px;
-    padding: .2em;
     margin: 0 0 .3em;
-    border-radius: 8px;
+    padding: .2em;
+    font-size: 15px;
+    border-radius: 5px;
   }
 }
 
@@ -38,11 +39,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: .6em .6em 1em;
+    font-size: 16px;
+  }
+}

assets/scss/components/_btn.scss

@@ -1,60 +1,133 @@
-.quiz {   
-  display: flex; 
+.quiz {
+  padding: 7em 5em 5em;
+  display: flex;
   flex-direction: column;
-  background-color: $color-dark;
-  padding: 7em 5em 5em; 
   color: #fff;
+  background-color: $color-dark;
 }
 
 .quiz__title  {
+  margin: 0 0 1.5em;
   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;
-}
-  
-.quiz__submit {
-  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;
+  span:last-of-type {
+    &:after {
+      content: '_';
+    }
   }
 }
 
 .quiz__answer {
-  margin-top: .8em;
-  color: #fff;
+  margin: .8em 0 0;
   padding: 0 .3em;
+  color: #fff;
+}
+
+.quiz__submit {
+  margin: 3em 0 0;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .quiz__score {
+  margin: 3em 0 0;
   display: flex;
-  align-self: center;
+  justify-content: space-between;
   align-items: center;
-  flex-direction: column;
-  font-family: 'faktum bold';
-  color: $color-light;
 
-  strong {
-    line-height: 1;
-    font-size: .7em;
+  .title {
+    margin: 0 0 20px;
+    font-family: 'faktum bold';
+    font-size: 40px;
+    text-transform: uppercase;
+
+    span {
+      margin-right: 17px;
+    }
   }
-  
-  .emoji {
-    font-size: 2.7em; 
-    margin: .3em; 
+
+  .detail {
+    margin-left: 69px;
+    padding-left: 25px;
+    display: flex;
+    flex-direction: column;
+    font-size: 24px;
+    border-left: solid 4px;
+
+    strong {
+      font-family: 'faktum bold';
+    }
   }
 
-  .percentage {
-    font-size: 3em;
+  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: 16px;
+  }
+
+  .quiz__score {
+    flex-direction: column;
+    text-align: center;
+
+    .detail {
+      margin: 0 0 35px;
+      padding: 0;
+      font-size: 20px;
+      border: none;
+    }
+  }
+}
+
+@media (max-width: $screen-xxs) {
+  .quiz__title {
+    margin: 0 0 1em;
+    font-size: 27px;
+  }
+}

assets/scss/components/checkbox.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;
   }
-}
+}