diff options
-rw-r--r-- | assets/css/_basics.scss | 9 | ||||
-rw-r--r-- | assets/css/components/_ascii.scss | 14 | ||||
-rw-r--r-- | assets/css/scopes/_body.scss | 7 | ||||
-rw-r--r-- | content/9thPK7O3xn/index.md | 15 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 27 |
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 | ||
52 | pre { | 52 | pre { |
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 | |||
175 | blockquote, | ||
176 | pre { | ||
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 | |||
3 | layout: categorized_list | 3 | layout: 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 | |||
21 | Welcome to the personal section of my website! | 6 | Welcome to the personal section of my website! |
22 | 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. | 7 | 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 @@ | |||
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> |