Clean up styling of pre and code blocks inside prose

Nate created

Change summary

server/static/prose.css     | 25 +++++++++++++------------
server/static/prose.css.map |  0 
server/static/prose.scss    | 21 ++++++++++-----------
server/styles.css           |  4 ++--
4 files changed, 25 insertions(+), 25 deletions(-)

Detailed changes

server/static/prose.css 🔗 

@@ -98,12 +98,6 @@ article.prose ul li:not(:last-of-type),
   margin-bottom: 0.2rem;
 }
 
-article.prose pre,
-.type-prose pre {
-  padding: 0.8rem;
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
 article.prose code,
 .type-prose code {
   font-family: "JetBrains Mono", "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", monospace;
@@ -114,7 +108,19 @@ article.prose code,
 article.prose :not(pre) > code,
 .type-prose :not(pre) > code {
   padding: 0.2rem 0.4rem;
-  background-color: rgba(255, 255, 255, 0.15);
+}
+
+article.prose pre,
+.type-prose pre {
+  padding: 0.8rem;
+}
+
+article.prose pre,
+article.prose :not(pre) > code,
+.type-prose pre,
+.type-prose :not(pre) > code {
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 /* Code Highlighting Styles
@@ -136,11 +142,6 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-pre[class*="language-"],
-:not(pre) > code[class*="language-"] {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-
 /* Code blocks */
 pre[class*="language-"]::-moz-selection {
   /* Firefox */

server/static/prose.scss 🔗 

@@ -83,11 +83,6 @@ article.prose,
     }
   }
 
-  pre {
-    padding: 0.8rem;
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-
   code {
     font-family: "JetBrains Mono", "Andale Mono WT", "Andale Mono",
       "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
@@ -100,7 +95,16 @@ article.prose,
 
   :not(pre) > code {
     padding: 0.2rem 0.4rem;
-    background-color: rgba(255, 255, 255, 0.15);
+  }
+
+  pre {
+    padding: 0.8rem;
+  }
+
+  pre,
+  :not(pre) > code {
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.1);
   }
 }
 
@@ -127,11 +131,6 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-pre[class*="language-"],
-:not(pre) > code[class*="language-"] {
-  background-color: rgba(255, 255, 255, 0.15);
-}
-
 /* Code blocks */
 pre[class*="language-"] {
   // Language specific code block styles

server/styles.css 🔗 

@@ -69,12 +69,12 @@
     background-color: rgba(255,255,255,0.06);
   }
 
-  :not(.type-prose) code {
+  /* div:not(.type-prose) code {
     background-color: rgba(255,255,255,0.15);
     padding: 0px 4px;
     border-radius: 2px;
     color: #eee;
-  }
+  } */
   
   /* This fixes scrollbar jump */
   @media screen and (min-width: 960px) {