Skip to content

Commit 97e55f8

Browse files
Add custom styling for <kbd> tags
kbd html tags can be used to specify keyboard input - that is, styling sections of text like keys on a keyboard. I have added custom styling borrowed from [auth0's kbd](https://github.com/auth0/kbd( code. This is useful as Obsidian and Quartz by default style kbd tags the same as code or fenced code within backticks, reducing readability for users as it is difficult to discern what is code vs what are keyboard commands.
1 parent 5732bff commit 97e55f8

File tree

2 files changed

+118
-0
lines changed

2 files changed

+118
-0
lines changed
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*---- kbd styling ----*/
2+
3+
kbd {
4+
font-family: Consolas, "Lucida Console", monospace;
5+
display: inline-block;
6+
border-radius: 3px;
7+
padding: 0px 4px;
8+
box-shadow: 1px 1px 1px #777;
9+
margin: 2px;
10+
font-size: small;
11+
vertical-align: text-bottom;
12+
background: #eee;
13+
font-weight: 500;
14+
color: #555;
15+
/*cursor: pointer;*/
16+
font-variant: small-caps;
17+
font-weight: 600;
18+
line-height: 1.1rem;
19+
20+
/* This two work */
21+
/* letter-spacing: 0.5px; */
22+
letter-spacing: 1px;
23+
24+
25+
/* Prevent selection */
26+
-webkit-touch-callout: none;
27+
-webkit-user-select: none;
28+
-khtml-user-select: none;
29+
-moz-user-select: none;
30+
-ms-user-select: none;
31+
user-select: none;
32+
}
33+
34+
kbd:hover, kbd:hover * {
35+
color: black;
36+
/* box-shadow: 1px 1px 1px #333; */
37+
}
38+
kbd:active, kbd:active * {
39+
color: black;
40+
box-shadow: 1px 1px 0px #ddd inset;
41+
}
42+
43+
kbd kbd {
44+
padding: 0px;
45+
margin: 0 1px;
46+
box-shadow: 0px 0px 0px black;
47+
vertical-align: baseline;
48+
background: none;
49+
}
50+
51+
kbd kbd:hover {
52+
box-shadow: 0px 0px 0px black;
53+
}
54+
55+
kbd:active kbd {
56+
box-shadow: 0px 0px 0px black;
57+
background: none;
58+
}
59+

quartz/styles/custom.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -777,3 +777,62 @@ img[alt~=border],
777777
.img-adj-list :is(ul, ol) {
778778
display: flow-root;
779779
}
780+
781+
/*---- kbd styling ----*/
782+
783+
kbd {
784+
font-family: Consolas, "Lucida Console", monospace;
785+
display: inline-block;
786+
border-radius: 3px;
787+
padding: 0px 4px;
788+
box-shadow: 1px 1px 1px #777;
789+
margin: 2px;
790+
font-size: small;
791+
vertical-align: text-bottom;
792+
background: #eee;
793+
font-weight: 500;
794+
color: #555;
795+
/*cursor: pointer;*/
796+
font-variant: small-caps;
797+
font-weight: 600;
798+
line-height: 1.1rem;
799+
800+
/* This two work */
801+
/* letter-spacing: 0.5px; */
802+
letter-spacing: 1px;
803+
804+
805+
/* Prevent selection */
806+
-webkit-touch-callout: none;
807+
-webkit-user-select: none;
808+
-khtml-user-select: none;
809+
-moz-user-select: none;
810+
-ms-user-select: none;
811+
user-select: none;
812+
}
813+
814+
kbd:hover, kbd:hover * {
815+
color: black;
816+
/* box-shadow: 1px 1px 1px #333; */
817+
}
818+
kbd:active, kbd:active * {
819+
color: black;
820+
box-shadow: 1px 1px 0px #ddd inset;
821+
}
822+
823+
kbd kbd {
824+
padding: 0px;
825+
margin: 0 1px;
826+
box-shadow: 0px 0px 0px black;
827+
vertical-align: baseline;
828+
background: none;
829+
}
830+
831+
kbd kbd:hover {
832+
box-shadow: 0px 0px 0px black;
833+
}
834+
835+
kbd:active kbd {
836+
box-shadow: 0px 0px 0px black;
837+
background: none;
838+
}

0 commit comments

Comments
 (0)