fix: broken margin on mobile contact page

- allow fingerprints to break every 4 characters by replacing   with regular spaces, enabling normal wrapping
- replace inline code blocks with fenced code blocks for horizontal scrolling
- create class for adding padding to standalone code block

Author: ritorhymes

_includes/dev-keys.md

@@ -8,7 +8,11 @@
   {% else %}{% comment %}fallback to English{% endcomment %}
     {% assign _includes_dev_keys-name = "Name" %}
     {% assign _includes_dev_keys-fingerprint = "Fingerprint" %}
-    {% capture _includes_dev_keys-import %}You can import a key by running the following command with that individual's fingerprint: `gpg{{site.strings.gpg_keyserver}} --recv-keys "<fingerprint>"`  Ensure that you put quotes around fingerprints containing spaces.{% endcapture %}
+    {% capture _includes_dev_keys-import %}You can import a key by running the following command with that individual's fingerprint: 
+
+<pre class="highlight code-pad"><code>gpg{{ site.strings.gpg_keyserver }} --recv-keys "&lt;fingerprint&gt;"</code></pre>
+
+Ensure that you put quotes around fingerprints containing spaces.{% endcapture %}
 {% endcase %}
 {% endcapture %}
 
@@ -18,4 +22,4 @@
 | Michael Ford                | <code>{% include fingerprint-split.html hex="E777299FC265DD04793070EB944D35F9AC3DB76A" %}</code> |
 | Ava Chow                    | <code>{% include fingerprint-split.html hex="152812300785C96444D3334D17565732E08E5E41" %}</code> |
 
-{{_includes_dev_keys-import}}
+{{_includes_dev_keys-import}}

_includes/fingerprint-split.html

@@ -1 +1 @@
-{{include.hex | slice: 0, 4 }} {{include.hex | slice: 4, 4 }} {{include.hex | slice: 8, 4 }} {{include.hex | slice: 12, 4 }} {{include.hex | slice: 16, 4 }}  {{include.hex | slice: 20, 4 }} {{include.hex | slice: 24, 4 }} {{include.hex | slice: 28, 4 }} {{include.hex | slice: 32, 4 }} {{include.hex | slice: 36, 4 }}
+{{include.hex | slice: 0, 4 }} {{include.hex | slice: 4, 4 }} {{include.hex | slice: 8, 4 }} {{include.hex | slice: 12, 4 }} {{include.hex | slice: 16, 4 }}  {{include.hex | slice: 20, 4 }} {{include.hex | slice: 24, 4 }} {{include.hex | slice: 28, 4 }} {{include.hex | slice: 32, 4 }} {{include.hex | slice: 36, 4 }}

_sass/typography.scss

@@ -155,3 +155,6 @@ pre {
 	line-height: 1.5;
 	overflow-x: auto;
 }
+.code-pad {
+	padding: 0 .5rem;
+}