Fix multi-line inline code styling

digitalocean · Apr 26, 2024 · f3a3e07 · f3a3e07
1 parent bd3bf91
commit f3a3e07
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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;
     }
 }