<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>
<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": 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"
}
.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.