fix styling of code blocks

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 13 insertions, 11 deletions

diff --git a/links/main.css b/links/main.css
index 2773b3f..013f7e5 100644
--- a/links/main.css
+++ b/links/main.css
@@ -9,6 +9,8 @@
   --body-spacing: 45px;
   --body-line-height: 1.3;
   --body-inline-padding: 15px;
+
+  --dashed: 1px dashed color-mix(in srgb, var(--bg) 80%, var(--fg));
 }
 
 ::selection {
@@ -141,24 +143,24 @@ main>q {
   margin-left: 30px;
 }
 
-main>pre {
+main pre {
   background: color-mix(in srgb, var(--bg) 95%, var(--fg));
-  border: 1px dashed color-mix(in srgb, var(--bg) 80%, var(--fg));
-  font-family: monospace;
+  border: var(--dashed);
   padding: var(--body-inline-padding);
+  margin-bottom: 30px;
+  overflow-x: scroll;
 }
 
-main>code {
+main code {
   font-family: monospace;
-  margin-bottom: 30px;
-  display: block;
-  background: var(--fg);
-  color: var(--bg);
-  padding: var(--body-inline-padding);
-  white-space: pre
 }
 
-main>code comment {
+main p>code {
+  border: var(--dashed);
+  padding: 1px 4px;
+}
+
+main code comment {
   color: #777
 }