<nav class="c-site-nav" aria-label="Explore 24 ways">
    <ul class="c-site-nav__items">
        <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/" aria-label="About this website">About</a>
        </li>
    </ul>
</nav>
<nav class="c-site-nav" aria-label="Explore 24 ways">
  <ul class="c-site-nav__items">
    <li class="c-site-nav__item{{ ' is-active' if section == 'archives' }}">
      <a class="c-site-nav__label" href="/archives/">Archives</a>
    </li>
    <li class="c-site-nav__item{{ ' is-active' if section == 'authors' }}">
      <a class="c-site-nav__label" href="/authors/">Authors</a>
    </li>
    <li class="c-site-nav__item{{ ' is-active' if section == 'about' }}">
      <a class="c-site-nav__label" href="/about/" aria-label="About this website">About</a>
    </li>
  </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
    ]
  }
}
  • Content:
    .c-site-nav {
      @media (--from-medium-screen) {
        margin-top: auto;
      }
    }
    
    .c-site-nav__items {
      display: flex;
      flex-direction: row;
    
      .has-js & {
        @media (--from-medium-screen) {
          flex-direction: column;
        }
      }
    }
    
    .c-site-nav__item {
      flex: 1 0 33.3334%;
    }
    
    .c-site-nav__label {
      @apply --focusable;
      @apply --navigation-link;
      @apply --typeset-label;
    
      display: block;
      box-shadow: 1px 0 0 $navigation-color--offset;
      padding: map(spaces, small);
      text-align: center;
    
      &:focus {
        position: relative; /* Fix border overlap on focus */
      }
    
      .no-js & {
        box-shadow: 1px 0 0 $navigation-color--offset;
      }
    
      @media (--from-shallow-screen) {
        padding: map(spaces, medium);
      }
    
      @media (--from-medium-screen) {
        box-shadow: 0 -1px 0 $navigation-color--offset;
        text-align: left;
      }
    
      @media (-ms-high-contrast: active) {
        border: 1px solid;
      }
    }
    
  • URL: /components/raw/site-nav/site-nav.css
  • Filesystem Path: src/components/global/site-nav/site-nav.css
  • Size: 895 Bytes

There are no notes for this item.