diff options
author | Volpeon <git@volpeon.ink> | 2021-01-08 11:45:30 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2021-01-08 11:45:30 +0100 |
commit | 8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0 (patch) | |
tree | 3e4bd8c26b65a073d4580bc9f0076caceb234ce8 /templates | |
parent | Optimized CSS for code blocks (diff) | |
download | volpeon.ink-8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0.tar.gz volpeon.ink-8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0.tar.bz2 volpeon.ink-8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0.zip |
Added section link to the header in regular pages, improved template structure, improved CSS variable names, keep prefix for specific page items on mobile
Diffstat (limited to 'templates')
-rw-r--r-- | templates/base.html | 14 | ||||
-rw-r--r-- | templates/layouts/dated_list.html | 37 | ||||
-rw-r--r-- | templates/layouts/index.html | 28 | ||||
-rw-r--r-- | templates/layouts/page.html | 32 |
4 files changed, 63 insertions, 48 deletions
diff --git a/templates/base.html b/templates/base.html index da3dec9..8682125 100644 --- a/templates/base.html +++ b/templates/base.html | |||
@@ -36,23 +36,19 @@ | |||
36 | <nav class="c-nav"> | 36 | <nav class="c-nav"> |
37 | <div class="c-nav__items l-container"> | 37 | <div class="c-nav__items l-container"> |
38 | <a class="c-nav__logo" href="/" title="$site.title$">$site.logo$</a> | 38 | <a class="c-nav__logo" href="/" title="$site.title$">$site.logo$</a> |
39 | $for(menus.main)$ | 39 | $for(menus.main.items)$ |
40 | <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> | 40 | <a class="c-nav__item $if(it.active)$c-nav__item--active$endif$" href="$it.url$">$it.label$</a> |
41 | $endfor$ | 41 | $endfor$ |
42 | </div> | 42 | </div> |
43 | </nav> | 43 | </nav> |
44 | 44 | ||
45 | <main class="c-page s-page l-container l-container--content l-container--pad-v"> | 45 | $if(section.is_index)$ |
46 | <div class="c-page__content"> | ||
47 | $if(section.is_index)$ | ||
48 | ${layouts/index()} | 46 | ${layouts/index()} |
49 | $elseif(layout.is_dated_list)$ | 47 | $elseif(layout.is_dated_list)$ |
50 | ${layouts/dated_list()} | 48 | ${layouts/dated_list()} |
51 | $else$ | 49 | $else$ |
52 | ${layouts/page()} | 50 | ${layouts/page()} |
53 | $endif$ | 51 | $endif$ |
54 | </div> | ||
55 | </main> | ||
56 | </body> | 52 | </body> |
57 | 53 | ||
58 | </html> | 54 | </html> |
diff --git a/templates/layouts/dated_list.html b/templates/layouts/dated_list.html index 0a279f0..8c5de69 100644 --- a/templates/layouts/dated_list.html +++ b/templates/layouts/dated_list.html | |||
@@ -1,22 +1,25 @@ | |||
1 | <h1 class="c-page__prefixed c-page__prefixed--h1">$title$</h1> | 1 | <main class="c-page s-page l-container l-container--content l-container--pad-v"> |
2 | 2 | <div class="c-page__content"> | |
3 | <h1 class="c-page__prefixed c-page__prefixed--h1">$title$</h1> | ||
3 | $body$ | 4 | $body$ |
4 | 5 | ||
5 | $if(categories)$ | 6 | $if(categories)$ |
6 | <ul class="c-hlist"> | 7 | <ul class="c-hlist"> |
7 | $for(categories)$ | 8 | $for(categories)$ |
8 | <li class="c-hlist__item"><strong>$it.key/uppercase$</strong> $it.value.name$</li> | 9 | <li class="c-hlist__item"><strong>$it.key/uppercase$</strong> $it.value.name$</li> |
9 | $endfor$ | 10 | $endfor$ |
10 | </ul> | 11 | </ul> |
11 | $endif$ | 12 | $endif$ |
12 | 13 | ||
13 | $for(pages.by_year)$ | 14 | $for(pages.by_year)$ |
14 | <ul> | 15 | <ul> |
15 | $for(it.value)$ | 16 | $for(it.value)$ |
16 | <li class="c-page__prefixed c-page__prefixed--ref"> | 17 | <li class="c-page__prefixed c-page__prefixed--ref"> |
17 | <a href="$it.url.rel$">$it.category.id/uppercase$ $it.date.yyyy_mm_dd$ - $it.title$</a> | 18 | <a href="$it.url.rel$">$it.category.id/uppercase$ $it.date.yyyy_mm_dd$ - $it.title$</a> |
18 | </li> | 19 | </li> |
20 | $endfor$ | ||
21 | </ul> | ||
19 | $endfor$ | 22 | $endfor$ |
20 | </ul> | 23 | </div> |
21 | $endfor$ | 24 | </main> |
22 | 25 | ||
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 144d1ed..a1410f1 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -1,14 +1,16 @@ | |||
1 | <header class="c-hero u-hidden@sm-down" role="presentation"> | 1 | <main class="c-page s-page l-container l-container--content l-container--pad-v"> |
2 | $-- ' | ' ' ' ' ' | | | ' ' | 2 | <div class="c-page__content"> |
3 | $-- | ' ' ' //\_ ' | ' . | ' ' | 3 | <header class="c-hero u-hidden@sm-down" role="presentation"> |
4 | $-- .| ' ____,...,______..,_~`` -`.., ' | ' | ' ' | 4 | $-- ' | ' ' ' ' ' | | | ' ' |
5 | $-- | _,~´"' , . ,~--´ ' _| | . |~~.__ ' ' | 5 | $-- | ' ' ' //\_ ' | ' . | ' ' |
6 | $-- | | ,-" _.-|~/ |..,____,) ,/,,"' '_( | ' |) ) ' ' | 6 | $-- .| ' ____,...,______..,_~`` -`.., ' | ' | ' ' |
7 | $-- '| \__,~"´ /:) / |:\ \ ,~( ) . | | ) `, ' _,--. | 7 | $-- | _,~´"' , . ,~--´ ' _| | . |~~.__ ' ' |
8 | $-- ___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____ | 8 | $-- | | ,-" _.-|~/ |..,____,) ,/,,"' '_( | ' |) ) ' ' |
9 | $-- ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | 9 | $-- '| \__,~"´ /:) / |:\ \ ,~( ) . | | ) `, ' _,--. |
10 | 10 | $-- ___\___.___:____(:/\_-,______\:.\_-,____.__\_.\______.__:___\__.___)_.___,/_____ | |
11 | <pre class="c-hero__pre c-page__prefixed c-page__prefixed--pre u-mt0 u-hidden@sm-down"> | 11 | $-- ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
12 | |||
13 | <pre class="c-hero__pre c-page__prefixed c-page__prefixed--pre u-mt0 u-hidden@sm-down"> | ||
12 | ' | ' ' ' ' ' | | | ' ' | 14 | ' | ' ' ' ' ' | | | ' ' |
13 | | ' ' ' <strong>//\_</strong> ' | ' . | ' ' | 15 | | ' ' ' <strong>//\_</strong> ' | ' . | ' ' |
14 | .| ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | ' ' | 16 | .| ' <strong>____,...,______..,_~`` -`..,</strong> ' | ' | ' ' |
@@ -17,9 +19,11 @@ | |||
17 | '| <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _,--. | 19 | '| <strong>\__,~"´ /:) / |:\ \</strong> ,~( ) . | | ) `, ' _,--. |
18 | \ . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,/ </pre> | 20 | \ . : <strong>(:/\_-, \:.\_-,</strong> . \ .\ . : \ . ) . ' ,/ </pre> |
19 | 21 | ||
20 | </header> | 22 | </header> |
21 | 23 | ||
22 | $body$ | 24 | $body$ |
25 | </div> | ||
26 | </main> | ||
23 | 27 | ||
24 | <template id="header-sm"> | 28 | <template id="header-sm"> |
25 | $-- .| //\__ ' .' | . | ' . ' | 29 | $-- .| //\__ ' .' | . | ' . ' |
diff --git a/templates/layouts/page.html b/templates/layouts/page.html index 332a846..ee1a816 100644 --- a/templates/layouts/page.html +++ b/templates/layouts/page.html | |||
@@ -1,12 +1,24 @@ | |||
1 | <header class="c-page__header"> | 1 | <main class="c-page l-container l-container--content l-container--pad-v"> |
2 | <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1> | 2 | <div class="c-page__content"> |
3 | $if(date)$ | 3 | <header class="c-page__header"> |
4 | <h2 class="c-page__header__meta">$date.yyyy_mm_dd$$if(category)$ in $category.name$$endif$</h2> | 4 | $if(menus.main.active)$ |
5 | $elseif(category)$ | 5 | <div class="c-page__prefixed c-page__prefixed--backref c-page__header__backlink"> |
6 | <h2 class="c-page__header__meta">in $category.name$</h2> | 6 | <a class="c-page__header__backlink__link" href="$menus.main.active.url$"> |
7 | $endif$ | 7 | $menus.main.active.label$ |
8 | </header> | 8 | </a> |
9 | </div> | ||
10 | $endif$ | ||
11 | <h1 class="c-page__prefixed c-page__prefixed--h1 c-page__header__title">$title$</h1> | ||
12 | $if(date)$ | ||
13 | <h2 class="c-page__header__meta">$date.yyyy_mm_dd$$if(category)$ in $category.name$$endif$</h2> | ||
14 | $elseif(category)$ | ||
15 | <h2 class="c-page__header__meta">in $category.name$</h2> | ||
16 | $endif$ | ||
17 | </header> | ||
9 | 18 | ||
10 | <section> | 19 | <section class="s-page"> |
11 | $body$ | 20 | $body$ |
12 | </section> | 21 | </section> |
22 | </div> | ||
23 | </main> | ||
24 | |||