summaryrefslogtreecommitdiffstats
path: root/templates
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-01-08 11:45:30 +0100
committerVolpeon <git@volpeon.ink>2021-01-08 11:45:30 +0100
commit8f373e6c6d3f9d322041ba4d949c1b0c39ae8ea0 (patch)
tree3e4bd8c26b65a073d4580bc9f0076caceb234ce8 /templates
parentOptimized CSS for code blocks (diff)
downloadvolpeon.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.html14
-rw-r--r--templates/layouts/dated_list.html37
-rw-r--r--templates/layouts/index.html28
-rw-r--r--templates/layouts/page.html32
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