From 9466fb4fe0ca1cb3038005e38d60e406595a1408 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 13 May 2021 20:59:24 +0200 Subject: Better integration of ASCII art --- assets/css/_basics.scss | 9 +-------- assets/css/components/_ascii.scss | 14 +++++++++++--- assets/css/scopes/_body.scss | 7 +++++++ 3 files changed, 19 insertions(+), 11 deletions(-) (limited to 'assets/css') diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index b01e415..e216c01 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -50,7 +50,7 @@ code { } pre { - margin: ($line-height * 1rem) 0 0; + margin: 0; overflow-x: auto; line-height: 1.4; @@ -171,10 +171,3 @@ hr { border: 0; background-color: prop(--colors --obj-hi); } - -blockquote, -pre { - margin: ($line-height * 1rem) 0 0 1px; - padding-left: calc(#{prop(--dims --indent)} - 3px); - border-left: 3px solid prop(--colors --obj); -} diff --git a/assets/css/components/_ascii.scss b/assets/css/components/_ascii.scss index b32cbfd..7b5d269 100644 --- a/assets/css/components/_ascii.scss +++ b/assets/css/components/_ascii.scss @@ -7,19 +7,27 @@ )); @include component(namespace()) { - padding-left: 0; overflow: hidden; - border-left: 0; color: prop(--colors --fg); + font-family: $font-fam--mono; font-size: 1rem; + line-height: 1.4; &::after { - content: str-repeat('░', 120); + content: str-repeat('░', 500); display: block; margin-top: 1 / 16 * 2em; padding-top: 1 / 16 * 2em; border-top: 1px solid prop(--colors --border); color: prop(--colors --fg); } + + @include element('fixed-content') { + display: inline-block; + position: relative; + left: 50%; + overflow: visible; + transform: translateX(-50%); + } } } diff --git a/assets/css/scopes/_body.scss b/assets/css/scopes/_body.scss index 96231ad..b44e083 100644 --- a/assets/css/scopes/_body.scss +++ b/assets/css/scopes/_body.scss @@ -23,6 +23,13 @@ max-width: 100%; } + blockquote, + pre { + margin: ($line-height * 1rem) 0 0; + padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px); + border-left: 3px solid prop(--colors --obj, $global: true); + } + @include media('<=sm') { font-size: 1 / 16 * 17em; } -- cgit v1.2.3-70-g09d2