From 2ef598c07a721cb74c944044fa49aee4751c424f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 4 Mar 2020 14:56:24 +0100
Subject: [PATCH] code display tweaks

---
 src/styles/_code.scss      | 21 ++++++++++++++++++---
 src/styles/_variables.scss | 11 +++++------
 src/styles/global.scss     |  4 ++--
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/styles/_code.scss b/src/styles/_code.scss
index 367c72b0..6fae7c46 100644
--- a/src/styles/_code.scss
+++ b/src/styles/_code.scss
@@ -5,20 +5,24 @@ kbd,
 pre,
 samp {
   font-family: $font-family-monospace;
-  font-size: $font-size-mini * 1.1;
+  font-size: $font-size-small;
 }
 
 code,
 kbd {
-  padding: 0.1rem;
+  padding: 0.2rem 0.3rem;
 }
 
 code,
 samp {
   white-space: normal;
   color: inherit;
-  background-color: rgba($code-bg, 0.05);
+  background-color: $brand-grey-dimmed;
   border-radius: $border-radius;
+
+  :global(.dark) & {
+    background-color: rgba($code-bg, 0.7);
+  }
 }
 
 kbd {
@@ -42,6 +46,12 @@ pre {
   background-color: $code-bg;
   border-radius: $border-radius;
 
+  // overwrite Nord theme background color
+  &,
+  &:global(.nord) {
+    background-color: $code-bg;
+  }
+
   // make 'em scrollable
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -56,6 +66,11 @@ pre {
     word-wrap: normal;
     word-break: normal;
 
+    &,
+    :global(.dark) & {
+      background: none;
+    }
+
     @media (min-width: $screen-sm) {
       padding: $spacer;
     }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 20f22266..5c0d7ac3 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -29,8 +29,8 @@ $body-background-color--dark: darken($brand-grey, 22%);
 $text-color: $brand-grey;
 $text-color-light: $brand-grey-light;
 
-$text-color--dark: lighten($brand-grey-light, 10%);
-$text-color-light--dark: lighten($brand-grey-light, 5%);
+$text-color--dark: lighten($brand-grey-light, 15%);
+$text-color-light--dark: darken($brand-grey-light, 5%);
 
 $link-color: $brand-cyan;
 $link-color-hover: lighten($link-color, 10%);
@@ -53,15 +53,14 @@ $font-size-h4: 1.2rem;
 $font-size-h5: $font-size-large;
 $font-size-h6: $font-size-base;
 
-$line-height: 1.5;
+$line-height: 1.6;
 $line-height-small: 1.1428571429;
 
 $font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
   'Helvetica', 'Arial', 'sans-serif';
 $font-weight-base: 400;
 
-$font-family-monospace: 'Fira Code', 'Fira Mono', 'Menlo', 'Monaco', 'Consolas',
-  'Courier New', 'monospace';
+$font-family-monospace: 'Menlo', 'Consolas', 'Courier New', monospace;
 
 // Headings
 /////////////////////////////////////
@@ -87,7 +86,7 @@ $stroke-width: 0.125rem;
 // Code
 /////////////////////////////////////
 
-$code-bg: #343642;
+$code-bg: darken($brand-grey, 15%);
 $code-color: $brand-light;
 $kbd-bg: $code-bg;
 $kbd-color: $code-color;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 0449bcbc..865a8b30 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -209,13 +209,13 @@ img {
 
 figcaption {
   font-size: $font-size-small;
-  color: $brand-grey-light;
+  color: $text-color-light;
   font-style: italic;
   text-align: center;
   margin-top: ($spacer / 4);
 
   .dark & {
-    color: $brand-grey;
+    color: $text-color-light--dark;
   }
 }