From 8d7901bf4d739014d2ad3be52194ec2179c247e5 Mon Sep 17 00:00:00 2001
From: M Fikri A <fikzzzy@gmail.com>
Date: Mon, 24 Aug 2020 17:13:41 +0700
Subject: [PATCH 1/2] Fix Missing Styles

---
 .../Specification/styles.scss                 | 202 ++++++++++++++----
 1 file changed, 158 insertions(+), 44 deletions(-)

diff --git a/src/shared/components/challenge-detail/Specification/styles.scss b/src/shared/components/challenge-detail/Specification/styles.scss
index 04b3f00171..80adf28096 100644
--- a/src/shared/components/challenge-detail/Specification/styles.scss
+++ b/src/shared/components/challenge-detail/Specification/styles.scss
@@ -113,67 +113,181 @@ $tc-link-visited: #0c4e98;
         padding-left: 17px;
       }
     }
+  }
 
-    img {
-      max-width: 100%;
-    }
+  h1 {
+    @include roboto-bold;
+
+    font-size: 28px;
+    color: #151516;
+    letter-spacing: -0.78px;
+    line-height: 40px;
+    margin: (10 * $base-unit) 0 (2 * $base-unit);
   }
-}
 
-h2 {
-  @include roboto-bold;
+  h2 {
+    @include roboto-bold;
 
-  font-size: 20px;
-  color: $tc-black;
-  line-height: 30px;
-  margin: (6 * $base-unit) 0 (2 * $base-unit);
-}
+    font-size: 20px;
+    color: $tc-black;
+    line-height: 30px;
+    margin: (6 * $base-unit) 0 (2 * $base-unit);
+  }
 
-h3 {
-  @include roboto-bold;
+  h3 {
+    @include roboto-bold;
 
-  font-size: 15px;
-  color: $tc-black;
-  line-height: 25px;
-  margin: (5 * $base-unit) 0 0;
-  text-transform: uppercase;
-}
+    font-size: 15px;
+    color: $tc-black;
+    line-height: 25px;
+    margin: (5 * $base-unit) 0 0;
+    text-transform: uppercase;
+  }
 
-p,
-em,
-strong {
-  @include roboto-regular;
+  h4 {
+    @include roboto-bold;
 
-  font-size: 15px;
-  color: $tc-gray-90;
-  line-height: 25px;
-}
+    margin: (4 * $base-unit) 0 (2 * $base-unit);
+    font-size: 15px;
+    line-height: 25px;
+    color: $tc-gray-90;
+  }
 
-p {
-  @include roboto-regular;
+  h5, h6 {
+    margin: (4 * $base-unit) 0 (2 * $base-unit);
+  }
 
-  font-size: 15px;
-  color: $tc-gray-90;
-  line-height: 25px;
+  p,
+  em,
+  strong {
+    @include roboto-regular;
 
-  @include linkStyle;
+    font-size: 15px;
+    color: $tc-gray-90;
+    line-height: 25px;
+  }
 
-  margin: (2 * $base-unit) 0 (3 * $base-unit);
-}
+  p {
+    @include roboto-regular;
 
-ul {
-  @include roboto-regular;
+    font-size: 15px;
+    color: $tc-gray-90;
+    line-height: 25px;
 
-  margin: 0 0 5px 20px;
-  font-size: 15px;
-  color: $tc-gray-90;
-  line-height: 25px;
-  list-style: disc outside none;
+    @include linkStyle;
+
+    margin: (2 * $base-unit) 0 (3 * $base-unit);
+  }
+
+  ul {
+    @include roboto-regular;
 
-  li {
+    margin: 0 0 5px 20px;
+    font-size: 15px;
+    color: $tc-gray-90;
+    line-height: 25px;
+    list-style: disc outside none;
+
+    li {
+      font-weight: 400;
+
+      @include linkStyle;
+    }
+  }
+
+  em {
+    @include roboto-regular;
+
+    font-style: italic;
     font-weight: 400;
+    font-size: 15px;
+    color: $tc-gray-90;
+    line-height: 25px;
+  }
 
-    @include linkStyle;
+  ol {
+    @include roboto-regular;
+
+    color: $tc-gray-80;
+    font-size: 15px;
+    line-height: 25px;
+    padding-left: 20px;
+    list-style-type: decimal;
+    margin: 0 0 5px;
+    counter-reset: item;
+    display: table;
+
+    li {
+      list-style-type: none;
+      font-weight: 400;
+      counter-increment: item;
+      display: table-row;
+      white-space: normal;
+
+      &::before {
+        display: table-cell;
+        font-weight: 700;
+        text-align: right;
+        content: counter(item) ".";
+        padding: 0 10px 0 0;
+      }
+    }
+  }
+
+  td,
+  th {
+    @include roboto-regular;
+
+    color: $tc-gray-80;
+    font-size: 15px;
+    line-height: 25px;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  code {
+    white-space: pre;
+    margin: 10px 0 15px;
+    background: $tc-gray-neutral-light;
+    border: 1px solid silver;
+    border-radius: 6px;
+    font-family: Roboto Mono, monospace;
+    font-weight: 400;
+    font-size: 13px;
+    color: $tc-black;
+    line-height: 20px;
+    padding: 15px;
+    display: block;
+  }
+
+  sub {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+    bottom: -0.25em;
+  }
+
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+    top: -.5em;
+  }
+
+  strong {
+    @include roboto-bold;
+
+    font-size: 15px;
+    color: $tc-gray-90;
+    line-height: 25px;
+  }
+
+  pre {
+    overflow-x: scroll;
   }
 }
 

From 30bb211370e2d8eec558261e660c55d422c8210a Mon Sep 17 00:00:00 2001
From: M Fikri A <fikzzzy@gmail.com>
Date: Mon, 24 Aug 2020 17:30:48 +0700
Subject: [PATCH 2/2] Fix Lint

---
 .../components/challenge-detail/Specification/styles.scss    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/challenge-detail/Specification/styles.scss b/src/shared/components/challenge-detail/Specification/styles.scss
index 80adf28096..90068d42d4 100644
--- a/src/shared/components/challenge-detail/Specification/styles.scss
+++ b/src/shared/components/challenge-detail/Specification/styles.scss
@@ -153,7 +153,8 @@ $tc-link-visited: #0c4e98;
     color: $tc-gray-90;
   }
 
-  h5, h6 {
+  h5,
+  h6 {
     margin: (4 * $base-unit) 0 (2 * $base-unit);
   }
 
@@ -275,7 +276,7 @@ $tc-link-visited: #0c4e98;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
-    top: -.5em;
+    top: -0.5em;
   }
 
   strong {