From cdb1701af2e1b77b6565b74be84848a9e52fc1e0 Mon Sep 17 00:00:00 2001
From: Artem Kovalov <artem.kovalyov@gmail.com>
Date: Sun, 17 Oct 2021 11:47:05 +0200
Subject: [PATCH] Make <kbd> tag look more like a button

The <kbd> tag is often used in tech articles and it doesn't look nice at the moment. By the way, it's also looking wrong in the editor.
---
 assets/css/global.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/css/global.css b/assets/css/global.css
index f7df10ac54..3ca5df498f 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -169,8 +169,21 @@ svg:not(:root) {
 mark {
     background-color: #fdffb6;
 }
+kbd {
+  display: inline-block;
+  margin: 0, 0.1rem;
+  padding: 0.1em 0.6em;
+  overflow-wrap: break-word;
+  color: #232629;
+  background-color: #e3e6e8;
+  border: 1px solid #9fa6ad;
+  border-radius: 3px;
+  box-shadow: 0 1px 1px hsl(210deg 8% 5% / 15%),
+    inset 0 1px 0 0 hsl(0deg 0% 100%);
+  font-family: monospace;
+  line-height: 1.5;
+}
 code,
-kbd,
 pre,
 samp {
     font-family: monospace, monospace;