From 3489cc1c030d7cdec60990da9f69438f34dc7f98 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Tue, 28 Nov 2023 01:43:27 -0600
Subject: [PATCH] Adjust for rehype-pretty-code, lighter inline highlighting,
 line highlighting, codeblock title

---
 src/styles/code.scss | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/styles/code.scss b/src/styles/code.scss
index 05cff11..be00ac6 100644
--- a/src/styles/code.scss
+++ b/src/styles/code.scss
@@ -1,7 +1,8 @@
+div[data-rehype-pretty-code-fragment],
 pre,
 code {
   font-family: "CMU Typewriter Text", monospace;
-  font-size: 0.8em;
+  font-size: 0.9em;
 }
 
 // Inline code styling
@@ -14,10 +15,10 @@ h4,
 h5,
 h6 {
   > code {
-    background-color: black;
+    background-color: rgba(18, 18, 18);
     padding: 0.1rem 0.27rem;
     border-radius: 3px;
-    border: 1px solid rgba(white, 0.5);
+    border: 1px solid rgba(white, 0.4);
     white-space: nowrap;
   }
 }
@@ -27,11 +28,30 @@ a > code {
   color: #90bcff;
 }
 
+div[data-rehype-pretty-code-fragment] {
+  div[data-rehype-pretty-code-title] {
+    text-align: center;
+  }
+
+  // Horizontal padding is applied on a line level to ensure highlighting is not affected.
+  padding: 1em 0;
+  background-color: #161616 !important;
+  > pre {
+    > code {
+      > span[data-line] {
+        padding: 0 1em;
+        &[data-highlighted-line] {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      }
+    }
+  }
+}
+
 pre {
-  background: rgb(25, 25, 25);
+  // background: rgb(25, 25, 25);
   border-radius: 5px;
-  padding: 1em;
-  
+
   &.astro-code {
     background-color: #191919 !important;
   }