Units

Elao · Sep 1, 2021 · 64845ce · 64845ce
1 parent 379e59d
commit 64845ce
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 28 deletions.
diff --git a/assets/scss/components/question.scss b/assets/scss/components/question.scss
@@ -1,31 +1,30 @@
 .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 {
     margin: 0 0 7px;
-    color: $color-danger;
     font-family: 'faktum bold';
+    color: $color-danger;
   }
 
   code {
     margin: 0 0 .3em;
-    padding: .2em;
-    font-size: 15px;
+    padding: 2px 4px;
     border-radius: 5px;
   }
 }
@@ -50,7 +49,7 @@
 
 @media (max-width: $screen-sm) {
   .question__info {
-    padding: .6em .6em 1em;
-    font-size: 16px;
+    padding: 10px 10px 15px;
+    font-size: 1em;
   }
 }
diff --git a/assets/scss/components/quiz.scss b/assets/scss/components/quiz.scss
@@ -1,13 +1,13 @@
 .quiz {
-  padding: 7em 5em 5em;
+  padding: 140px 100px 100px;
   display: flex;
   flex-direction: column;
   color: #fff;
   background-color: $color-dark;
 }
 
 .quiz__title  {
-  margin: 0 0 1.5em;
+  margin: 0 0 70px;
   display: flex;
   flex-direction: column;
   font-family: 'faktum bold';
@@ -22,28 +22,22 @@
   }
 }
 
-.quiz__answer {
-  margin: .8em 0 0;
-  padding: 0 .3em;
-  color: #fff;
-}
-
 .quiz__submit {
-  margin: 3em 0 0;
+  margin: 60px 0 0;
   display: flex;
   justify-content: flex-end;
 }
 
 .quiz__score {
-  margin: 3em 0 0;
+  margin: 60px 0 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   .title {
     margin: 0 0 20px;
     font-family: 'faktum bold';
-    font-size: 40px;
+    font-size: 2.5em;
     text-transform: uppercase;
 
     span {
@@ -56,7 +50,7 @@
     padding-left: 25px;
     display: flex;
     flex-direction: column;
-    font-size: 24px;
+    font-size: 1.5em;
     border-left: solid 4px;
 
     strong {
@@ -109,7 +103,7 @@
 @media (max-width: $screen-sm) {
   .quiz {
     padding: 80px 25px 100px;
-    font-size: 16px;
+    font-size: 1em;
   }
 
   .quiz__score {
@@ -119,15 +113,15 @@
     .detail {
       margin: 0 0 35px;
       padding: 0;
-      font-size: 20px;
+      font-size: 1.25em;
       border: none;
     }
   }
 }
 
 @media (max-width: $screen-xxs) {
   .quiz__title {
-    margin: 0 0 1em;
-    font-size: 27px;
+    margin: 0 0 30px;
+    font-size: 1.6em;
   }
 }