V6 Clearleft Patterns

Header 

<div class="Header">
    <div class="Header__container constrain">
        <a href="/" class="Header__logo focus" title="Home">
            <svg role="img" aria-labelledby="clearleft-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 154 54">
                <title id="clearleft-logo">Clearleft</title>
                <style>
                    .Logo-streak {
                        mask-repeat: no-repeat;
                        stroke-dasharray: 150% 150%;
                        stroke-dashoffset: 150%;
                    }

                    .animateLogo-streak {
                        animation: swipe 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) 0.8s forwards;
                    }

                    @keyframes swipe {
                        from {
                            stroke-dashoffset: 150%;
                        }

                        to {
                            stroke-dashoffset: 0;
                        }
                    }
                </style>
                <path class="Logo-text" fill="currentColor" d="M152.5 27.5v5.4h-2.4c-5.5 0-8.6-3.3-8.6-9.3v-6.8h-7.4v16.1h-5.6V16.8h-3.1l-.1-4.6h3.1v-.6c0-6 3-9.3 8.6-9.3h2.4v5.4H137c-2 0-2.9 1.3-2.9 4v.6h7.4v-4l5.6-3.6v7.4h4v4.6h-4v6.8c0 2.7 1 4 2.9 4h2.5zM77 11.9h5.6v21H77v-2c-1.7 1.7-4 2.7-6.4 2.6-5.7 0-10.1-4.8-10.1-11s4.4-11 10.1-11c2.4-.1 4.7.8 6.4 2.5v-2.1zm0 10.5c0-3.5-2.4-6.1-5.6-6.1s-5.6 2.6-5.6 6.1 2.3 6.1 5.6 6.1S77 26 77 22.4zm12.9-8.7v-1.8h-5.4v21h5.6v-9.5c0-4.5.8-6.8 5-6.8h1.5v-5.4h-.2c-3 0-5.2.9-6.5 2.5zM98 32.8h5.6V2.4H98v30.4zM17 8.1c3.2 0 6.1 1.8 7.6 4.5l.1.2.2-.1 4.8-3.1.3-.1-.1-.2C27 5 22.2 2.4 17.1 2.4 8.6 2.3 1.6 9.1 1.5 17.5v.3c-.1 8.5 6.8 15.4 15.3 15.5h.3c5.1.1 9.9-2.5 12.8-6.7l.1-.2-5.2-3.4-.1.2c-1.6 2.7-4.5 4.4-7.6 4.5-5.2 0-9.2-4.3-9.2-9.8 0-4.8 3.4-9.8 9.1-9.8zm14.6 24.7h5.6V2.4h-5.6v30.4zm94-10.5c0 .6 0 1.1-.1 1.7v.5h-14.8c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1s4.3-11.1 10.6-11.1c5.7-.2 9.8 4.4 9.9 10.9zm-5.7-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2zm-60.7 2.2c0 .6 0 1.1-.1 1.7v.5H44.3c.5 2.5 2.8 4.3 5.4 4.1 2 0 3.9-.7 5.5-2l.4-.3 2.8 4-.3.3c-2.4 2-5.5 3.1-8.6 3-6.4 0-10.8-4.6-10.8-11.1S43 11.2 49.2 11.2c5.9 0 10 4.6 10 11.1zm-5.6-2.2c-.6-2.5-2.2-3.9-4.5-3.9-2.4-.1-4.4 1.6-4.7 3.9h9.2z" />
                <clippath id="headerMask">
                    <path d="M151.8 44c-.2-1-1.1-1.6-2-1.4h-.1c-1.1.4-2.2.4-3.3.2-1.4-.2-2.9-.3-4.3-.5-2.4-.3-4.8-.5-7.2-.7-2.6-.2-5.3-.3-7.9-.5-2.5-.2-4.9-.4-7.4-.5-5.2-.3-10.5-.5-15.7-.6-4.4-.2-19.6-.3-23.9-.3-3.1 0-6.1.1-9.2.2-4.1 0-18.9.3-23 .6-4.3.2-8.7.4-13 .7-4 .3-8 .5-11.9.7-.9 0-1.8.1-2.7.3-2.4 0-4.4.2-6.5.3-1.7.1-3.4.1-5 .4v0c-.7 0-1-.4-2.1-.3s-2.1.5-2.1 1.1c-.5.1 0 .4-.6.5v.5c.4.2.6.4 0 .7v.2c.3-.1.4 0 .6.1v.4c-.4.2-.2.4-.1.5s.5.4.4.7c-.1.5.1 1 .5 1.3v.2c.1.7 1.1 1.3 1.2 2 .1.5 1 1 2.3.9 1.1-.1 1.5-.5 2.5-.7.2 0 .8-.1 1-.1 4.2-.3 8.5-.6 12.7-1 1.2-.1 2.6-.1 3.7-.3 1.5-.3 3.1-.3 4.6-.5 2.9-.3 5.8-.5 8.6-.5 2.4 0 4.8-.3 7.2-.4 1.3-.1 2.7.1 4-.1.5-.1 1-.1 1.6-.1 1.4.1 13.7-.1 15.1-.1 2.8 0 5.6-.1 8.4-.2 3.3-.1 17.4-.2 20.7 0 1.1 0 2.3.2 3.4.2 3.1-.2 6.2.1 9.3.2 2.7.1 5.4.3 8.1.4s5.2.2 7.8.5c1 .1 2.1.2 3.1.3.8.1 1.4-.2 2.2-.1 2 .3 4.1.5 6.2.6 1.1 0 2.2.1 3.2.3 1.6.3 3.1.5 4.7.7l1 .4c.9.4 1.8.5 2.8.3.5-.3.8-1 .6-1.6v-.2c.1-.2.2-.3.1-.5.3-.1.3-.2.2-.4.2-.6.7-1.1.4-1.7-.1-.2-.4-.6.4-.8v-.5c-.4 0-.4-.2-.5-.3-.2-.5-.1-1-.1-1.5zM78.3 45.3h-.2.2" />
                </clippath>
                <path class="Logo-streak animateLogo-streak" clip-path="url(#headerMask)" fill-rule="evenodd" fill="none" stroke="#23D8A0" stroke-width="13" d="M-1.1 49.4s50.4-6.3 81.9-6 77.1 4.6 77.1 4.6" />
            </svg> </a>
        <div class="Header__desktop-nav">
            <nav class="PrimaryNav" aria-label="Primary">
                <ul class="PrimaryNav__list" role="list">
                    <li class="PrimaryNav__listItem">
                        <a href="#" class="PrimaryNav__link focus ">
                            Services
                        </a>
                    </li>
                    <li class="PrimaryNav__listItem">
                        <a href="#" class="PrimaryNav__link focus ">
                            Work
                        </a>
                    </li>
                    <li class="PrimaryNav__listItem">
                        <a href="#" class="PrimaryNav__link focus ">
                            Thinking
                        </a>
                    </li>
                    <li class="PrimaryNav__listItem">
                        <a href="#" class="PrimaryNav__link focus ">
                            About
                        </a>
                    </li>
                    <li class="PrimaryNav__listItem">
                        <a href="#" class="PrimaryNav__link focus ">
                            Contact
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="Header__mobile-nav">

            <button class="Button focus Button--outline Header__toggle" data-a11y-dialog-show="mobile-nav"><span>Menu</span></button>
            <!-- dialog markup -->
            <div class="Dialog Header__mobile-nav-modal" id="mobile-nav" data-a11y-dialog="mobile-nav" aria-labelledby="mobile-nav-title" aria-hidden="true">
                <div role="document" class="Dialog__content Header__mobile-nav-inner constrain">
                    <h2 class="vh" id="mobile-nav-title">
                        Primary Navigation
                    </h2>

                    <button type="button" data-a11y-dialog-hide aria-label="Close dialog" class="Header__mobile-nav-close">
                        <span class="vh">Close dialog</span>
                    </button>

                    <nav class="PrimaryNav PrimaryNav--mobile" aria-label="Primary">
                        <ul class="PrimaryNav__list" role="list">
                            <li class="PrimaryNav__listItem">
                                <a href="#" class="PrimaryNav__link focus ">
                                    Services
                                </a>
                            </li>
                            <li class="PrimaryNav__listItem">
                                <a href="#" class="PrimaryNav__link focus ">
                                    Work
                                </a>
                            </li>
                            <li class="PrimaryNav__listItem">
                                <a href="#" class="PrimaryNav__link focus ">
                                    Thinking
                                </a>
                            </li>
                            <li class="PrimaryNav__listItem">
                                <a href="#" class="PrimaryNav__link focus ">
                                    About
                                </a>
                            </li>
                            <li class="PrimaryNav__listItem">
                                <a href="#" class="PrimaryNav__link focus ">
                                    Contact
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="Header">
  <div class="Header__container constrain">
    <a href="/" class="Header__logo focus" title="Home">
      {% include '@logo' with {
        mask: 'headerMask'
      } %}
    </a>
    <div class="Header__desktop-nav">
      {% include '@primary-nav' with {
        links: links,
        match: match
      } %}
    </div>

    <div class="Header__mobile-nav">
      {% include '@button' with {
        style: 'outline',
        text: 'Menu',
        classes: 'Header__toggle',
        attributes: {
          'data-a11y-dialog-show': 'mobile-nav'
        }
      } %}

      <!-- dialog markup -->
      <div class="Dialog Header__mobile-nav-modal"
        id="mobile-nav"
        data-a11y-dialog="mobile-nav"
        aria-labelledby="mobile-nav-title"
        aria-hidden="true">
        <div role="document"
          class="Dialog__content Header__mobile-nav-inner constrain">
          <h2 class="vh" id="mobile-nav-title">
            Primary Navigation
          </h2>

          <button type="button"
            data-a11y-dialog-hide
            aria-label="Close dialog"
            class="Header__mobile-nav-close">
            <span class="vh">Close dialog</span>
          </button>

          {% include '@primary-nav' with {
            links: links,
            match: match,
            variant: 'mobile'
          } %}
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "match": "",
  "links": [
    {
      "url": "#",
      "title": "Services"
    },
    {
      "url": "#",
      "title": "Work"
    },
    {
      "url": "#",
      "title": "Thinking"
    },
    {
      "url": "#",
      "title": "About"
    },
    {
      "url": "#",
      "title": "Contact"
    }
  ]
}
  • Content: 
    :root {
  --logo-width: 154px;
  --logo-height: 54px;
  --header-height: calc((2 * var(--gutter)) + var(--logo-height));
  --mobile-nav-background: var(--dark);
}

.Header {
  &__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--gutter);
    padding-top: var(--gutter);
  }

  &__logo,
  &__logo svg {
    color: var(--dark);
    width: var(--logo-width);
    height: var(--logo-height);
    text-decoration: none;
    border-bottom: none;
    display: block;
  }

  &__mobile-nav-inner {
    background-color: var(--white);
    height: 100%;
    width: 100%;
    .theme--dark & {
      background-color: var(--dark);
    }
  }

  &__mobile-nav-close {
    background: none;
    border: 0;
    height: var(--header-height);
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
  }

  &__desktop-nav {
    display: none;
  }

  &__mobile-nav-modal {
    padding-top: var(--header-height);
  }
}

/* media */
@media screen and (min-width: 50rem) {
  .Header {
    &__mobile-nav {
      display: none;
    }

    &__desktop-nav {
      display: block;
    }
  }
}

/* JS specific styles */
html:not(.has-js) .Header__container {
  flex-wrap: wrap;
}
  • URL: /components/raw/header/header.css
  • Filesystem Path: src/templates/components/header/header.css
  • Size: 1.2 KB

No notes defined.