<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>
<article class="c-summary{% for mod in mods %} c-summary--{{ mod }}{% endfor %} h-entry {{ theme if theme }}">
<header class="c-summary__header">
<h3 class="c-summary__title p-name">
{%- if href -%}
<a class="u-url" rel="bookmark" href="{{ href }}">{{ title }}</a>
{%- else -%}
{{ title }}
{%- endif -%}
</h3>
{%- if author -%}
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/{{ author | slugify }}/">
<img class="u-photo" src="https://cloud.24ways.org/authors/{{ author | slugify }}160.jpg" width="72" height="72" alt=""/>
<span class="p-name">{{ author }}</span>
</a>
</p>
{%- endif -%}
</header>
<div class="c-summary__main">
<p class="p-summary">{{ content | markdownInline | safe }}</p>
</div>
{%- if datetime -%}
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="{{ datetime }}">
{{ datetime | date('D') }} <span>{{ datetime | date('MMMM YYYY') }}</span>
</time>
</p>
</footer>
{%- endif -%}
</article>
{
"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": "day-15",
"href": "/2015/grid-flexbox-box-alignment-our-new-system-for-layout/",
"title": "Grid, Flexbox, Box Alignment: Our New System for Layout",
"author": "Rachel Andrew",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 6,
"content": "[Rachel Andrew](https://rachelandrew.co.uk/) unwraps the new paradigms of web layout, comparing their features and showing how they can free us from grid-based, `div`-infested frameworks. Beautifully wrapped boxes look lovely under the Christmas tree, but we need to think and break out of them.\n"
}
$summary__author-size: map(sizes, xlarge);
@keyframes corner-forward {
from {
z-index: map(layers, default);
background-position: -0.5em;
}
to {
z-index: calc(map(layers, default) + 1);
background-position: -50.5em;
}
}
@keyframes corner-reverse {
from {
z-index: calc(map(layers, default) + 1);
background-position: -50.5em;
}
to {
z-index: map(layers, default);
background-position: -0.5em;
}
}
.c-summary {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
padding: map(spaces, medium) calc(map(spaces, large) - map(spaces, xsmall));
background-color: white;
box-shadow: 1px 1px 0 $prose-color--shadow;
@media (-ms-high-contrast: active) {
border: 1px solid;
}
@media print {
padding-bottom: 0;
height: auto !important;
min-height: 12em;
page-break-inside: avoid;
}
}
.c-summary__header {
min-height: map(sizes, large);
margin-bottom: map(spaces, medium);
@media print {
border-top: 1px solid black;
padding-top: map(spaces, medium);
}
}
.c-summary__title {
@apply --typeset-summary-title;
padding-right: calc($summary__author-size - map(spaces, medium));
a::before {
content: '';
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: map(layers, default);
white-space: nowrap;
text-indent: 200%;
}
a:focus {
outline: none;
&::before {
outline: 2px solid $color-focus;
}
}
}
.c-summary__main {
@apply --typeset-prose;
max-width: 75ch;
font-size: 0.875rem;
a,
em {
font-family: map(fonts, family-sans);
font-style: normal;
font-weight: 700;
color: inherit;
}
}
.c-summary__footer {
@media screen {
margin-top: auto;
padding-top: map(spaces, medium);
}
}
.c-summary__meta {
@apply --typeset-label;
color: map(colors, neutral, dark);
.dt-published {
margin-right: map(spaces, medium);
}
}
.c-summary__author {
position: absolute;
top: 0;
right: 0;
margin: 0;
pointer-events: none;
@media print {
display: none;
}
img {
display: block;
height: $summary__author-size;
width: $summary__author-size;
transition: transform $author-duration ease-out;
@media (prefers-reduced-motion) {
transition: none;
}
}
span {
@apply --hidden;
}
}
.c-summary__author-url {
display: block;
overflow: hidden;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
z-index: map(layers, default);
height: $summary__author-size;
width: $summary__author-size;
background-image: linear-gradient(to top right, white, white 50%, transparent 50%, transparent);
}
&::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
height: $summary__author-size;
width: $summary__author-size;
background: inline('corner.svg') -0.5em 0 no-repeat;
background-size: size('corner.svg');
}
.c-summary:hover &,
&:focus {
img {
transform: scale(1.2);
transform-origin: bottom left;
}
&::after {
z-index: calc(map(layers, default) + 1);
animation: corner-forward 0.15s steps(10);
animation-fill-mode: forwards;
}
}
&:focus {
box-shadow: 0 0 2px 0 $color-focus;
}
}
.c-summary--countdown {
.c-summary__header {
padding-left: calc(map(spaces, large) + map(spaces, xsmall));
}
.c-summary__footer {
padding-top: 0;
}
.dt-published {
@apply --typeset-summary-title;
font-weight: 400;
position: absolute;
top: map(spaces, medium);
left: calc(map(spaces, medium) + map(spaces, xsmall));
z-index: 0;
span {
@apply --hidden;
}
@media print {
top: 2rem;
}
}
}
.c-summary--taken {
.c-summary__title {
opacity: 0.66;
text-decoration: line-through;
}
background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, color(map(colors, neutral, lightest) a(75%)) 4px, color(map(colors, neutral, lightest) a(75%)) 8px);
}
There are no notes for this item.