<!-- Topic -->
<section class="c-section c-section--topic" id="code">
<header class="c-section__header">
<h2 class="c-section__title"><a href="/topic/code/">Code</a></h2>
</header>
<div class="c-section__main"><svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path transform="rotate(45 120 120)" d="M115 100H70.5C63 85 47.5 75 30 75 8.5 75-9.5 90-14 110h29l10 10-10 10h-29c4.5 20 22.5 35 44 35 17.5 0 33-10 40.5-25h99.5c7.5 15 22.5 25 40.5 25 21.5 0 39.5-15 44-35h-29l-10-10 10-10h29c-4.5-20-22.5-35-44-35-17.5 0-33 10-40.5 25H125V30h10v-50h-30v50h10v70zm123.5 40c-6.5 9-17 15-28.5 15-16 0-29-10.5-33.5-25H63.5C59 144.5 46 155 30 155c-12 0-22.5-6-28.5-15H20l20-20-20-20H1.5C7.5 91 18 85 30 85c16 0 29 10.5 33.5 25h113c4.5-14.5 17.5-25 33.5-25 12 0 23 6 29 15h-19l-20 20 20 20h19zM115-10h10v30h-10v-30zM99.5 240v-50h-10v-10h25v-40h10v40h25v10H140v50c0 10-7.5 20-20 20-12.5 0-20-10-20.5-20zm11 0c0 7.5 5 10 10 10s10-2.5 10-10v-50h-20v50z" />
</svg>
<div class="s-prose">
<p>Poetry? Not likely (though <a href="/2006/gravity-defying-page-corners/">Dan Cederholm wrote some doggerel</a> back in 2006). Here are articles on hypertext markup language, its attributes and other minutiae; crafty <s>hacks</s> tips for your cascading style sheets; JavaScript legerdemain; and tinkering with application programming interfaces.</p>
</div>
</div>
</section>
<!-- Archive -->
<section class="c-section" id="2013">
<header class="c-section__header">
<h2 class="c-section__title"><a href="/2013/">2013</a></h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>Scourge of browser vendors everywhere, WaSP buzzed its last in March. Dave Shea’s CSS Zen Garden celebrated its tenth anniversary in May, and Google Glass was released. Ever broad in its interests, 24 ways tamed Grunt, URLs and GitHub Pages, encouraged readers to write and publish books, and leavened all that with goodies on project management, web typography and SVG.</p>
</div>
</div>
</section>
<!-- Author -->
<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>
<!-- Sponsor -->
<section class="c-section c-section--sponsor" id="sponsor">
<header class="c-section__header">
<h2 class="c-section__title">Brought to you by</h2>
</header>
<div class="c-section__main"><a class="c-promo" href="https://grabaperch.com/?ref=24w01">
<img class="c-promo__image" src="/assets/images/logo-perch.png" alt="Perch - A really little CMS" width="152" height="64" />
<p class="c-promo__message">The easiest way to publish <strong>fast, flexible HTML5 websites</strong> your clients will love.</p>
<p class="c-promo__url">grabaperch.com</p>
</a>
</div>
</section>
<!-- Comments -->
<section class="c-section" id="comments">
<header class="c-section__header">
<h2 class="c-section__title">2 Comments</h2>
</header>
<div class="c-section__main">
<div class="s-prose">
<p>Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.</p>
<p><a class="c-continue" href="#comment-form">Got something to add? Leave a comment below</a></p>
</div>
<article class="c-comment h-entry" id="c0001">
<header class="c-comment__header">
<h3 class="c-comment__title p-name h-card">
<a class="p-author u-url" href="https://adactio.com/">
<img class="c-avatar u-photo" src="https://www.gravatar.com/avatar/5ad82c5ba0264363974af89deb743c20?s=96" width="64" height="64" alt="" />
Jeremy Keith
</a>
</h3>
<p class="c-comment__meta">
<a class="c-comment__permalink" rel="bookmark" href="#c0001" title="Permalink to this comment"><time class="dt-published" datetime="2012-12-01T12:24:48-00:00">1 December 2012</time></a>
</p>
</header>
<div class="c-comment__main s-prose e-content">
<p>This is great stuff! I’m terrible at regular expressions—my brain just doesn’t seem to want to remember any of it—but this article contains the clearest description of regular expressions I’ve come across.</p>
<p>I thought I’d share a useful little rewrite rule that I use for cache-busting JavaScript and CSS files. You know the story: you make a change in your JavaScript or CSS and you want to let the browser know that it should grab the new version instead of using what it’s got in its cache.</p>
<p>Now, I could potentially just use a query string when I point to my JS and CSS files ( e.g. /js/myscript.js?20131201 ) …but that can cause issues with proxy servers.</p>
<p>Instead what I what I do is point to files like this: <code>/js/myscript.20131201.js</code></p>
<p>Then I need to tell the server to look for the <strong>actual</strong> file in <code>/js/myscript.js</code></p>
<p>Here’s the rewrite rule I’m using:</p>
<pre><code>RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.).(d).(js|css)$ $1.$3 [L]
</code></pre>
<p>It’s basically telling the server that, if the JS or CSS file doesn’t actually exist and it matches the pattern of having two dots before the file extension (with only numbers after the first dot), to look at the bit before the first dot, and look at the bit after the second dot, but to ignore the bit in between (the numbers).</p>
<p>The server serves up the right file, but browsers fetch the new version because, as far as they’re concerned, this looks like a brand new file that they haven’t got in their cache.</p>
<p>That was a terrible explanation, wasn’t it? I now have even more appreciation for how clearly and concise this article is.</p>
</div>
<footer class="c-comment__footer">
<p>This comment was <a href="/vote/up/c0001/">helpful</a> / <a href="/vote/down/c0001/">unhelpful</a></p>
</footer>
</article>
<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>
</div>
</section>
<!-- Related -->
<section class="c-section c-section--related" id="related">
<header class="c-section__header">
<h2 class="c-section__title">Related articles</h2>
</header>
<div class="c-section__main">
<ol class="c-listing c-listing--summaries">
<li>
<article class="c-summary h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/">Grid, Flexbox, Box Alignment: Our New System for Layout</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/rachelandrew/">
<img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew160.jpg" width="72" height="72" alt="" />
<span class="p-name">Rachel Andrew</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, <code>div</code>-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/">Grid, Flexbox, Box Alignment: Our New System for Layout</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/rachelandrew/">
<img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew160.jpg" width="72" height="72" alt="" />
<span class="p-name">Rachel Andrew</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, <code>div</code>-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/">Grid, Flexbox, Box Alignment: Our New System for Layout</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/rachelandrew/">
<img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew160.jpg" width="72" height="72" alt="" />
<span class="p-name">Rachel Andrew</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, <code>div</code>-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/">Grid, Flexbox, Box Alignment: Our New System for Layout</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/rachelandrew/">
<img class="u-photo" src="https://cloud.24ways.org/authors/rachelandrew160.jpg" width="72" height="72" alt="" />
<span class="p-name">Rachel Andrew</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="https://rachelandrew.co.uk/">Rachel Andrew</a> unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, <code>div</code>-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
</ol>
</div>
</section>
<!-- Authors -->
<section class="c-section" id="a">
<header class="c-section__header">
<h2 class="c-section__title">A</h2>
</header>
<div class="c-section__main">
<ol class="c-listing c-listing--authors">
<li><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>
</li>
<li><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>
</li>
<li><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>
</li>
<li><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>
</li>
</ol>
</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>
/* Topic */
{
"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": "code",
"title": "[Code](/topic/code/)",
"mods": [
"topic"
],
"icon": "topic-code",
"content": "Poetry? Not likely (though [Dan Cederholm wrote some doggerel](/2006/gravity-defying-page-corners/) back in 2006). Here are articles on hypertext markup language, its attributes and other minutiae; crafty ~~hacks~~ tips for your cascading style sheets; JavaScript legerdemain; and tinkering with application programming interfaces.\n"
}
/* Archive */
{
"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": 2013,
"title": "[2013](/2013/)",
"content": "Scourge of browser vendors everywhere, WaSP buzzed its last in March. Dave Shea's CSS Zen Garden celebrated its tenth anniversary in May, and Google Glass was released. Ever broad in its interests, 24 ways tamed Grunt, URLs and GitHub Pages, encouraged readers to write and publish books, and leavened all that with goodies on project management, web typography and SVG.\n"
}
/* Author */
{
"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"
}
/* Sponsor */
{
"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": "sponsor",
"title": "Brought to you by",
"mods": [
"sponsor"
],
"component": "promo"
}
/* Comments */
{
"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": "comments",
"title": "2 Comments",
"content": "Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.\n\n<a class=\"c-continue\" href=\"#comment-form\">Got something to add? Leave a comment below</a>\n",
"comments": [
{
"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": "c0001",
"href": "https://adactio.com/",
"author": "Jeremy Keith",
"datetime": "2012-12-01T12:24:48-00:00",
"avatar": {
"src": "https://www.gravatar.com/avatar/5ad82c5ba0264363974af89deb743c20?s=96",
"size": 64
},
"content": "This is great stuff! I'm terrible at regular expressions—my brain just doesn't seem to want to remember any of it—but this article contains the clearest description of regular expressions I've come across.\n\nI thought I'd share a useful little rewrite rule that I use for cache-busting JavaScript and CSS files. You know the story: you make a change in your JavaScript or CSS and you want to let the browser know that it should grab the new version instead of using what it's got in its cache.\n\nNow, I could potentially just use a query string when I point to my JS and CSS files ( e.g. /js/myscript.js?20131201 ) …but that can cause issues with proxy servers.\n\nInstead what I what I do is point to files like this: `/js/myscript.20131201.js`\n\nThen I need to tell the server to look for the **actual** file in `/js/myscript.js`\n\nHere's the rewrite rule I'm using:\n\n```\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteRule ^(.).(d).(js|css)$ $1.$3 [L]\n```\n\nIt's basically telling the server that, if the JS or CSS file doesn't actually exist and it matches the pattern of having two dots before the file extension (with only numbers after the first dot), to look at the bit before the first dot, and look at the bit after the second dot, but to ignore the bit in between (the numbers).\n\nThe server serves up the right file, but browsers fetch the new version because, as far as they're concerned, this looks like a brand new file that they haven't got in their cache.\n\nThat was a terrible explanation, wasn't it? I now have even more appreciation for how clearly and concise this article is.\n"
},
{
"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"
}
]
}
/* Related */
{
"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": "related",
"title": "Related articles",
"mods": [
"related"
],
"component": "listing"
}
/* Authors */
{
"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": "a",
"title": "A",
"component": "listing--authors"
}
.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.