Update style of multiline code blocks (#240)

This commit is contained in:
Ameer J 2021-01-07 15:11:07 -05:00 committed by GitHub
parent 202bc1982c
commit 20f536e8a2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -4,6 +4,7 @@ $switch-yellow: #e6ff00;
$switch-deeppink: #ff3278;
$switch-lime: #1edc00;
$switch-gray: #828282;
$code-bg: #101010; // code tag background color
@each $name, $color in ("orangered", $switch-orangered), ("deepskyblue", $switch-deepskyblue),
("yellow", $switch-yellow), ("deeppink", $switch-deeppink), ("lime", $switch-lime), ("gray", $switch-gray) {
@ -103,12 +104,27 @@ a:hover {
line-height: 1.45;
}
// Fix background color of monospaced text
// Fix background color for single line monospaced text
.content :not(pre) > code {
background: #101010;
background: $code-bg;
}
code {
// Multiline code block container
.content pre {
padding: 16px;
overflow: auto;
line-height: 1.45;
background-color: $code-bg;
border-radius: 6px;
}
// Text color of multilne code block
pre > code {
color: #FFFFFF;
}
// Style of single line code block
:not(pre) > code {
color: #FFFFFF;
font-size: 0.875em;
font-weight: 400;