Bits of 24 ways

Summary 

<!-- Default -->
<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>


<!-- Countdown -->
<article class="c-summary c-summary--countdown h-entry day-15">
    <header class="c-summary__header">
        <h3 class="c-summary__title  p-name"><a class="u-url" rel="bookmark" href="/2010/real-animation-using-javascript-css3-and-html5-video/">Real Animation Using JavaScript, CSS3, and HTML5 Video</a></h3>
        <p class="c-summary__author  p-author h-card">
            <a class="c-summary__author-url  u-url" href="/authors/danmall/">
                <img class="u-photo" src="https://cloud.24ways.org/authors/danmall160.jpg" width="72" height="72" alt="" />
                <span class="p-name">Dan Mall</span>
            </a>
        </p>
    </header>
    <div class="c-summary__main">
        <p class="p-summary"><a href="http://danielmall.com/">Dan Mall</a> breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users’ experience.
        </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>


<!-- Short -->
<article class="c-summary c-summary--countdown h-entry day-15">
    <header class="c-summary__header">
        <h3 class="c-summary__title  p-name"><a class="u-url" rel="bookmark" href="/2010/real-animation-using-javascript-css3-and-html5-video/">Real Animation</a></h3>
        <p class="c-summary__author  p-author h-card">
            <a class="c-summary__author-url  u-url" href="/authors/danmall/">
                <img class="u-photo" src="https://cloud.24ways.org/authors/danmall160.jpg" width="72" height="72" alt="" />
                <span class="p-name">Dan Mall</span>
            </a>
        </p>
    </header>
    <div class="c-summary__main">
        <p class="p-summary"><em>Dan Mall</em> breathes life into web standards-based animation.
        </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>


<!-- Sponsored -->
<article class="c-summary c-summary--sponsored h-entry day-15">
    <header class="c-summary__header">
        <h3 class="c-summary__title  p-name"><a class="u-url" rel="bookmark" href="mailto:sponsorship@24ways.org?subject=Sponsoring 24 ways on Friday, 1 December">Friday, 1 December</a></h3>
    </header>
    <div class="c-summary__main">
        <p class="p-summary">Sponsor this day for $250 <abbr title="US Dollars">USD</abbr>.
        </p>
    </div>
</article>


<!-- Sponsored Taken -->
<article class="c-summary c-summary--sponsored c-summary--taken h-entry day-15">
    <header class="c-summary__header">
        <h3 class="c-summary__title  p-name">Saturday, 2 December</h3>
    </header>
    <div class="c-summary__main">
        <p class="p-summary">Too late, this slot has been taken!
        </p>
    </div>
</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>
 
/* Default */
{
  "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"
}


/* Countdown */
{
  "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": "/2010/real-animation-using-javascript-css3-and-html5-video/",
  "title": "Real Animation Using JavaScript, CSS3, and HTML5 Video",
  "author": "Dan Mall",
  "datetime": "2010-12-15T00:00:00-00:00",
  "comments": 11,
  "content": "[Dan Mall](http://danielmall.com/) breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users' experience.\n",
  "mods": [
    "countdown"
  ]
}


/* Short */
{
  "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": "/2010/real-animation-using-javascript-css3-and-html5-video/",
  "title": "Real Animation",
  "author": "Dan Mall",
  "datetime": "2010-12-15T00:00:00-00:00",
  "comments": 11,
  "content": "*Dan Mall* breathes life into web standards-based animation.\n",
  "mods": [
    "countdown"
  ]
}


/* Sponsored */
{
  "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": "mailto:sponsorship@24ways.org?subject=Sponsoring 24 ways on Friday, 1 December",
  "title": "Friday, 1 December",
  "author": false,
  "datetime": false,
  "comments": 6,
  "content": "Sponsor this day for $250 <abbr title=\"US Dollars\">USD</abbr>.\n",
  "mods": [
    "sponsored"
  ]
}


/* Sponsored Taken */
{
  "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": false,
  "title": "Saturday, 2 December",
  "author": false,
  "datetime": false,
  "comments": 6,
  "content": "Too late, this slot has been taken!\n",
  "mods": [
    "sponsored",
    "taken"
  ]
}
  • 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.