From 834a75bba0e431c29da6ab48de11ca7e848fcba2 Mon Sep 17 00:00:00 2001
From: Ming Di Leom <2809763-curben@users.noreply.gitlab.com>
Date: Tue, 1 Mar 2022 08:46:10 +0000
Subject: [PATCH] feat(css): add border to <kbd>

- inspired by https://github.com/alvaromontoro/almond.css
---
 source/_posts/log4shell-log4j-unbound-dns.md | 2 +-
 themes/chameleon/source/css/_source.css      | 7 +++++++
 themes/chameleon/source/css/chameleon.css    | 7 +++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/source/_posts/log4shell-log4j-unbound-dns.md b/source/_posts/log4shell-log4j-unbound-dns.md
index c9cc273..c79bb43 100644
--- a/source/_posts/log4shell-log4j-unbound-dns.md
+++ b/source/_posts/log4shell-log4j-unbound-dns.md
@@ -93,7 +93,7 @@ forward-zone:
   forward-addr: 149.112.112.112
 ```
 
-_`Ctrl + X` to quit, press `Y` to save, `Enter` to confirm._
+<kbd>Ctrl</kbd> + <kbd>X</kbd> to quit, <kbd>Y</kbd> to save, <kbd>Enter</kbd> to confirm.
 
 > With the above config, Unbound will respond to _all_ IP, including _public_ IP if exposed to internet.
 
diff --git a/themes/chameleon/source/css/_source.css b/themes/chameleon/source/css/_source.css
index fbc6868..8e7f6ee 100644
--- a/themes/chameleon/source/css/_source.css
+++ b/themes/chameleon/source/css/_source.css
@@ -216,6 +216,13 @@ samp {
   font-size: 0.9em;
 }
 
+kbd {
+  border: 1px solid var(--alt-bg-color);
+  border-radius: 3px;
+  /* https://github.com/alvaromontoro/almond.css */
+  padding: 0.125rem 0.25rem;
+}
+
 /* set bg colour of single backtick wrap */
 p code {
   background: var(--alt-bg-color);
diff --git a/themes/chameleon/source/css/chameleon.css b/themes/chameleon/source/css/chameleon.css
index da0a560..ead3588 100644
--- a/themes/chameleon/source/css/chameleon.css
+++ b/themes/chameleon/source/css/chameleon.css
@@ -532,6 +532,13 @@ samp {
   font-size: 0.9em;
 }
 
+kbd {
+  border: 1px solid var(--alt-bg-color);
+  border-radius: 3px;
+  /* https://github.com/alvaromontoro/almond.css */
+  padding: 0.125rem 0.25rem;
+}
+
 /* set bg colour of single backtick wrap */
 p code {
   background: var(--alt-bg-color);