<div class="c-menu no-transition">
<button class="c-menu__button" id="menu__button" aria-controls="menu__drawer" aria-expanded="true" aria-label="Menu">
<svg class="c-menu__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
<rect class="c-menu__line" width="120" height="10" x="40" y="45" />
<rect class="c-menu__line" width="120" height="10" x="40" y="70" />
<rect class="c-menu__line" width="120" height="10" x="40" y="95" />
<rect class="c-menu__line" width="120" height="10" x="40" y="95" />
<rect class="c-menu__line" width="120" height="10" x="40" y="120" />
<rect class="c-menu__line" width="120" height="10" x="40" y="145" />
</svg>
</button>
<div class="c-menu__drawer" id="menu__drawer" role="region" aria-label="Menu">
<form class="c-search" role="search" id="search" action="/pages/search/">
<fieldset class="c-field">
<legend class="u-hidden">Search 24 ways</legend>
<label class="u-hidden" for="q">Keywords</label>
<input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research…" />
<button class="c-field__button" type="submit"><svg class="c-field__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" role="img" aria-label="Search">
<path role="presentation" d="M129 121C136 113 140 102 140 90c0-28-22-50-50-50S40 63 40 90s22 50 50 50c12 0 24-4 32-12L158 164l7-7-36-36zM90 130c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z" />
</svg>
</button>
</fieldset>
</form>
<nav class="c-topics-nav" aria-label="Topics">
<ul class="c-topics-nav__items">
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/business/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path d="M20 220c-11 0-20-9-20-20V70c0-11 9-20 20-20h60V35c0-10 5-15 15-15h50c10 0 15 5 15 15v15h60c11 0 20 9 20 20v130c0 11-9 20-20 20H20zm0-160c-5.5 0-10 4.5-10 10v130c0 5.5 4.5 10 10 10h200c5.5 0 10-4.5 10-10V70c0-5.5-4.5-10-10-10H20zm130-10V35c0-3-2-5-5-5H95c-3 0-5 2-5 5v15h60zM30 100V90h180v10H30zm0 40v-10h180v10H30zm0 40v-10h180v10H30z" />
</svg>
Business
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/code/">
<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>
Code
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/content/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path d="M102.5 240l-1.5-2c-2.5-3.5-61-88-61-128s40.5-64 42.5-65L50 0h140l-32.5 45S200 70 200 110s-58.5 124.5-61 128l-1.5 2h-35zm30-10c9-13 57.5-85.5 57.5-120 0-33-35-56-41.5-60H91.5C85 54 50 77 50 110c0 34.5 48.5 106.5 57.5 120h25zM115 129.5c-11.5-2-20-12.5-20-24.5 0-14 11-25 25-25s25 11 25 25c0 12-8.5 22-20 24.5V230h-10V129.5zm5-39.5c-8 0-15 6.5-15 15s6.5 15 15 15 15-6.5 15-15-6.5-15-15-15zM92.5 40h55L170 10H70l22.5 30z" />
</svg>
Content
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/design/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path fill-rule="evenodd" d="M140 0h80v240h-80V0zm70 10h-60v30h20v10h-20V70h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20V230h60V10zM45 230c-14 0-25-11-25-25V60c0-1 35-55 35-55s35 54 35 55v145c0 14-11 25-25 25H45zm-15-25c0 8 7 15 15 15h20c8 0 15-7 15-15v-5H30v5zm0-25v10h50v-10H30zm0-106c0-2 2-4 4-4h2c2 0 4 2 4 4v96H30V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H50V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H70V74zM30.5 60.5S39 58 45 63.5c6-4.5 14-4.5 20 0 6-5.5 14.5-3 14.5-3L69 45H41L30.5 60.5zm24.5-38L47.5 35h15L55 22.5z" />
</svg>
Design
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/process/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path d="M210 116v4c0 49.5-40.5 90-90 90-29 0-55-14-71.5-35l7-7c14.5 19.5 38 32 64.5 32 44 0 80-36 80-80v-3.5l-15.5 16-7.5-7.5 28.5-28.5L234 125l-7.5 7.5L210 116zm-180 8v-4c0-49.5 40.5-90 90-90 29 0 54.5 13.5 71 35l-7 7C169 52.5 146 40 120 40c-44 0-80 36-80 80v5l17-17 7 7-28.5 28.5L7 115l7-7 16 16z" />
</svg>
Process
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/ux/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path d="M220 240H20c-11 0-20-9-20-20V20C0 9 9 0 20 0h200c11 0 20 9 20 20v200c0 11-9 20-20 20zM20 10c-5 0-10 4-10 10v200c0 5 4 10 10 10h200c5 0 10-4 10-10V20c0-5-4-10-10-10H20zm150 200c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm45-30V80h10v70h-10zm0-100V30h10v20h-10zM65 80V30h10v50H65zm0 70v-40h10v40H65zm100 0v-20h10v20h-10zm0-50V30h10v70h-10zM50 110V80h40v30H50zm10-10h20V90H60v10zm90 30v-30h40v30h-40zm-50-50V50h40v30h-40zm10-10h20V60h-20v10zm50 50h20v-10h-20v10z" />
</svg>
UX
</a>
</li>
</ul>
</nav>
<nav class="c-site-nav" aria-label="Explore 24 ways">
<ul class="c-site-nav__items">
<li class="c-site-nav__item">
<a class="c-site-nav__label" href="/archives/">Archives</a>
</li>
<li class="c-site-nav__item">
<a class="c-site-nav__label" href="/authors/">Authors</a>
</li>
<li class="c-site-nav__item">
<a class="c-site-nav__label" href="/about/" aria-label="About this website">About</a>
</li>
</ul>
</nav>
</div>
<script class="c-menu__onload">
document.getElementById('menu__drawer').style.display = 'none';
</script>
</div>
<div class="c-menu no-transition">
<button class="c-menu__button" id="menu__button" aria-controls="menu__drawer" aria-expanded="true" aria-label="Menu">
{% include "menu.svg" %}
</button>
<div class="c-menu__drawer" id="menu__drawer" role="region" aria-label="Menu">
{%- render "@search" -%}
{%- render "@topics-nav" -%}
{%- render "@site-nav" -%}
</div>
<script class="c-menu__onload">
document.getElementById('menu__drawer').style.display = 'none';
</script>
</div>
{
"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
]
}
}
.c-menu {
.has-js & {
position: fixed;
z-index: map(layers, modal);
/* Create ‘fake’ banner/sidebar, so drawer can slide from underneath it */
&::before {
position: fixed;
top: 0;
right: 0;
z-index: calc(map(layers, modal) + 1);
display: block;
content: '';
@media (--upto-medium-screen) {
left: 0;
background-color: $color-year--dark;
background-color: var(--color-year--dark, $color-year--dark);
height: $banner-height--small;
width: 100%;
}
@media (--from-medium-screen) {
background-color: white;
box-shadow: inset 1px 0 $navigation-color--offset;
height: 100%;
width: $navigation-width--large;
}
}
}
&.no-transition * {
transition: none !important;
}
@media print {
display: none;
}
}
.c-menu__button {
@apply --focusable;
display: block;
position: fixed;
top: 0;
right: 0;
z-index: calc(map(layers, modal) + 1);
.no-js & {
display: none;
}
@media (--upto-medium-screen) {
padding: map(sizes, xsmall);
color: white;
&:hover,
&:active {
color: white;
}
}
@media (--from-medium-screen) {
@apply --navigation-link;
padding: map(spaces, medium);
box-shadow: inset 0 -1px 0 $navigation-color--offset;
}
@media (-ms-high-contrast: active) {
border: 1px solid;
}
@media print {
display: none;
}
}
.c-menu__drawer {
display: flex;
flex-direction: column;
background-color: $navigation-color;
[data-menu-expanded] & {
box-shadow: 0 8px 8px 0 $navigation-color--shadow;
transition: all $navigation-duration ease-in-out;
@media (--upto-medium-screen) {
width: 100vw;
}
@media (--from-medium-screen) {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 18rem;
}
}
[data-menu-expanded=false] & {
@media (--upto-medium-screen) {
transform: translateY(-100%);
}
@media (--from-medium-screen) {
transform: translateX(100%);
}
}
[data-menu-expanded=true] & {
@media (--upto-medium-screen) {
transform: translateY(0);
}
@media (--from-medium-screen) {
transform: translateX(calc($navigation-width--large * -1));
}
}
}
.c-menu__icon {
height: 2.5rem;
width: 2.5rem;
}
.c-menu__line {
$lines-animation-duration: 0.2s;
$cross-animation-duration: 0.1s;
transform-origin: 50% 50%;
/* Transitions: ☰ */
&:nth-of-type(1),
&:nth-of-type(2),
&:nth-of-type(5),
&:nth-of-type(6) {
transform: translateY(0);
transition:
transform $lines-animation-duration cubic-bezier(0.8, 0, 0.4, 1.8) $cross-animation-duration,
opacity $lines-animation-duration cubic-bezier(1, 0, 1, 0);
[aria-expanded=true] & {
opacity: 0;
transition:
transform $lines-animation-duration ease-out,
opacity $lines-animation-duration cubic-bezier(1, 0, 1, 0);
}
}
/* Transitions: × */
&:nth-of-type(3),
&:nth-of-type(4) {
transform: rotate(0) scaleX(1);
transition: transform $cross-animation-duration ease-out;
[aria-expanded=true] & {
transition: transform $cross-animation-duration cubic-bezier(0.8, 0, 0.4, 1.8) $lines-animation-duration;
}
}
/* Transforms */
[aria-expanded=true] & {
&:nth-of-type(1) { transform: translateY(25%); }
&:nth-of-type(2) { transform: translateY(12.5%); }
&:nth-of-type(3) { transform: rotate(45deg) scaleX(1.3334); }
&:nth-of-type(4) { transform: rotate(-45deg) scaleX(1.3334); }
&:nth-of-type(5) { transform: translateY(-12.5%); }
&:nth-of-type(6) { transform: translateY(-25%); }
}
}
There are no notes for this item.