<figure class="c-og-image">
    <img class="c-avatar  u-photo" src="https://cloud.24ways.org/authors/drewmclellan280.jpg" width="220" height="220" alt="" />

    <blockquote class="c-og-image__quote">
        <p>“There’s no prize for solving problems you don’t have yet, and heading further into the desert in search of water is a survival tactic, not an aspiration.”</p>
    </blockquote>
    <figcaption class="c-og-image__cite">
        — Drew McLellan
    </figcaption>
</figure>
<figure class="c-og-image">
  {% render "@avatar", avatar %}
  <blockquote class="c-og-image__quote{% if quote.length >= 160 %} c-og-image__quote--small{% endif %}">
    <p>“{{ quote | markdownInline }}”</p>
  </blockquote>
  <figcaption class="c-og-image__cite">
    — {{ author }}
  </figcaption>
</figure>
{
  "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
    ]
  },
  "quote": "There's no prize for solving problems you don't have yet, and heading further into the desert in search of water is a survival
 tactic, not an aspiration.",
  "author": "Drew McLellan",
  "avatar": {
    "size": 220,
    "src": "https://cloud.24ways.org/authors/drewmclellan280.jpg"
  }
}
  • Content:
    .c-og-image {
      width: 600px;
      height: 315px;
      overflow: hidden;
      padding: 2rem;
      background-color: $color-year;
      background-color: var(--color-year, $color-year);
      background-image: inline('diamond.svg');
      background-repeat: repeat;
    }
    
    .c-og-image__quote {
      @apply --typeset-prose;
    
      margin-bottom: map(spaces, small);
      font-family: map(fonts, family-serif);
      font-size: 2rem;
      line-height: 1.15;
      text-indent: -0.45em;
      color: white;
    }
    
    @supports (hanging-punctuation: first) {
      .c-og-image__quote {
        text-indent: 0;
      }
    }
    
    .c-og-image__quote--small {
      font-size: 1.75rem;
    }
    
    .c-og-image__cite {
      @apply --typeset-caption;
    
      font-weight: 600;
      font-size: 1.25rem;
      color: map(colors, primary, light);
    }
    
    .c-og-image .c-avatar {
      float: right;
      margin: -2.5rem -3.5rem 0 0;
    }
    
  • URL: /components/raw/og-image/og-image.css
  • Filesystem Path: src/components/og-image/og-image.css
  • Size: 802 Bytes

There are no notes for this item.