From d3b959314f2ec492750a717c3f16d867e3a696d1 Mon Sep 17 00:00:00 2001 From: ameerj <52414509+ameerj@users.noreply.github.com> Date: Thu, 7 Jan 2021 14:23:25 -0500 Subject: [PATCH] Update style of multiline code blocks --- src/scss/yuzu/yuzu.scss | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/scss/yuzu/yuzu.scss b/src/scss/yuzu/yuzu.scss index 630f844e..51c961f8 100644 --- a/src/scss/yuzu/yuzu.scss +++ b/src/scss/yuzu/yuzu.scss @@ -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;