fix kbd style

Samu01Tech · Aug 23, 2023 · 6f13ee4 · 6f13ee4
1 parent 879515b
commit 6f13ee4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/content/blog/come-organizzo-la-mia-mail.md b/src/content/blog/come-organizzo-la-mia-mail.md
@@ -121,9 +121,9 @@ Se vi sembrano troppi click potete o usare il pulsante `Sposta in` che permette
 
 Sono tre cose da ricordare:
 
-1. Premendo <kbd>l<kbd> si apre, indovinate un po', la lista delle etichette (_label_) e possiamo selezionare quella desiderata, iniziando a scrivere il nome dell'etichetta e premendo `Invio` per applicarla
-2. Premendo `e` la mail viene archiviata e si passa alla mail successiva
-3. Con la combinazione `Alt Gr` + `à`, quindi in pratica digitando `#`, la mail viene invece spostata nel cestino.
+1. Premendo <kbd class="keyboard-shortcut">l</kbd> si apre, indovinate un po', la lista delle etichette (_label_) e possiamo selezionare quella desiderata, iniziando a scrivere il nome dell'etichetta e premendo `Invio` per applicarla
+2. Premendo <kbd class="keyboard-shortcut">e</kbd> la mail viene archiviata e si passa alla mail successiva
+3. Con la combinazione <kbd class="keyboard-shortcut">AltGr + à</kbd>, quindi in pratica digitando <kbd class="keyboard-shortcut">#</kbd>, la mail viene invece spostata nel cestino.
 
 Vedrete che con un po' di pratica riuscirete a smistare le mail in pochi secondi.
 

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -69,3 +69,17 @@ body {
   background-color: #ff0000;
   color: #fff;
 }
+
+.keyboard-shortcut {
+  /* Background and color */
+  background-color: rgb(209, 213, 219);
+  border-radius: 0.25rem;
+  color: rgb(55, 65, 81);
+
+  /* Bottom shadow */
+  box-shadow: rgb(167, 170, 175) 0px -4px 0px inset,
+    rgba(0, 0, 0, 0.4) 0px 1px 1px;
+
+  /* Spacing */
+  padding: 0.25rem 0.5rem;
+}