Better integration of ASCII art

3 files changed, 19 insertions, 11 deletions

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;
         }