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 ++++----------- 3 files changed, 14 insertions(+), 23 deletions(-) (limited to 'assets') 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 { -- cgit v1.2.3-70-g09d2