summaryrefslogtreecommitdiffstats
path: root/templates
diff options
context:
space:
mode:
Diffstat (limited to 'templates')
-rw-r--r--templates/layouts/categorized_list.html9
-rw-r--r--templates/layouts/list.html4
-rw-r--r--templates/partials/gallery_card.html47
-rw-r--r--templates/partials/grid_card.html66
-rw-r--r--templates/partials/list_card.html76
5 files changed, 132 insertions, 70 deletions
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 73e75f3..7bbfd8c 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -8,7 +8,10 @@ $body$
8 $for(list)$ 8 $for(list)$
9 <section> 9 <section>
10 <h2 class="s-invisible-links"> 10 <h2 class="s-invisible-links">
11 <a href="$it.url.rel$">$it.title$</a> 11 <a href="$it.url.rel$">
12 $it.title$
13 $if(it.omitted)$→$endif$
14 </a>
12 </h2> 15 </h2>
13 $if(it.description)$ 16 $if(it.description)$
14 <div class="s-small s-colored-links">$it.description$</div> 17 <div class="s-small s-colored-links">$it.description$</div>
@@ -17,6 +20,10 @@ $body$
17 <div class="l-card-list__cards l-card-list__cards--grid"> 20 <div class="l-card-list__cards l-card-list__cards--grid">
18 $it.items:partials/grid_card()$ 21 $it.items:partials/grid_card()$
19 </div> 22 </div>
23 $elseif(it.layout.is_gallery)$
24 <div class="l-card-list__cards l-card-list__cards--gallery">
25 $it.items:partials/gallery_card()$
26 </div>
20 $else$ 27 $else$
21 <div class="l-card-list__cards"> 28 <div class="l-card-list__cards">
22 $it.items:partials/list_card()$ 29 $it.items:partials/list_card()$
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 32aa35a..9c6b26e 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -9,6 +9,10 @@ $body$
9 <div class="l-card-list__cards l-card-list__cards--grid"> 9 <div class="l-card-list__cards l-card-list__cards--grid">
10 $list:partials/grid_card()$ 10 $list:partials/grid_card()$
11 </div> 11 </div>
12 $elseif(list_layout.is_gallery)$
13 <div class="l-card-list__cards l-card-list__cards--gallery">
14 $list:partials/gallery_card()$
15 </div>
12 $else$ 16 $else$
13 <div class="l-card-list__cards"> 17 <div class="l-card-list__cards">
14 $list:partials/list_card()$ 18 $list:partials/list_card()$
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
new file mode 100644
index 0000000..f724e3b
--- /dev/null
+++ b/templates/partials/gallery_card.html
@@ -0,0 +1,47 @@
1$if(it.url)$
2 <a href="$it.url.rel$" class="l-card-list__card c-card">
3 $if(it.thumbnail)$
4 <div class="c-card__row c-card__row--flush">
5 <div class="c-card__thumbnail">
6 <img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />
7 </div>
8 </div>
9 $endif$
10 <div class="c-card__row">
11 $if(it.indicator)$
12 <div class="c-card__block c-card__block--indicator"></div>
13 $endif$
14 $if(it.icon)$
15 <svg class="c-card__block o-icon" width="1em" height="1em">
16 <use href="/symbols.svg#icon-$it.icon$"></use>
17 </svg>
18 $endif$
19 <div class="c-card__block c-card__block--main">
20 $if(it.subtitle)$
21 <strong class="u-db u-elp">$it.title$</strong>
22 <small class="u-db u-elp">$it.subtitle$</small>
23 $elseif(it.category)$
24 <small class="u-db u-elp">$it.category$</small>
25 <strong class="u-db u-elp">$it.title$</strong>
26 $elseif(it.date)$
27 <time datetime="$it.date.yyyy_mm_dd$">
28 <small class="u-dn@sm-hi">
29 $it.date.short$
30 </small>
31 <small class="u-dn@sm-lo">
32 $it.date.long$
33 </small>
34 </time>
35 <strong class="u-db u-elp">$it.title$</strong>
36 $else$
37 $it.title$
38 $endif$
39 </div>
40 $if(it.post_icon)$
41 <svg class="c-card__block o-icon" width="1em" height="1em">
42 <use href="/symbols.svg#icon-$it.post_icon$"></use>
43 </svg>
44 $endif$
45 </div>
46 </a>
47$endif$
diff --git a/templates/partials/grid_card.html b/templates/partials/grid_card.html
index 6f6c16e..25cde52 100644
--- a/templates/partials/grid_card.html
+++ b/templates/partials/grid_card.html
@@ -1,38 +1,40 @@
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 $if(it.indicator)$ 3 <div class="c-card__row">
4 <div class="c-card__block c-card__block--indicator"></div> 4 $if(it.indicator)$
5 $endif$ 5 <div class="c-card__block c-card__block--indicator"></div>
6 $if(it.icon)$ 6 $endif$
7 <svg class="c-card__block o-icon" width="1em" height="1em"> 7 $if(it.icon)$
8 <use href="/symbols.svg#icon-$it.icon$"></use> 8 <svg class="c-card__block o-icon" width="1em" height="1em">
9 </svg> 9 <use href="/symbols.svg#icon-$it.icon$"></use>
10 $endif$ 10 </svg>
11 <div class="c-card__block c-card__block--main"> 11 $endif$
12 $if(it.subtitle)$ 12 <div class="c-card__block c-card__block--main">
13 <strong class="u-db u-elp">$it.title$</strong> 13 $if(it.subtitle)$
14 <small class="u-db u-elp">$it.subtitle$</small> 14 <strong class="u-db u-elp">$it.title$</strong>
15 $elseif(it.category)$ 15 <small class="u-db u-elp">$it.subtitle$</small>
16 <small class="u-db u-elp">$it.category$</small> 16 $elseif(it.category)$
17 <strong class="u-db u-elp">$it.title$</strong> 17 <small class="u-db u-elp">$it.category$</small>
18 $elseif(it.date)$ 18 <strong class="u-db u-elp">$it.title$</strong>
19 <time datetime="$it.date.yyyy_mm_dd$"> 19 $elseif(it.date)$
20 <small class="u-dn@sm-hi"> 20 <time datetime="$it.date.yyyy_mm_dd$">
21 $it.date.short$ 21 <small class="u-dn@sm-hi">
22 </small> 22 $it.date.short$
23 <small class="u-dn@sm-lo"> 23 </small>
24 $it.date.long$ 24 <small class="u-dn@sm-lo">
25 </small> 25 $it.date.long$
26 </time> 26 </small>
27 <strong class="u-db u-elp">$it.title$</strong> 27 </time>
28 $else$ 28 <strong class="u-db u-elp">$it.title$</strong>
29 $it.title$ 29 $else$
30 $it.title$
31 $endif$
32 </div>
33 $if(it.post_icon)$
34 <svg class="c-card__block o-icon" width="1em" height="1em">
35 <use href="/symbols.svg#icon-$it.post_icon$"></use>
36 </svg>
30 $endif$ 37 $endif$
31 </div> 38 </div>
32 $if(it.post_icon)$
33 <svg class="c-card__block o-icon" width="1em" height="1em">
34 <use href="/symbols.svg#icon-$it.post_icon$"></use>
35 </svg>
36 $endif$
37 </a> 39 </a>
38$endif$ 40$endif$
diff --git a/templates/partials/list_card.html b/templates/partials/list_card.html
index 73caa05..8244cf5 100644
--- a/templates/partials/list_card.html
+++ b/templates/partials/list_card.html
@@ -1,42 +1,44 @@
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 $if(it.indicator)$ 3 <div class="c-card__row">
4 <div class="c-card__block c-card__block--indicator"></div> 4 $if(it.indicator)$
5 $endif$ 5 <div class="c-card__block c-card__block--indicator"></div>
6 $if(it.icon)$ 6 $endif$
7 <svg class="c-card__block o-icon" width="1em" height="1em"> 7 $if(it.icon)$
8 <use href="/symbols.svg#icon-$it.icon$"></use> 8 <svg class="c-card__block o-icon" width="1em" height="1em">
9 </svg> 9 <use href="/symbols.svg#icon-$it.icon$"></use>
10 $endif$ 10 </svg>
11 <div class="c-card__block c-card__block--main"> 11 $endif$
12 $it.title$ 12 <div class="c-card__block c-card__block--main">
13 </div> 13 $it.title$
14 $if(it.subtitle)$
15 <div class="c-card__block u-fs0">
16 <small>
17 $it.subtitle$
18 </small>
19 </div>
20 $elseif(it.category)$
21 <div class="c-card__block u-fs0">
22 <small>
23 $it.category$
24 </small>
25 </div> 14 </div>
26 $elseif(it.date)$ 15 $if(it.subtitle)$
27 <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> 16 <div class="c-card__block u-fs0">
28 <small class="u-dn@sm-hi"> 17 <small>
29 $it.date.short$ 18 $it.subtitle$
30 </small> 19 </small>
31 <small class="u-dn@sm-lo"> 20 </div>
32 $it.date.long$ 21 $elseif(it.category)$
33 </small> 22 <div class="c-card__block u-fs0">
34 </time> 23 <small>
35 $endif$ 24 $it.category$
36 $if(it.post_icon)$ 25 </small>
37 <svg class="c-card__block o-icon" width="1em" height="1em"> 26 </div>
38 <use href="/symbols.svg#icon-$it.post_icon$"></use> 27 $elseif(it.date)$
39 </svg> 28 <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0">
40 $endif$ 29 <small class="u-dn@sm-hi">
30 $it.date.short$
31 </small>
32 <small class="u-dn@sm-lo">
33 $it.date.long$
34 </small>
35 </time>
36 $endif$
37 $if(it.post_icon)$
38 <svg class="c-card__block o-icon" width="1em" height="1em">
39 <use href="/symbols.svg#icon-$it.post_icon$"></use>
40 </svg>
41 $endif$
42 </div>
41 </a> 43 </a>
42$endif$ 44$endif$