From 61af66828b38e6163a2b7bdecd20079d4bed4b0b Mon Sep 17 00:00:00 2001 From: Tan Zhen Yong Date: Sat, 2 Oct 2021 19:20:32 +0800 Subject: [PATCH 1/2] Add monospace system font stack Let's add a system font stack for monospace fonts to give monospace elements a pleasing default font. This monospace font stack is based on GitHub's Primer design system [1]. [1]: https://github.com/primer/css/blob/main/src/support/variables/typography.scss#L39 --- .changeset/friendly-meals-cheat.md | 5 +++++ src/parts/_code.css | 7 +++++++ 2 files changed, 12 insertions(+) create mode 100644 .changeset/friendly-meals-cheat.md diff --git a/.changeset/friendly-meals-cheat.md b/.changeset/friendly-meals-cheat.md new file mode 100644 index 0000000..6fc2591 --- /dev/null +++ b/.changeset/friendly-meals-cheat.md @@ -0,0 +1,5 @@ +--- +"water.css": minor +--- + +Add monospace system font stack diff --git a/src/parts/_code.css b/src/parts/_code.css index 166fe1d..80262d4 100644 --- a/src/parts/_code.css +++ b/src/parts/_code.css @@ -8,6 +8,13 @@ time { font-size: 1em; } +pre, +code, +samp, +kbd { + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; +} + pre > code { padding: 10px; display: block; From 9dcec8a3746052cca4516baea7120ba29e446d4d Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 2 Oct 2021 19:41:00 -0400 Subject: [PATCH 2/2] Include var and make style more consistent --- src/parts/_code.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/parts/_code.css b/src/parts/_code.css index 80262d4..d0ef166 100644 --- a/src/parts/_code.css +++ b/src/parts/_code.css @@ -11,8 +11,9 @@ time { pre, code, samp, -kbd { - font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; +kbd, +var { + font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace; } pre > code { @@ -24,7 +25,6 @@ pre > code { var { color: var(--variable); font-style: normal; - font-family: monospace; } kbd {