From 1eb424083aedd1cb7126b17d822647752eeb7339 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Thu, 3 Feb 2022 17:35:07 +0100
Subject: [PATCH] fix(shortcode): styles for email shortcode

---
 src/assets/styles/components/email.css | 21 +++++++++++++++++++++
 src/assets/styles/main.css             |  3 +++
 src/utils/shortcodes.js                |  4 ++--
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/styles/components/email.css

diff --git a/src/assets/styles/components/email.css b/src/assets/styles/components/email.css
new file mode 100644
index 0000000..61c3a5d
--- /dev/null
+++ b/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;
+}
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index ddb8735..30daeff 100644
--- a/src/assets/styles/main.css
+++ b/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';
diff --git a/src/utils/shortcodes.js b/src/utils/shortcodes.js
index 7fc4f95..a78fd34 100644
--- a/src/utils/shortcodes.js
+++ b/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>`;