summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-16 18:29:18 +0100
committerVolpeon <git@volpeon.ink>2021-12-16 18:29:18 +0100
commit5f4cb1fd8b84e69092ac56a643b1618006f0442c (patch)
tree1d2388ad69091163da498334e2de5c94c4e74dc7
parentFix it for real (diff)
downloadvolpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.tar.gz
volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.tar.bz2
volpeon.ink-5f4cb1fd8b84e69092ac56a643b1618006f0442c.zip
Add thumbnails to cards
-rw-r--r--assets/css/components/_card.scss43
-rw-r--r--assets/css/layouts/_card-list.scss28
-rw-r--r--content/projects/drawings/2021-eeveelutions/index.md6
-rw-r--r--content/projects/drawings/2021-lazy-firefox/index.md6
-rw-r--r--content/projects/drawings/2021-lycanroc-ava/index.md6
-rw-r--r--content/projects/drawings/2021-refsheet/index.md6
-rw-r--r--content/projects/drawings/2021-spooky-ava-1/index.md6
-rw-r--r--content/projects/drawings/2021-spooky-ava-2/index.md6
-rw-r--r--content/projects/drawings/index.md2
-rw-r--r--content/projects/emojis/blobfox/index.md6
-rw-r--r--content/projects/emojis/bunhd/index.md6
-rw-r--r--content/projects/emojis/index.md2
-rw-r--r--content/projects/emojis/vlpn/index.md6
-rw-r--r--content/projects/index.md5
-rw-r--r--scripts/metadata_filter.lua9
-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
20 files changed, 222 insertions, 123 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index b023447..5c2efa4 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -30,11 +30,8 @@
30 ), 'light'); 30 ), 'light');
31 31
32 @include component(namespace()) { 32 @include component(namespace()) {
33 display: flex; 33 display: block;
34 position: relative; 34 position: relative;
35 align-items: center;
36 padding-right: calc(.5 * #{prop(--dims --pad-x)});
37 padding-left: calc(.5 * #{prop(--dims --pad-x)});
38 transform: translateY(0); 35 transform: translateY(0);
39 transition: transform .2s, background-color .2s, color .2s; 36 transition: transform .2s, background-color .2s, color .2s;
40 background-color: prop(--colors --bg); 37 background-color: prop(--colors --bg);
@@ -81,6 +78,10 @@
81 color: prop(--colors --hover --fg); 78 color: prop(--colors --hover --fg);
82 } 79 }
83 } 80 }
81
82 /*@include element('row') {
83 border-top-color: transparent;
84 }*/
84 } 85 }
85 } 86 }
86 87
@@ -92,9 +93,41 @@
92 } 93 }
93 } 94 }
94 95
96 @include element('row') {
97 display: flex;
98 align-items: center;
99 padding: prop(--dims --pad-y) prop(--dims --pad-x);
100 gap: prop(--dims --pad-x);
101 //transition: border-top-color .2s;
102
103 @include modifier('flush') {
104 padding: 0;
105 }
106
107 /*@include next-twin-element {
108 border-top: 1px solid prop(--colors --border);
109 }*/
110 }
111
112 @include element('thumbnail') {
113 position: relative;
114 width: 100%;
115 height: 2em;
116 padding-top: 40%;
117 }
118
119 @include element('thumbnail-img') {
120 display: block;
121 position: absolute;
122 top: 0;
123 left: 0;
124 width: 100%;
125 height: 100%;
126 object-fit: cover;
127 }
128
95 @include element('block') { 129 @include element('block') {
96 flex: 0 0 auto; 130 flex: 0 0 auto;
97 padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)});
98 overflow: hidden; 131 overflow: hidden;
99 text-overflow: ellipsis; 132 text-overflow: ellipsis;
100 133
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index e6d1297..3bbcc44 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -10,19 +10,23 @@
10 font-size: 1rem; 10 font-size: 1rem;
11 11
12 @include element('cards') { 12 @include element('cards') {
13 margin-top: $line-height * .625rem; 13 display: flex;
14 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); 14 flex-direction: column;
15 gap: 2px;
16 margin-top: $line-height * .625rem;
17 filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)});
15 18
16 @include modifier('grid') { 19 @include modifier('grid', 'gallery') {
17 display: grid; 20 display: grid;
18 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); 21 grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
19 gap: 6px; 22 }
20 23
21 @include element('card') { 24 @include modifier('grid') {
22 @include next-twin-element { 25 gap: 6px;
23 margin-top: 0; 26 }
24 } 27
25 } 28 @include modifier('gallery') {
29 gap: 30px;
26 } 30 }
27 31
28 @media print { 32 @media print {
@@ -32,10 +36,6 @@
32 36
33 @include element('card') { 37 @include element('card') {
34 box-shadow: none; 38 box-shadow: none;
35
36 @include next-twin-element {
37 margin-top: 2px;
38 }
39 } 39 }
40 } 40 }
41} 41}
diff --git a/content/projects/drawings/2021-eeveelutions/index.md b/content/projects/drawings/2021-eeveelutions/index.md
index 9da3089..0808085 100644
--- a/content/projects/drawings/2021-eeveelutions/index.md
+++ b/content/projects/drawings/2021-eeveelutions/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: Eeveelutions 2title: Eeveelutions
3date: 2021-08-19 3date: 2021-08-19
4preview: preview.png 4thumbnail: preview.png
5--- 5---
6 6
7![](eevee.png) 7![](eevee.png)
diff --git a/content/projects/drawings/2021-lazy-firefox/index.md b/content/projects/drawings/2021-lazy-firefox/index.md
index a351a65..35ad12c 100644
--- a/content/projects/drawings/2021-lazy-firefox/index.md
+++ b/content/projects/drawings/2021-lazy-firefox/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: Lazy Firefox 2title: Lazy Firefox
3date: 2021-10-16 3date: 2021-10-16
4preview: firefox_lazy.png 4thumbnail: firefox_lazy.png
5--- 5---
6 6
7![](firefox_lazy.png) 7![](firefox_lazy.png)
diff --git a/content/projects/drawings/2021-lycanroc-ava/index.md b/content/projects/drawings/2021-lycanroc-ava/index.md
index 5ba7143..406f9a2 100644
--- a/content/projects/drawings/2021-lycanroc-ava/index.md
+++ b/content/projects/drawings/2021-lycanroc-ava/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: Lycanroc Avatar 2title: Lycanroc Avatar
3date: 2021-10-19 3date: 2021-10-19
4preview: ava.png 4thumbnail: ava.png
5--- 5---
6 6
7![](ava.png) 7![](ava.png)
diff --git a/content/projects/drawings/2021-refsheet/index.md b/content/projects/drawings/2021-refsheet/index.md
index bd85728..70bbd84 100644
--- a/content/projects/drawings/2021-refsheet/index.md
+++ b/content/projects/drawings/2021-refsheet/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: Reference Sheet Views 2title: Reference Sheet Views
3date: 2021-10-06 3date: 2021-10-06
4preview: preview.png 4thumbnail: preview.png
5--- 5---
6 6
7![](bottom.png) 7![](bottom.png)
diff --git a/content/projects/drawings/2021-spooky-ava-1/index.md b/content/projects/drawings/2021-spooky-ava-1/index.md
index 4341b9a..ecfd3df 100644
--- a/content/projects/drawings/2021-spooky-ava-1/index.md
+++ b/content/projects/drawings/2021-spooky-ava-1/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: \"Spooky\" Avatar 2title: \"Spooky\" Avatar
3date: 2021-10-07 3date: 2021-10-07
4preview: ava.png 4thumbnail: ava.png
5--- 5---
6 6
7![](ava.png) 7![](ava.png)
diff --git a/content/projects/drawings/2021-spooky-ava-2/index.md b/content/projects/drawings/2021-spooky-ava-2/index.md
index 22b996d..0b61e24 100644
--- a/content/projects/drawings/2021-spooky-ava-2/index.md
+++ b/content/projects/drawings/2021-spooky-ava-2/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: Spooky Avatar 2title: Spooky Avatar
3date: 2021-10-14 3date: 2021-10-14
4preview: ava.png 4thumbnail: ava.png
5--- 5---
6 6
7![](ava.png) 7![](ava.png)
diff --git a/content/projects/drawings/index.md b/content/projects/drawings/index.md
index 643a6ad..1f12a88 100644
--- a/content/projects/drawings/index.md
+++ b/content/projects/drawings/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: Drawings 2title: Drawings
3icon: image 3icon: image
4list_layout: grid 4list_layout: gallery
5list_post_icon: arrow-right 5list_post_icon: arrow-right
6list_order: date_desc 6list_order: date_desc
7feed: true 7feed: true
diff --git a/content/projects/emojis/blobfox/index.md b/content/projects/emojis/blobfox/index.md
index 0926084..3012ccc 100644
--- a/content/projects/emojis/blobfox/index.md
+++ b/content/projects/emojis/blobfox/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: Blobfox 2title: Blobfox
3date: 2020-09-04 3date: 2020-09-04
4preview: preview.jpg 4thumbnail: preview.jpg
5--- 5---
6 6
7![](screenshot.png) 7![](screenshot.png)
diff --git a/content/projects/emojis/bunhd/index.md b/content/projects/emojis/bunhd/index.md
index 7cb65c4..65fcf33 100644
--- a/content/projects/emojis/bunhd/index.md
+++ b/content/projects/emojis/bunhd/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: BunHD 2title: BunHD
3date: 2019-09-30 3date: 2019-09-30
4preview: preview.png 4thumbnail: preview.png
5--- 5---
6 6
7![](screenshot.png) 7![](screenshot.png)
diff --git a/content/projects/emojis/index.md b/content/projects/emojis/index.md
index 6ef4559..fb5ab08 100644
--- a/content/projects/emojis/index.md
+++ b/content/projects/emojis/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: Emojis 2title: Emojis
3icon: smile 3icon: smile
4list_layout: grid 4list_layout: gallery
5list_post_icon: arrow-right 5list_post_icon: arrow-right
6list_order: date_desc 6list_order: date_desc
7feed: true 7feed: true
diff --git a/content/projects/emojis/vlpn/index.md b/content/projects/emojis/vlpn/index.md
index 28d07e8..c7bc68e 100644
--- a/content/projects/emojis/vlpn/index.md
+++ b/content/projects/emojis/vlpn/index.md
@@ -1,7 +1,7 @@
1--- 1---
2title: vlpn 2title: vlpn
3date: 2021-07-23 3date: 2021-07-23
4preview: preview.png 4thumbnail: preview.png
5--- 5---
6 6
7![](preview.png) 7![](preview.png)
diff --git a/content/projects/index.md b/content/projects/index.md
index 748126d..814834a 100644
--- a/content/projects/index.md
+++ b/content/projects/index.md
@@ -1,9 +1,10 @@
1--- 1---
2title: Projects 2title: Projects
3position: 2 3position: 2
4list_layout: grid 4list_layout: gallery
5list_limit: 4
5feed: true 6feed: true
6--- 7---
7 8
8A selection of projects I wasn't too lazy to create a page for. 9A selection of projects I wasn't too lazy to create a page for.
9You can find more projects on [git.vulpes.one](https://git.vulpes.one/). 10You can find some more projects on [git.vulpes.one](https://git.vulpes.one/).
diff --git a/scripts/metadata_filter.lua b/scripts/metadata_filter.lua
index a3675d9..25fbc50 100644
--- a/scripts/metadata_filter.lua
+++ b/scripts/metadata_filter.lua
@@ -187,6 +187,7 @@ function generate_list(meta)
187 subtitle = p.subtitle, 187 subtitle = p.subtitle,
188 date = p.date, 188 date = p.date,
189 url = p.url, 189 url = p.url,
190 thumbnail = p.thumbnail,
190 icon = p.icon or meta.icon, 191 icon = p.icon or meta.icon,
191 post_icon = meta.list_post_icon, 192 post_icon = meta.list_post_icon,
192 indicator = meta.list_read_indicators, 193 indicator = meta.list_read_indicators,
@@ -202,6 +203,7 @@ function generate_list(meta)
202 subtitle = p.subtitle, 203 subtitle = p.subtitle,
203 date = p.date, 204 date = p.date,
204 url = p.url, 205 url = p.url,
206 thumbnail = p.thumbnail,
205 icon = p.icon or cat.icon, 207 icon = p.icon or cat.icon,
206 post_icon = cat.list_post_icon or meta.list_post_icon, 208 post_icon = cat.list_post_icon or meta.list_post_icon,
207 indicator = cat.list_read_indicators, 209 indicator = cat.list_read_indicators,
@@ -233,6 +235,7 @@ function generate_list(meta)
233 subtitle = p.subtitle, 235 subtitle = p.subtitle,
234 category = c.title, 236 category = c.title,
235 url = p.url, 237 url = p.url,
238 thumbnail = p.thumbnail,
236 icon = p.icon or c.icon, 239 icon = p.icon or c.icon,
237 post_icon = c.list_post_icon or cat.list_post_icon, 240 post_icon = c.list_post_icon or cat.list_post_icon,
238 indicator = c.list_read_indicators, 241 indicator = c.list_read_indicators,
@@ -293,9 +296,9 @@ function process(global, meta)
293 end 296 end
294 end 297 end
295 298
296 if meta.preview then 299 if meta.thumbnail then
297 meta.preview = make_absolute(pandoc.utils.stringify(meta.preview), meta.file_out) 300 meta.thumbnail = make_absolute(pandoc.utils.stringify(meta.thumbnail), meta.file_out)
298 meta.preview = resolve_url(global.site.url, global.file_out, meta.preview) 301 meta.thumbnail = resolve_url(global.site.url, global.file_out, meta.thumbnail)
299 end 302 end
300 303
301 if meta.menus and meta.menus.main then 304 if meta.menus and meta.menus.main then
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$