<section class="c-section c-section--topic" id="code">
    <header class="c-section__header">
        <h1 class="c-section__title"><a href="/topic/code/">Code</a></h1>
    </header>
    <div class="c-section__main"><svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <path transform="rotate(45 120 120)" d="M115 100H70.5C63 85 47.5 75 30 75 8.5 75-9.5 90-14 110h29l10 10-10 10h-29c4.5 20 22.5 35 44 35 17.5 0 33-10 40.5-25h99.5c7.5 15 22.5 25 40.5 25 21.5 0 39.5-15 44-35h-29l-10-10 10-10h29c-4.5-20-22.5-35-44-35-17.5 0-33 10-40.5 25H125V30h10v-50h-30v50h10v70zm123.5 40c-6.5 9-17 15-28.5 15-16 0-29-10.5-33.5-25H63.5C59 144.5 46 155 30 155c-12 0-22.5-6-28.5-15H20l20-20-20-20H1.5C7.5 91 18 85 30 85c16 0 29 10.5 33.5 25h113c4.5-14.5 17.5-25 33.5-25 12 0 23 6 29 15h-19l-20 20 20 20h19zM115-10h10v30h-10v-30zM99.5 240v-50h-10v-10h25v-40h10v40h25v10H140v50c0 10-7.5 20-20 20-12.5 0-20-10-20.5-20zm11 0c0 7.5 5 10 10 10s10-2.5 10-10v-50h-20v50z"/>
</svg>
        <div class="s-prose">
            <p>Poetry? Not likely (though <a href="/2006/gravity-defying-page-corners/">Dan Cederholm wrote some doggerel</a> back in 2006). Here are articles on hypertext markup language, its attributes and other minutiae; crafty <s>hacks</s> tips for your
                cascading style sheets; JavaScript legerdemain; and tinkering with application programming interfaces.</p>

        </div>
    </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": "code",
  "title": "[Code](/topic/code/)",
  "mods": [
    "topic"
  ],
  "icon": "topic-code",
  "content": "Poetry? Not likely (though [Dan Cederholm wrote some doggerel](/2006/gravity-defying-page-corners/) back in 2006). Here are articles on hypertext markup language, its attributes and other minutiae; crafty ~~hacks~~ tips for your cascading style sheets; JavaScript legerdemain; and tinkering with application programming interfaces.\n"
}
  • 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.