From 8840be099599be06ca853242b08e8d53f243fd8f Mon Sep 17 00:00:00 2001
From: Erin Power <xampprocky@gmail.com>
Date: Wed, 1 Jul 2020 10:20:25 +0200
Subject: [PATCH 1/2] refine highlight's spacing and border-radius

---
 src/styles/app.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 51f34f9e2..704db554b 100644
--- a/src/styles/app.scss
+++ b/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 {

From 79aaaabd390e57307e685baf32ec983ee31b40d0 Mon Sep 17 00:00:00 2001
From: Erin Power <xampprocky@gmail.com>
Date: Sat, 4 Jul 2020 17:34:41 +0200
Subject: [PATCH 2/2] adjust mobile

---
 src/styles/app.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 704db554b..fe956044e 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -626,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.
@@ -636,11 +643,6 @@ blockquote::before {
       font-size: 4rem;
     }
 
-    .highlight {
-      height: 20px;
-      top: -20px;
-    }
-
     h2.subtitle {
       font-size: 2.5rem;
       line-height: 1.1;