<nav class="c-traverse-nav" aria-label="Article"><a class="c-traverse-nav__item" rel="prev" href="/2015/how-tabs-should-work/" aria-label="Previous: How Tabs Should Work">
<svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
<path d="M50 100l85 85 7-7-78-78 78-78-7-7" />
</svg>
</a><a class="c-traverse-nav__item" rel="next" href="/2015/solve-the-hard-problems/" aria-label="Next: Solve the Hard Problems">
<svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
<path d="M150 100l-85 85-7-7 78-78-78-78 7-7" />
</svg>
</a></nav>
{% if traverse %}
<nav class="c-traverse-nav" aria-label="{{ traverse.type | capitalize }}">
{%- if traverse.prev -%}
<a class="c-traverse-nav__item" rel="prev" href="{{ traverse.prev.url }}" aria-label="Previous: {{ traverse.prev.title }}">
{% include "prev.svg" %}
</a>
{%- endif -%}
{%- if traverse.next -%}
<a class="c-traverse-nav__item" rel="next" href="{{ traverse.next.url }}" aria-label="Next: {{ traverse.next.title }}">
{% include "next.svg" %}
</a>
{%- endif -%}
</nav>
{% endif %}
{
"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
]
},
"traverse": {
"type": "article",
"prev": {
"url": "/2015/how-tabs-should-work/",
"title": "How Tabs Should Work"
},
"next": {
"url": "/2015/solve-the-hard-problems/",
"title": "Solve the Hard Problems"
}
}
}
$traverse-nav__label-width: 18rem; /* 288px */
.c-traverse-nav {
display: flex;
.has-js & {
@media (--from-medium-screen) {
display: block;
position: fixed;
right: 0;
top: $banner-height--large;
z-index: calc(map(layers, modal) + 1);
width: $navigation-width--large;
}
}
}
.c-traverse-nav__item {
@apply --focusable;
@apply --navigation-link;
display: flex;
flex: 50% 0 1;
justify-content: center;
position: relative;
width: auto;
box-shadow: inset 0 -1px 0 $navigation-color--offset;
padding: map(spaces, medium);
@media (-ms-high-contrast: active) {
border: 1px solid;
}
}
.c-traverse-nav__item[rel] {
&::before,
&::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* Box: covers ear */
&::before {
z-index: map(layers, underlay);
background-color: $navigation-color;
box-shadow: inset 1px 0 $navigation-color--offset;
content: '';
}
/* Ear: slides from under box on hover */
&::after {
.has-js & {
@media (--from-medium-screen) {
@apply --typeset-label;
z-index: calc(map(layers, underlay) - 1);
width: $traverse-nav__label-width;
overflow: hidden;
background-color: $color-year--dark-alpha;
background-color: var(--color-year--dark-alpha, $color-year--dark-alpha);
backdrop-filter: blur(4px);
padding: map(spaces, xsmall) map(spaces, small);
white-space: pre-wrap;
color: white;
transition: all 0.3s ease-out;
content: attr(aria-label);
}
}
[data-menu-expanded=true] & {
display: none;
}
}
&:hover {
&::after {
left: calc($traverse-nav__label-width * -1);
}
}
}
.c-traverse-nav__icon {
height: 2.5rem;
width: 2.5rem;
}
There are no notes for this item.