<ul class="c-meta">
    <li class="c-meta__item"><time class="dt-published" datetime="2012-12-01T00:00:00-00:00">1 Dec<span>ember</span> 2012</time></li>
    <li class="c-meta__item">Published in <a href="/topics/code/">Code</a></li>
    <li class="c-meta__item"><a href="#comments">8 comments</a></li>
</ul>
<ul class="c-meta">
{%- for item in items -%}
  <li class="c-meta__item">{{ item | markdownInline | safe }}</li>
{%- endfor -%}
</ul>
{
  "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
    ]
  },
  "items": [
    "<time class=\"dt-published\" datetime=\"2012-12-01T00:00:00-00:00\">1 Dec<span>ember</span> 2012</time>",
    "Published in [Code](/topics/code/)",
    "[8 comments](#comments)"
  ]
}
  • Content:
    .c-meta {
      @apply --typeset-caption;
    
      display: flex;
      flex-flow: row wrap;
      margin-bottom: map(spaces, medium);
      border-top: 1px solid $prose-color--rule;
      padding: map(spaces, small) 0 map(spaces, large);
    
      @media (--from-large-screen) {
        flex-flow: column nowrap;
        border: 0;
        padding: 0;
      }
    }
    
    .c-meta__item {
      flex: 0 0 auto;
    
      @media screen and (max-width: 24.9375em) {
        .dt-published span {
          display: none;
        }
      }
    
      @media (--upto-large-screen) {
        &:not(:last-child)::after {
          content: '•';
          margin: 0 map(spaces, small);
          opacity: 0.5;
        }
      }
    
      @media (--from-large-screen) {
        display: block;
        border-top: 1px solid $prose-color--rule;
        padding: map(spaces, small) 0 map(spaces, large);
        text-align: right;
      }
    
      @media print {
        &:not(:last-child)::after {
          content: '•';
          margin: 0 map(spaces, small);
        }
      }
    }
    
  • URL: /components/raw/meta/meta.css
  • Filesystem Path: src/components/common/meta/meta.css
  • Size: 906 Bytes

There are no notes for this item.