<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"
}
  • Content:
    $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);
    }
    
  • URL: /components/raw/summary/summary.css
  • Filesystem Path: src/components/common/summary/summary.css
  • Size: 4.1 KB

There are no notes for this item.