<ul class="c-meta">
<li class="c-meta__item"><time class="dt-published" datetime="2012-12-01T00:00:00-00:00">1 Dec<span>ember</span> 2012</time></li>
<li class="c-meta__item">Published in <a href="/topics/code/">Code</a></li>
<li class="c-meta__item"><a href="#comments">8 comments</a></li>
</ul>
<ul class="c-meta">
{%- for item in items -%}
<li class="c-meta__item">{{ item | markdownInline | safe }}</li>
{%- endfor -%}
</ul>
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": {
"year": [
348,
344,
340,
336,
332,
328,
324,
320,
316,
312,
308,
304,
300,
296,
292,
288
],
"day": [
360,
353,
346,
339,
332,
325,
318,
311,
304,
297,
290,
283,
276,
269,
262,
255,
248,
241,
234,
227,
220,
213,
206,
199
]
},
"items": [
"<time class=\"dt-published\" datetime=\"2012-12-01T00:00:00-00:00\">1 Dec<span>ember</span> 2012</time>",
"Published in [Code](/topics/code/)",
"[8 comments](#comments)"
]
}
.c-meta {
@apply --typeset-caption;
display: flex;
flex-flow: row wrap;
margin-bottom: map(spaces, medium);
border-top: 1px solid $prose-color--rule;
padding: map(spaces, small) 0 map(spaces, large);
@media (--from-large-screen) {
flex-flow: column nowrap;
border: 0;
padding: 0;
}
}
.c-meta__item {
flex: 0 0 auto;
@media screen and (max-width: 24.9375em) {
.dt-published span {
display: none;
}
}
@media (--upto-large-screen) {
&:not(:last-child)::after {
content: '•';
margin: 0 map(spaces, small);
opacity: 0.5;
}
}
@media (--from-large-screen) {
display: block;
border-top: 1px solid $prose-color--rule;
padding: map(spaces, small) 0 map(spaces, large);
text-align: right;
}
@media print {
&:not(:last-child)::after {
content: '•';
margin: 0 map(spaces, small);
}
}
}
There are no notes for this item.