<a class="c-author h-card u-url" href="/authors/drewmclellan/">
<img class="c-author__image u-photo" src="https://cloud.24ways.org/authors/drewmclellan160.jpg" width="160" height="160" alt="" />
<span class="c-author__meta p-name">Drew McLellan</span>
</a>
<a class="c-author h-card u-url" href="/authors/{{ author | slugify }}/">
<img class="c-author__image u-photo" src="https://cloud.24ways.org/authors/{{ author | slugify }}160.jpg" width="160" height="160" alt=""/>
<span class="c-author__meta p-name">{{ author }}</span>
</a>
{
"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
]
},
"author": "Drew McLellan"
}
.c-author {
display: block;
position: relative;
overflow: hidden;
}
.c-author__meta {
@apply --typeset-label;
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: map(spaces, small);
background-color: color(map(colors, neutral, darkest) a(75%));
color: white;
@media print {
color: white !important;
background-color: black !important;
}
.c-author:hover & {
text-decoration: underline color(white a(66%));
}
}
.c-author__image {
display: block;
height: auto;
width: 100%;
transition: transform $author-duration ease-out;
.c-author:hover & {
transform: scale(1.1);
@media (prefers-reduced-motion) {
transform: none;
}
}
}
There are no notes for this item.