<section class="c-section c-section--related" id="related">
    <header class="c-section__header">
        <h1 class="c-section__title">Related articles</h1>
    </header>
    <div class="c-section__main">
        <ol class="c-listing c-listing--summaries">
            <li>
                <article class="c-summary h-entry day-15">
                    <header class="c-summary__header">
                        <h1 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>
                        </h1>
                        <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"><em>Rachel Andrew</em> 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>
            </li>
            <li>
                <article class="c-summary h-entry day-15">
                    <header class="c-summary__header">
                        <h1 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>
                        </h1>
                        <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"><em>Rachel Andrew</em> 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>
            </li>
            <li>
                <article class="c-summary h-entry day-15">
                    <header class="c-summary__header">
                        <h1 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>
                        </h1>
                        <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"><em>Rachel Andrew</em> 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>
            </li>
            <li>
                <article class="c-summary h-entry day-15">
                    <header class="c-summary__header">
                        <h1 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>
                        </h1>
                        <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"><em>Rachel Andrew</em> 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>
            </li>
        </ol>
    </div>
</section>
<section class="c-section{% for mod in mods %} c-section--{{ mod }}{% endfor %}" id="{{ id }}">
  <header class="c-section__header">
    <h1 class="c-section__title">{{ title | markdownInline }}</h1>
  </header>
  <div class="c-section__main">
    {%- if component -%}
      {% render "@" + component, config %}
    {%- endif -%}
    {%- if icon -%}
      {% include icon + ".svg" %}
    {%- endif -%}
    {%- if content -%}
    <div class="s-prose">
      {{ content | markdown }}
    </div>
    {%- endif -%}
    {%- if comments -%}
      {%- for comment in comments -%}
        {% render "@comment", comment %}
      {%- endfor -%}
    {%- endif -%}
  </div>
</section>
{
  "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
    ]
  },
  "id": "related",
  "title": "Related articles",
  "mods": [
    "related"
  ],
  "component": "listing"
}
  • Content:
    .c-section {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    
      @media (--from-large-screen) {
        flex-direction: row;
      }
    }
    
    .c-section__header {
      padding: map(spaces, medium) map(spaces, large);
    
      @media (--from-large-screen) {
        flex: 1 0 20%;
        padding-right: 0;
        box-shadow: 0 -1px 0 $prose-color--rule;
        text-align: right;
      }
    
      @media print {
        border-top: 2px solid black;
        padding-bottom: 0;
      }
    }
    
    .c-section__title {
      @apply --typeset-ui;
    
      text-transform: uppercase;
    }
    
    .c-section__main {
      margin-bottom: map(spaces, large);
      padding: map(spaces, medium) map(spaces, large);
      box-shadow: 0 -1px 0 $prose-color--rule;
    
      @media (--from-large-screen) {
        flex: 1 0 75%;
        margin-left: 5%;
        /*padding-right: 5%;*/
        padding-left: 0;
      }
    
      @media (--from-xlarge-screen) {
        /*padding-right: 15%;*/
      }
    
      @media (--from-max-screen) {
        /*padding-right: 25%;*/
      }
    }
    
    /* Section - Sponsor */
    .c-article .c-section--sponsor {
      @media (--from-large-screen) {
        flex-direction: column;
        position: absolute;
        top: 56rem;
        left: 0;
        width: 20%;
        padding: 0;
    
        .c-section__title {
          @apply --typeset-ui;
        }
    
        .c-section__main {
          padding-right: 0;
          box-shadow: none;
        }
    
        .c-promo {
          @apply --typeset-caption;
    
          text-align: right;
        }
      }
    }
    
    /* Section - Topic */
    .c-section--topic {
      .c-section__main {
        display: flex;
        flex-direction: row;
      }
    
      svg {
        flex-shrink: 0;
        width: map(sizes, xlarge);
        height: map(sizes, xlarge);
        margin: map(spaces, small) map(spaces, large) 0 0;
      }
    }
    
  • URL: /components/raw/section/section.css
  • Filesystem Path: src/components/common/section/section.css
  • Size: 1.6 KB

There are no notes for this item.