Our Name is Mud - Component Library

Header 

<header id="site-header" class="c-header absolute pin-t z-50 pin-l w-full md:py-0 md:flex md:items-center md:justify-end" data-bg-item>
    <a href="/" class="c-header__logo text-black absolute pin-l z-50 px-1-5 md:px-2 lg:px-3">
		<span class="u-vh">Our Name is Mud</span>
			<i class="icon icon--ui-logo">
		<svg>
			<use class="no-barba pointer-events-none" xlink:href="#ui-logo"></use>
		</svg>
	</i>

	</a>

    <a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block md:hidden absolute pin-r mr-1-25 z-20 c-nav__btn lg:hidden">
		<span class="u-vh">Open Menu</span>
		<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
		<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
	</a>

    <nav id="site-menu" role="navigation" aria-label="Main menu" class="z-10 px-1-5 pt-7 pin-l pin-t w-full fixed min-h-screen invisible opacity-0 pointer-events-none md:px-2 md:my-0 md:p-0 md:min-h-px  md:relative md:pin-r md:opacity-100 md:visible md:pointer-events-auto lg:px-3">
        <div id="site-menu-inner" class="w-full md:flex md:items-center md:flex-row md:p-0 md:justify-end">
            <ul class="list-reset mb-5 md:mb-0 md:flex">
                <li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1 md:mr-1-25 mb-1 md:mb-0">
                    <a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/listing"><span class="">Projects</span></a>
                </li>
                <li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1  mb-1 md:mb-0">
                    <a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/about"><span class="">About</span></a>
                </li>
                <li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1  mb-1 md:mb-0">
                    <a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/journal"><span class="">Journal</span></a>
                </li>
                <li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1  mb-1 md:mb-0">
                    <a id="contact-link" data-contact-link class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/contact"><span class="">Contact</span></a>
                </li>
            </ul>
            <div class="md:hidden">
                <a class="block text-white no-underline font-light text-sm" href="tel:01225 471 465">01225 471 465</a>
                <a class="block text-white no-underline font-light text-sm" href="mailto:hello@ournameismud.co.uk">hello@ournameismud.co.uk</a>
                <a class="block text-white no-underline font-light text-sm" href="{ twitter }}">@asclearasmud</a>
            </div>
        </div>
    </nav>
</header>
 
{% import '@helpers' as h %}

{#
	mock menu items... move to config post cms
#}

<header id="site-header" class="c-header absolute pin-t z-50 pin-l w-full md:py-0 md:flex md:items-center md:justify-end" data-bg-item>
	<a href="/" class="c-header__logo text-black absolute pin-l z-50 px-1-5 md:px-2 lg:px-3">
		<span class="u-vh">Our Name is Mud</span>
		{{ h.symbol('ui-logo') }}
	</a>

	<a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block md:hidden absolute pin-r mr-1-25 z-20 c-nav__btn lg:hidden">
		<span class="u-vh">{{ text|default('Open Menu') }}</span>
		<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
		<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
	</a>

	<nav id="site-menu" role="navigation" aria-label="Main menu" class="z-10 px-1-5 pt-7 pin-l pin-t w-full fixed min-h-screen invisible opacity-0 pointer-events-none md:px-2 md:my-0 md:p-0 md:min-h-px  md:relative md:pin-r md:opacity-100 md:visible md:pointer-events-auto lg:px-3">
		<div id="site-menu-inner" class="w-full md:flex md:items-center md:flex-row md:p-0 md:justify-end">
			<ul class="list-reset mb-5 md:mb-0 md:flex">
				{% for entry in entries %}
					<li role="menuitem" class="c-nav__item  text-ms6 md:text-ms1 {% if loop.index0 == 0 %}md:mr-1-25{% endif %} mb-1 md:mb-0">
						<a {% if entry.title|lower == 'contact' %}id="contact-link" data-contact-link{% endif %} class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="{{ entry.url }}"><span class="">{{ entry.title }}</span></a>
					</li>
				{% endfor %}
			</ul>
			<div class="md:hidden">
				<a class="block text-white no-underline font-light text-sm" href="tel:{{ phone }}">{{ phone }}</a>
				<a class="block text-white no-underline font-light text-sm" href="mailto:{{ email }}">{{ email }}</a>
				<a class="block text-white no-underline font-light text-sm" href="{ twitter }}">@asclearasmud</a>
			</div>
		</div>
	</nav>
</header>
 
{
  "siteTitle": "Mudstone Component Library",
  "craft": {
    "app": {
      "config": {
        "general": {
          "custom": {
            "wrapper": "/wrapper/"
          }
        }
      }
    }
  },
  "tel": "01225 471 465",
  "phone": "01225 471 465",
  "email": "hello@ournameismud.co.uk",
  "twitter": "asclearasmud",
  "copyright": "&copy; 2018 Our Name is Mud",
  "siteUrl": "/components/preview/home",
  "address": "5 Princes Buildings \nBath \nBA1 2ED",
  "cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself,&nbsp;<a href=\"/contact\" data-contact-link=\"\" class=\"no-barba\">drop us a line</a>. We’re always happy to chat...</p>",
  "entries": [
    {
      "title": "Projects",
      "url": "/components/preview/listing"
    },
    {
      "title": "About",
      "url": "/components/preview/about"
    },
    {
      "title": "Journal",
      "url": "/components/preview/journal"
    },
    {
      "title": "Contact",
      "url": "/components/preview/contact"
    }
  ]
}
  • Content: 
    [id='site-header'] {
	@apply .w-full .pin-t .pin-l .absolute;

	height: rem(115px);

	@screen md {
		height: rem(150px);
	}

	&.is-open-menu {
		.c-nav__link {
			@apply .text-white;
		}

		.c-header__logo {
			opacity: 1;
		}
	}
}

[id='site-menu'] {
	transition: opacity 300ms ease, visibility 0ms 300ms;
	background-image: ease-in-sine-gradient(23deg, #671eb8, #451eb8);

	&.is-visible {
		transition-delay: 0ms;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	@screen md {
		background-image: none;
		transition: transform 300ms ease;
		z-index: 50;
	}
}

[id='nav-btn'] {
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

.c-header__logo {
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

@screen md {
	.c-header__logo {
		.icon {
			width: rem(100px);
		}
	}
}

/*
	Combined with the linkee class

	<linkee><span />
*/
.c-nav__link {
	span::after {
		display: none !important;

		@screen md {
			display: block !important;
		}
	}

	&:hover,
	&:focus,
	&:active {
		color: $white;
	}
}
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: src/templates/03-global/header/_header.scss
  • Size: 1 KB

There are no notes for this item.