Correct font-size for inline code

1 files changed, 15 insertions, 0 deletions

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index c6e56d6..2edceda 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -27,7 +27,22 @@ a {
   }
 }
 
+// Browsers seem to use a smaller default font-size with monospaced code
+// blocks (like 80% of the size of normal text) and that looks pretty bad with
+// small inline code-blocks in the middle of normal text (mainly because of
+// the very noticeable difference in x-height). This CSS corrects that problem.
+code {
+  font-family: monospace,monospace;
+  font-size: 1em;
+}
+
 pre {
+  // A larger monospaced block of text (that isn't mixed with normal text)
+  // generally looks heavier than normal text with the same font size. For this
+  // reason using a smaller monospaced font size makes sense in this situation.
+  code {
+    font-size: .8em;
+  }
   overflow: auto;
 }