theme: distinguish code better

I found it really hard to read what was actually code, so this change
adds a very subtle hint of colour around all the code which has cheeky
border radii. I've also cheekily made the font a tiny bit smaller for
inline code so that even with the required padding, it does not mess up
the line spacing visibly.

themes/lix/assets/scss/shared/_blockquote.scss

@@ -0,0 +1,21 @@
+@use 'sass:color';
+
+$blockquote-y-padding: 0.7rem;
+
+blockquote {
+  border-left-color: desaturate($primary, 20%);
+  border-left-width: 0.4rem;
+  border-left-style: solid;
+  padding-left: 0.5rem;
+  padding-top: $blockquote-y-padding;
+  padding-bottom: $blockquote-y-padding;
+
+  >:first-child {
+    margin-top: 0;
+  }
+
+  >:last-child {
+    margin-bottom: 0;
+  }
+}
+

themes/lix/assets/scss/shared/_code.scss

@@ -0,0 +1,12 @@
+$code-colour: darken($light, 5%);
+pre {
+  background-color: $code-colour;
+  padding: 0.8rem;
+  border-radius: 0.5rem;
+}
+:not(pre)>code {
+  background-color: $code-colour;
+  font-size: 0.85em;
+  padding: 0.2em;
+  border-radius: 0.3em;
+}

themes/lix/assets/scss/shared/shared.scss

@@ -3,6 +3,8 @@
 @import "fonts";
 @import "utilities";
 
+@import "blockquote";
+@import "code";
 @import "header";
 @import "footer";
 @import "buttons";