<section class="c-section" id="author">
<header class="c-section__header">
<h2 class="c-section__title">About the author</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>Drew McLellan is lead developer on your favourite content management systems, <a href="https://grabaperch.com/">Perch and Perch Runway</a>. He is Director and Senior Developer at edgeofmyseat.com in Bristol, England, and is formerly Group Lead at the Web Standards Project. When not publishing 24 ways, Drew keeps a <a href="http://allinthehead.com/">personal site</a> covering web development issues and themes, <a href="https://flickr.com/drewm/">takes photos</a>, <a href="https://twitter.com/drewm">tweets a lot</a> and tries to stay upright on his bicycle.</p>
<p><span class="caption">Photo: <a href="http://duncandavidson.com/">James Duncan Davidson</a></span></p>
<p><a class="c-continue" href="/authors/drewmclellan/">More articles by Drew</a></p>
</div>
</div>
</section>
<section class="c-section{% for mod in mods %} c-section--{{ mod }}{% endfor %}" id="{{ id }}">
<header class="c-section__header">
<h2 class="c-section__title">{{ title | markdownInline | safe }}</h2>
</header>
<div class="c-section__main">
{%- if component -%}
{% render "@" + component, config %}
{%- endif -%}
{%- if icon -%}
{% include icon + ".svg" %}
{%- endif -%}
{%- if content -%}
<div class="s-prose">
{{ content | markdown | safe }}
</div>
{%- endif -%}
{%- if comments -%}
{%- for comment in comments -%}
{% render "@comment", comment %}
{%- endfor -%}
{%- endif -%}
</div>
</section>
{
"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": "author",
"title": "About the author",
"content": "Drew McLellan is lead developer on your favourite content management systems, [Perch and Perch Runway](https://grabaperch.com/). He is Director and Senior Developer at edgeofmyseat.com in Bristol, England, and is formerly Group Lead at the Web Standards Project. When not publishing 24 ways, Drew keeps a [personal site](http://allinthehead.com/) covering web development issues and themes, [takes photos](https://flickr.com/drewm/), [tweets a lot](https://twitter.com/drewm) and tries to stay upright on his bicycle.\n\n<span class=\"caption\">Photo: [James Duncan Davidson](http://duncandavidson.com/)</span>\n\n<a class=\"c-continue\" href=\"/authors/drewmclellan/\">More articles by Drew</a>\n"
}
.c-section {
display: flex;
flex-direction: column;
justify-content: space-between;
@media (--from-large-screen) {
flex-direction: row;
}
}
.c-section__header {
padding: map(spaces, medium) map(spaces, large);
@media (--from-large-screen) {
flex: 1 0 20%;
padding-right: 0;
border-top: 1px solid $prose-color--rule;
text-align: right;
}
@media print {
border-top: 2px solid black;
padding-bottom: 0;
}
}
.c-section__title {
@apply --typeset-ui;
text-transform: uppercase;
}
.c-section__main {
margin-bottom: map(spaces, large);
padding: map(spaces, medium) map(spaces, large);
border-top: 1px solid $prose-color--rule;
@media (--from-large-screen) {
flex: 1 0 75%;
margin-left: 5%;
padding-left: 0;
}
}
/* Section - Sponsor */
.c-article .c-section--sponsor {
@media (--from-large-screen) {
flex-direction: column;
position: absolute;
top: 56rem;
left: 0;
width: 20%;
padding: 0;
.c-section__title {
@apply --typeset-ui;
}
.c-section__main {
padding-right: 0;
border-top: 0;
}
.c-promo {
@apply --typeset-caption;
text-align: right;
}
}
}
/* Section - Topic */
.c-section--topic {
.c-section__main {
display: flex;
flex-direction: row;
}
svg {
flex-shrink: 0;
width: map(sizes, xlarge);
height: map(sizes, xlarge);
margin: map(spaces, small) map(spaces, large) 0 0;
}
}
There are no notes for this item.