feat: kbd styles

Author: openscript

.changeset/giant-items-trade.md

@@ -0,0 +1,5 @@
+---
+"r.obin.ch": patch
+---
+
+Add <kbd> styles

src/layouts/DefaultLayout.css

@@ -189,12 +189,6 @@ pre {
   border-radius: var(--border-radius);
 }
 
-code {
-  background-color: var(--white-color-140);
-  border-radius: var(--border-radius);
-  padding: 0.15rem;
-}
-
 footer {
   display: flex;
   justify-content: space-between;
@@ -248,6 +242,30 @@ h6 {
   font-size: 1.1rem;
 }
 
+code, kbd {
+  background-color: var(--white-color-140);
+  border-radius: var(--border-radius);
+  padding: 0.15rem;
+}
+
+kbd {
+  border: 1px solid var(--primary-color);
+  box-shadow: 0 2px 0 1px var(--primary-color);
+  cursor: default;
+  font-size: 0.75em;
+  line-height: 1;
+  min-width: 0.75rem;
+  text-align: center;
+  padding: 2px 5px;
+  position: relative;
+  top: -1px;
+}
+
+kbd:hover {
+  box-shadow: 0 1px 0 0.5px var(--kbd-color-border);
+  top: 1px;
+}
+
 .label {
   font-family: var(--font-headings);
   font-size: 1.3rem;

src/style.css

@@ -120,6 +120,6 @@ h6,
   font-family: var(--font-headings);
 }
 
-code {
+code, kbd {
   font-family: var(--font-listings);
 }