refine highlight's spacing and border-radius (#1165)

* refine highlight's spacing and border-radius

* adjust mobile

Author: XAMPPRocky

src/styles/app.scss

@@ -344,11 +344,12 @@ h3 {
 .highlight {
   height: 12px;
   position: relative;
-  top: -6px;
+  top: 0;
   left: -10px;
   width: 120%;
   max-width: 90vw;
   line-height: 1.6;
+  border-radius: 2px;
 }
 
 footer {
@@ -625,6 +626,13 @@ blockquote::before {
   font-weight: 600;
 }
 
+@media screen and (max-width: 769px) {
+  .highlight {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+
 // Temporary HACK: switch away from this when we switch to using Tachyons for
 // the page titles -- at that time, we should make a simple component class that
 // just composes those classes.
@@ -635,11 +643,6 @@ blockquote::before {
       font-size: 4rem;
     }
 
-    .highlight {
-      height: 20px;
-      top: -20px;
-    }
-
     h2.subtitle {
       font-size: 2.5rem;
       line-height: 1.1;