summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/_utils.scss8
-rw-r--r--assets/css/components/_ascii.scss32
-rw-r--r--assets/css/components/_footer.scss38
-rw-r--r--assets/css/components/_outer-button.scss6
-rw-r--r--assets/css/layouts/_section.scss11
-rw-r--r--assets/css/style.scss1
-rw-r--r--templates/base.html9
-rw-r--r--templates/layouts/ascii_fox.html12
-rw-r--r--templates/layouts/ascii_fox_small.html8
-rw-r--r--templates/layouts/categorized_list.html27
-rw-r--r--templates/layouts/index.html2
11 files changed, 71 insertions, 83 deletions
diff --git a/assets/css/_utils.scss b/assets/css/_utils.scss
index 2284cf5..3ca80ff 100644
--- a/assets/css/_utils.scss
+++ b/assets/css/_utils.scss
@@ -52,6 +52,14 @@
52 } 52 }
53} 53}
54 54
55@include utility('mta') {
56 margin-top: auto;
57}
58
59@include utility('mla') {
60 margin-left: auto;
61}
62
55@include utility('db') { 63@include utility('db') {
56 display: block; 64 display: block;
57} 65}
diff --git a/assets/css/components/_ascii.scss b/assets/css/components/_ascii.scss
deleted file mode 100644
index e6bb39f..0000000
--- a/assets/css/components/_ascii.scss
+++ /dev/null
@@ -1,32 +0,0 @@
1@include namespace('ascii') {
2 @include store((
3 --colors: (
4 --fg: prop(--colors --fg-hi, $global: true),
5 --border: prop(--colors --fg-hi, $global: true),
6 )
7 ));
8
9 @include component(namespace()) {
10 overflow: hidden;
11 color: prop(--colors --fg);
12 font-family: $font-fam--mono;
13 line-height: 1.4;
14
15 &::after {
16 content: str-repeat('░', 400);
17 display: block;
18 margin-top: 1 / 16 * 2em;
19 padding-top: 1 / 16 * 2em;
20 border-top: 1px solid prop(--colors --border);
21 color: prop(--colors --fg);
22 }
23
24 @include element('fixed-content') {
25 display: inline-block;
26 position: relative;
27 left: 50%;
28 overflow: visible;
29 transform: translateX(-50%);
30 }
31 }
32}
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
index 4e809a4..2bd1fb1 100644
--- a/assets/css/components/_footer.scss
+++ b/assets/css/components/_footer.scss
@@ -2,26 +2,34 @@
2 @include store(( 2 @include store((
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --obj, $global: true), 4 --fg: prop(--colors --obj, $global: true),
5 --border: prop(--colors --obj-hi, $global: true), 5 --ground: prop(--colors --obj, $global: true),
6 ) 6 )
7 )); 7 ));
8 8
9 @include component(namespace()) { 9 @include component(namespace()) {
10 display: flex; 10 position: relative;
11 position: relative; 11 min-height: prop(--dims --outer, $global: true);
12 align-items: center; 12 margin-top: calc(2 * #{prop(--container --dims --pad-y, $global: true)});
13 justify-content: space-between; 13 color: prop(--colors --fg);
14 height: prop(--dims --outer, $global: true); 14 font-family: $font-fam--mono;
15 line-height: 1.4;
15 16
16 @include element('content') { 17 &::after {
17 width: 100%; 18 content: str-repeat('░', 400);
18 height: 100%; 19 display: block;
19 margin-top: -1px; 20 margin-top: 1 / 16 * 2em;
20 margin-right: prop(--container --dims --pad-x, $global: true); 21 padding-top: 1 / 16 * 2em;
21 margin-left: prop(--container --dims --pad-x, $global: true); 22 overflow: hidden;
22 border-top: 1px solid prop(--colors --border); 23 border-top: 1px solid prop(--colors --ground);
23 color: prop(--colors --fg); 24 color: prop(--colors --ground);
24 line-height: prop(--dims --outer, $global: true); 25 }
26
27 @include element('ascii') {
28 display: inline-block;
29 position: relative;
30 left: 50%;
31 overflow: visible;
32 transform: translateX(-50%);
25 } 33 }
26 } 34 }
27} 35}
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index 21f78f4..2b7775e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -35,6 +35,12 @@
35 color: prop(--colors --inverted --fg); 35 color: prop(--colors --inverted --fg);
36 } 36 }
37 37
38 @include modifier('scroll-top') {
39 position: absolute;
40 right: 0;
41 bottom: 0;
42 }
43
38 @include element('icon') { 44 @include element('icon') {
39 display: flex; 45 display: flex;
40 position: relative; 46 position: relative;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 1a1bc0b..9dbe2be 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -24,10 +24,6 @@
24 24
25 @include element('head') { 25 @include element('head') {
26 display: flex; 26 display: flex;
27 position: sticky;
28 z-index: 9000;
29 top: 0;
30 left: 0;
31 flex-direction: row; 27 flex-direction: row;
32 justify-self: flex-start; 28 justify-self: flex-start;
33 font-size: 1 / 16 * 15em; 29 font-size: 1 / 16 * 15em;
@@ -41,6 +37,13 @@
41 margin-left: prop(--container --dims --pad-x, $global: true); 37 margin-left: prop(--container --dims --pad-x, $global: true);
42 border-top: 1px solid prop(--colors --border); 38 border-top: 1px solid prop(--colors --border);
43 } 39 }
40
41 @include modifier('sticky') {
42 position: sticky;
43 z-index: 9000;
44 top: 0;
45 left: 0;
46 }
44 } 47 }
45 } 48 }
46} 49}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 241bad5..30878fe 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -22,7 +22,6 @@
22@import 'components/landing-banner'; 22@import 'components/landing-banner';
23@import 'components/footer'; 23@import 'components/footer';
24@import 'components/card'; 24@import 'components/card';
25@import 'components/ascii';
26@import 'components/project'; 25@import 'components/project';
27@import 'components/post-list'; 26@import 'components/post-list';
28 27
diff --git a/templates/base.html b/templates/base.html
index 27f8f20..d9aaa8e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -64,11 +64,12 @@ ${layouts/categorized_list()}
64${layouts/page()} 64${layouts/page()}
65 $endif$ 65 $endif$
66 66
67
67 <footer class="c-footer"> 68 <footer class="c-footer">
68 <div class="c-footer__content"> 69 <pre class="c-footer__ascii u-dn@sm-lo">${layouts/ascii_fox()}</pre>
69 9thPK7O3xn 70 <pre class="c-footer__ascii u-dn@sm-hi">${layouts/ascii_fox_small()}</pre>
70 </div> 71
71 <a class="c-outer-button" href="#" title="To the top"> 72 <a class="c-outer-button c-outer-button--scroll-top" href="#" title="To the top">
72 <span class="c-outer-button__icon"> 73 <span class="c-outer-button__icon">
73 <svg class="c-outer-button__icon-symbol o-icon"> 74 <svg class="c-outer-button__icon-symbol o-icon">
74 <use href="/symbols.svg#icon-arrow-up"></use> 75 <use href="/symbols.svg#icon-arrow-up"></use>
diff --git a/templates/layouts/ascii_fox.html b/templates/layouts/ascii_fox.html
new file mode 100644
index 0000000..ce8597e
--- /dev/null
+++ b/templates/layouts/ascii_fox.html
@@ -0,0 +1,12 @@
1 ' ' ' ' ' '
2 ' ' ' ' ' ' ' ' ' ' ' ' '
3 ' . | | | ' ' ' ' ' | | ' ' | '
4 ' | | | ' | ' ' ' ' ' | : | ' ' | . '
5 ' ' | | . | ' 9thPK7O3xn ' ' ' | | ' ' | '
6 ' | __~| | | ' ' ' ' ' | | | ' ' | | '
7 ' ' |__ ,( |' |_ ' ' ' <strong>//\_</strong> ' | ' . | ' ' | ' '
8 ' | )~._ _( . ) .| ) ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | . ( ' ' | '
9 ' |, __´ ) ( | | | ` <strong>_,~´"' , . ,~--´</strong> ' _| | . |~~.__ ´ ' '__,. | ' '
10 ' | | _.~( _ | ' ~( <strong>,-" _.-|~/ |..,____,) ,/,,"'</strong> '_( | ' |) ) . ' ( )~-_ | ' '
11 ' | (_ ) ´- | ( ' <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _/- .. , _) | '
12´ . ( ` ( . : / : . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,( . : / . `
diff --git a/templates/layouts/ascii_fox_small.html b/templates/layouts/ascii_fox_small.html
new file mode 100644
index 0000000..bb02a96
--- /dev/null
+++ b/templates/layouts/ascii_fox_small.html
@@ -0,0 +1,8 @@
1 ' ' ' '
2 | | ' ' ' | | ' '
3 | ' | ' ' ' | ' | ' '
4 | | 9thPK7O3xn ' | . | ' '
5 | . | ' ' <strong>//\__</strong> ' | | ' '
6 | | <strong>_.~-"""-----~`` ,-´</strong> ' |' | ' '
7 | | '| <strong>.´ ,~'\ ).,__,)/,,"</strong> ' | | | ' '
8 _| |_ <strong>`~´ (/\\, (/\\,</strong> _' _| ' |_ _' '_
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index ef3b8fc..f2dbbc4 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,29 +1,4 @@
1<section class="l-section l-section--fullscreen"> 1<section class="l-section l-section--no-head">
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
27 <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
28 <div class="s-headlines s-colored-links"> 3 <div class="s-headlines s-colored-links">
29 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 4 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 45ac82e..814f338 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -51,7 +51,7 @@ $body$
51</section> 51</section>
52 52
53<section class="l-section" id="projects"> 53<section class="l-section" id="projects">
54 <header class="l-section__head"> 54 <header class="l-section__head l-section__head--sticky">
55 <a class="c-outer-button" href="#projects"> 55 <a class="c-outer-button" href="#projects">
56 <span class="c-outer-button__icon"> 56 <span class="c-outer-button__icon">
57 <svg class="c-outer-button__icon-symbol o-icon"> 57 <svg class="c-outer-button__icon-symbol o-icon">
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-01 11:58:34 +0000