summaryrefslogtreecommitdiffstats
path: root/templates
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
committerVolpeon <git@volpeon.ink>2022-06-11 09:44:04 +0200
commit575278aba99139635adc3b1f9385befe57102541 (patch)
treed98a160167610717da37f6340b3884ba4224fe5d /templates
parentUpdate (diff)
downloadvolpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.gz
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.bz2
volpeon.ink-575278aba99139635adc3b1f9385befe57102541.zip
Re-implemented design via iro-design
Diffstat (limited to 'templates')
-rw-r--r--templates/base.html46
-rw-r--r--templates/layouts/categorized_list.html37
-rw-r--r--templates/layouts/list.html6
-rw-r--r--templates/layouts/page.html6
-rw-r--r--templates/layouts/redirect.html4
-rw-r--r--templates/partials/gallery_card.html26
-rw-r--r--templates/partials/grid_card.html24
-rw-r--r--templates/partials/list_card.html20
8 files changed, 82 insertions, 87 deletions
diff --git a/templates/base.html b/templates/base.html
index 4d0be21..be796de 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -75,41 +75,39 @@ ${layouts/page()}
75 </main> 75 </main>
76 76
77 <footer class="c-footer"> 77 <footer class="c-footer">
78 <div class="l-container l-container--pad-y u-pb0" aria-hidden="true"> 78 <div class="l-container l-container--pad-y u-pb-0" aria-hidden="true">
79 <pre class="c-footer__ascii u-dn@sm-lo">${partials/ascii_fox()}</pre> 79 <pre class="c-footer__ascii u-d-none@sm-lo">${partials/ascii_fox()}</pre>
80 <pre class="c-footer__ascii u-dn@sm-hi">${partials/ascii_fox_small()}</pre> 80 <pre class="c-footer__ascii u-d-none@sm-hi">${partials/ascii_fox_small()}</pre>
81 </div> 81 </div>
82 </footer> 82 </footer>
83 83
84 <div class="c-lightbox"> 84 <div class="o-backdrop js-lightbox u-d-none t-dark">
85 <div class="c-lightbox__bg"></div> 85 <div class="o-lightbox">
86 86 <button class="o-lightbox__close-btn o-action-button o-action-button--quiet o-action-button--round">
87 <div class="c-lightbox__infobar"> 87 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
88 <div class="o-badge c-lightbox__count"></div>
89
90 <button class="c-lightbox__close">
91 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
92 <use href="/symbols.svg#icon-x"></use> 88 <use href="/symbols.svg#icon-x"></use>
93 </svg> 89 </svg>
94 </button> 90 </button>
95 </div>
96 91
97 <button class="c-lightbox__prev"> 92 <img class="o-lightbox__img" />
98 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
99 <use href="/symbols.svg#icon-chevron-left"></use>
100 </svg>
101 </button>
102 93
103 <button class="c-lightbox__next"> 94 <button class="o-lightbox__prev-btn o-action-button o-action-button--quiet o-action-button--round">
104 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 95 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
105 <use href="/symbols.svg#icon-chevron-right"></use> 96 <use href="/symbols.svg#icon-chevron-left"></use>
106 </svg> 97 </svg>
107 </button> 98 </button>
108 99
109 <img class="c-lightbox__img" /> 100 <button class="o-lightbox__next-btn o-action-button o-action-button--quiet o-action-button--round">
101 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
102 <use href="/symbols.svg#icon-chevron-right"></use>
103 </svg>
104 </button>
105
106 <footer class="o-lightbox__footer"></footer>
107 </div>
110 </div> 108 </div>
111 109
112 <script src="/lightbox.js"></script> 110 <script src="/main.js"></script>
113 <!--script src="/snow.js"></script--> 111 <!--script src="/snow.js"></script-->
114</body> 112</body>
115 113
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 5e92395..7f94ff4 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,6 +1,6 @@
1<div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 1<div class="l-container l-container--pad-x l-container--pad-y l-container--narrow">
2 <header class="s-headlines s-colored-links"> 2 <header class="s-colored-links">
3 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 3 <h1 class="o-heading o-heading--xxl u-mt-0"><span class="o-heading__primary">$title$</span></h1>
4 4
5$body$ 5$body$
6 6
@@ -8,9 +8,9 @@ $body$
8 8
9 $if(notoc)$$else$ 9 $if(notoc)$$else$
10 <nav class="c-hnav s-invisible-links"> 10 <nav class="c-hnav s-invisible-links">
11 $-- <h2 class="u-mt0">Sections:</h2> 11 $-- <h2 class="u-mt-0">Sections:</h2>
12 $for(list)$ 12 $for(list)$
13 <a href="#$it.slug$"><small>$it.title$</small></a> 13 <small><a href="#$it.slug$">$it.title$</a></small>
14 $endfor$ 14 $endfor$
15 </nav> 15 </nav>
16 $endif$ 16 $endif$
@@ -18,9 +18,18 @@ $body$
18 <div class="l-card-list"> 18 <div class="l-card-list">
19 $for(list)$ 19 $for(list)$
20 <section> 20 <section>
21 <h2 class="s-invisible-links" id="$it.slug$"> 21 <div class="l-media l-media--flush">
22 <a href="$it.url.rel$">$it.title$</a> 22 <div class="l-media__block l-media__block--main">
23 </h2> 23 <h2 class="s-invisible-links" id="$it.slug$">
24 <a href="$it.url.rel$">$it.title$</a>
25 </h2>
26 </div>
27 $if(it.omitted)$
28 <a class="l-media__block o-badge u-mt-auto" href="$it.url.rel$">
29 $it.omitted$ more items <span class="u-ml-10">→</span>
30 </a>
31 $endif$
32 </div>
24 $if(it.description)$ 33 $if(it.description)$
25 <div class="s-small s-colored-links">$it.description$</div> 34 <div class="s-small s-colored-links">$it.description$</div>
26 $endif$ 35 $endif$
@@ -32,18 +41,6 @@ $body$
32 $else$ 41 $else$
33 $it.items:partials/list_card()$ 42 $it.items:partials/list_card()$
34 $endif$ 43 $endif$
35 $if(it.omitted)$
36 <a href="$it.url.rel$" class="l-card-list__card c-card">
37 <div class="c-card__row">
38 <div class="c-card__block c-card__block--main">
39 $it.omitted$ more items in $it.title$
40 </div>
41 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true">
42 <use href="/symbols.svg#icon-arrow-right"></use>
43 </svg>
44 </div>
45 </a>
46 $endif$
47 </div> 44 </div>
48 </section> 45 </section>
49 $endfor$ 46 $endfor$
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index bc12805..88102b9 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,6 +1,6 @@
1<div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 1<div class="l-container l-container--pad-x l-container--pad-y l-container--narrow">
2 <header class="s-headlines s-colored-links"> 2 <header class="s-colored-links">
3 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 3 <h1 class="o-heading o-heading--xxl u-mt-0"><span class="o-heading__primary">$title$</span></h1>
4 4
5$body$ 5$body$
6 </header> 6 </header>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index ee7437d..324a01c 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,11 +1,11 @@
1<article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines $if(intro)$s-intro$endif$"> 1<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headings s-blockquotes s-code $if(intro)$s-intro$endif$">
2 $if(date)$ 2 $if(date)$
3 <div class="o-badge s-body__meta"> 3 <div class="o-badge s-body__meta u-mb-125">
4 $date.long$ 4 $date.long$
5 </div> 5 </div>
6 $endif$ 6 $endif$
7 7
8 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 8 <h1 class="u-mt-0"><span class="s-headings__primary">$title$</span></h1>
9 9
10$body$ 10$body$
11</article> 11</article>
diff --git a/templates/layouts/redirect.html b/templates/layouts/redirect.html
index 1cfc67c..9f78dec 100644
--- a/templates/layouts/redirect.html
+++ b/templates/layouts/redirect.html
@@ -1,4 +1,4 @@
1<article class="l-container l-container--pad-x l-container--pad-y l-container--content s-body s-colored-links s-headlines"> 1<article class="l-container l-container--pad-x l-container--pad-y l-container--narrow s-body s-colored-links s-headlines">
2 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 2 <h1 class="u-mt-0"><span class="s-headlines__title-inner">$title$</span></h1>
3 <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p> 3 <p>This page should redirect you to <a href="$url.full$">$url.full$</a> in 3 seconds.</p>
4</article> 4</article>
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
index aa641da..386843f 100644
--- a/templates/partials/gallery_card.html
+++ b/templates/partials/gallery_card.html
@@ -1,7 +1,7 @@
1$if(it.url)$ 1$if(it.url)$
2$if(it.thumbnail)$ 2$if(it.thumbnail)$
3 <a href="$it.url.rel$" class="l-card-list__card c-card"> 3 <a href="$it.url.rel$" class="l-card-list__card c-card">
4 <div class="c-card__row c-card__row--flush"> 4 <div class="c-card__row l-media l-media--flush">
5 <div class="c-card__thumbnail"> 5 <div class="c-card__thumbnail">
6 <img 6 <img
7 class="c-card__thumbnail-img" 7 class="c-card__thumbnail-img"
@@ -11,38 +11,38 @@ $if(it.thumbnail)$
11 /> 11 />
12 </div> 12 </div>
13 </div> 13 </div>
14 <div class="c-card__row c-card__row--hidden"> 14 <div class="c-card__row l-media c-card__row--hidden">
15 $if(it.indicator)$ 15 $if(it.indicator)$
16 <div class="c-card__block c-card__block--indicator"></div> 16 <div class="c-card__indicator l-media__block"></div>
17 $endif$ 17 $endif$
18 $if(it.icon)$ 18 $if(it.icon)$
19 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 19 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
20 <use href="/symbols.svg#icon-$it.icon$"></use> 20 <use href="/symbols.svg#icon-$it.icon$"></use>
21 </svg> 21 </svg>
22 $endif$ 22 $endif$
23 <div class="c-card__block c-card__block--main"> 23 <div class="l-media__block l-media__block--main">
24 $if(it.subtitle)$ 24 $if(it.subtitle)$
25 <strong class="u-db u-elp">$it.title$</strong> 25 <strong class="u-d-block u-elp">$it.title$</strong>
26 <small class="u-db u-elp">$it.subtitle$</small> 26 <small class="u-d-block u-elp">$it.subtitle$</small>
27 $elseif(it.category)$ 27 $elseif(it.category)$
28 <small class="u-db u-elp">$it.category$</small> 28 <small class="u-d-block u-elp">$it.category$</small>
29 <strong class="u-db u-elp">$it.title$</strong> 29 <strong class="u-d-block u-elp">$it.title$</strong>
30 $elseif(it.date)$ 30 $elseif(it.date)$
31 <time datetime="$it.date.yyyy_mm_dd$"> 31 <time datetime="$it.date.yyyy_mm_dd$">
32 <small class="u-dn@sm-hi"> 32 <small class="u-d-none@sm-hi">
33 $it.date.short$ 33 $it.date.short$
34 </small> 34 </small>
35 <small class="u-dn@sm-lo"> 35 <small class="u-d-none@sm-lo">
36 $it.date.long$ 36 $it.date.long$
37 </small> 37 </small>
38 </time> 38 </time>
39 <strong class="u-db u-elp">$it.title$</strong> 39 <strong class="u-d-block u-elp">$it.title$</strong>
40 $else$ 40 $else$
41 $it.title$ 41 $it.title$
42 $endif$ 42 $endif$
43 </div> 43 </div>
44 $if(it.post_icon)$ 44 $if(it.post_icon)$
45 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 45 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
46 <use href="/symbols.svg#icon-$it.post_icon$"></use> 46 <use href="/symbols.svg#icon-$it.post_icon$"></use>
47 </svg> 47 </svg>
48 $endif$ 48 $endif$
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 1b7c000..b3763e4 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -1,37 +1,37 @@
1$if(it.url)$ 1$if(it.url)$
2 <a href="$it.url.rel$" class="l-card-list__card c-card"> 2 <a href="$it.url.rel$" class="l-card-list__card c-card">
3 <div class="c-card__row"> 3 <div class="c-card__row l-media">
4 $if(it.indicator)$ 4 $if(it.indicator)$
5 <div class="c-card__block c-card__block--indicator"></div> 5 <div class="c-card__indicator l-media__block"></div>
6 $endif$ 6 $endif$
7 $if(it.icon)$ 7 $if(it.icon)$
8 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 8 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
9 <use href="/symbols.svg#icon-$it.icon$"></use> 9 <use href="/symbols.svg#icon-$it.icon$"></use>
10 </svg> 10 </svg>
11 $endif$ 11 $endif$
12 <div class="c-card__block c-card__block--main"> 12 <div class="l-media__block l-media__block--main">
13 $if(it.subtitle)$ 13 $if(it.subtitle)$
14 <strong class="u-db u-elp">$it.title$</strong> 14 <strong class="u-d-block u-elp">$it.title$</strong>
15 <small class="u-db u-elp">$it.subtitle$</small> 15 <small class="u-d-block u-elp">$it.subtitle$</small>
16 $elseif(it.category)$ 16 $elseif(it.category)$
17 <small class="u-db u-elp">$it.category$</small> 17 <small class="u-d-block u-elp">$it.category$</small>
18 <strong class="u-db u-elp">$it.title$</strong> 18 <strong class="u-d-block u-elp">$it.title$</strong>
19 $elseif(it.date)$ 19 $elseif(it.date)$
20 <time datetime="$it.date.yyyy_mm_dd$"> 20 <time datetime="$it.date.yyyy_mm_dd$">
21 <small class="u-dn@sm-hi"> 21 <small class="u-d-none@sm-hi">
22 $it.date.short$ 22 $it.date.short$
23 </small> 23 </small>
24 <small class="u-dn@sm-lo"> 24 <small class="u-d-none@sm-lo">
25 $it.date.long$ 25 $it.date.long$
26 </small> 26 </small>
27 </time> 27 </time>
28 <strong class="u-db u-elp">$it.title$</strong> 28 <strong class="u-d-block u-elp">$it.title$</strong>
29 $else$ 29 $else$
30 $it.title$ 30 $it.title$
31 $endif$ 31 $endif$
32 </div> 32 </div>
33 $if(it.post_icon)$ 33 $if(it.post_icon)$
34 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 34 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
35 <use href="/symbols.svg#icon-$it.post_icon$"></use> 35 <use href="/symbols.svg#icon-$it.post_icon$"></use>
36 </svg> 36 </svg>
37 $endif$ 37 $endif$
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html
index ef52cf4..af17725 100644
--- a/templates/partials/list_card.html
+++ b/templates/partials/list_card.html
@@ -1,41 +1,41 @@
1$if(it.url)$ 1$if(it.url)$
2 <a href="$it.url.rel$" class="l-card-list__card c-card"> 2 <a href="$it.url.rel$" class="l-card-list__card c-card">
3 <div class="c-card__row"> 3 <div class="c-card__row l-media">
4 $if(it.indicator)$ 4 $if(it.indicator)$
5 <div class="c-card__block c-card__block--indicator"></div> 5 <div class="c-card__indicator l-media__block"></div>
6 $endif$ 6 $endif$
7 $if(it.icon)$ 7 $if(it.icon)$
8 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 8 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
9 <use href="/symbols.svg#icon-$it.icon$"></use> 9 <use href="/symbols.svg#icon-$it.icon$"></use>
10 </svg> 10 </svg>
11 $endif$ 11 $endif$
12 <div class="c-card__block c-card__block--main"> 12 <div class="l-media__block l-media__block--main">
13 $it.title$ 13 $it.title$
14 </div> 14 </div>
15 $if(it.subtitle)$ 15 $if(it.subtitle)$
16 <div class="c-card__block u-fs0"> 16 <div class="l-media__block u-fs0">
17 <small> 17 <small>
18 $it.subtitle$ 18 $it.subtitle$
19 </small> 19 </small>
20 </div> 20 </div>
21 $elseif(it.category)$ 21 $elseif(it.category)$
22 <div class="c-card__block u-fs0"> 22 <div class="l-media__block u-fs0">
23 <small> 23 <small>
24 $it.category$ 24 $it.category$
25 </small> 25 </small>
26 </div> 26 </div>
27 $elseif(it.date)$ 27 $elseif(it.date)$
28 <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> 28 <time datetime="$it.date.yyyy_mm_dd$" class="l-media__block u-fs0">
29 <small class="u-dn@sm-hi"> 29 <small class="u-d-none@sm-hi">
30 $it.date.short$ 30 $it.date.short$
31 </small> 31 </small>
32 <small class="u-dn@sm-lo"> 32 <small class="u-d-none@sm-lo">
33 $it.date.long$ 33 $it.date.long$
34 </small> 34 </small>
35 </time> 35 </time>
36 $endif$ 36 $endif$
37 $if(it.post_icon)$ 37 $if(it.post_icon)$
38 <svg class="c-card__block o-icon" width="1em" height="1em" aria-hidden="true"> 38 <svg class="l-media__block o-icon" width="1em" height="1em" aria-hidden="true">
39 <use href="/symbols.svg#icon-$it.post_icon$"></use> 39 <use href="/symbols.svg#icon-$it.post_icon$"></use>
40 </svg> 40 </svg>
41 $endif$ 41 $endif$
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 07:13:57 +0000