From f3a3e07c354bf29bdfb71a9cc73c5e58cd887632 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Fri, 26 Apr 2024 05:48:44 +0100
Subject: [PATCH 1/2] Fix multi-line inline code styling

---
 CHANGELOG.md            |  2 ++
 styles/_code.scss       | 24 +++++-------------------
 styles/_typography.scss | 12 +++++++-----
 3 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88b9fa7..27df61b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,8 @@ Any non-code changes should be prefixed with `(docs)`.
 See `PUBLISH.md` for instructions on how to publish a new version.
 -->
 
+- (patch) Fix multi-line inline code styling
+
 
 ## v1.12.5 - fc90098
 
diff --git a/styles/_code.scss b/styles/_code.scss
index 2098a94..e989190 100644
--- a/styles/_code.scss
+++ b/styles/_code.scss
@@ -20,20 +20,11 @@ limitations under the License.
 // Inline code
 pre,
 code {
+    background-color: $gray8;
+    border-radius: 0.5em;
     color: $gray3;
     font-size: 0.875em;
-    padding: 0 0.2em;
-    position: relative;
-
-    &::before {
-        background-color: $gray8;
-        border-radius: 0.5em;
-        content: "";
-        display: block;
-        inset: -0.2em 0;
-        position: absolute;
-        z-index: -1;
-    }
+    padding: 0.2em;
 }
 
 // Code blocks
@@ -50,14 +41,9 @@ pre {
     white-space: normal;
     word-wrap: normal;
 
-    &,
-    code {
-        &::before {
-            display: none;
-        }
-    }
-
     code {
+        background: none;
+        border-radius: 0;
         color: inherit;
         font-size: 1em;
         padding: 0;
diff --git a/styles/_typography.scss b/styles/_typography.scss
index 400958e..824daa4 100644
--- a/styles/_typography.scss
+++ b/styles/_typography.scss
@@ -95,8 +95,7 @@ ol {
 
 // Links
 a {
-    background: linear-gradient($blue2, $blue2) bottom repeat-x;
-    background-size: 1px 1px;
+    background: linear-gradient($blue2, $blue2) center bottom / 100% 1px no-repeat;
     border-bottom: none;
     color: $blue2;
     text-decoration: none;
@@ -106,17 +105,20 @@ a {
 
     &:hover,
     &:focus {
-        background: linear-gradient($blue1, $blue1) bottom repeat-x;
-        background-size: 100% 100%;
+        background: linear-gradient($blue1, $blue1) center bottom / 100% 100% no-repeat;
         color: $white;
 
         code {
+            background: linear-gradient($blue1, $blue1) center calc(100% - 0.2em + 0.5px) / 100% calc(100% - (0.2em * 2)) no-repeat, linear-gradient($gray8, $gray8);
             color: $white;
         }
     }
 
     code {
-        transition: color 300ms ease-in-out;
+        background: linear-gradient($blue2, $blue2) center calc(100% - 0.2em + 0.5px) / 100% 1px no-repeat, linear-gradient($gray8, $gray8);
+        transition:
+            background 300ms ease-in-out,
+            color 300ms ease-in-out;
     }
 }
 

From 025afe497da9d18a352b7ef8cf748c084ce356ad Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Sat, 27 Apr 2024 03:56:39 +0100
Subject: [PATCH 2/2] Further tweak to the background of inline code inside
 links

---
 styles/_typography.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/styles/_typography.scss b/styles/_typography.scss
index 824daa4..e0be949 100644
--- a/styles/_typography.scss
+++ b/styles/_typography.scss
@@ -109,13 +109,17 @@ a {
         color: $white;
 
         code {
-            background: linear-gradient($blue1, $blue1) center calc(100% - 0.2em + 0.5px) / 100% calc(100% - (0.2em * 2)) no-repeat, linear-gradient($gray8, $gray8);
+            background:
+                linear-gradient($blue2, $blue2) center calc(100% - 0.2em + 0.5px) / 100% 1px no-repeat,
+                linear-gradient($gray8, $gray8) center top / 100% 0% no-repeat;
             color: $white;
         }
     }
 
     code {
-        background: linear-gradient($blue2, $blue2) center calc(100% - 0.2em + 0.5px) / 100% 1px no-repeat, linear-gradient($gray8, $gray8);
+        background:
+            linear-gradient($blue2, $blue2) center calc(100% - 0.2em + 0.5px) / 100% 1px no-repeat,
+            linear-gradient($gray8, $gray8) center top / 100% 100% no-repeat;
         transition:
             background 300ms ease-in-out,
             color 300ms ease-in-out;