<figure class="c-og-image">
<img class="c-avatar u-photo" src="https://cloud.24ways.org/authors/drewmclellan280.jpg" width="220" height="220" alt="" />
<blockquote class="c-og-image__quote">
<p>“There’s no prize for solving problems you don’t have yet, and heading further into the desert in search of water is a survival tactic, not an aspiration.”</p>
</blockquote>
<figcaption class="c-og-image__cite">
— Drew McLellan
</figcaption>
</figure>
<figure class="c-og-image">
{% render "@avatar", avatar %}
<blockquote class="c-og-image__quote{% if quote.length >= 160 %} c-og-image__quote--small{% endif %}">
<p>“{{ quote | markdownInline }}”</p>
</blockquote>
<figcaption class="c-og-image__cite">
— {{ author }}
</figcaption>
</figure>
{
"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
]
},
"quote": "There's no prize for solving problems you don't have yet, and heading further into the desert in search of water is a survival tactic, not an aspiration.",
"author": "Drew McLellan",
"avatar": {
"size": 220,
"src": "https://cloud.24ways.org/authors/drewmclellan280.jpg"
}
}
.c-og-image {
width: 600px;
height: 315px;
overflow: hidden;
padding: 2rem;
background-color: $color-year;
background-color: var(--color-year, $color-year);
background-image: inline('diamond.svg');
background-repeat: repeat;
}
.c-og-image__quote {
@apply --typeset-prose;
margin-bottom: map(spaces, small);
font-family: map(fonts, family-serif);
font-size: 2rem;
line-height: 1.15;
text-indent: -0.45em;
color: white;
}
@supports (hanging-punctuation: first) {
.c-og-image__quote {
text-indent: 0;
}
}
.c-og-image__quote--small {
font-size: 1.75rem;
}
.c-og-image__cite {
@apply --typeset-caption;
font-weight: 600;
font-size: 1.25rem;
color: map(colors, primary, light);
}
.c-og-image .c-avatar {
float: right;
margin: -2.5rem -3.5rem 0 0;
}
There are no notes for this item.