From f3e649f674b739a8f50460f809eb8df2c13ff576 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 7 Jan 2021 20:48:05 +0100 Subject: Optimized CSS for code blocks --- assets/css/_basics.scss | 12 ++++++------ assets/css/components/_page.scss | 10 ++++------ assets/css/scopes/_code.scss | 15 ++++----------- filters/common_actions.lua | 4 ++-- 4 files changed, 16 insertions(+), 25 deletions(-) diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index cbdfb9a..14c0391 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -46,10 +46,10 @@ code { pre { margin: ($line-height * 1em) 0 0; overflow-x: auto; - color: var(--code-block--fg); - font-size: $code-block--font-size; - line-height: $code-block--line-height; - text-overflow: ''; + + code { + color: currentColor; + } strong { font-weight: normal; @@ -180,8 +180,8 @@ hr { background-color: var(--obj); } -blockquote { - position: relative; +blockquote, +pre { margin: ($line-height * 1em) 0 0 1px; padding-left: calc(#{$subcontent--indent} - 3px); border-left: 2px solid var(--obj); diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss index 87d5413..a55bcb4 100644 --- a/assets/css/components/_page.scss +++ b/assets/css/components/_page.scss @@ -29,12 +29,6 @@ } } - &__code { - margin-left: 1px; - padding-left: calc(#{$subcontent--indent} - 3px); - border-left: 2px solid var(--obj); - } - &__prefixed { position: relative; margin-left: -1 * $page--item-prefix--width; @@ -82,6 +76,10 @@ margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor}); padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor}); border-left: 0; + color: var(--code-block--fg); + font-size: $code-block--font-size; + line-height: $code-block--line-height; + text-overflow: ''; &::before { content: str-repeat('``\A', 40); diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss index f024dbd..4a40d0f 100644 --- a/assets/css/scopes/_code.scss +++ b/assets/css/scopes/_code.scss @@ -1,22 +1,15 @@ .s-code { - pre, - code { - color: var(--fg-lo); + &--highlight { + pre { + color: var(--fg-lo); + } } pre { - overflow-x: auto; font-size: 1em; line-height: $line-height; } - &--plain { - pre, - code { - color: var(--fg); - } - } - /* stylelint-disable selector-class-pattern */ .c { diff --git a/filters/common_actions.lua b/filters/common_actions.lua index abb15a1..9ebcf17 100644 --- a/filters/common_actions.lua +++ b/filters/common_actions.lua @@ -2,11 +2,11 @@ function CodeBlock(el) if next(el.classes) == nil then el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--pre'} elseif el.classes[1] == "plain" then - el = pandoc.Div({el}, {class = 'c-page__code s-code s-code--plain'}) + el = pandoc.Div({el}, {class = 's-code'}) else local formatted = pandoc.pipe('pygmentize', { '-l', el.classes[1], '-f', 'html', '-O', - 'cssclass=c-page__code s-code' + 'cssclass=s-code s-code--highlight' }, el.text) el = pandoc.RawBlock('html', formatted) end -- cgit v1.2.3-54-g00ecf