<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": "© 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, <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"
}
]
}
[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;
}
}
There are no notes for this item.