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