Better integration of ASCII art

5 files changed, 45 insertions, 27 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;
         }
diff --git a/content/9thPK7O3xn/index.md b/content/9thPK7O3xn/index.md
index ec475bd..2545092 100644
--- a/content/9thPK7O3xn/index.md
+++ b/content/9thPK7O3xn/index.md
@@ -3,20 +3,5 @@ title:  Personal
 layout: categorized_list
 ---
 
-<pre class="c-ascii u-dn@sm-lo">
-' |      '     '             '     '            '   | |    |           '     '  
-  |      '     '             '       <strong>//\_</strong>       '   | ' .  |           '     '  
- .|      '      <strong>____,...,______..,_~``  -`..,</strong>   '   |    ' |           '     '  
-  |       <strong>_,~´"'  ,               .    ,~--´</strong>    '  _|  | . |~~.__      '     '  
-| |    <strong>,-"    _.-|~/  |..,____,) ,/,,"'</strong>         '_( | '    |)    )     '     '  
- '|    <strong>\__,~"´   /:) /       |:\ \</strong>            ,~(    ) . | |  )   `,   '   _,--.
-   \   .   :    <strong>(:/\_-,      \:.\_-,</strong>    .  \ .\      .  :   \  .   ) . ' ,/     </pre>
-
-<pre class="c-ascii u-dn@sm-hi">
-.|   <strong>                  //\__</strong>      '  .'      |  . |           ' . ' 
- |   <strong>   _.~-"""-----~``  ,-´</strong>      '   '      |'   |           '   ' 
-'|   <strong>.´  ,~'\ ).,__,)/,,"   </strong>      ' . '      |  | |           '  .' 
- |_  <strong>`~´   (/\\,   (/\\,    </strong>     _'   '_    _| '  |_         _'   '_</pre>
-
 Welcome to the personal section of my website!
 Here you can find content I don't want to be easily accessible for all visitors, which is why I haven't linked this section anywhere.
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 0a881d2..7be9276 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,4 +1,29 @@
-<section class="l-section l-section--fullscreen l-section--no-head">
+<section class="l-section l-section--fullscreen">
+    <div class="c-ascii">
+        <pre class="c-ascii__fixed-content u-dn@sm-lo">
+                                                                                                                           
+  |                  |       |      '      '            '      '             '   |       |            '      '          |  
+  |                  |     ' |      '      '            '      '             '   |       |            '      '          |  
+' |                  |  .    |      '      '            '      '             '   |    :  |            '      '          |  
+  |               __~|  |    |      '      '            '      '             '   | |     |            '      '          | |
+  |__          ,(    |'      |_     '      '            '       <strong>//\_</strong>         '   | '  .  |            '      '          | '
+ '|   )~._   _(    . )      .|  )   '      <strong>____,...,______..,_~``  -`..,</strong>     '   |    '  |        . ( '      '          |  
+  |,     __´  )  (   |   |   |    `  <strong>_,~´"'  ,               .    ,~--´</strong>      '  _|  | .  |~~.__ ´     '      '__,.      |  
+| |  _.~(    _       |  '   ~(    <strong>,-"    _.-|~/  |..,____,) ,/,,"'</strong>           '_( | '     |)     )  .  '     (     )~-_  | '
+  | (_     (    ´    |    (  '    <strong>\__,~"´   /:) /       |:\ \</strong>              ,~(    ) .  | |  )    `,   '   _/- ..  ,  _) |  
+   ´   (  .      :  /    :        .   :    <strong>(:/\_-,      \:.\_-,</strong>      .  \ .\      .  :    \  .    ) . ' ,(      .      /   </pre>
+
+            <pre class="c-ascii__fixed-content u-dn@sm-hi">
+                                                                  
+  |     |            '    '             '   |     |        '    ' 
+  | '   |            '    '             '   |     |        '    ' 
+  |     |            '    '             '   |     |        '    ' 
+  |   . |            '    '     <strong>//\__</strong>   '   |  .  |        '    ' 
+  |     |        <strong>_.~-"""-----~``  ,-´</strong>   '   |'    |        '    ' 
+  | |  '|     <strong>.´  ,~'\ ).,__,)/,,"</strong>      '   |  |  |        '    ' 
+ _|     |_    <strong>`~´   (/\\,   (/\\,</strong>      _'  _| '   |_      _'    '_</pre>
+    </div>
+
     <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
         <div class="s-headlines s-colored-links">
             <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>