css: Update code element styling for documentation pages.

Updates `markdown.css` to remove border styling from code
elements, and instead use background-color (as well as
font-family) to visually highlight inline code elements
as distinct from regular text.

Updates code element font-family to be the same as in
`zulip.css`.

Makes padding on the left and right the symmetrical for
inline code elements. Previously there was 4px padding on
the right, but not on the left.

Maintains anchor font-color styling for code elements that
are also links.
This commit is contained in:
Lauryn Menard 2023-02-20 20:24:37 +01:00 committed by Tim Abbott
parent 3c63025d88
commit 262debb72b
1 changed files with 8 additions and 6 deletions

View File

@ -217,6 +217,10 @@
a {
color: hsl(176, 46%, 41%);
font-weight: 600;
code {
color: hsl(176, 46%, 41%);
}
}
strong {
@ -363,20 +367,18 @@
}
code {
/* Different from zulip.css */
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
/* Same font-family as zulip.css */
font-family: "Source Code Pro", monospace;
/* Same as base rules for code elements in rendered_markdown.css */
font-size: 0.825em;
unicode-bidi: embed;
direction: ltr;
color: hsl(0, 0%, 0%);
border: 1px solid hsl(240, 13%, 90%);
border-radius: 3px;
/* Different from base rules for code elements in rendered_markdown.css */
white-space: initial;
padding: 0;
padding-right: 4px;
background-color: hsl(0, 0%, 100%);
padding: 0 4px;
background-color: hsl(0, 0%, 93%);
}
pre {