Poking at my <kbd>
I’ve had a really productive day working on the typography for a client’s site, and along the way I found myself giving the much-overlooked <kbd>
element a bit of a spruce-up.
Not that the client will likely be using the element much, but the thought struck me I hadn’t really done anything much to style it on this site and I use it a lot. It denotes input into a computer, and I use it every time I’m writing up a homelab project here.
So I knocked out this brief little styleset. Accuracy not guaranteed, especially the cursors.
ipconfig /all
sudo apt update
mdfind kMDItemAppStoreHasReceipt=1
CSS follows:
kbd { font-family: 'Courier', monospace; word-wrap: break-word; color: #f0f0f0; background-color: #222; padding: 0.25em; } kbd:before { } .cmd:before { content: "> "; } .bash:before { content: "$ "; color: #5fff00; } .zsh:before { content: "% "; } kbd:after { animation: opacityAnim 0.65s infinite linear; } .cmd:after, .bash:after { content: "_"; font-weight: bold; } .zsh:after { content: "▮"; } |