<a class="c-author  h-card u-url" href="/authors/drewmclellan/">
    <img class="c-author__image  u-photo" src="https://cloud.24ways.org/authors/drewmclellan160.jpg" width="160" height="160" alt="" />
    <span class="c-author__meta  p-name">Drew McLellan</span>
</a>
<a class="c-author  h-card u-url" href="/authors/{{ author | slugify }}/">
  <img class="c-author__image  u-photo" src="https://cloud.24ways.org/authors/{{ author | slugify }}160.jpg" width="160" height="160" alt=""/>
  <span class="c-author__meta  p-name">{{ author }}</span>
</a>
{
  "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
    ]
  },
  "author": "Drew McLellan"
}
  • Content:
    .c-author {
      display: block;
      position: relative;
      overflow: hidden;
    }
    
    .c-author__meta {
      @apply --typeset-label;
    
      display: inline-block;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      padding: map(spaces, small);
      background-color: color(map(colors, neutral, darkest) a(75%));
      color: white;
    
      @media print {
        color: white !important;
        background-color: black !important;
      }
    
      .c-author:hover & {
        text-decoration: underline color(white a(66%));
      }
    }
    
    .c-author__image {
      display: block;
      height: auto;
      width: 100%;
      transition: transform $author-duration ease-out;
    
      .c-author:hover & {
        transform: scale(1.1);
    
        @media (prefers-reduced-motion) {
          transform: none;
        }
      }
    }
    
  • URL: /components/raw/author/author.css
  • Filesystem Path: src/components/common/author/author.css
  • Size: 731 Bytes

There are no notes for this item.