<nav class="c-navigation" id="navigation">
    <h1 class="u-hidden" id="navigation__title">Browse 24 ways</h1>
    <div class="c-traverse-nav">
        <a class="c-traverse-nav__item" rel="prev" href="/2015/how-tabs-should-work/" data-sequence-title="How Tabs Should Work">
            <svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
  <path d="M50 100l85 85 7-7-78-78 78-78-7-7"/>
</svg>

            <span class="u-hidden">Previous article</span>
        </a>
        <a class="c-traverse-nav__item" rel="next" href="/2015/solve-the-hard-problems/" data-sequence-title="Solve the Hard Problems">
            <span class="u-hidden">Next article</span>
            <svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
  <path d="M150 100l-85 85-7-7 78-78-78-78 7-7"/>
</svg>

        </a>
    </div>

    <div class="c-navigation__drawer" id="navigation__drawer">
        <form class="c-search" role="search" id="search" action="/pages/search/">
            <fieldset class="c-field">
                <legend class="u-hidden">Search 24 ways</legend>
                <label class="u-hidden" for="q">Keywords</label>
                <input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research&#8230;" />
                <button class="c-field__button" type="submit"><svg class="c-field__icon" width="20" height="20" viewBox="0 0 200 200" role="img" aria-labelledby="c-field__icon--search">
  <title id="c-field__icon--search">Search</title>
  <path role="presentation" d="M129 121C136 113 140 102 140 90c0-28-22-50-50-50S40 63 40 90s22 50 50 50c12 0 24-4 32-12L158 164l7-7-36-36zM90 130c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z"/>
</svg>
</button>
            </fieldset>
        </form>
        <ul class="c-topics-nav">
            <li class="c-topics-nav__item">
                <a class="c-topics-nav__label" href="/topics/business/">

                    <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <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="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> Code
                </a>
            </li>
            <li class="c-topics-nav__item">
                <a class="c-topics-nav__label" href="/topics/content/">

                    <svg width="24" height="24" viewBox="0 0 240 240" role="img">
  <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="24" height="24" viewBox="0 0 240 240" role="img">
  <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="24" height="24" viewBox="0 0 240 240" role="img">
  <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="24" height="24" viewBox="0 0 240 240" role="img">
  <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>
        <ul class="c-site-nav">
            <li class="c-site-nav__item">
                <a class="c-site-nav__label" href="/archives/">Archives</a>
            </li>
            <li class="c-site-nav__item">
                <a class="c-site-nav__label" href="/authors/">Authors</a>
            </li>
            <li class="c-site-nav__item">
                <a class="c-site-nav__label" href="/about/">About <span class="u-hidden">24 ways</span></a>
            </li>
        </ul>
    </div>
</nav>
<nav class="c-navigation" id="navigation">
  <h1 class="u-hidden" id="navigation__title">Browse 24 ways</h1>
  {%- render "@traverse-nav" -%}

  <div class="c-navigation__drawer" id="navigation__drawer">
    {%- render "@search" -%}
    {%- render "@topics-nav" -%}
    {%- render "@site-nav" -%}
  </div>
</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
    ]
  }
}
  • Content:
    .c-navigation {
      z-index: map(layers, modal);
      overflow: hidden;
      background-color: $navigation-color;
    
      .has-js & {
        position: fixed;
        transition-duration: $navigation-duration;
        transition-timing-function: ease-out;
      }
    
      [data-menu-expanded=true] & {
        transition-delay: $banner-duration;
      }
    
      @media (--upto-medium-screen) {
        .has-js & {
          top: $banner-height--small;
          max-height: 0;
          width: 100%;
          transition-property: max-height;
        }
    
        [data-menu-expanded=false] & {
          max-height: 0;
        }
    
        [data-menu-expanded=true] & {
          max-height: 32rem;
          box-shadow: 0 8px 8px 0 $navigation-color--shadow;
        }
      }
    
      @media (--from-medium-screen) {
        .no-js & {
          margin-right: $navigation-width--large;
        }
    
        .has-js & {
          top: 0;
          right: 0;
          bottom: 0;
          padding: 0 $navigation-width--large 0 0;
          width: $navigation-width--large;
          transition-property: width;
        }
    
        [data-menu-expanded=false] & {
          width: $navigation-width--large;
        }
    
        [data-menu-expanded=true] & {
          width: 22.5em;
          box-shadow: 0 0 8px 0 $navigation-color--shadow;
        }
      }
    
      @media print {
        display: none;
      }
    }
    
    .c-navigation__drawer {
      display: flex;
      flex-direction: column;
    
      .has-js & {
        overflow: hidden;
      }
    
      @media (--from-medium-screen) {
        height: 100%;
        box-shadow: inset -1px 0 0 $navigation-color--offset;
      }
    }
    
    /* Backdrop */
    [data-menu-expanded]::after {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: map(layers, backdrop);
      transition: opacity $navigation-duration ease-in;
      background-color: $navigation-color--backdrop;
      backdrop-filter: blur(0);
      opacity: 0;
      pointer-events: none;
    }
    
    [data-menu-expanded=true]::after {
      backdrop-filter: blur(2px);
      opacity: 1;
      pointer-events: fill;
    }
    
  • URL: /components/raw/navigation/navigation.css
  • Filesystem Path: src/components/global/navigation/navigation.css
  • Size: 1.9 KB

There are no notes for this item.