<article class="c-comment c-comment--unhelpful h-entry" id="c0002">
<header class="c-comment__header">
<h3 class="c-comment__title p-name h-card">
<a class="p-author u-url" href="https://paulrobertlloyd.com/">
<img class="c-avatar u-photo" src="https://www.gravatar.com/avatar/15091a37bacfa4bdd011282627eaca2b?s=96" width="64" height="64" alt="" />
Paul Robert Lloyd
</a>
</h3>
<p class="c-comment__meta">
<a class="c-comment__permalink" rel="bookmark" href="#c0002" title="Permalink to this comment"><time class="dt-published" datetime="2012-12-12T12:24:48-00:00">12 December 2012</time></a>
</p>
</header>
<div class="c-comment__main s-prose e-content">
<p>You fool! Everything you’ve written here is wrong!</p>
</div>
<footer class="c-comment__footer">
<p>This comment was <a href="/vote/up/c0002/">helpful</a> / <a href="/vote/down/c0002/">unhelpful</a></p>
</footer>
</article>
<article class="c-comment{% for mod in mods %} c-comment--{{ mod }}{% endfor %} h-entry" id="{{ id }}">
<header class="c-comment__header">
<h3 class="c-comment__title p-name h-card">
<a class="p-author u-url" href="{{ href }}">
{% render "@avatar", avatar %}
{{ author | title }}
</a>
</h3>
<p class="c-comment__meta">
<a class="c-comment__permalink" rel="bookmark" href="#{{ id }}" title="Permalink to this comment"><time class="dt-published" datetime="{{ datetime }}">{{ datetime | date('D MMMM YYYY') }}</time></a>
</p>
</header>
<div class="c-comment__main s-prose e-content">
{{ content | markdown | safe }}
</div>
<footer class="c-comment__footer">
<p>This comment was <a href="/vote/up/{{ id }}/">helpful</a> / <a href="/vote/down/{{ id }}/">unhelpful</a></p>
</footer>
</article>
{
"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
]
},
"id": "c0002",
"href": "https://paulrobertlloyd.com/",
"author": "Paul Robert Lloyd",
"datetime": "2012-12-12T12:24:48-00:00",
"mods": [
"unhelpful"
],
"avatar": {
"src": "https://www.gravatar.com/avatar/15091a37bacfa4bdd011282627eaca2b?s=96",
"size": 64
},
"content": "You fool! Everything you've written here is wrong!\n"
}
$comment-avatar--small: map(sizes, large);
$comment-avatar--large: map(sizes, xlarge);
.c-comment {
position: relative;
margin-bottom: map(spaces, large);
padding: map(spaces, large);
padding-left: $comment-avatar--small;
background-color: white;
box-shadow: 1px 1px 0 $prose-color--shadow;
@media (-ms-high-contrast: active) {
border: 1px solid;
}
@media (--from-medium-screen) {
padding-left: $comment-avatar--large;
}
@media (--upto-large-screen) {
margin-left: calc(calc(map(spaces, large) - map(spaces, xsmall)) * -1);
margin-right: calc(calc(map(spaces, large) - map(spaces, xsmall)) * -1);
}
&.c-comment--unhelpful {
background-color: transparent;
box-shadow: 0 0 0 1px $prose-color--shadow;
}
.c-avatar {
position: absolute;
top: 0;
left: calc(map(spaces, large) * -1);
width: map(sizes, large);
@media (--from-medium-screen) {
width: map(sizes, xlarge);
}
}
}
.c-comment__header {
margin-bottom: map(spaces, large);
@media print {
border-top: 1px solid black;
padding-top: map(spaces, small);
}
}
.c-comment__title {
@apply --typeset-summary-title;
}
.c-comment__meta {
@apply --typeset-label;
@media (--from-small-screen) {
position: absolute;
top: 1.75rem;
right: map(spaces, large);
}
}
.c-comment__main {
margin-bottom: map(spaces, large);
}
.c-comment__footer {
@apply --typeset-label;
border-top: 1px solid $prose-color--shadow;
padding-top: map(spaces, medium);
text-align: right;
}
There are no notes for this item.