<nav class="c-topics-nav" aria-label="Topics">
    <ul class="c-topics-nav__items">
        <li class="c-topics-nav__item">
            <a class="c-topics-nav__label" href="/topics/business/">
                <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
                    <path d="M20 220c-11 0-20-9-20-20V70c0-11 9-20 20-20h60V35c0-10 5-15 15-15h50c10 0 15 5 15 15v15h60c11 0 20 9 20 20v130c0 11-9 20-20 20H20zm0-160c-5.5 0-10 4.5-10 10v130c0 5.5 4.5 10 10 10h200c5.5 0 10-4.5 10-10V70c0-5.5-4.5-10-10-10H20zm130-10V35c0-3-2-5-5-5H95c-3 0-5 2-5 5v15h60zM30 100V90h180v10H30zm0 40v-10h180v10H30zm0 40v-10h180v10H30z" />
                </svg>

                Business
            </a>
        </li>
        <li class="c-topics-nav__item">
            <a class="c-topics-nav__label" href="/topics/code/">
                <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
                    <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>

                Code
            </a>
        </li>
        <li class="c-topics-nav__item">
            <a class="c-topics-nav__label" href="/topics/content/">
                <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
                    <path d="M102.5 240l-1.5-2c-2.5-3.5-61-88-61-128s40.5-64 42.5-65L50 0h140l-32.5 45S200 70 200 110s-58.5 124.5-61 128l-1.5 2h-35zm30-10c9-13 57.5-85.5 57.5-120 0-33-35-56-41.5-60H91.5C85 54 50 77 50 110c0 34.5 48.5 106.5 57.5 120h25zM115 129.5c-11.5-2-20-12.5-20-24.5 0-14 11-25 25-25s25 11 25 25c0 12-8.5 22-20 24.5V230h-10V129.5zm5-39.5c-8 0-15 6.5-15 15s6.5 15 15 15 15-6.5 15-15-6.5-15-15-15zM92.5 40h55L170 10H70l22.5 30z" />
                </svg>

                Content
            </a>
        </li>
        <li class="c-topics-nav__item">
            <a class="c-topics-nav__label" href="/topics/design/">
                <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
                    <path fill-rule="evenodd" d="M140 0h80v240h-80V0zm70 10h-60v30h20v10h-20V70h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20V230h60V10zM45 230c-14 0-25-11-25-25V60c0-1 35-55 35-55s35 54 35 55v145c0 14-11 25-25 25H45zm-15-25c0 8 7 15 15 15h20c8 0 15-7 15-15v-5H30v5zm0-25v10h50v-10H30zm0-106c0-2 2-4 4-4h2c2 0 4 2 4 4v96H30V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H50V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H70V74zM30.5 60.5S39 58 45 63.5c6-4.5 14-4.5 20 0 6-5.5 14.5-3 14.5-3L69 45H41L30.5 60.5zm24.5-38L47.5 35h15L55 22.5z" />
                </svg>

                Design
            </a>
        </li>
        <li class="c-topics-nav__item">
            <a class="c-topics-nav__label" href="/topics/process/">
                <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
                    <path d="M210 116v4c0 49.5-40.5 90-90 90-29 0-55-14-71.5-35l7-7c14.5 19.5 38 32 64.5 32 44 0 80-36 80-80v-3.5l-15.5 16-7.5-7.5 28.5-28.5L234 125l-7.5 7.5L210 116zm-180 8v-4c0-49.5 40.5-90 90-90 29 0 54.5 13.5 71 35l-7 7C169 52.5 146 40 120 40c-44 0-80 36-80 80v5l17-17 7 7-28.5 28.5L7 115l7-7 16 16z" />
                </svg>

                Process
            </a>
        </li>
        <li class="c-topics-nav__item">
            <a class="c-topics-nav__label" href="/topics/ux/">
                <svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
                    <path d="M220 240H20c-11 0-20-9-20-20V20C0 9 9 0 20 0h200c11 0 20 9 20 20v200c0 11-9 20-20 20zM20 10c-5 0-10 4-10 10v200c0 5 4 10 10 10h200c5 0 10-4 10-10V20c0-5-4-10-10-10H20zm150 200c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm45-30V80h10v70h-10zm0-100V30h10v20h-10zM65 80V30h10v50H65zm0 70v-40h10v40H65zm100 0v-20h10v20h-10zm0-50V30h10v70h-10zM50 110V80h40v30H50zm10-10h20V90H60v10zm90 30v-30h40v30h-40zm-50-50V50h40v30h-40zm10-10h20V60h-20v10zm50 50h20v-10h-20v10z" />
                </svg>

                UX
            </a>
        </li>
    </ul>
</nav>
<nav class="c-topics-nav" aria-label="Topics">
  <ul class="c-topics-nav__items">
  {%- for topic in topics -%}
    <li class="c-topics-nav__item">
      <a class="c-topics-nav__label" href="{{ topic.url }}">
        {% include "topic-" + topic.title | lower + ".svg" %}
        {{ topic.title }}
      </a>
    </li>
  {%- endfor -%}
  </ul>
</nav>
{
  "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
    ]
  },
  "topics": [
    {
      "title": "Business",
      "url": "/topics/business/"
    },
    {
      "title": "Code",
      "url": "/topics/code/"
    },
    {
      "title": "Content",
      "url": "/topics/content/"
    },
    {
      "title": "Design",
      "url": "/topics/design/"
    },
    {
      "title": "Process",
      "url": "/topics/process/"
    },
    {
      "title": "UX",
      "url": "/topics/ux/"
    }
  ]
}
  • Content:
    .c-topics-nav__items {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;
      box-shadow: inset 0 1px 0 $navigation-color--offset;
    
      @media (--from-medium-screen) {
        box-shadow: 0 -1px 0 $navigation-color--offset;
      }
    }
    
    .c-topics-nav__item {
      flex: 1 0 33.3334%;
    
      .has-js & {
        @media (--from-medium-screen) {
          flex-basis: 50%;
          min-width: 50%;
        }
      }
    
      @media (--from-large-screen) {
        flex-basis: 16.6667%;
      }
    
      svg {
        height: map(sizes, medium);
        width: map(sizes, medium);
        margin: 0 auto map(spaces, xsmall);
    
        @media (--upto-deep-screen) {
          display: none;
        }
    
        @media (--from-medium-screen) {
          height: map(sizes, large);
          width: map(sizes, large);
        }
      }
    }
    
    .c-topics-nav__label {
      @apply --focusable;
      @apply --navigation-link;
      @apply --typeset-ui;
    
      display: block;
      box-shadow: 1px 1px 0 $navigation-color--offset;
      padding: map(spaces, small);
      text-align: center;
    
      @media (--from-shallow-screen) {
        padding: map(spaces, large) map(spaces, medium);
      }
    
      @media (-ms-high-contrast: active) {
        border: 1px solid;
      }
    }
    
  • URL: /components/raw/topics-nav/topics-nav.css
  • Filesystem Path: src/components/global/topics-nav/topics-nav.css
  • Size: 1.1 KB

There are no notes for this item.