diff options
author | Volpeon <git@volpeon.ink> | 2021-03-19 22:10:55 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-03-19 22:10:55 +0100 |
commit | c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd (patch) | |
tree | 4792d0f38463a15ca352118e8264a4813c05e15e /templates | |
parent | Added better font for text (Iosevka Aile) (diff) | |
download | volpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.tar.gz volpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.tar.bz2 volpeon.ink-c7eb8d7f6105a5a15a1f45b5e2be3c2d1e2204bd.zip |
WIP: Redesign
Diffstat (limited to 'templates')
-rw-r--r-- | templates/base.html | 22 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 3 | ||||
-rw-r--r-- | templates/layouts/index copy.html | 45 | ||||
-rw-r--r-- | templates/layouts/index.html | 43 | ||||
-rw-r--r-- | templates/layouts/page.html | 4 | ||||
-rw-r--r-- | templates/symbols.svg | 10 |
6 files changed, 74 insertions, 53 deletions
diff --git a/templates/base.html b/templates/base.html index 49b2285..98e6da2 100644 --- a/templates/base.html +++ b/templates/base.html | |||
@@ -28,21 +28,19 @@ | |||
28 | 28 | ||
29 | <title>$if(section.is_index)$$else$$title$ – $endif$$site.title$</title> | 29 | <title>$if(section.is_index)$$else$$title$ – $endif$$site.title$</title> |
30 | 30 | ||
31 | <link rel="preload" href="/style.css" as="style" /> | ||
32 | <link rel="preload" href="/iosevka-term-ss09-regular.woff2" as="font" type="font/woff2" crossorigin /> | ||
33 | <link rel="preload" href="/iosevka-term-ss09-bold.woff2" as="font" type="font/woff2" crossorigin /> | ||
34 | |||
35 | <link rel="stylesheet" href="/style.css" /> | 31 | <link rel="stylesheet" href="/style.css" /> |
36 | </head> | 32 | </head> |
37 | 33 | ||
38 | <body> | 34 | <body> |
39 | <nav class="c-nav"> | 35 | <nav class="c-nav l-container l-container--content"> |
40 | <div class="c-nav__items l-container"> | 36 | <a class="c-nav__logo" href="/" title="$site.title$"> |
41 | <a class="c-nav__logo" href="/" title="$site.title$">$site.logo$</a> | 37 | <svg class="c-nav__logo-symbol"> |
42 | $for(menus.main.items)$ | 38 | <use xlink:href="#logo" href="#logo"></use> |
43 | <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> | 39 | </svg> |
44 | $endfor$ | 40 | </a> |
45 | </div> | 41 | $for(menus.main.items)$ |
42 | <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> | ||
43 | $endfor$ | ||
46 | </nav> | 44 | </nav> |
47 | 45 | ||
48 | $if(section.is_index)$ | 46 | $if(section.is_index)$ |
@@ -52,6 +50,8 @@ ${layouts/categorized_list()} | |||
52 | $else$ | 50 | $else$ |
53 | ${layouts/page()} | 51 | ${layouts/page()} |
54 | $endif$ | 52 | $endif$ |
53 | |||
54 | ${symbols.svg()} | ||
55 | </body> | 55 | </body> |
56 | 56 | ||
57 | </html> | 57 | </html> |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index d213bb8..b32d2d5 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
@@ -1,6 +1,5 @@ | |||
1 | <main class="c-page s-page l-container l-container--content l-container--pad-v"> | 1 | <main class="c-page s-page l-container l-container--content l-container--pad-v"> |
2 | <div class="c-page__content"> | 2 | <div class="c-page__content s-page-content"> |
3 | <h1 class="c-page__prefixed c-page__prefixed--h1">$title$</h1> | ||
4 | $body$ | 3 | $body$ |
5 | 4 | ||
6 | $for(pages.by_category)$ | 5 | $for(pages.by_category)$ |
diff --git a/templates/layouts/index copy.html b/templates/layouts/index copy.html new file mode 100644 index 0000000..34d8b0f --- /dev/null +++ b/templates/layouts/index copy.html | |||
@@ -0,0 +1,45 @@ | |||
1 | <main class="c-page s-page l-container l-container--content l-container--pad-v l-container--pad-v--first"> | ||
2 | <div class="c-page__content"> | ||
3 | <header class="c-hero u-hidden@sm-down" role="presentation"> | ||
4 | $-- ' | ' ' ' ' ' | | | ' ' | ||
5 | $-- | ' ' ' //\_ ' | ' . | ' ' | ||
6 | $-- .| ' ____,...,______..,_~`` -`.., ' | ' | ' ' | ||
7 | $-- | _,~´"' , . ,~--´ ' _| | . |~~.__ ' ' | ||
8 | $-- | | ,-" _.-|~/ |..,____,) ,/,,"' '_( | ' |) ) ' ' | ||
9 | $-- '| \__,~"´ /:) / |:\ \ ,~( ) . | | ) `, ' _,--. | ||
10 | $-- ___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____ | ||
11 | $-- ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | ||
12 | |||
13 | <pre class="c-hero__pre c-page__prefixed c-page__prefixed--pre u-mt0 u-hidden@sm-down"> | ||
14 | `` ' | ' ' ' ' ' | | | ' ' | ||
15 | `` | ' ' ' <strong>//\_</strong> ' | ' . | ' ' | ||
16 | `` .| ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | ' ' | ||
17 | `` | <strong>_,~´"' , . ,~--´</strong> ' _| | . |~~.__ ' ' | ||
18 | `` | | <strong>,-" _.-|~/ |..,____,) ,/,,"'</strong> '_( | ' |) ) ' ' | ||
19 | `` '| <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _,--. | ||
20 | `` \ . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,/ </pre> | ||
21 | |||
22 | </header> | ||
23 | |||
24 | $body$ | ||
25 | </div> | ||
26 | </main> | ||
27 | |||
28 | <footer class="c-footer l-container"> | ||
29 | 9thPK7O3xn | ||
30 | </footer> | ||
31 | |||
32 | <template id="header-sm"> | ||
33 | $-- .| //\__ ' .' | . | ' . ' | ||
34 | $-- | _.~-"""-----~`` ,-´ ' ' |' | ' ' | ||
35 | $-- '| .´ ,~'\ ).,__,)/,," ' . ' | | | ' .' | ||
36 | $-- |_ `~´ (/\\, (/\\, _' '_ _| ' |_ _' '_ | ||
37 | |||
38 | <pre class="c-hero__pre c-page__prefixed c-page__prefixed--pre u-mt0 $if(section.is_index)$u-hidden@sm-up$endif$"> | ||
39 | `` .| <strong> //\__</strong> ' .' | . | ' . ' | ||
40 | `` | <strong> _.~-"""-----~`` ,-´</strong> ' ' |' | ' ' | ||
41 | `` '| <strong>.´ ,~'\ ).,__,)/,," </strong> ' . ' | | | ' .' | ||
42 | `` |_ <strong>`~´ (/\\, (/\\, </strong> _' '_ _| ' |_ _' '_</pre> | ||
43 | </template> | ||
44 | |||
45 | <script src="/index.js" type="text/javascript"></script> | ||
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 61edec2..3105472 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -1,26 +1,10 @@ | |||
1 | <main class="c-page s-page l-container l-container--content l-container--pad-v"> | 1 | <div class="c-hero l-container"> |
2 | <div class="c-page__content"> | 2 | <h1 class="c-hero__backtitle">Volpeon</h1> |
3 | <header class="c-hero u-hidden@sm-down" role="presentation"> | 3 | <h2 class="c-hero__title">I'm a <strong class="c-hero__emph">red fox</strong> doing human things</h2> |
4 | $-- ' | ' ' ' ' ' | | | ' ' | 4 | </div> |
5 | $-- | ' ' ' //\_ ' | ' . | ' ' | ||
6 | $-- .| ' ____,...,______..,_~`` -`.., ' | ' | ' ' | ||
7 | $-- | _,~´"' , . ,~--´ ' _| | . |~~.__ ' ' | ||
8 | $-- | | ,-" _.-|~/ |..,____,) ,/,,"' '_( | ' |) ) ' ' | ||
9 | $-- '| \__,~"´ /:) / |:\ \ ,~( ) . | | ) `, ' _,--. | ||
10 | $-- ___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____ | ||
11 | $-- ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | ||
12 | |||
13 | <pre class="c-hero__pre c-page__prefixed c-page__prefixed--pre u-mt0 u-hidden@sm-down"> | ||
14 | ' | ' ' ' ' ' | | | ' ' | ||
15 | | ' ' ' <strong>//\_</strong> ' | ' . | ' ' | ||
16 | .| ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | ' ' | ||
17 | | <strong>_,~´"' , . ,~--´</strong> ' _| | . |~~.__ ' ' | ||
18 | | | <strong>,-" _.-|~/ |..,____,) ,/,,"'</strong> '_( | ' |) ) ' ' | ||
19 | '| <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _,--. | ||
20 | \ . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,/ </pre> | ||
21 | |||
22 | </header> | ||
23 | 5 | ||
6 | <main class="c-page l-container l-container--content l-container--pad-v l-container--pad-v--first"> | ||
7 | <div class="c-page__content s-page-content"> | ||
24 | $body$ | 8 | $body$ |
25 | </div> | 9 | </div> |
26 | </main> | 10 | </main> |
@@ -28,18 +12,3 @@ $body$ | |||
28 | <footer class="c-footer l-container"> | 12 | <footer class="c-footer l-container"> |
29 | 9thPK7O3xn | 13 | 9thPK7O3xn |
30 | </footer> | 14 | </footer> |
31 | |||
32 | <template id="header-sm"> | ||
33 | $-- .| //\__ ' .' | . | ' . ' | ||
34 | $-- | _.~-"""-----~`` ,-´ ' ' |' | ' ' | ||
35 | $-- '| .´ ,~'\ ).,__,)/,," ' . ' | | | ' .' | ||
36 | $-- |_ `~´ (/\\, (/\\, _' '_ _| ' |_ _' '_ | ||
37 | |||
38 | <pre class="c-hero__pre c-page__prefixed c-page__prefixed--pre u-mt0 $if(section.is_index)$u-hidden@sm-up$endif$"> | ||
39 | .| <strong> //\__</strong> ' .' | . | ' . ' | ||
40 | | <strong> _.~-"""-----~`` ,-´</strong> ' ' |' | ' ' | ||
41 | '| <strong>.´ ,~'\ ).,__,)/,," </strong> ' . ' | | | ' .' | ||
42 | |_ <strong>`~´ (/\\, (/\\, </strong> _' '_ _| ' |_ _' '_</pre> | ||
43 | </template> | ||
44 | |||
45 | <script src="/index.js" type="text/javascript"></script> | ||
diff --git a/templates/layouts/page.html b/templates/layouts/page.html index 640df18..994d013 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html | |||
@@ -1,5 +1,5 @@ | |||
1 | <main class="c-page l-container l-container--content l-container--pad-v"> | 1 | <main class="c-page l-container l-container--content l-container--pad-v"> |
2 | <div class="c-page__content"> | 2 | <div class="c-page__content s-page-content"> |
3 | <header class="c-page__header"> | 3 | <header class="c-page__header"> |
4 | $if(menus.main.active)$ | 4 | $if(menus.main.active)$ |
5 | <div class="c-page__prefixed c-page__prefixed--backref c-page__header__backlink"> | 5 | <div class="c-page__prefixed c-page__prefixed--backref c-page__header__backlink"> |
@@ -18,9 +18,7 @@ | |||
18 | $endif$ | 18 | $endif$ |
19 | </header> | 19 | </header> |
20 | 20 | ||
21 | <section class="s-page"> | ||
22 | $body$ | 21 | $body$ |
23 | </section> | ||
24 | </div> | 22 | </div> |
25 | </main> | 23 | </main> |
26 | 24 | ||
diff --git a/templates/symbols.svg b/templates/symbols.svg new file mode 100644 index 0000000..2221fad --- /dev/null +++ b/templates/symbols.svg | |||
@@ -0,0 +1,10 @@ | |||
1 | <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" aria-hidden="true" version="1.1" | ||
2 | xmlns="http://www.w3.org/2000/svg"> | ||
3 | <defs> | ||
4 | <symbol id="logo" viewBox="0 0 22.271938 15.456" preserveAspectRatio="xMinYMid"> | ||
5 | <path fill="currentColor" stroke="none" d="M 4.928,15.456 H 6.24 L 1.312,0 H 0 Z" /> | ||
6 | <path fill="currentColor" stroke="none" d="m 14.44797,15.456 h 1.36 L 9.3439695,0 h -1.36 z" /> | ||
7 | <path fill="currentColor" stroke="none" d="m 14.447939,15.456 h 1.36 L 22.271939,0 h -1.36 z" /> | ||
8 | </symbol> | ||
9 | </defs> | ||
10 | </svg> | ||