<div class="c-draw hidden fixed pin-t pin-r h-screen w-full max-w-md bg-black z-0 p-1 md:p-3 xl:p-3 overflow-auto">
<h2 class="text-h3 text-white mb-1-5 font-light">We love to talk digital</h2>
<div class="text-white text-body mb-3">
<p>If there’s a project that you’re itching to start or you just want to introduce yourself, drop us a line. We’re always happy to chat.</p>
</div>
<ul class="list-reset">
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">Call us</h2>
<a href="tel:+44 (0)1225 471 465" class="inline-flex font-bold text-body text-blue linkee"><span>+44 (0)1225 471 465</span></a>
</li>
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">General enquiries</h2>
<a href="mailto:hello@ournameismud.co.uk" class="inline-flex font-bold text-body text-blue linkee"><span>hello@ournameismud.co.uk</span></a>
</li>
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">Follow</h2>
<a target="_blank" rel="noopener" href="asclearasmud" class="inline-flex font-bold text-body text-blue linkee"><span>@asclearasmud</span></a>
</li>
<li>
<h2 class="text-h6 mb-0-5 text-white">Visit us</h2>
<address class="block font-light text-body text-white mb-1-5">3a Fountain Buildings<br /> Bath, BA1 5DU</address>
<a href="https://goo.gl/maps/S6RQRy8kSQT2" class="o-btn text-sm flex flex-no-wrap justify-end relative items-center text-white" target="_blank">
<span class="o-btn__line h-px flex-1 mr-0-5 w-full bg-currentColor opacity-25 block"></span>
<span class="block ml-auto mr-0 whitespace-no-wrap">View on Google Maps</span>
</a>
</li>
</ul>
</div>
<div class="c-draw hidden fixed pin-t pin-r h-screen w-full max-w-md bg-black z-0 p-1 md:p-3 xl:p-3 overflow-auto">
<h2 class="text-h3 text-white mb-1-5 font-light">{{ hero.heading }}</h2>
<div class="text-white text-body mb-3">{{ hero.body|raw }}</div>
<ul class="list-reset">
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">Call us</h2>
<a href="tel:{{ tel }}" class="inline-flex font-bold text-body text-blue linkee"><span>{{ tel }}</span></a>
</li>
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">General enquiries</h2>
<a href="mailto:{{ email }}" class="inline-flex font-bold text-body text-blue linkee"><span>{{ email }}</span></a>
</li>
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">Follow</h2>
<a target="_blank" rel="noopener" href="{{ twitter }}" class="inline-flex font-bold text-body text-blue linkee"><span>@asclearasmud</span></a>
</li>
<li>
<h2 class="text-h6 mb-0-5 text-white">Visit us</h2>
<address class="block font-light text-body text-white mb-1-5">{{ address }}</address>
{% include '@button' with { url: 'https://goo.gl/maps/S6RQRy8kSQT2', text: 'View on Google Maps', modifiers: 'text-white', target: '_blank' } %}
</li>
</ul>
</div>
{
"siteTitle": "Mudstone Component Library",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"wrapper": "/wrapper/"
}
}
}
}
},
"tel": "+44 (0)1225 471 465",
"phone": "01225 471 465",
"email": "hello@ournameismud.co.uk",
"twitter": "asclearasmud",
"copyright": "© 2018 Our Name is Mud",
"siteUrl": "/components/preview/home",
"address": "3a Fountain Buildings<br /> Bath, BA1 5DU",
"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"
}
],
"hero": {
"heading": "We love to talk digital",
"body": "<p>If there’s a project that you’re itching to start or you just want to introduce yourself, drop us a line. We’re always happy to chat.</p>"
}
}
@screen md {
.is-contact-visible {
.site {
opacity: 0.7;
transform: translate3d(rem(-480px), 0, 0);
transition: transform 300ms ease, opacity 300ms 200ms ease;
}
.c-draw {
display: block;
}
[id='container'] {
pointer-events: none;
}
}
.site {
transition: transform 300ms ease, opacity 300ms 0ms ease;
//transform: translate3d(0, 0, 0);
}
.c-draw {
transform: translateZ(0);
}
}
.site {
min-height: 100vh;
}
There are no notes for this item.