fix(shortcode): styles for email shortcode

src/assets/styles/components/email.css

@@ -0,0 +1,21 @@
+@import '../base/variables';
+@import '../base/breakpoints';
+
+/** Email */
+.lock-box {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  display: inline-flex;
+  height: 20px;
+  justify-content: center;
+  position: relative;
+  top: 0.2em;
+  width: 25px;
+}
+
+.lock-icon {
+  fill: var(--color-fg);
+  font-size: 1.2em;
+}

src/assets/styles/main.css

@@ -3,6 +3,9 @@
 @import 'base/breakpoints';
 @import 'base/videos';
 
+/* Layout */
+@import 'components/email';
+
 /* Layout */
 @import 'layout/page-footer';
 @import 'layout/footnotes';

src/utils/shortcodes.js

@@ -10,13 +10,13 @@ module.exports = {
       ${text}
     </a>`;
     const keyDownload = outdent`
-    <span id="lock-box" class="about-lock-box hidden">
+    <span id="lock-box" class="lock-box hidden">
       <a
         title="${downloadText}"
         aria-label="${downloadText}"
         href="/downloads/publickey.hey@imhoff.name-9cb867d4ccd2c1d7d9fde82f4b649797f3e007a9.asc"
       >
-        <svg class="about-lock-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
+        <svg class="lock-icon" aria-hidden="true" viewBox="0 0 24 24" width="1em" height="1em">
           <use xlink:href="#lock"></use>
         </svg>
       </a></span>`;