<article class="c-summary h-entry day-15">
    <header class="c-summary__header">
        <h1 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>
        </h1>
        <p class="c-summary__author  p-author h-card">
            <a class="u-url" href="/authors/rachelandrew/" tabindex="-1"><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>Dec 2010</span>
      </time>
            <a class="c-summary__comments" href="/2015/grid-flexbox-box-alignment-our-new-system-for-layout/#comments">6 comments</a>
        </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">
    <h1 class="c-summary__title  p-name">
      <a class="u-url" rel="bookmark" href="{{ href }}">{{ title }}</a>
    </h1>
    <p class="c-summary__author  p-author h-card">
      <a class="u-url" href="/authors/{{ author | slugify }}/" tabindex="-1"><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>
  </header>
  <div class="c-summary__main">
    <p class="p-summary">{{ content | markdownInline }}</p>
  </div>
  <footer class="c-summary__footer">
    <p class="c-summary__meta">
      <time class="dt-published" datetime="{{ datetime }}">
        {{ datetime | date('D') }} <span>{{ datetime | date('MMM YYYY') }}</span>
      </time>
      <a class="c-summary__comments" href="{{ href }}#comments">{{ comments if comments else "No" }} comments</a>
    </p>
  </footer>
</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"
}
  • Content:
    $summary__author-size: map(sizes, xlarge);
    
    .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 print {
        padding-bottom: 0;
        height: auto !important;
        min-height: 12em;
        page-break-inside: avoid;
      }
    }
    
    .c-summary__header {
      min-height: 2em;
      margin-bottom: map(spaces, large);
    
      @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;
      margin-bottom: map(spaces, medium);
      font-size: 0.875rem;
    
      a {
        position: relative;
        z-index: calc(map(layers, default) + 1);
        letter-spacing: 0.025em;
        text-transform: uppercase;
        color: inherit;
      }
    }
    
    .c-summary__footer {
      @media screen {
        margin-top: auto;
      }
    
      a {
        position: relative;
        z-index: calc(map(layers, default) + 1);
      }
    }
    
    .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;
      overflow: hidden;
      margin: 0;
    
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: map(layers, default);
        border: solid calc($summary__author-size / 2);
        border-color: transparent transparent white white;
      }
    
      &::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');
      }
    
      @media print {
        display: none;
      }
    
      a {
        position: static;
      }
    
      img {
        display: block;
        height: $summary__author-size;
        width: $summary__author-size;
        transition: transform $author-duration ease-out;
      }
    
      span {
        @apply --hidden;
      }
    }
    
    @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:hover {
      .c-summary__author {
        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;
        }
      }
    }
    
    &.js-mouseout {
      .c-summary__author {
        &::before {
          z-index: map(layers, default);
          animation: corner-reverse 0.15s steps(10);
        }
      }
    }
    
    .c-summary--countdown {
      .c-summary__header {
        padding-left: calc(map(spaces, large) + map(spaces, xsmall));
      }
    
      .dt-published {
        @apply --typeset-summary-title;
        font-weight: 400;
        position: absolute;
        top: map(spaces, medium);
        left: calc(map(spaces, medium) + map(spaces, xsmall));
    
        @media print {
          top: 2rem;
        }
    
        span {
          @apply --hidden;
        }
      }
    }
    
  • URL: /components/raw/summary/summary.css
  • Filesystem Path: src/components/common/summary/summary.css
  • Size: 3.7 KB

There are no notes for this item.