summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-05-13 20:59:24 +0200
committerVolpeon <git@volpeon.ink>2021-05-13 20:59:24 +0200
commit9466fb4fe0ca1cb3038005e38d60e406595a1408 (patch)
tree6e9b16a429fe6ff4e1765a756fd53f0377819b7d
parentRevert to classic link colors (diff)
downloadvolpeon.ink-9466fb4fe0ca1cb3038005e38d60e406595a1408.tar.gz
volpeon.ink-9466fb4fe0ca1cb3038005e38d60e406595a1408.tar.bz2
volpeon.ink-9466fb4fe0ca1cb3038005e38d60e406595a1408.zip
Better integration of ASCII art
-rw-r--r--assets/css/_basics.scss9
-rw-r--r--assets/css/components/_ascii.scss14
-rw-r--r--assets/css/scopes/_body.scss7
-rw-r--r--content/9thPK7O3xn/index.md15
-rw-r--r--templates/layouts/categorized_list.html27
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 {
50} 50}
51 51
52pre { 52pre {
53 margin: ($line-height * 1rem) 0 0; 53 margin: 0;
54 overflow-x: auto; 54 overflow-x: auto;
55 line-height: 1.4; 55 line-height: 1.4;
56 56
@@ -171,10 +171,3 @@ hr {
171 border: 0; 171 border: 0;
172 background-color: prop(--colors --obj-hi); 172 background-color: prop(--colors --obj-hi);
173} 173}
174
175blockquote,
176pre {
177 margin: ($line-height * 1rem) 0 0 1px;
178 padding-left: calc(#{prop(--dims --indent)} - 3px);
179 border-left: 3px solid prop(--colors --obj);
180}
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 @@
7 )); 7 ));
8 8
9 @include component(namespace()) { 9 @include component(namespace()) {
10 padding-left: 0;
11 overflow: hidden; 10 overflow: hidden;
12 border-left: 0;
13 color: prop(--colors --fg); 11 color: prop(--colors --fg);
12 font-family: $font-fam--mono;
14 font-size: 1rem; 13 font-size: 1rem;
14 line-height: 1.4;
15 15
16 &::after { 16 &::after {
17 content: str-repeat('░', 120); 17 content: str-repeat('░', 500);
18 display: block; 18 display: block;
19 margin-top: 1 / 16 * 2em; 19 margin-top: 1 / 16 * 2em;
20 padding-top: 1 / 16 * 2em; 20 padding-top: 1 / 16 * 2em;
21 border-top: 1px solid prop(--colors --border); 21 border-top: 1px solid prop(--colors --border);
22 color: prop(--colors --fg); 22 color: prop(--colors --fg);
23 } 23 }
24
25 @include element('fixed-content') {
26 display: inline-block;
27 position: relative;
28 left: 50%;
29 overflow: visible;
30 transform: translateX(-50%);
31 }
24 } 32 }
25} 33}
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 @@
23 max-width: 100%; 23 max-width: 100%;
24 } 24 }
25 25
26 blockquote,
27 pre {
28 margin: ($line-height * 1rem) 0 0;
29 padding-left: calc(#{prop(--dims --indent, $global: true)} - 3px);
30 border-left: 3px solid prop(--colors --obj, $global: true);
31 }
32
26 @include media('<=sm') { 33 @include media('<=sm') {
27 font-size: 1 / 16 * 17em; 34 font-size: 1 / 16 * 17em;
28 } 35 }
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
3layout: categorized_list 3layout: categorized_list
4--- 4---
5 5
6<pre class="c-ascii u-dn@sm-lo">
7' | ' ' ' ' ' | | | ' '
8 | ' ' ' <strong>//\_</strong> ' | ' . | ' '
9 .| ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | ' '
10 | <strong>_,~´"' , . ,~--´</strong> ' _| | . |~~.__ ' '
11| | <strong>,-" _.-|~/ |..,____,) ,/,,"'</strong> '_( | ' |) ) ' '
12 '| <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _,--.
13 \ . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,/ </pre>
14
15<pre class="c-ascii u-dn@sm-hi">
16.| <strong> //\__</strong> ' .' | . | ' . '
17 | <strong> _.~-"""-----~`` ,-´</strong> ' ' |' | ' '
18'| <strong>.´ ,~'\ ).,__,)/,," </strong> ' . ' | | | ' .'
19 |_ <strong>`~´ (/\\, (/\\, </strong> _' '_ _| ' |_ _' '_</pre>
20
21Welcome to the personal section of my website! 6Welcome to the personal section of my website!
22Here 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. 7Here 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 @@
1<section class="l-section l-section--fullscreen l-section--no-head"> 1<section class="l-section l-section--fullscreen">
2 <div class="c-ascii">
3 <pre class="c-ascii__fixed-content u-dn@sm-lo">
4
5 | | | ' ' ' ' ' | | ' ' |
6 | | ' | ' ' ' ' ' | | ' ' |
7' | | . | ' ' ' ' ' | : | ' ' |
8 | __~| | | ' ' ' ' ' | | | ' ' | |
9 |__ ,( |' |_ ' ' ' <strong>//\_</strong> ' | ' . | ' ' | '
10 '| )~._ _( . ) .| ) ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | . ( ' ' |
11 |, __´ ) ( | | | ` <strong>_,~´"' , . ,~--´</strong> ' _| | . |~~.__ ´ ' '__,. |
12| | _.~( _ | ' ~( <strong>,-" _.-|~/ |..,____,) ,/,,"'</strong> '_( | ' |) ) . ' ( )~-_ | '
13 | (_ ( ´ | ( ' <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _/- .. , _) |
14 ´ ( . : / : . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,( . / </pre>
15
16 <pre class="c-ascii__fixed-content u-dn@sm-hi">
17
18 | | ' ' ' | | ' '
19 | ' | ' ' ' | | ' '
20 | | ' ' ' | | ' '
21 | . | ' ' <strong>//\__</strong> ' | . | ' '
22 | | <strong>_.~-"""-----~`` ,-´</strong> ' |' | ' '
23 | | '| <strong>.´ ,~'\ ).,__,)/,,"</strong> ' | | | ' '
24 _| |_ <strong>`~´ (/\\, (/\\,</strong> _' _| ' |_ _' '_</pre>
25 </div>
26
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 27 <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
3 <div class="s-headlines s-colored-links"> 28 <div class="s-headlines s-colored-links">
4 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 29 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>