<ol class="c-listing c-listing--authors">
    <li><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>
    </li>
    <li><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>
    </li>
    <li><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>
    </li>
    <li><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>
    </li>
</ol>
<ol class="c-listing{% for mod in mods %} c-listing--{{ mod }}{% endfor %}"{{ " reversed" if reversed }}>
{%- for item in items -%}
  <li>
    {%- render "@" + component, item -%}
  </li>
{%- endfor -%}
</ol>
{
  "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
    ]
  },
  "mods": [
    "authors"
  ],
  "component": "author",
  "items": [
    {
      "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"
    },
    {
      "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"
    },
    {
      "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"
    },
    {
      "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-listing {
      display: flex;
      flex-wrap: wrap;
    
      @supports (display: grid) {
        display: grid;
        grid-gap: map(spaces, xsmall);
      }
    
      > * {
        display: flex;
        flex: 1;
        margin: 0 map(spaces, xsmall) map(spaces, xsmall) 0;
    
        @supports (display: grid) {
          margin: 0;
        }
      }
    }
    
    .c-listing--authors {
      grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    
      > * {
        flex: 8rem 0 0;
      }
    }
    
    .c-listing--summaries {
      grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    
      > * {
        flex: 16em 1 0;
      }
    }
    
    .c-listing--inset {
      padding: map(spaces, xsmall) 0 0 map(spaces, xsmall);
    
      @supports (display: grid) {
        padding: map(spaces, xsmall);
      }
    }
    
  • URL: /components/raw/listing/listing.css
  • Filesystem Path: src/components/common/listing/listing.css
  • Size: 691 Bytes

There are no notes for this item.